Merge pull request #464 from ThomasKranitsas/fix-footer

Fix footer link on mobile view

Author: birdofpreyru

src/css/base.css

@@ -529,6 +529,12 @@ footer {
   background-color: #3D3D3D;
   padding: 1px 20px 30px 20px; }
 
+.bottom-footer .menu-item .menu-link {
+  color: #fff;
+  font-size: 16px; }
+.bottom-footer .menu-item .menu-link:hover {
+  color: #0096ff; }
+
 .social-links {
   font-size: 13px;
   line-height: 1.2em;
@@ -548,32 +554,43 @@ footer {
   text-align: center;
   font-size: 12px;
   line-height: 14px;
-  color: #656565; }
+  color: #fff; }
+
+.social-links .fb-link {
+  background-image: url(@@cdn/i/ico-facebook_desktop.svg);
+  width: 27px;
+  height: 27px; }
+.social-links .twitter-link {
+  background-image: url(@@cdn/i/ico-twitter_desktop.svg);
+  width: 28px;
+  height: 24px; }
+.social-links .linkedin-link {
+  background-image: url(@@cdn/i/ico-linkedin_desktop.svg);
+  width: 27px;
+  height: 27px; }
+.social-links .google-link {
+  background-image: url(@@cdn/i/ico-google_desktop.svg);
+  width: 27px;
+  height: 27px; }
 
 @media only screen and (max-width: 1024px) {
+  .bottom-footer {
+    padding-top: 36px;
+  }
   .bottom-footer, .fold-pusher {
-    height: 170px; }
+    height: auto; }
+  .social-links {
+    margin-top: 0;
+    margin-bottom: 6px;
+  }
   .bottom-footer .menu-item {
-    display: none;
-    margin-top: 30px; }
-  .menu-visible .bottom-footer .menu-item {
     display: block; }
-  .social-links .fb-link {
-    background-image: url(@@cdn/i/ico-facebook.svg);
-    width: 27px;
-    height: 27px; }
-  .social-links .twitter-link {
-    background-image: url(@@cdn/i/ico-twitter.svg);
-    width: 28px;
-    height: 24px; }
-  .social-links .linkedin-link {
-    background-image: url(@@cdn/i/ico-linkedin.svg);
-    width: 27px;
-    height: 27px; }
-  .social-links .google-link {
-    background-image: url(@@cdn/i/ico-google.svg);
-    width: 27px;
-    height: 27px; } }
+  .bottom-footer nav {
+    position: relative;
+    top: auto;
+    left: auto;
+    text-align: center;
+  } }
 
 @media only screen and (min-width: 1025px) {
   .bottom-footer, .fold-pusher {
@@ -585,32 +602,18 @@ footer {
     .bottom-footer .menu-item {
       text-align: center;
       font-weight: normal; }
-      .bottom-footer .menu-item .menu-link {
-        color: #fff;
-        font-size: 16px;
-        line-height: 21px; }
-      .bottom-footer .menu-item .menu-link:hover {
-        color: #0096ff; }
+    .bottom-footer .menu-item .menu-link {
+      line-height: 21px; }
   .copyright-notice {
-    font-size: 15px;
-    color: #fff; }
+    font-size: 15px; }
   .account-footer .copyright-notice {
-    font-size: 12px;
-    color: #656565; }
+    font-size: 12px; }
   .social-links {
     margin-bottom: 3px; }
     .social-links a {
       width: 26px;
       height: 26px;
-      margin-top: 13px; }
-    .social-links .fb-link {
-      background-image: url(@@cdn/i/ico-facebook_desktop.svg); }
-    .social-links .twitter-link {
-      background-image: url(@@cdn/i/ico-twitter_desktop.svg); }
-    .social-links .linkedin-link {
-      background-image: url(@@cdn/i/ico-linkedin_desktop.svg); }
-    .social-links .google-link {
-      background-image: url(@@cdn/i/ico-google_desktop.svg); } }
+      margin-top: 13px; } }
 
 
 /* header / log-in area */

src/footer.html

@@ -2,7 +2,6 @@
 <footer class="bottom-footer">
   <!-- Footer links -->
   <nav class="menu-item">
-    <div class="menu-item-header show-small">OTHERS</div>
     <ul class="submenu">
       <li class="submenu-item"><a ng-click="$event.stopPropagation();" href="/sitemap" class="menu-link">SITEMAP</a></li>
       <li class="submenu-item"><a ng-click="$event.stopPropagation();" href="/about" class="menu-link">ABOUT US</a></li>
@@ -199,7 +198,7 @@ <h2>Comment Examples</h2>
               } else {
                 photoLink = tcconfig.communityURL + '/i/m/nophoto_login.gif';
               }
-              
+
               var color = '';
               var ratings = data['ratingSummary'];
               if (ratings) {
@@ -213,7 +212,7 @@ <h2>Comment Examples</h2>
               } else if (data['isPM'] == true) {
                 color = '#FF9900';
               }
-              
+
               $timeout(function() {
                 vm.handleStyle = { color: color };
                 vm.photoURL = photoLink;

wp/wp-content/themes/tcs-responsive/footer.php

@@ -19,7 +19,6 @@
 <footer class="bottom-footer">
   <!-- Footer links -->
   <nav class="menu-item">
-    <div class="menu-item-header show-small">OTHERS</div>
     <ul class="submenu">
       <li class="submenu-item"><a ng-click="$event.stopPropagation();" href="/sitemap" class="menu-link">SITEMAP</a></li>
       <li class="submenu-item"><a ng-click="$event.stopPropagation();" href="/about" class="menu-link">ABOUT US</a></li>