From 07eb7bf86aa5f921dcb239f18944e278e99ba8f6 Mon Sep 17 00:00:00 2001
From: Leonardo Merlin <leonardo.merlin@serpro.gov.br>
Date: Mon, 21 Sep 2015 11:42:10 -0300
Subject: [PATCH] Refact: header layout / css

---
 src/app/components/navbar/navbar.html             |  28 ++++++++++++++++++----------
 src/app/components/navbar/navbar.scss             | 161 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-----------------------------
 src/app/components/social-share/social-share.scss |   8 +++++++-
 src/app/layout.scss                               |  22 +++++++++++-----------
 4 files changed, 168 insertions(+), 51 deletions(-)

diff --git a/src/app/components/navbar/navbar.html b/src/app/components/navbar/navbar.html
index f851e32..15644a1 100644
--- a/src/app/components/navbar/navbar.html
+++ b/src/app/components/navbar/navbar.html
@@ -1,15 +1,23 @@
 <div class="app-navbar">
   <nav id="navigation" class="header-navbar navbar navbar-static-top" role="navigation">
     <div class="navbar-header">
-      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
-        <span class="sr-only">Alternar menu de navegação</span>
-        <span class="icon-bar" aria-hidden="true"></span>
-        <span class="icon-bar" aria-hidden="true"></span>
-        <span class="icon-bar" aria-hidden="true"></span>
-      </button>
-      <a class="navbar-brand" ui-sref="inicio">
-        <img src="/assets/images/logo.png" alt="Dialoga Brasil | O país fica melhor quando você participa" />
-      </a>
+      <div class="row">
+        <div class="row-height">
+          <div class="col-xs-10 col-xs-height col-middle">
+            <a class="navbar-brand" ui-sref="inicio">
+              <img src="/assets/images/logo.png" class="img-responsive" alt="Dialoga Brasil | O país fica melhor quando você participa" />
+            </a>
+          </div>
+          <div class="col-xs-2 col-xs-height col-middle">
+            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
+              <span class="sr-only">Alternar menu de navegação</span>
+              <span class="icon-bar" aria-hidden="true"></span>
+              <span class="icon-bar" aria-hidden="true"></span>
+              <span class="icon-bar" aria-hidden="true"></span>
+            </button>
+          </div>
+        </div>
+      </div>
     </div>
 
     <div id="navbar-collapse" class="collapse navbar-collapse">
@@ -28,7 +36,7 @@
     </div>
   </nav>
 
-  <div id="dialoga-nas-redes">
+  <div id="dialoga-nas-redes" class="hidden-xs">
     <div class="text text-right">
       <p>DIALOGA<br><b>NAS REDES</b></p>
     </div>
