Commits

felipi committed 4ec4488

Responsive menu and affixed navbar

  • Participants
  • Parent commits 58b9dc2

Comments (0)

Files changed (3)

       <link type="text/css" rel="stylesheet" href="stylesheets/styles.css"/>
       <script src="javascripts/jquery.js"></script>
       <script src="javascripts/bootstrap/dropdown.js"></script>
+      <script src="javascripts/bootstrap/affix.js"></script>
     </head>
     <body>
 
     <div class="container-fluid portal_top_area">
-        <div class="row portal_top_bar">
-            <div class="col-md-3 col-xs-5 col-xs-offset-4 col-sm-offset-0 logo">
+        <div class="row portal_top_bar" data-spy="affix" data-offset-top="48" data-offset-bottom="0">
+            <div class="col-xs-2 visible-xs visible-sm coppla_top_menu">
+                <span class="coppla_menu_item selected">
+                    <span class="icon glyphicon glyphicon-home"></span>
+                    Home
+                </span>
+            </div>
+            <div class="col-md-3 col-xs-5 col-xs-offset-2 col-md-offset-0 logo">
                 <img src="images/logo-otics.png" />
             </div> 
-            <div class="col-md-7 col-xs-5 hidden-xs">
+            <div class="col-md-7 col-xs-5 hidden-xs hidden-sm">
                     <a class="btn btn-sm btn-default">
                         Novidades
                     </a>
                        Ajuda 
                     </a>
             </div>
-            <div class="col-md-1 col-xs-1 hidden-xs"><span class="glyphicon glyphicon-search"></span></div>
-            <div class="col-md-1 col-xs-3 hidden-xs">
+            <div class="col-md-1 col-xs-1 hidden-xs hidden-sm"><span class="glyphicon glyphicon-search"></span></div>
+            <div class="col-md-1 col-xs-3 hidden-xs hidden-sm">
                 <div class="btn-group">
                     <button type="button" class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown">
                         Capiroto<span class="caret"></span>
                     </ul>
                 </div>
             </div> 
-            <div class="col-xs-1 visible-xs col-xs-offset-2 portal_options">
+            <div class="col-xs-1 visible-xs visible-sm col-xs-offset-2 portal_options">
                 <span class="glyphicon glyphicon-align-justify"></span>
             </div>
         </div>
 
     <div class="container-fluid portal_contents coppla_container">
         <div class="row coppla_banner">
-            <div class="col-xs-5 col-md-2 logo">
+            <div class="col-xs-5 col-sm-2 logo">
                 <div class="logo_container"> <img src="images/fiona.jpg" /> </div>
             </div>  
-            <div class="col-xs-7 col-md-10 description">
+            <div class="col-xs-7 col-sm-10 description">
                 <h1>Crack - Curso Colaorativo de Atencao Basica</h1>
-                <p>When you put a bunch of really talented musicians together like this you get Dream Theater, so technical and well thought out and this song is such a masterpiece... it's a shame Portnoy left the band though, Mike Mangini is a top tier drummer and his style fits the band but I really liked what Mike Portnoy brought to the table in terms of their musical direction and lyrical themes.
+                <p class="hidden-xs">When you put a bunch of really talented musicians together like this you get Dream Theater, so technical and well thought out and this song is such a masterpiece... it's a shame Portnoy left the band though, Mike Mangini is a top tier drummer and his style fits the band but I really liked what Mike Portnoy brought to the table in terms of their musical direction and lyrical themes.
                 </p>
             </div>  
         </div>
         </div>
 
         <div class="row coppla_columns">
-            <div class="hidden-xs col-sm-2">
+            <div class="hidden-xs hidden-sm col-md-1">
                 <div class="coppla_col">
