lab2023#21 Continues

- Dock position was done - Navbar position was done - Content position was done
lixiansky · Aug 6, 2013 · d029c03 · d029c03
1 parent fe87883
commit d029c03
Show file tree

Hide file tree

Showing 6 changed files with 89 additions and 47 deletions.
diff --git a/source/assets/javascripts/application.js.coffee b/source/assets/javascripts/application.js.coffee
@@ -1,3 +1,6 @@
+#= require bootstrap
 #= require_tree
 
-$(document).ready ->
+$(document).ready ->
+  $('[data-toggle="tooltip"]').tooltip()
+  $('.dropdown-toggle').dropdown()
diff --git a/source/assets/stylesheets/_color-swatches.css.sass b/source/assets/stylesheets/_color-swatches.css.sass
@@ -3,7 +3,7 @@
 $turquoise:     #1abc9c
 $green-sea:     #16a085
 
-$emerald:      #2ecc71
+$emerald:       #2ecc71
 $nephritis:     #27ae60
 
 $peter-river:   #3498db

diff --git a/source/assets/stylesheets/_variables.css.sass b/source/assets/stylesheets/_variables.css.sass
@@ -2,26 +2,32 @@
 
 // Globals
 $base-color: $turquoise
+$base-dark-color: $midnight-blue
 
 $body-bg-primary: $silver
 $body-bg-secondary: $asbestos
 
-$sidebar-width: 80px
-$sidebar-bg: $midnight-blue
+$wrapper-corner-width: 15px
+$sidebar-width: 85px
+$sidebar-bg: $base-dark-color
 
-
-$dock-bg: $midnight-blue
+$dock-bg: $sidebar-bg
 $dock-active-icon-color: $base-color
 
 $animation-duration: .4s
 
 // Bootstrap Overrides
 
+$brand-primary: $base-color
+
 $navbar-bg: rgba(0,0,0,0)
 $navbar-brand-color: $midnight-blue
 $navbar-brand-hover-color: $wet-asphalt
 
 $breadcrumb-bg: $clouds
 $panel-heading-bg: $clouds
 
-$link-color: $base-color
+$dropdown-bg: $sidebar-bg
+$dropdown-border: darken($dropdown-bg, 10) !default
+$dropdown-divider-bg: $dropdown-border
+$dropdown-link-color: $clouds !default
diff --git a/source/assets/stylesheets/application.css.sass b/source/assets/stylesheets/application.css.sass
@@ -3,24 +3,37 @@
 @import 'mixins'
 @import 'bootstrap'
 
+
 body.main
-  padding: 10px
+  padding: 5px
   background-color: $body-bg-primary
   //+background-image(linear-gradient(left, $body-bg-primary, $body-bg-secondary))
 
 .navbar-brand
   font-size: 1.6em
 
-#content, #sidebar
-  z-index: 1030
+#outer-wrapper
   position: absolute
-  top: 70px
+  top: 60px
   bottom: 0
   left: 20px
   right: 20px
+  border: 1px solid rgba(0,0,0, .2)
+  +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)
+
+#content, #sidebar
+  position: absolute
+  top: 0
+  bottom: 0
+  left: 0
+  right: 0
 
 #sidebar
-  +border-top-left-radius(10px)
+  +border-top-left-radius($wrapper-corner-width)
   background-color: $sidebar-bg
   width: $sidebar-width
 
@@ -43,12 +56,17 @@ body.main
           +animate-property(font-size, $animation-duration, ease-in-out)
           +animate-property(color, $animation-duration, ease-in-out)
           color: $dock-active-icon-color
+      &.active
+        &:after
+          display: none
+          // TODO content: "\f0da"
+
 
 #content
-  +border-top-right-radius(10px)
+  +border-top-right-radius($wrapper-corner-width)
   background-color: $body-bg
-  padding: 10px
-  left: $sidebar-width + 20
+  padding: 20px
+  left: $sidebar-width
 
 #toolbar
   position: relative

diff --git a/source/layouts/layout.haml b/source/layouts/layout.haml
@@ -31,34 +31,36 @@
     = partial 'partials/navbar'
     / Sidebar
 
-    #sidebar
-      #dock
-        .launcher.active
-          %i.icon-dashboard
-          %a{href: '#'} Dashboard
-        .launcher
-          %i.icon-user
-          %a{href: '#'} Users
-        .launcher
-          %i.icon-flag
-          %a{href: '#'} Reports
-        .launcher
-          %i.icon-camera-retro
-          %a{href: '#'} Photos
-        .launcher
-          %i.icon-bookmark
-          %a{href: '#'} Bookmarks
-        .launcher
-          %i.icon-cloud
-          %a{href: '#'} Backup
-        .launcher
-          %i.icon-bug
-          %a{href: '#'} Feedback
+    #outer-wrapper
 
-    / Content
-    #content
-      = partial 'partials/breadcrumb'
-      = yield
+      #sidebar
+        #dock
+          .launcher.active
+            %i.icon-dashboard
+            %a{href: '#'} Dashboard
+          .launcher
+            %i.icon-user
+            %a{href: '#'} Users
+          .launcher
+            %i.icon-flag
+            %a{href: '#'} Reports
+          .launcher
+            %i.icon-camera-retro
+            %a{href: '#'} Photos
+          .launcher
+            %i.icon-bookmark
+            %a{href: '#'} Bookmarks
+          .launcher
+            %i.icon-cloud
+            %a{href: '#'} Backup
+          .launcher
+            %i.icon-bug
+            %a{href: '#'} Feedback
+
+      / Content
+      #content
+        = partial 'partials/breadcrumb'
+        = yield
 
 
     / Javascripts

diff --git a/source/partials/_navbar.haml b/source/partials/_navbar.haml
@@ -1,10 +1,23 @@
 .navbar
-  %a.navbar-brand{:href => "#"}
+  %a.navbar-brand{:href => '#'}
     %i.icon-beer
     Hierapolis
   %ul.nav.navbar-nav.pull-right
-    %li.active
-      .navbar-text
+    %li
+      %a Hello
+    %li
+      %a World
+    %li.dropdown.user
+      %a.dropdown-toggle{'data-toggle' => 'dropdown', :href => '#'}
         %strong John DOE
-        =image_tag 'http://lorempixel.com/30/30/nature', class: 'img-circle'
-      %a{:href => "#"} Home
+        %b.caret
+      %ul.dropdown-menu
+        %li
+          %a{:href => '#'} Action
+        %li
+          %a{:href => '#'} Another action
+        %li
+          %a{:href => '#'} Something else here
+        %li.divider
+        %li
+          %a{:href => '#'} Separated link