diff --git a/src/app/components/navbar/navbar.scss b/src/app/components/navbar/navbar.scss
index 533eefb..bf96b5c 100644
--- a/src/app/components/navbar/navbar.scss
+++ b/src/app/components/navbar/navbar.scss
@@ -19,8 +19,6 @@
     }
 
     .navbar-toggle {
-        padding: 12px 10px;
-        margin-top: 20px;
         border-radius: 100%;
         background-color: #5e749d;
 
@@ -30,13 +28,12 @@
         }
 
         @media screen and (max-width: $screen-md) {
-            margin-top: 45px;
+            padding: 12px 10px;
+            margin: 0;
         }
     }
 
     .navbar-nav .divider span {
-        padding: 0 0 10px 0;
-        margin: 53px 10px 0 10px;
         display: block;
 
         @media screen and (max-width: $screen-md) {
@@ -48,11 +45,9 @@
         padding: 0;
     }
 
-    .navbar-nav > li {
+    .navbar-nav {
 
-        & > a {
-            padding: 0 0 10px 0;
-            margin: 55px 10px 0 10px;
+        li > a {
             text-transform: uppercase;
             color: #616161;
             font-weight: bold;
@@ -65,41 +60,149 @@
             .contraste & {
                 color: #fff;
             }
+        }
+
+        li.active > a {
+            border-bottom: 2px solid #77BB34;
+        }
+    }
 
-            @media screen and (max-width: $screen-md) {
-                margin-top: 5px;
+    .contraste & {
+        .nav > li > a:hover,
+        .nav > li > a:focus {
+            color: #fff;
+        }
+
+        .active a {
+            border-bottom-color: #fff;
+        }
+    }
+
+    // <= Mobile
+    @media screen and (max-width: ($screen-sm - 1)) {
+        .navbar-collapse {
+            margin: 0 -15px;
+        }
+
+        .navbar-nav {
+            background-color: #eee;
+
+            & > li {
+                // border-top: 1px solid #ccc;
+                -moz-border-image: -moz-linear-gradient(left, #eee 0%, #ccc 100%);
+                -webkit-border-image: -webkit-linear-gradient(left, #eee 0%, #ccc 100%);
+                border-image: linear-gradient(to right, #eee 0%, #ccc 100%);
+                border-image-slice: 1;
+
+                border-top: 1px solid #ccc;
+                border-bottom: 0px solid #ccc;
+                border-left: 0px solid #ccc;
+                border-right: 0px solid #ccc;
+                &:last-child {
+                    border-bottom: 1px solid #ccc;
+                }
+            }
+
+            & > li > a {
+                padding: 12px 20px;
+                margin: 0;
                 text-align: right;
             }
+
+            & > li.active > a {
+                border-bottom: none;
+                border-right: 4px solid #77BB34;
+            }
+
+            .dropdown-toggle {
+                margin-top: 0px;
+
+            }
+            .dropdown-menu {
+                position: relative;
+                margin-right: 10px;
+            }
+
+            .social-share {
+                float: right;
+            }
+        }
+
+    }
+
+    // >= Table, < Destop
+    @media screen and (min-width: $screen-sm) and (max-width: ($screen-md - 1)) {
+        .navbar-brand {
+            padding-top: 0;
+            margin-top: 0;
+            margin-bottom: 60px;
         }
 
-        &.active > a {
-            border-bottom: 3px solid #77BB34;
+        .navbar-collapse {
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            width: 100%;
 
-            @media screen and (max-width: $screen-md) {
-                border: none;
-                background-color: #eee;
-                padding: 10px 30px 10px 0px;
-                border-right: 3px solid #77BB34;
+            ul.navbar-nav {
+                width: 100%;
+                float: none;
+            }
+
+            li > a {
+                margin: 0 10px;
+                padding: 0 0 10px 0;
+            }
+
+            li.dropdown {
+                position: absolute;
+                right: 0;
+                bottom: 0;
+
+                .dropdown-toggle {
+                    position: relative;
+                    width: 160px;
+                    margin: 0 5px 5px 0;
+                    padding: 0;
+                }
             }
         }
+    }
+    // >= Desktop
+    @media screen and (min-width: $screen-md) {
 
-        .dropdown-toggle {
-            margin-top: 50px;
+        li > a {
+            padding: 15px 0;
+            margin: 0 9px;
+        }
 
-            @media screen and (max-width: $screen-md) {
-                margin-top: 0px;
+        li.divider span{
+            padding: 12px 0;
+            line-height: 20px;
+        }
+
+        li.dropdown {
+            .dropdown-toggle {
+                padding: 6px 10px;
+                margin: 0;
             }
         }
     }
 
-    .contraste & {
-        .nav > li > a:hover,
-        .nav > li > a:focus {
-            color: #fff;
+    // > Desktop Large
+    @media screen and (min-width: $screen-lg) {
+        .navbar-brand {
+            margin-bottom: 30px;
         }
 
-        .active a {
-            border-bottom-color: #fff;
+        ul.navbar-nav {
+            position: absolute;
+            right: 0;
+            bottom: 0;
+        }
+
+        li.divider span{
+            padding: 12px 6px;
         }
     }
 }
@@ -116,4 +219,4 @@
         right: 210px;
         width: 100px;
     }
-}
\ No newline at end of file
+}
diff --git a/src/app/components/social-share/social-share.scss b/src/app/components/social-share/social-share.scss
index af61042..afe92f1 100644
--- a/src/app/components/social-share/social-share.scss
+++ b/src/app/components/social-share/social-share.scss
@@ -10,6 +10,7 @@
     &.list-inline {
         margin: 0;
     }
+
     li {
         float: left;
         padding: 0;
@@ -33,7 +34,7 @@
         background-color: #E0E0E0;
         border-radius: 5px;
 
-        @media screen and (max-width: $screen-xs) {
+        @media screen and (max-width: $screen-sm) {
             background-color: #fff;
         }
 
@@ -58,6 +59,11 @@
         right: 20px;
         border-width: 0 10px 10px;
         border-bottom-color: #E0E0E0;
+
+
+        @media screen and (max-width: $screen-sm) {
+            border-bottom-color: #fff;
+        }
     }
 
     @media screen and (max-width: $screen-xs) {
diff --git a/src/app/layout.scss b/src/app/layout.scss
index beaf610..340603e 100644
--- a/src/app/layout.scss
+++ b/src/app/layout.scss
@@ -24,28 +24,28 @@
   vertical-align: bottom;
 }
 
-@media (min-width: 480px) {
-  .row-xs-height {
+// @media (min-width: 480px) {
+.row-xs-height {
     display: table;
     table-layout: fixed;
     height: 100%;
     width: 100%;
-  }
-  .col-xs-height {
+}
+.col-xs-height {
     display: table-cell;
     float: none;
     height: 100%;
-  }
-  .col-xs-top {
+}
+.col-xs-top {
     vertical-align: top;
-  }
-  .col-xs-middle {
+}
+.col-xs-middle {
     vertical-align: middle;
-  }
-  .col-xs-bottom {
+}
+.col-xs-bottom {
     vertical-align: bottom;
-  }
 }
+// }
 
 @media (min-width: 768px) {
   .row-sm-height {
--
libgit2 0.21.2