-                    <span class="copppla_menu_item">
-                        <span class="glyphicon glyphicon-home"></span>
+                    <span class="coppla_menu_item selected">
+                        <span class="icon glyphicon glyphicon-home"></span>
+                        Home
+                    </span>
+                    <span class="coppla_menu_item">
+                        <span class="icon glyphicon glyphicon-home"></span>
+                        Home
+                    </span>
+                    <span class="coppla_menu_item">
+                        <span class="icon glyphicon glyphicon-home"></span>
+                        Home
+                    </span>
+                    <span class="coppla_menu_item">
+                        <span class="icon glyphicon glyphicon-home"></span>
+                        Home
+                    </span>
+                    <span class="coppla_menu_item">
+                        <span class="icon glyphicon glyphicon-home"></span>
                         Home
                     </span>
                 </div>
             </div>
-            <div class="col-xs-12 col-sm-6">
+            <div class="col-xs-12 col-md-7">
                 <div class="coppla_col"> CONTENT </div>
             </div>
-            <div class="col-xs-12 col-sm-4">
+            <div class="col-xs-12 col-md-4">
                 <div class="coppla_col"> PORTLETS </div>
             </div>
         </div>

File sass/styles.scss

         min-height: $portal-top-height;
         background-color: $portal-top-bgcolor;
         border-bottom: 2px solid $portal-top-bordercolor;
+        top: -250px;
+        transition-duration: 0.5s;
         @extend %portal-top-font;
 
+        &.affix {
+            width: 100%;
+            top: 0;
+            z-index: 150;
+        }
+
+        .coppla_top_menu {
+            padding: 0 !important;
+        }
+        .coppla_menu_item {
+            display: block;
+            text-align: center;
+            text-transform: uppercase;
+            padding: 10px 0;
+            font-size: 11px;
+            color: #666666;
+            &.selected {
+                background-color: #464647;
+                color: #FFF;
+            }
+            .icon {
+                display: block;
+                padding-bottom: 6px;
+            }
+        }
+
         .logo img {
             max-height: $portal-top-height;
         }
         min-height: 100px;
         background-color: #FFF;
         border: 1px solid #CFCFCF;
-        border-radius: 15px;
+        border-radius: 8px;
+        overflow: hidden;
+        .coppla_menu_item {
+            display: block;
+            text-align: center;
+            text-transform: uppercase;
+            height: 80px;
+            padding: 10px 0;
+            font-size: 11px;
+            color: #666666;
+            &.selected {
+                background-color: #464647;
+                color: #FFF;
+            }
+            .icon {
+                display: block;
+                font-size: 42px;
+                padding-bottom: 6px;
+            }
+        }
     }
 }

File stylesheets/styles.css

   min-height: 46px;
   background-color: white;
   border-bottom: 2px solid #444444;
+  top: -250px;
+  transition-duration: 0.5s;
 }
-/* line 29, ../sass/styles.scss */
+/* line 31, ../sass/styles.scss */
+.portal_top_area .row.portal_top_bar.affix {
+  width: 100%;
+  top: 0;
+  z-index: 150;
+}
+/* line 37, ../sass/styles.scss */
+.portal_top_area .row.portal_top_bar .coppla_top_menu {
+  padding: 0 !important;
+}
+/* line 40, ../sass/styles.scss */
+.portal_top_area .row.portal_top_bar .coppla_menu_item {
+  display: block;
+  text-align: center;
+  text-transform: uppercase;
+  padding: 10px 0;
+  font-size: 11px;
+  color: #666666;
+}
+/* line 47, ../sass/styles.scss */
+.portal_top_area .row.portal_top_bar .coppla_menu_item.selected {
+  background-color: #464647;
+  color: #FFF;
+}
+/* line 51, ../sass/styles.scss */
+.portal_top_area .row.portal_top_bar .coppla_menu_item .icon {
+  display: block;
+  padding-bottom: 6px;
+}
+/* line 57, ../sass/styles.scss */
 .portal_top_area .row.portal_top_bar .logo img {
   max-height: 46px;
 }
-/* line 33, ../sass/styles.scss */
+/* line 61, ../sass/styles.scss */
 .portal_top_area .row.portal_top_bar > div:not(.logo) {
   padding-top: 16px;
 }
