#21 Continues

- Primary toolbar was created - Some bootstrap overrides was done - Navbar icons was added - Navbar badges was added - User profile image was added - Dock text toggle was added
lab2023 · Aug 9, 2013 · a54209d · a54209d
1 parent 75bce46
commit a54209d
Show file tree

Hide file tree

Showing 8 changed files with 154 additions and 45 deletions.
diff --git a/source/assets/javascripts/application.js.coffee b/source/assets/javascripts/application.js.coffee
@@ -14,7 +14,15 @@ $(document).ready ->
   ), ->
     $(this).find('.dropdown-menu').stop(true, true).delay(100).fadeOut()
 
-
   # Dock dropdown fix
   $('#dock li.launcher').each ->
-    $(this).find('.dropdown-menu').css 'top', $(this).position().top + 24
+    $(this).find('.dropdown-menu').css 'top', $(this).position().top + 23
+
+  $('#toggle').click ->
+    $('#dock .launcher a').toggle()
+    $('#dock li.launcher').each ->
+      $(this).find('.dropdown-menu').css 'top', $(this).position().top + 23
+
+  # Enable toolbar tooltips
+  $('#toolbar [title]').tooltip
+    placement: 'bottom'
diff --git a/source/assets/stylesheets/_variables.css.sass b/source/assets/stylesheets/_variables.css.sass
@@ -3,6 +3,9 @@
 // Globals
 $base-color: $turquoise
 $base-dark-color: $midnight-blue
+$base-dark-color-alternative: $wet-asphalt
+
+$brand-font-size: 1.8em
 
 $body-bg-primary: $silver
 $body-bg-secondary: $asbestos
@@ -20,10 +23,11 @@ $animation-duration: .4s
 // Bootstrap Overrides
 
 $brand-primary: $base-color
+$brand-success: $brand-primary
 
 $navbar-bg: rgba(0,0,0,0)
-$navbar-brand-color: $midnight-blue
-$navbar-brand-hover-color: $wet-asphalt
+$navbar-brand-color: $base-dark-color
+$navbar-brand-hover-color: lighten($base-dark-color, 10)
 
 $breadcrumb-bg: $clouds
 $panel-heading-bg: $clouds

diff --git a/source/assets/stylesheets/application.css.sass b/source/assets/stylesheets/application.css.sass
@@ -4,8 +4,7 @@
 @import 'bootstrap'
 
 // Bootstrap overrides
-.navbar-nav > li > .dropdown-menu
-  margin-top: -10px
+.navbar-nav > li > .dropdown-menu // Add arrow and border radius from dropdowns
   +border-radius(5px)
   &:after
     content: ''
@@ -16,31 +15,45 @@
     position: absolute
     top: -6px
     right: 20px
-
+.panel // Remove box shadow from panels
+  +box-shadow(none)
 
 body.main
-  padding: 5px
+  padding: 15px
   background-color: $body-bg-primary
   //+background-image(linear-gradient(left, $body-bg-primary, $body-bg-secondary))
 
-.navbar-brand
-  font-size: 1.6em
-
 .sprite-image
-  background-image: url("../images/sprite.png")
+  background-image: url(../images/sprite.png)
+
+#navbar
+  .navbar-brand
+    font-size: $brand-font-size
+  .nav > li > a
+    padding: 15px 10px
+  .navbar-nav > li > .dropdown-menu
+    margin-top: -10px
+  li.dropdown.user img
+    margin: -2px 5px 0 5px
+    width: 20px
+    height: 20px
+    border: 1px solid
+    padding: 1px
+    background-color: rgba(white, .6)
 
 #outer-wrapper
   position: absolute
-  top: 60px
+  top: 70px
   bottom: 0
   left: 20px
   right: 20px
-  border: 1px solid rgba(0,0,0, .15)
+  border: 1px solid rgba(black, .15)
   +border-top-left-radius($wrapper-corner-width)
   +border-top-right-radius($wrapper-corner-width)
-  -webkit-box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.03)
-  -moz-box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.03)
-  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.03)
+  // TODO use compass
+  -webkit-box-shadow: 0 0 0 2px rgba(black, 0.03)
+  -moz-box-shadow: 0 0 0 2px rgba(black, 0.03)
+  box-shadow: 0 0 0 2px rgba(black, 0.03)
   overflow: hidden
 
 #content, #sidebar
@@ -54,6 +67,13 @@ body.main
   background-color: $sidebar-bg
   width: $sidebar-width
   z-index: 1
+  text-align: center
+
+  i#toggle
+    margin-top: 20px
+    display: inline-block
+    color: lighten($base-dark-color, 10)
+
   ul#dock
     margin: 0 0 0 0
     padding: 0
@@ -74,30 +94,35 @@ body.main
         color: $clouds
         font-size: $dock-link-font-size
       ul.dropdown-menu
+        width: 180px
         border-left-width: 0
         text-align: left
         position: absolute
-        margin-left: 82px
+        margin-left: 85px
         top: 80px
         > li > a
           padding: 5px 20px
+        a, li.dropdown-header
+          display: inline-block
+          width: 100%
+          white-space: nowrap
+          overflow: hidden
+          text-overflow: ellipsis
         li.dropdown-header
           +border-radius(4px)
-          background-color: $dropdown-border
           color: $dock-active-icon-color
           margin-top: -5px
           padding: 5px 20px
           &:before
             +rotate(45deg)
             position: absolute
-            margin-top: 5px
+            margin-top: 4px
             margin-left: -25px
             width: 10px
             height: 10px
