Merge pull request #426 from scania/bug/footer_moves_on_link_hover_IE

fix moving footer on IE when hover on nav item
scania · Apr 16, 2019 · 785339b · 785339b
2 parents 652399a + f9d6691
commit 785339b
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 23 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -61,8 +61,10 @@ <h1>Corporate UI for Developers</h1>
         <nav-item location="#" icon="youtube"></nav-item>
         <nav-item location="#" icon="linkedin"></nav-item>
       </c-social-media>
+      <nav-item location="https://scania.github.io/corporate-ui-docs/master-branch/developer/support.html">Support</nav-item>
+      <nav-item location="mailto:[email protected]">Contact</nav-item>
     </c-corporate-footer>
 
     <script src="js/ux-library.js"></script>
   </body>
-</html>
+</html>
diff --git a/src/components/corporate-footer/style.less b/src/components/corporate-footer/style.less
@@ -6,6 +6,11 @@
     background-color: #1d1d1b;
     color: #fff;
     padding: 46px 30px 20px;
+    margin-left: 0;
+    margin-right: 0;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: flex-start;
   }
 
   .wordmark {
@@ -18,8 +23,19 @@
     background-repeat: no-repeat;
   }
 
+  .right-container{
+    order: 2;
+    flex-grow: 1;
+  }
+
+  .left-container{
+    order: 1;
+    flex-grow: 2;
+  }
+
   .footer-links {
     margin: 0 0 15px 0;
+    padding-left: 0;
     text-align: left;
   }
   .footer-copy-text {
@@ -29,6 +45,7 @@
     margin: 0;
     letter-spacing: 0.05rem;
     text-align: left;
+    float: left;
   }
 
   ::content {
@@ -103,12 +120,11 @@
 
       .dropdown-menu {
         background-color: transparent;
-        display: block;
+        display: inline-block;
+        width: 100%;
         position: relative;
         border: none;
         box-shadow: none;
-        float: none;
-
         a {
           font-family: "Scania Sans", Helvetica, Arial, sans-serif;
           font-size: 14px;
@@ -125,6 +141,15 @@
 
     footer {
       padding: 23px 0 0 0;
+      flex-flow: row wrap;
+    }
+
+    .right-container, .left-container{
+      flex: 1 100%;
+    }
+
+    .right-container{
+      order: 1;
     }
 
     .wordmark{
@@ -145,6 +170,7 @@
       padding: 19px 9%;
       line-height: 16px;
       text-align: center;
+      width:100%;
     }
 
     ::content {

diff --git a/src/components/corporate-footer/template.html b/src/components/corporate-footer/template.html
@@ -1,26 +1,31 @@
 <footer class="footer">
-  <span class="wordmark"></span>
-  <content select="c-social-media"></content>
+  <div class="right-container">
+    <span class="wordmark"></span>
+  </div>
+  <div class="left-container">
+    <content select="c-social-media"></content>
 
-  <template is="dom-if" if="{{navItems}}" restamp="true">
-    <div class="dropdown-container">
-      <nav class="dropdown-menu footer-links">
-        <content></content>
+    <template is="dom-if" if="{{navItems}}" restamp="true">
+      <div class="dropdown-container">
+        <nav class="dropdown-menu footer-links">
+          <content></content>
 
         <template is="dom-repeat" items="{{items}}">
           <nav-item props="{{item}}"></nav-item>
         </template>
-      </nav>
-      <a href="#" class="btn btn-lg-center-block hidden-md hidden-lg" data-toggle="dropdown">
-        SCANIA
-        <span class="icon-caret-up"></span>
-      </a>
-    </div>
-  </template>
-  <p class="footer-copy-text">
-    <!-- <content select="copyright-text">
-      &copy; Copyright Scania 2016 All rights reserved.
-    </content> -->
-    <span>&copy;</span> {{copyright}}
-  </p>
+        </nav>
+        <a href="#" class="btn btn-lg-center-block hidden-md hidden-lg" data-toggle="dropdown">
+          SCANIA
+          <span class="icon-caret-up"></span>
+        </a>
+      </div>
+    </template>
+    <p class="footer-copy-text">
+      <!-- <content select="copyright-text">
+        &copy; Copyright Scania 2016 All rights reserved.
+      </content> -->
+      <span>&copy;</span> {{copyright}}
+    </p>
+  </div>
+
 </footer>