-/* line 37, ../sass/styles.scss */
+/* line 65, ../sass/styles.scss */
 .portal_top_area .row.portal_top_bar .btn {
   border: none;
   padding: 4px 10px;
   margin-top: -4px;
 }
-/* line 45, ../sass/styles.scss */
+/* line 73, ../sass/styles.scss */
 .portal_top_area .row.portal_banner {
   min-height: 80px;
   background-color: #efecd7;
 }
-/* line 48, ../sass/styles.scss */
+/* line 76, ../sass/styles.scss */
 .portal_top_area .row.portal_banner .portal_logo img {
   padding: 8px 28px;
   height: 77px;
 }
-/* line 53, ../sass/styles.scss */
+/* line 81, ../sass/styles.scss */
 .portal_top_area .row.portal_banner .portal_slogan h4 {
   font-size: 16px;
   padding-top: 12px;
   font-weight: 300;
   letter-spacing: 1px;
 }
-/* line 60, ../sass/styles.scss */
+/* line 88, ../sass/styles.scss */
 .portal_top_area .row.portal_banner .portal_slogan h6 {
   color: #c54340;
   font-weight: 300;
 }
-/* line 66, ../sass/styles.scss */
+/* line 94, ../sass/styles.scss */
 .portal_top_area .row.portal_breadcrumbs {
   height: 35px;
 }
-/* line 70, ../sass/styles.scss */
+/* line 98, ../sass/styles.scss */
 .portal_top_area .breadcrumb {
   text-transform: lowercase;
   font-size: 15px;
   line-height: 35px;
   margin-bottom: 0;
 }
-/* line 75, ../sass/styles.scss */
+/* line 103, ../sass/styles.scss */
 .portal_top_area .breadcrumb a {
   color: #999999;
 }
 
-/* line 81, ../sass/styles.scss */
+/* line 109, ../sass/styles.scss */
 .coppla_container {
   background-color: #e3e3e3;
   -webkit-border-radius: 5px;
   margin: 0 28px;
 }
 
-/* line 88, ../sass/styles.scss */
+/* line 116, ../sass/styles.scss */
 .coppla_banner .logo .logo_container {
   width: 100px;
   height: 100px;
   overflow: hidden;
   margin: 12px;
 }
-/* line 96, ../sass/styles.scss */
+/* line 124, ../sass/styles.scss */
 .coppla_banner .description h1 {
   font-size: 28px;
   font-weight: 600;
   color: #444444;
   margin-top: 14px;
 }
-/* line 102, ../sass/styles.scss */
+/* line 130, ../sass/styles.scss */
 .coppla_banner .description p {
   font-weight: 300;
   font-size: 13px;
   line-height: 15px;
 }
 
-/* line 110, ../sass/styles.scss */
+/* line 138, ../sass/styles.scss */
 .coppla_banner_info {
   font-size: 12px;
 }
-/* line 112, ../sass/styles.scss */
+/* line 140, ../sass/styles.scss */
 .coppla_banner_info .glyphicon {
   padding: 0 4px;
   font-size: 18px;
 }
 
-/* line 119, ../sass/styles.scss */
+/* line 147, ../sass/styles.scss */
 .coppla_columns .coppla_col {
   min-height: 100px;
   background-color: #FFF;
   border: 1px solid #CFCFCF;
-  border-radius: 15px;
+  border-radius: 8px;
+  overflow: hidden;
+}
+/* line 153, ../sass/styles.scss */
+.coppla_columns .coppla_col .coppla_menu_item {
+  display: block;
+  text-align: center;
+  text-transform: uppercase;
+  height: 80px;
+  padding: 10px 0;
+  font-size: 11px;
+  color: #666666;
+}
+/* line 161, ../sass/styles.scss */
+.coppla_columns .coppla_col .coppla_menu_item.selected {
+  background-color: #464647;
+  color: #FFF;
+}
+/* line 165, ../sass/styles.scss */
+.coppla_columns .coppla_col .coppla_menu_item .icon {
+  display: block;
+  font-size: 42px;
+  padding-bottom: 6px;
 }