-            background-color: $dropdown-border
+            background-color: $dock-bg
             content: " "
             display: inline-block
-
       &:hover, &.active
         > i, > a
           +animate-property(color, $animation-duration, ease-in-out)
@@ -113,19 +138,56 @@ body.main
           right: -5px
           margin-top: 22px
 
-
 #content
   background-color: $body-bg
   padding: 20px
   left: $sidebar-width
-  .breadcrumb
+
+  #breadcrumb
+    font-weight: 800
     +border-radius(0)
-    padding: 10px 20px
+    padding: 20px
     margin: -20px -20px 20px -20px
+    border-bottom: 1px solid #ddd
+
+  #toolbar
+    position: relative
+    top: -68px
+    float: right
+    /* TODO Choice
+      +border-top-left-radius(10px)
+      +border-top-right-radius(10px)
+      position: relative
+      top: -68px
+      float: right
+      background: white
+      height: 50px
+      padding: 8px
+      left: 9px
+      border-bottom: 0
+      border: 1px solid #ddd
+      border-bottom: 0
+    .btn-group
+      float: right
+      display: inline-block
+      button
+        height: 37px
+        @extend .btn-success
+        span.badge
+          background-color: $base-dark-color
+          padding: 3px 5px
+          font-size: .7em
+          font-weight: 200
+    .label
+      display: inline-block
+      float: right
+      margin-right: 5px
+      margin-top: 7px
+      padding: 5px
+      height: 23px
+      font-size: 0.9em
+      font-weight: 200
 
-#toolbar
-  position: relative
-  top: 10px
 
 #beaker
   @extend .sprite-image

diff --git a/source/layouts/layout.haml b/source/layouts/layout.haml
@@ -39,6 +39,7 @@
       / Content
       #content
         = partial 'partials/breadcrumb'
+        = partial 'partials/toolbar'
         = yield
 
 

diff --git a/source/partials/_breadcrumb.haml b/source/partials/_breadcrumb.haml
@@ -1,4 +1,4 @@
-%ul.breadcrumb
+%ul#breadcrumb.breadcrumb
   %li
-    %a{:href => "#"} Library
-  %li.active Data
+    %a{:href => "#"} Dashboard
+  %li.active Reports
diff --git a/source/partials/_dock.haml b/source/partials/_dock.haml
@@ -1,24 +1,26 @@
+%i#toggle.icon-align-justify.icon-large
+
 %ul#dock
   %li.launcher.active
     %i.icon-dashboard
     %a{href: '#'} Dashboard
   %li.launcher
     %i.icon-user
-    %a{href: '#'} Users
+    %a{href: '#'} Forms
   %li.launcher.dropdown.hover
-    %i.icon-flag.dropdown-toggle{'data-toggle'=>'dropdown'}
+    %i.icon-flag
     %a{href: '#'} Reports
     %ul.dropdown-menu
-      %li.dropdown-header Reports
+      %li.dropdown-header Launcher description
       %li
-        %a{:href => '#', :tabindex => '-1'} Action
+        %a{:href => '#'} Action
       %li
-        %a{:href => '#', :tabindex => '-1'} Another action
+        %a{:href => '#'} Another action
       %li
-        %a{:href => '#', :tabindex => '-1'} Something else here
+        %a{:href => '#'} Something else here
   %li.launcher
-    %i.icon-camera-retro
-    %a{href: '#'} Photos
+    %i.icon-picture
+    %a{href: '#'} Pictures
   %li.launcher
     %i.icon-bookmark
     %a{href: '#'} Bookmarks
@@ -29,4 +31,4 @@
     %i.icon-bug
     %a{href: '#'} Feedback
 
-#beaker
+#beaker{data: {toggle: 'tooltip'}, title: 'Made by lab2023'}
diff --git a/source/partials/_navbar.haml b/source/partials/_navbar.haml
@@ -1,15 +1,32 @@
-.navbar
+#navbar.navbar
   %a.navbar-brand{:href => '#'}
     %i.icon-beer
     Hierapolis
   %ul.nav.navbar-nav.pull-right
+    %li.dropdown
+      %a.dropdown-toggle{data: {toggle: 'dropdown'}, :href => '#'}
+        %i.icon-envelope
+        Messages
+        %span.badge 5
+        %b.caret
+      %ul.dropdown-menu
+        %li
+          %a{:href => '#'} New message
+        %li
+          %a{:href => '#'} Inbox
+        %li
+          %a{:href => '#'} Out box
+        %li
+          %a{:href => '#'} Trash
     %li
-      %a Hello
-    %li
-      %a World
-    %li.dropdown.hover.user
+      %a{href: '#'}
+        %i.icon-cog
+        Settings
+    %li.dropdown.user
       %a.dropdown-toggle{'data-toggle' => 'dropdown', :href => '#'}
+        %i.icon-user
         %strong John DOE
+        =image_tag 'http://placehold.it/20x20/777', class: 'img-rounded'
         %b.caret
       %ul.dropdown-menu
         %li

diff --git a/source/partials/_toolbar.haml b/source/partials/_toolbar.haml
@@ -0,0 +1,15 @@
+#toolbar
+  .btn-group
+    %button.btn{title: 'Building'}
+      %i.icon-building
+    %button.btn{title: 'Laptop'}
+      %i.icon-laptop
+    %button.btn{title: 'Calendar'}
+      %i.icon-calendar
+      %span.badge 3
+    %button.btn{title: 'Lemon'}
+      %i.icon-lemon
+  .label.label-danger
+    Danger
+  .label.label-info
+    Info