Rework footer after feedback from Ludo. Ensure alignment matches content with a speci...

diff --git a/framework/application/views/scripts/common/footer.phtml b/framework/application/views/scripts/common/footer.phtml
index d9370beaa22f146be98d0349b1be1a9ed8163618..a7d94588d4209189e96c39b4aa01a453de079fff 100644 (file)
--- a/framework/application/views/scripts/common/footer.phtml
+++ b/framework/application/views/scripts/common/footer.phtml
@@ -4,17 +4,21 @@ $this->headScript()->addScriptAndStyle('102-footer');
 \r
 $res = '<footer class="site">';\r
 \r
-$logo = $this->imageCms($this->option('logo'), 'Fluidbook', 258, 64);\r
+// Wrapper element needed so percentage based padding matches the main content areas\r
+// Padding needs to be based on a max-width of 1680px, not the actual screen width\r
+$res .= '<div class="footer-inner">';\r
+\r
+$logo = $this->imageCms($this->option('logo'), 'Fluidbook', 180, 45);\r
 $address = $this->option('address');\r
 \r
 // Get translation for country code\r
 $locale = new Zend_Locale();\r
-$country = $locale->getTranslation($address['pays'], 'Territory');\r
+$country = strtoupper($locale->getTranslation($address['pays'], 'Territory'));\r
 \r
 $res .= '<div class="contact-details">';\r
 $res .= $this->link($logo, 'internal:home');\r
 $res .= '<address>';\r
-$res .= "{$address['adresse']} - {$address['code_postal']} {$address['ville']} $country";\r
+$res .= "{$address['adresse']}<br>{$address['code_postal']} {$address['ville']} - $country";\r
 $res .= '<br>';\r
 $res .= __('Tél.') . ' ' . $this->linkPhone($address['phone']);\r
 $res .= '<br>';\r
@@ -27,6 +31,8 @@ $res .= $this->footerMenu($this->option('footer_menu_main'), __('Plan du site'))
 $quoteLink = $this->linkQuote(__('Demander un devis'));\r
 $res .= $this->footerMenu($this->option('footer_menu_contact'), __('Contactez-nous'), 'internal:contact', array($quoteLink));\r
 \r
