Merge pull request #893 from AlessiaYChen/gov-next-gen-layout

Gov next gen layout
bcgov · Jul 30, 2024 · e0e718b · e0e718b
2 parents e447c98 + 5031bfa
commit e0e718b
Show file tree

Hide file tree

Showing 4 changed files with 116 additions and 90 deletions.
diff --git a/Gov.News.WebApp/Views/Shared/_Layout.cshtml b/Gov.News.WebApp/Views/Shared/_Layout.cshtml
@@ -296,42 +296,48 @@
     </div>
 
     @RenderSection("AssortedMedia", false)
-
-    <div id="landAcknowledgement" class="jumbotron jumbotron-fluid" style="background-color: #313132; color: white; margin-bottom: 0; 
-       border-top: 4px solid rgb(252, 186, 25); border-bottom: 4px solid rgb(252, 186, 25); padding-top: 32px; padding-bottom: 32px;">
-        <div class="container" style="padding-left: 60px; padding-right: 50px;">
-            <p style="font-size:14px; margin-top:30px; font-weight:500; ">The B.C. Public Service acknowledges the territories of First Nations 
+
+    <div id="landAcknowledgement" class="container-fluid">
+        <div class="container-xl">
+            <p style="font-size:14px; font-weight:500; ">The B.C. Public Service acknowledges the territories of First Nations 
             around B.C. and is grateful to carry out our work on these lands. We acknowledge the rights, interests, priorities, and concerns of 
             all Indigenous Peoples - First Nations, Métis, and Inuit - respecting and acknowledging their distinct cultures, histories, rights, 
             laws, and governments.</p>
         </div>
     </div>
-    <div id="footer" role="navigation">
-        <div class="content">
-            <div class="connect">
-                <h4>Connect with Us:</h4>
-                <ul class="inline" role="menu">
-                    <li role="menuitem"><a id="footerBCGov" href="http://www.gov.bc.ca/">BC Gov</a></li>
-                    <li role="menuitem"><a id="footerFaceBook" href="/connect#facebook">Facebook</a></li>
-                    <li role="menuitem"><a id="footerTwitter" href="/connect#x">X</a></li>
-                    <li role="menuitem"><a id="footerFlickr" href="/connect#flickr">Photos</a></li>
-                    <li role="menuitem"><a id="footerYoutube" href="/connect#youtube">Videos</a></li>
-                    <li role="menuitem"><a id="footerNewsletters" href="/newsletters">Newsletters</a></li>
-                    <li role="menuitem"><a id="footerRSSFeeds" href="/connect#rss">RSS Feeds</a></li>
+    <div id="footer" class="container-fluid" role="navigation">
+        <div class="top container-xl">
+            <div class="footer-bc">
+                <img id="BCGov-logo-footer" src="~/Content/Images/Gov/BCID_H_rgb_pos.svg" alt="Government of B.C." class="@([email protected] ? "granville-bridge-on": "granville-bridge-off" )">
+                <p>We can help in over 220 languages and through other accessible options. Calls, email or text us, or find a service centre.</p>
+            </div>
+            <div class="footer-connect">
+                <h4>Connect with Us</h4>
+                <ul class="" role="menu">
+                    <li role="menuitem"><a id="footerNewsletters" href="/subscribe">subscribe</a></li>
+                    <li role="menuitem"><a id="footerRSSFeeds" href="/connect">Social and RSS</a></li>
                 </ul>
             </div>
-            <div class="clear"></div>
+            <div class="footer-more-info">
+                <h4>More info</h4>
+                <ul class="pull-left" role="menu">
+                    <li role="menuitem"><a id="footerHome" href="https://gov.bc.ca">BC Gov</a></li>
+                    <li role="menuitem"><a id="footerDisclaimer" href="http://www2.gov.bc.ca/gov/admin/disclaimer.page">Disclaimer</a></li>
+                    <li role="menuitem"><a id="footerPrivacy" href="/privacy">Privacy</a></li>
+                    <li role="menuitem"><a id="footerAccessibility" href="http://www2.gov.bc.ca/gov/admin/accessibility.page">Accessibility</a></li>
+                    <li role="menuitem"><a id="footerCopyright" href="http://www2.gov.bc.ca/gov/admin/copyright.page">Copyright</a></li>
+                    <li role="menuitem"><a id="footerContact" href="/contact">Contact Us</a></li>
+                </ul>
+            </div>
+
             <hr />
-
-            <ul class="inline pull-left" role="menu">
-                <li role="menuitem"><a id="footerHome" href="https://news.gov.bc.ca">Home</a></li>
-                <li role="menuitem"><a id="footerDisclaimer" href="http://www2.gov.bc.ca/gov/admin/disclaimer.page">Disclaimer</a></li>
-                <li role="menuitem"><a id="footerPrivacy" href="/privacy">Privacy</a></li>
-                <li role="menuitem"><a id="footerAccessibility" href="http://www2.gov.bc.ca/gov/admin/accessibility.page">Accessibility</a></li>
-                <li role="menuitem"><a id="footerCopyright" href="http://www2.gov.bc.ca/gov/admin/copyright.page">Copyright</a></li>
-                <li role="menuitem"><a id="footerContact" href="/contact">Contact Us</a></li>
-            </ul>
         </div>
+        <div class="container-xl bottom">
+            <div class="copyright">
+                © <!-- -->2024<!-- --> Government of British Columbia
+            </div>
+        </div>
+
     </div>
     <div id="end-cap">
         <ul>

diff --git a/Gov.News.WebApp/wwwroot/Content/custom.css b/Gov.News.WebApp/wwwroot/Content/custom.css
@@ -55,7 +55,6 @@ body {
     width: 100%;
 }
 
