Responsive behaviour for footer. Done #538 @2.5

diff --git a/framework/application/views/scripts/common/footer.phtml b/framework/application/views/scripts/common/footer.phtml
index 267eb42895e42613b2c09436d162d227001d1356..b1249209bbb48cbd5fe7b00246cb87e810777288 100644 (file)
--- a/framework/application/views/scripts/common/footer.phtml
+++ b/framework/application/views/scripts/common/footer.phtml
@@ -42,11 +42,13 @@ $res .= '</div>'; // .workshop
 $res .= '</footer>';\r
 \r
 $res .= '<footer class="legal">';\r
-$res .= $this->markupDotclear($this->option('footer'));\r
+\r
 $res .= '<div class="locale-nav">';\r
 $res .= $this->localeNavigation(true, CubeIT_View_Helper_LocaleNavigation::BIGRAMME);\r
 $res .= '</div>'; // .locale-nav\r
 \r
+$res .= $this->markupDotclear($this->option('footer'));\r
+\r
 $res .= '</footer>'; // footer.legal\r
 \r
 echo $res;
\ No newline at end of file

diff --git a/less/001-variables.less b/less/001-variables.less
index 8142d5d2cf0f87e081120f410494fa30b48bd0db..17c215ccd5ecbbce9388cbddfe571a16823f9e12 100644 (file)
--- a/less/001-variables.less
+++ b/less/001-variables.less
@@ -24,6 +24,7 @@
 @mobile-breakpoint: 1024px;
 @desktop-min-width: 1200px;
 @content-max-width: 1680px;
+@content-min-width: 320px;
 
 // -- transition times
 @transition-time-buttons: 200ms;

diff --git a/less/002-common.less b/less/002-common.less
index 756e39f8db224c3bba514c8cff4c7bd63735cae2..e458e8ae960ace5d2d855e465f76ced625322548 100644 (file)
--- a/less/002-common.less
+++ b/less/002-common.less
@@ -13,6 +13,7 @@ body {
        font-family: @body-font;\r
        font-size: 14px;\r
        line-height: 26/14;\r
+       min-width: @content-min-width;\r
 }\r
 \r
 main {\r

diff --git a/less/102-footer.less b/less/102-footer.less
index 9b1dec472d24e12501cb174cae1dab02607f92fc..52b17c225c52ec581079e6cf3573374e11185046 100644 (file)
--- a/less/102-footer.less
+++ b/less/102-footer.less
@@ -5,6 +5,12 @@ footer {
        max-width: @content-max-width;
        margin: 0 auto;
 
+       // Flexbox setup
+       display: flex;
+       flex-direction: row;
+       justify-content: space-between;
+       flex-wrap: wrap;
+
        a {
                color: #fff;
                text-decoration: none;
@@ -21,11 +27,15 @@ footer.site {
        background-color: @color-footer-bg-primary;
        padding: 75px 85px 75px 42px;
 
-       // Flexbox setup
-       display: flex;
-       flex-direction: row;
-       justify-content: space-between;
-       flex-wrap: wrap;
+       @media @m1024 {
+               padding: 40px;
+       }
+       @media @m900 {
+               justify-content: flex-start;
+       }
+       @media @m768 {
+               padding: 30px;
+       }
 
        // Footer containers
        & > div {
@@ -38,6 +48,15 @@ footer.site {
 
        .contact-details {
                flex-grow: 4; // Increase space bias for this block
+
+               img {
+                       max-width: 100%;
+                       height: auto;
+               }
+
+               @media @m900 {
+                       flex-basis: 100%;
+               }
        }
 
        address {
@@ -50,6 +69,14 @@ footer.site {
 
        .footer-social {
                text-align: center;
+
+               @media @m1280 {
+                       order: 5; // Send to end
+                       flex-basis: 100%;
+                       margin-top: 20px;
+                       padding: 0 0 0 40px;
+                       text-align: left;
+               }
        }
 
        .social-link {
@@ -75,14 +102,28 @@ footer.site {
 
        .workshop {
                text-align: right;
+
+               @media @m1024 {
+                       flex-basis: 100%;
+                       margin-top: 20px;
+                       padding-left: 40px;
+                       text-align: left;
+               }
        }
        .workshop-link {
                .rounded-button();
                .border-button(#fff, #fff);
-               .longarrow-button(20px, 65px, 19px);
+               .longarrow-button(20px, 62px, 19px);
                border-radius: 26px;
                text-transform: uppercase;
                font-size: 12px;
+
+               @media @m1280 {
+                       .longarrow-button(20px, 30px, 13px, 2px);
+               }
+               @media @m1024 {
+                       .longarrow-button(20px, 54px, 16px, 0);
+               }
        }
 }
 
@@ -90,6 +131,13 @@ footer.site {
        line-height: 32/14;
        flex-grow: 2;
 
+       @media @m900 {
+               padding-left: 40px;
+               padding-right: 0;
+               flex-grow: 0 !important;
+               margin-top: 20px;
+       }
+
        .menu-title {
                text-transform: uppercase;
                font-family: @montserrat;
@@ -105,15 +153,35 @@ footer.site {
 footer.legal {
        background-color: @color-footer-bg-secondary;
        color: #5c6268;
-       padding: 40px 85px;
+       padding: 20px 85px;
        font-size: 14px;
        position: relative;
+       align-items: center;
+       flex-wrap: nowrap;
+
+       @media @m900 {
+               padding-right: 45px;
+       }
+       @media @m768 {
+               padding-left: 70px;
+       }
+       @media @m640 {
+               flex-wrap: wrap;
+       }
 }
 
 .locale-nav {
-       position: absolute;
-       top: 21px;
-       right: 85px;
+       text-align: right;
+       order: 2;
+       white-space: nowrap;
+       padding-left: 30px;
+
+       @media @m640 {
+               order: 0; // back to source order
+               padding-left: 0;
+               padding-bottom: 20px;
+               text-align: left;
+       }
 
        a {
                display: inline-block;