From 3c8d557c3879a528aca0414b53714eb15fe851fe Mon Sep 17 00:00:00 2001 From: "Luke Cook [SSW]" <100659715+lukecookssw@users.noreply.github.com> Date: Tue, 8 Nov 2022 09:59:03 +1100 Subject: [PATCH 1/8] changing header to be larger --- README.md | 6 ++ lib/SSW.MegaMenu/menu/menu.module.css | 2 +- src/components/header/topBar/index.module.css | 73 ++++++++++++++++--- src/components/header/topBar/index.tsx | 36 ++++----- src/components/layout/index.module.css | 10 +++ src/components/layout/index.tsx | 10 ++- 6 files changed, 99 insertions(+), 38 deletions(-) create mode 100644 src/components/layout/index.module.css diff --git a/README.md b/README.md index 707f05ba..d7963a0b 100644 --- a/README.md +++ b/README.md @@ -19,3 +19,9 @@ This is a Gatsby website that fetches content from: ![SSW-Website-Architecture-v2](https://raw.githubusercontent.com/SSWConsulting/SSW.Website/main/_docs/architechture-diagrams/SSW-Website-Architecture-v2.png) **Figure: SSW Website architecture diagram** + + +## Deployment Diagram +This diagram shows the deployment flow of the Gatsby site. + +**Important**: The [Content repo](https://github.com/SSWConsulting/SSW.Website.Content) calls the `main.yml` workflow when content is merged into its main branch. \ No newline at end of file diff --git a/lib/SSW.MegaMenu/menu/menu.module.css b/lib/SSW.MegaMenu/menu/menu.module.css index 58c449c0..cce4e80b 100644 --- a/lib/SSW.MegaMenu/menu/menu.module.css +++ b/lib/SSW.MegaMenu/menu/menu.module.css @@ -20,7 +20,7 @@ clear: both; height: 36px; line-height: 24px; - width: 90%; + width: 100%; z-index: 0; background: none repeat scroll 0 0 #414141; position: relative; diff --git a/src/components/header/topBar/index.module.css b/src/components/header/topBar/index.module.css index f18204aa..ccf80d96 100644 --- a/src/components/header/topBar/index.module.css +++ b/src/components/header/topBar/index.module.css @@ -9,24 +9,64 @@ align-items: center; } +@media screen and (max-width: 900px) { + .logoAndName { + margin-top: 35px; + } + .youtube,.linkedin, .facebook, .instagram, .twitter, .tiktok { + display: none !important; + } + + .phoneNumber { + margin-top: 35px; + } +} + +@media screen and (max-width: 800px) { + .contacts { + display: block !important; + margin-bottom: 10px; + } + .logoAndName { + justify-content: center; + } + .phoneNumber { + margin-left: 0px !important; + margin-top: 0px !important; + } + .container { + display: block; + } + .name { + font-size: 1em !important; + } + .logo { + height: 120px !important; + width: auto; + } +} + +.logo { + height: 150px; +} + .name { width: 100px; margin-left: 16px; text-transform: uppercase; - font-size: 0.9em; - line-height: 1em; + font-size: 1.3em; + line-height: 1.3em; color: #666; } .contacts { display: flex; - align-items: center; + align-items: flex-end; } .phoneIcon { - margin-right: 0.25rem; + margin-right: 0.75rem; font-size: 1.2rem !important; - color: #9e9e9e; } .phoneNumber { @@ -34,13 +74,22 @@ font-size: 1.12rem; font-weight: 700; text-decoration: none; - color: var(--black); + color: white; + border-bottom: none; + background-color: #b31217; + height: 40px; + padding-left: 20px; + padding-right: 20px; +} +.phoneNumber:hover { + color: white; border-bottom: none; + background-color: #b31217; } .iconContainer { - width: 25px; - height: 25px; + width: 50px; + height: 40px; margin-left: 8px; } @@ -76,13 +125,13 @@ background-color: #3b5998; } -.wechat { +.tiktok { composes: iconContainer; position: relative; - background-color: #62b900; + background-color: #000; } -.wechat:hover .qrCode { +/* .wechat:hover .qrCode { display: inline-block; } @@ -104,4 +153,4 @@ left: 50px; border: 5px solid transparent; border-bottom: 5px solid rgba(0, 0, 0, 0.65); -} +} */ diff --git a/src/components/header/topBar/index.tsx b/src/components/header/topBar/index.tsx index ccf15658..d6013f6a 100644 --- a/src/components/header/topBar/index.tsx +++ b/src/components/header/topBar/index.tsx @@ -8,7 +8,7 @@ import { faFacebookF, faInstagram, faTwitter, - faWeixin, + faTiktok, } from '@fortawesome/free-brands-svg-icons'; import SSWLogo from '../../../assets/images/ssw-logo.svg'; @@ -21,6 +21,7 @@ const TopBar = () => { SSW - Enterprise Software Development @@ -29,9 +30,9 @@ const TopBar = () => {
- - - +61 2 9953 3000 + + + CALL US { target="_blank" rel="noreferrer" > - + { target="_blank" rel="noreferrer" > - + { target="_blank" rel="noreferrer" > - + { target="_blank" rel="noreferrer" > - + { target="_blank" rel="noreferrer" > - + - - - SSW QR Code - +
diff --git a/src/components/layout/index.module.css b/src/components/layout/index.module.css new file mode 100644 index 00000000..5d721291 --- /dev/null +++ b/src/components/layout/index.module.css @@ -0,0 +1,10 @@ +@media screen and (max-width: 901px) { + .menu { + position: fixed; + top: 0px; + left: 0px; + width: 100%; + z-index: 100; + height: 50px; + } +} \ No newline at end of file diff --git a/src/components/layout/index.tsx b/src/components/layout/index.tsx index 57c9a0a2..a55dd158 100644 --- a/src/components/layout/index.tsx +++ b/src/components/layout/index.tsx @@ -1,4 +1,4 @@ -import React, { useRef, useState } from "react"; +import React, { useRef, useState, useEffect } from "react"; import Header from "../header"; import Footer from "../footer"; import "@fortawesome/fontawesome-svg-core/styles.css"; @@ -8,6 +8,8 @@ import Menu from "../../../lib/SSW.MegaMenu/menu/menu"; import MobileMenu from "../../../lib/SSW.MegaMenu//mobile-menu/mobile-menu"; import { navigate } from "gatsby"; +import * as styles from "./index.module.css"; + const Layout = ({ pageTitle, children, backgroundColor }) => { const node = useRef(null); const [isMenuOpened, setIsMenuOpened] = useState(false); @@ -32,9 +34,11 @@ const Layout = ({ pageTitle, children, backgroundColor }) => { }} > {pageTitle} -
+
- actionOnToggleClick()}> +
+ actionOnToggleClick()}> +
{children}
From 635c35cc745fee498c87c11db241d7a7d94db5a4 Mon Sep 17 00:00:00 2001 From: Joseph Fernandez Date: Tue, 15 Nov 2022 14:15:24 +1100 Subject: [PATCH 2/8] update made to header to be pushed up --- lib/SSW.MegaMenu/menu/menu.module.css | 37 ++++++++----- src/components/header/topBar/index.module.css | 52 ++++++++++++++++--- src/components/layout/index.module.css | 2 +- 3 files changed, 72 insertions(+), 19 deletions(-) diff --git a/lib/SSW.MegaMenu/menu/menu.module.css b/lib/SSW.MegaMenu/menu/menu.module.css index cce4e80b..76cc0b15 100644 --- a/lib/SSW.MegaMenu/menu/menu.module.css +++ b/lib/SSW.MegaMenu/menu/menu.module.css @@ -18,8 +18,7 @@ font-family: Arial, sans-serif; font-weight: 400; clear: both; - height: 36px; - line-height: 24px; + width: 100%; z-index: 0; background: none repeat scroll 0 0 #414141; @@ -44,12 +43,17 @@ display: inline-block; float: left; width: 100%; + background: none repeat scroll 0 0 #414141; } .menuMobile { width: 100%; float: left; position: relative; + background: none repeat scroll 0 0 #414141; + height: 60px; + align-items: center; } + .visibleXs, .visibleSm { display: none !important; @@ -64,24 +68,22 @@ display: block !important; } } -.sbToggleLeft { - font-size: 1.5rem; - line-height: 36px; - display: inline-block; - border-bottom: 0 !important; -} + .sbToggleLeft { text-decoration: none; border-bottom: 0; color: #eee !important; text-transform: uppercase; - padding: 0 15px; - font-size: 0.9rem; + padding-left: 15px ; + padding-top: 15px; + font-size: 1.5rem; + background: none repeat scroll 0 0 #414141; + } .sbToggleLeft:hover { text-decoration: none; - background: #eee; - color: #333 !important; + background: none repeat scroll 0 0 #414141; + cursor: pointer; } @@ -92,7 +94,18 @@ z-index: 10; position: absolute; right: 0; + font-size: 1.9rem; } + +@media screen and (max-width: 900px) { + + .menuSearch { + padding-top: 12px; + padding-right: 15px; + } + +} + .menuSearch input.searchBox[type='text'] { background: url('https://ssw.com.au/ssw/include/pigeon/img/svg-sprite-sheet.svg') no-repeat scroll -2px -68px #9e9e9e; diff --git a/src/components/header/topBar/index.module.css b/src/components/header/topBar/index.module.css index ccf80d96..a152d29e 100644 --- a/src/components/header/topBar/index.module.css +++ b/src/components/header/topBar/index.module.css @@ -2,17 +2,34 @@ display: flex; justify-content: space-between; align-items: center; + padding: 20px 0px; } + + .logoAndName { display: flex; align-items: center; } @media screen and (max-width: 900px) { + .logoAndName { - margin-top: 35px; + margin-top: 40px; } + +} + + + +a{ + border-bottom: 0px !important; + text-decoration: none !important; +} + + +@media screen and (max-width: 900px) { + .youtube,.linkedin, .facebook, .instagram, .twitter, .tiktok { display: none !important; } @@ -25,7 +42,6 @@ @media screen and (max-width: 800px) { .contacts { display: block !important; - margin-bottom: 10px; } .logoAndName { justify-content: center; @@ -47,15 +63,15 @@ } .logo { - height: 150px; + height: 100px; } .name { width: 100px; margin-left: 16px; text-transform: uppercase; - font-size: 1.3em; - line-height: 1.3em; + font-size: 1.0em; + line-height: 1.0em; color: #666; } @@ -81,10 +97,11 @@ padding-left: 20px; padding-right: 20px; } + .phoneNumber:hover { color: white; border-bottom: none; - background-color: #b31217; + background-color: #333333; } .iconContainer { @@ -98,15 +115,25 @@ background-color: #b31217; } +.youtube:hover{ + background-color: #333333; +} + .linkedin { composes: iconContainer; background-color: #0077b5; } +.linkedin:hover{ + background-color: #333333; +} .twitter { composes: iconContainer; background-color: #55acee; } +.twitter:hover{ + background-color: #333333; +} .instagram { composes: iconContainer; @@ -118,18 +145,29 @@ #cc2366 75%, #bc1888 100% ); + background-color: #bc1888; +} +.instagram:hover{ + background: #333333; + background-color:#333333; } .facebook { composes: iconContainer; background-color: #3b5998; } +.facebook:hover{ + background-color: #333333; +} .tiktok { composes: iconContainer; position: relative; background-color: #000; } +.tiktok:hover{ + background-color: #333333; +} /* .wechat:hover .qrCode { display: inline-block; @@ -154,3 +192,5 @@ border: 5px solid transparent; border-bottom: 5px solid rgba(0, 0, 0, 0.65); } */ + + diff --git a/src/components/layout/index.module.css b/src/components/layout/index.module.css index 5d721291..9e1094c6 100644 --- a/src/components/layout/index.module.css +++ b/src/components/layout/index.module.css @@ -5,6 +5,6 @@ left: 0px; width: 100%; z-index: 100; - height: 50px; + } } \ No newline at end of file From d1d73838f7463b20ca2cc208b1b1e9e59416030f Mon Sep 17 00:00:00 2001 From: Joseph Fernandez Date: Thu, 17 Nov 2022 18:03:37 +1100 Subject: [PATCH 3/8] update made to scoial icons to make them appear square --- src/components/header/topBar/index.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/header/topBar/index.module.css b/src/components/header/topBar/index.module.css index a152d29e..21fb6f21 100644 --- a/src/components/header/topBar/index.module.css +++ b/src/components/header/topBar/index.module.css @@ -105,7 +105,7 @@ a{ } .iconContainer { - width: 50px; + width: 40px; height: 40px; margin-left: 8px; } From 217e573fa81227caa3adad2035a08e44560eeb91 Mon Sep 17 00:00:00 2001 From: Joseph Fernandez Date: Fri, 18 Nov 2022 08:18:22 +1100 Subject: [PATCH 4/8] update made to breadcrumbs css --- src/components/breadcrumb/index.module.css | 22 ++++++++++++++++++++-- src/styles/common.css | 3 +-- 2 files changed, 21 insertions(+), 4 deletions(-) diff --git a/src/components/breadcrumb/index.module.css b/src/components/breadcrumb/index.module.css index ba97c68f..e1bfaa5e 100644 --- a/src/components/breadcrumb/index.module.css +++ b/src/components/breadcrumb/index.module.css @@ -1,8 +1,26 @@ .container { - overflow: hidden; font-size: 0.9rem; } + + +.breadcrumb > ol{ + margin: 15px -15px; +} + .breadcrumb { - margin-top: 1rem; + max-width: 1140px; + display: none; +} + +@media (min-width: 1170px) { + + .breadcrumb { + display: flex; + overflow: hidden; + margin-top: 1rem; + width: 1170px; + margin: 0px auto; + } + } diff --git a/src/styles/common.css b/src/styles/common.css index 6a6d1154..02bd1488 100644 --- a/src/styles/common.css +++ b/src/styles/common.css @@ -1,9 +1,8 @@ -.main-container { +.main-container{ max-width: 1170px; margin-left: auto; margin-right: auto; padding: 0 15px; - } .flex { From 614b871bc4428053397c4ed4d7233a6da1458e0a Mon Sep 17 00:00:00 2001 From: Joseph Fernandez Date: Fri, 18 Nov 2022 09:25:41 +1100 Subject: [PATCH 5/8] adding social media icons to footer --- src/components/footer/index.module.css | 89 +++++++++++++ src/components/footer/index.tsx | 169 ++++++++++++++++++------- 2 files changed, 209 insertions(+), 49 deletions(-) diff --git a/src/components/footer/index.module.css b/src/components/footer/index.module.css index 59cab6f3..212c6700 100644 --- a/src/components/footer/index.module.css +++ b/src/components/footer/index.module.css @@ -42,3 +42,92 @@ .buildLink { font-size: 0.8rem; } + + + +/* social media icons start */ + +.iconContainer { + width: 40px; + height: 40px; + margin-left: 8px; +} + +.youtube { + composes: iconContainer; + background-color: #b31217; +} + +.youtube:hover{ + background-color: #333333; +} + +.linkedin { + composes: iconContainer; + background-color: #0077b5; +} +.linkedin:hover{ + background-color: #333333; +} + +.twitter { + composes: iconContainer; + background-color: #55acee; +} +.twitter:hover{ + background-color: #333333; +} + +.instagram { + composes: iconContainer; + background: linear-gradient( + 45deg, + #f09433 0%, + #e6683c 25%, + #dc2743 50%, + #cc2366 75%, + #bc1888 100% + ); + background-color: #bc1888; +} +.instagram:hover{ + background: #333333; + background-color:#333333; +} + +.facebook { + composes: iconContainer; + background-color: #3b5998; +} +.facebook:hover{ + background-color: #333333; +} + +.tiktok { + composes: iconContainer; + position: relative; + background-color: #000; +} +.tiktok:hover{ + background-color: #333333; +} + + +.footersocial{ + margin: 0px auto; + display: flex; + align-items: center; + justify-content: center; + width: auto; + margin-top: 30px; +} + +@media (min-width: 1170px) { + + .footersocial{ + display: none; + } + +} + +/* social media icons end */ \ No newline at end of file diff --git a/src/components/footer/index.tsx b/src/components/footer/index.tsx index a9d8426e..83f4af4e 100644 --- a/src/components/footer/index.tsx +++ b/src/components/footer/index.tsx @@ -6,6 +6,16 @@ import dayjs from 'dayjs'; import relativeTime from 'dayjs/plugin/relativeTime'; import * as styles from './index.module.css'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { + faYoutube, + faLinkedinIn, + faFacebookF, + faInstagram, + faTwitter, + faTiktok, +} from '@fortawesome/free-brands-svg-icons'; + dayjs.extend(relativeTime); const buildTimestamp = preval`module.exports = new Date().getTime();`; @@ -13,6 +23,7 @@ const buildTimestamp = preval`module.exports = new Date().getTime();`; const Footer = () => ( ); From a5b4cbb089649f1b638b368cd546fabc86843db6 Mon Sep 17 00:00:00 2001 From: Joseph Fernandez Date: Tue, 29 Nov 2022 13:25:53 +1100 Subject: [PATCH 6/8] updating breakpoints for mobile responsiveness --- src/components/breadcrumb/index.module.css | 8 ++++---- src/components/header/topBar/index.module.css | 10 +++++++--- 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/src/components/breadcrumb/index.module.css b/src/components/breadcrumb/index.module.css index e1bfaa5e..18ee3e90 100644 --- a/src/components/breadcrumb/index.module.css +++ b/src/components/breadcrumb/index.module.css @@ -2,18 +2,18 @@ font-size: 0.9rem; } - - .breadcrumb > ol{ margin: 15px -15px; } + + .breadcrumb { max-width: 1140px; display: none; } -@media (min-width: 1170px) { +@media (min-width: 991px) { .breadcrumb { display: flex; @@ -23,4 +23,4 @@ margin: 0px auto; } -} +} \ No newline at end of file diff --git a/src/components/header/topBar/index.module.css b/src/components/header/topBar/index.module.css index 21fb6f21..5cb088f8 100644 --- a/src/components/header/topBar/index.module.css +++ b/src/components/header/topBar/index.module.css @@ -5,6 +5,10 @@ padding: 20px 0px; } +main{ + overflow: hidden; + width: 100%; +} .logoAndName { @@ -12,7 +16,7 @@ align-items: center; } -@media screen and (max-width: 900px) { +@media screen and (max-width: 991px) { .logoAndName { margin-top: 40px; @@ -28,7 +32,7 @@ a{ } -@media screen and (max-width: 900px) { +@media screen and (max-width: 991px) { .youtube,.linkedin, .facebook, .instagram, .twitter, .tiktok { display: none !important; @@ -39,7 +43,7 @@ a{ } } -@media screen and (max-width: 800px) { +@media screen and (max-width: 991px) { .contacts { display: block !important; } From 3c9053ecbd7f75f0492ed2638a49f53ee6b513a9 Mon Sep 17 00:00:00 2001 From: Joseph Fernandez Date: Tue, 29 Nov 2022 13:26:15 +1100 Subject: [PATCH 7/8] updaitng CSS to avoid extended header on certain pages --- src/components/layout/index.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/layout/index.module.css b/src/components/layout/index.module.css index 9e1094c6..66ae81f4 100644 --- a/src/components/layout/index.module.css +++ b/src/components/layout/index.module.css @@ -1,4 +1,4 @@ -@media screen and (max-width: 901px) { +@media screen and (max-width: 991px) { .menu { position: fixed; top: 0px; From 989da6728c860d091fb77fc8869ecf49a06220fe Mon Sep 17 00:00:00 2001 From: Joseph Fernandez Date: Thu, 22 Dec 2022 09:52:08 +1100 Subject: [PATCH 8/8] adding christmas logo --- src/assets/images/SSW-logo-Christmas.svg | 1 + src/components/header/topBar/index.tsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) create mode 100644 src/assets/images/SSW-logo-Christmas.svg diff --git a/src/assets/images/SSW-logo-Christmas.svg b/src/assets/images/SSW-logo-Christmas.svg new file mode 100644 index 00000000..e0e2787c --- /dev/null +++ b/src/assets/images/SSW-logo-Christmas.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/header/topBar/index.tsx b/src/components/header/topBar/index.tsx index d6013f6a..c216883b 100644 --- a/src/components/header/topBar/index.tsx +++ b/src/components/header/topBar/index.tsx @@ -11,7 +11,7 @@ import { faTiktok, } from '@fortawesome/free-brands-svg-icons'; -import SSWLogo from '../../../assets/images/ssw-logo.svg'; +import SSWLogo from '../../../assets/images/ssw-logo-Christmas.svg'; import * as styles from './index.module.css'; const TopBar = () => {