-
 .header .navbar-brand {
     color: #2d2d2d;
     font-size: 18px;
@@ -81,31 +80,102 @@ body {
 
 }
 
+#landAcknowledgement {
+    background-color: #313132;
+    color: white;
+    margin-bottom: 0;
+    border-top: 4px solid rgb(252, 186, 25);
+    border-bottom: 4px solid rgb(252, 186, 25);
+    padding-top: 30px;
+    padding-bottom: 20px;
+}
+
+#footer {
+    background-color: #FFF;
+    color: #2d2d2d;
+    padding-top: 40px;
+    font-size: 16px;
+}
+
+#footer .top{
+    display:flex;
+    flex-direction:row;
+    align-items: stretch;
+    justify-content: flex-end;
+    gap: 10px 50px;
+    flex-wrap: wrap;
+}
+
+#footer .bottom {
+    display: flex;
+    -webkit-box-pack: justify;
+    justify-content: flex-start;
+    margin-bottom: 30px;
+    margin-top: 30px;
+    padding-top: 30px;
+    border-top: 1px solid rgb(1, 51, 102);
+}
+
+#BCGov-logo-footer {
+    width:164px;
+    margin-bottom:10px;
+}
+
+#footer h4 {
+  font-size: 18px;
+  padding-right: 20px;
+  margin-top: 22px;
+  margin-bottom: 10px;
+  font-weight: 600;
+}
+
+#footer ul{
+    list-style-type: none;
+    padding-left:0;
+}
+
+#footer ul li{
+    margin-bottom:8px;
+}
+
 @media only screen and (min-width: 1024px) {
     #navbarSupportedContent .navbar-nav li a {
         font-size: 1.2rem;
     }
 
-    #main-nav-contaier {
-        --bs-gutter-x: 0.5rem;
-    }
-
     #navbarSupportedContent ul li a {
         white-space: nowrap;
     }
 
     .live_button_show {
         margin-left: 10px;
     }
+
+    .footer-bc {
+        flex:2;
+    }
+
+    .footer-connect, .footer-more-info {
+        flex: 1;
+    }
 }
 
 @media (min-width: 768px) and (max-width: 1023px) {
     #navbarSupportedContent .navbar-nav li a {
         font-size: 0.9rem;
     }
+
     #main-nav-contaier {
         --bs-gutter-x: 0.5rem;
     }
+
+    .footer-bc {
+        flex: 0 0 100%;
+    }
+
+    .footer-connect, .footer-more-info {
+        flex: 1;
+    }
 }
 
 .btn-primary-blue {
@@ -328,6 +398,14 @@ body {
         padding-left: 0;
         padding-right: 0;
     }
+
+    .footer-bc {
+        flex: 0 0 100%;
+    }
+
+    .footer-connect, .footer-more-info {
+        flex: 1;
+    }
 }
 
 @media only screen and (max-width: 479px) {

diff --git a/Gov.News.WebApp/wwwroot/Content/site.css b/Gov.News.WebApp/wwwroot/Content/site.css
@@ -75,13 +75,6 @@ a {
   clear: both;
 }
 
-.content {
-  min-width: 680px;
-  max-width: 960px;
-  margin: 0 auto;
-}
-
-
 a.read-more {
   font-size: 13px;
   font-weight: 600;
@@ -572,7 +565,6 @@ ul.inline {
 }
 
 ul.inline li {
-  float: left;
   padding: 2px 10px;
   position: relative;
 }
@@ -584,10 +576,6 @@ ul.inline li a:link,
   text-align: center;
 }
 
-ul.inline li + li {
-  border-left: 1px solid #4b5e73;
-}
-
 #carousel-holder {
   height: 250px;
   position: relative;
@@ -834,7 +822,6 @@ ul.inline li + li {
 }
 
 .home-body {
-  width: 795px;
   padding-left: 24px;
   float: left;
 }
@@ -2374,10 +2361,6 @@ ul.inline li + li {
   padding-bottom: 20px;
 }
 
-.connect {
-  padding-bottom: 30px;
-}
-
 .connect .home-features:first-child .resource-links {
   border-top: none;
 }
@@ -2658,52 +2641,16 @@ ul.inline li + li {
   text-align: center;
 }
 
-#footer {
-  background-color: #FFF;
-  color: #2d2d2d;
-}
-
-#footer .content {
-  padding: 0 30px 2em;
-}
-
 #footer hr {
   border: 0;
   height: 1px;
   background: #4b5e73;
 }
 
-#footer h4 {
-  font-size: 18px;
-  padding-right: 20px;
-  margin-top: 22px;
-  margin-bottom: 10px;
-}
-
-#footer ul li:first-child {
-  padding-left: 0;
-}
-
 #footer ul li a {
   color: #2d2d2d;
 }
 
-#footer ul li + li {
-  border-color: #4b5e73;
-}
-
-#footer .connect {
-  margin-bottom: 10px;
-}
-
-#footer .connect h4 {
-  float: left;
-}
-
-#footer .connect ul {
-  padding-top: 22px;
-}
-
 #end-cap {
   position: relative;
   z-index: 100;

diff --git a/Gov.News.WebApp/wwwroot/Content/transforms.css b/Gov.News.WebApp/wwwroot/Content/transforms.css
@@ -6,11 +6,6 @@
     display: none;
 }
 
-.content {
-    min-width: 660px;
-    max-width: 1120px;
-}
-
 @media only screen and (min-width: 1120px) {
     .minister-bio-picture {
         display: none;