+$res .= '<div class="footer-external">';\r
+\r
 $res .= '<div class="footer-social">';\r
 foreach ($this->option('social_networks') as $social) {\r
        $res .= '<style type="text/css">';\r
@@ -35,15 +41,19 @@ foreach ($this->option('social_networks') as $social) {
        $res .= '<a href="' . $social['url'] . '" id="s-' . $social['icon'] . '" class="social-link fb-' . $social['icon'] . '" target="_blank">';\r
        $res .= '</a>';\r
 }\r
-$res .= '</div>'; // .footer-social\r
+$res .= '</div>'; // .footer-external\r
 \r
 $res .= '<div class="workshop">';\r
 $res .= $this->linkCMS($this->option('workshop'), array('class' => 'workshop-link'));\r
 $res .= '</div>'; // .workshop\r
 \r
+$res .= '</div>'; // .external-links\r
+\r
+$res .= '</div>'; // .footer-inner\r
 $res .= '</footer>';\r
 \r
 $res .= '<footer class="legal">';\r
+$res .= '<div class="footer-inner">';\r
 \r
 $res .= '<div class="locale-nav">';\r
 $res .= $this->localeNavigation(true, CubeIT_View_Helper_LocaleNavigation::BIGRAMME);\r
@@ -51,6 +61,7 @@ $res .= '</div>'; // .locale-nav
 \r
 $res .= $this->markupDotclear($this->option('footer'));\r
 \r
+$res .= '</div>'; // .footer-inner\r
 $res .= '</footer>'; // footer.legal\r
 \r
 echo $res;
\ No newline at end of file

diff --git a/less/102-footer.less b/less/102-footer.less
index 248cd8e9401ddc7fa3091474db885dd7935ba74f..8c28feac4adedde2d15030e79f8f28e538eb702f 100644 (file)
--- a/less/102-footer.less
+++ b/less/102-footer.less
@@ -3,14 +3,9 @@
 footer {
        .font-thinning();
        max-width: @content-max-width;
+    width: 100%;
        margin: 0 auto;
 
-       // Flexbox setup
-       display: flex;
-       flex-direction: row;
-       justify-content: space-between;
-       flex-wrap: wrap;
-
        a {
                color: #fff;
                text-decoration: none;
@@ -22,21 +17,30 @@ footer {
        }
 }
 
-footer.site {
+.footer-inner {
+  padding-left: 5%;
+  padding-right: 5%;
+
+  // Flexbox setup
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+footer.site .footer-inner {
        color: #fff;
        background-color: @color-footer-bg-primary;
-       padding: 75px 85px 75px 42px;
+    padding-top: 80px;
+    padding-bottom: 75px;
 
-       @media @m1024 {
-               padding: 40px;
-       }
        @media @m900 {
                justify-content: center;
                text-align: center;
-               padding: 30px;
+               flex-wrap: wrap;
+        padding: 30px 20px;
        }
        @media (max-width: 400px) {
-               padding: 30px 20px;
+
        }
 
        // Footer containers
@@ -54,25 +58,34 @@ footer.site {
        }
 
        .contact-details {
-               flex-grow: 4; // Increase space bias for this block
+               flex-grow: 3; // Increase space bias for this block
+        flex-shrink: 0;
 
+        // Logo
                img {
-                       max-width: 100%;
-                       height: auto;
+          max-width: 100%;
+          height: auto;
+          margin-top: -25px; // Offset by the symbol width to make the alignment based on the "Fluidbook" text alone
+          margin-left: -30px;
                }
 
+        @media @m1024 {
+          margin-top: 0;
+        }
+
                @media @m900 {
                        flex-basis: 100%;
 
                        img     {
-                               max-width: 120px;
+                               max-width: 150px;
+                margin-top: 0;
+                margin-left: -25px;
                        }
                }
        }
 
        address {
                margin-top: 4px;
-               margin-left: 41px;
                font-style: normal;
                font-size: 14px;
                line-height: 32/14;
@@ -84,18 +97,22 @@ footer.site {
                }
        }
 
+    // Wrapper for footer social and workshop links so they are treated as a single flexbox item
+    .footer-external {
+        padding-top: 10px;
+
+        @media @m900 {
+          padding-top: 0;
+          flex-basis: 100%;
+        }
+    }
+
        .footer-social {
                text-align: center;
+        margin-bottom: 20px;
 
-               @media @m1280 {
-                       order: 5; // Send to end
-                       flex-basis: 100%;
-                       margin-top: 20px;
-                       padding: 0 0 0 40px;
-                       text-align: left;
-               }
-               @media @m1024 {
-                       order: 0; // Back to original order
+               @media (min-width: 1100px) {
+          float: left;
                }
                @media @m900 {
                        text-align: center;
@@ -105,14 +122,11 @@ footer.site {
        }
 
        .workshop {
-               text-align: right;
+               text-align: center;
 
-               @media @m1024 {
-                       flex-basis: 100%;
-                       margin-top: 20px;
-                       padding-left: 40px;
-                       text-align: left;
-               }
+        @media (min-width: 1100px) {
+          float: right;
+        }
                @media @m900 {
                        text-align: center;
                        padding-left: 0;
@@ -131,7 +145,7 @@ footer.site {
                        .longarrow-button(20px, 30px, 13px, 2px);
                }
                @media @m1024 {
-                       .longarrow-button(20px, 54px, 16px, 0);
+                       //.longarrow-button(20px, 54px, 16px, 0);
                }
                @media @m900 {
                        .longarrow-button(15px, 20px, 11px, 1px);
@@ -175,6 +189,7 @@ footer.site {
 .footer-menu {
        line-height: 32/14;
        flex-grow: 2;
+    flex-shrink: 0;
 
        @media @m900 {
                padding: 0 20px !important;
@@ -197,10 +212,11 @@ footer.site {
 }
 
 // Copyright and legal bar
-footer.legal {
+footer.legal .footer-inner {
        background-color: @color-footer-bg-secondary;
        color: #5c6268;
-       padding: 20px 85px;
+    padding-top: 20px;
+    padding-bottom: 20px;
        font-size: 14px;
        position: relative;
        align-items: center;