lab2023#21 Continues

- Dropdown menu styles were done - Dock dropdown menus were created - Dropdown menu hover effect was added
frralf · Aug 8, 2013 · 9802e61 · 9802e61
1 parent 0806b7c
commit 9802e61
Show file tree

Hide file tree

Showing 7 changed files with 111 additions and 46 deletions.
diff --git a/source/assets/javascripts/application.js.coffee b/source/assets/javascripts/application.js.coffee
@@ -2,5 +2,19 @@
 #= require_tree
 
 $(document).ready ->
-  $('[data-toggle="tooltip"]').tooltip()
-  $('.dropdown-toggle').dropdown()
+
+  # Enable Tips & Popovers
+  $('[data-toggle=tooltip]').tooltip()
+  $('[data-toggle=popover]').popover()
+
+  # Eable Dropdowns
+  $('.dropdown-toggle').dropdown()
+  $('.dropdown.hover').hover (->
+    $(this).find('.dropdown-menu').stop(true, true).fadeIn()
+  ), ->
+    $(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
diff --git a/source/assets/stylesheets/_variables.css.sass b/source/assets/stylesheets/_variables.css.sass
@@ -8,11 +8,12 @@ $body-bg-primary: $silver
 $body-bg-secondary: $asbestos
 
 $wrapper-corner-width: 15px
-$sidebar-width: 85px
+$sidebar-width: 80px
 $sidebar-bg: $base-dark-color
 
 $dock-bg: $sidebar-bg
 $dock-active-icon-color: $base-color
+$dock-link-font-size: .8em
 
 $animation-duration: .4s
 

diff --git a/source/assets/stylesheets/application.css.sass b/source/assets/stylesheets/application.css.sass
@@ -3,6 +3,20 @@
 @import 'mixins'
 @import 'bootstrap'
 
+// Bootstrap overrides
+.navbar-nav > li > .dropdown-menu
+  margin-top: -10px
+  +border-radius(5px)
+  &:after
+    content: ''
+    display: inline-block
+    border-left: 6px solid transparent
+    border-right: 6px solid transparent
+    border-bottom: 6px solid $dropdown-bg
+    position: absolute
+    top: -6px
+    right: 20px
+
 
 body.main
   padding: 5px
@@ -38,33 +52,64 @@ body.main
   width: $sidebar-width
   z-index: 1
 
-  #dock
+  ul#dock
+    margin: 0 0 0 0
+    padding: 0
     width: $sidebar-width
     text-align: center
     color: $clouds
-    .launcher
+    border-right: 1px solid $dropdown-border
+    li.launcher
+      list-style: none
       margin-top: 15px
       cursor: pointer
-      i
+      > i
         display: block
         font-size: 2.5em
-      a
+        margin-bottom: -2px
+      > a
         text-decoration: none
         color: $clouds
-        font-size: .7em
+        font-size: $dock-link-font-size
+      ul.dropdown-menu
+        border-left-width: 0
+        text-align: left
+        position: absolute
+        margin-left: 82px
+        top: 80px
+        > li > a
+          padding: 5px 20px
+        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-left: -25px
+            width: 10px
+            height: 10px
+            background-color: $dropdown-border
+            content: " "
+            display: inline-block
+
       &:hover, &.active
-        i, a
-          +animate-property(font-size, $animation-duration, ease-in-out)
+        > i, > a
           +animate-property(color, $animation-duration, ease-in-out)
           color: $dock-active-icon-color
-      &.active
         &:before
-          content: ""
-          background: $dock-active-icon-color
+          +rotate(45deg)
+          content: ''
+          display: inline-block
+          width: 10px
+          height: 10px
+          background-color: white
           position: absolute
-          height: 55px
-          right: -2px
-          width: 4px
+          right: -5px
+          margin-top: 22px
 
 
 #content

diff --git a/source/index.html.haml b/source/index.html.haml
@@ -5,4 +5,4 @@
   .panel-heading
     %i.icon-beer.icon-large
     Hierapolis Rocks!
-  Lorem ipsum
+  Lorem ipsum
diff --git a/source/layouts/layout.haml b/source/layouts/layout.haml
@@ -34,28 +34,7 @@
     #outer-wrapper
 
       #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
+        = partial 'partials/dock'
 
       / Content
       #content

diff --git a/source/partials/_dock.haml b/source/partials/_dock.haml
@@ -0,0 +1,30 @@
+%ul#dock
+  %li.launcher.active
+    %i.icon-dashboard
+    %a{href: '#'} Dashboard
+  %li.launcher
+    %i.icon-user
+    %a{href: '#'} Users
+  %li.launcher.dropdown.hover
+    %i.icon-flag.dropdown-toggle{'data-toggle'=>'dropdown'}
+    %a{href: '#'} Reports
+    %ul.dropdown-menu
+      %li.dropdown-header Reports
+      %li
+        %a{:href => '#', :tabindex => '-1'} Action
+      %li
+        %a{:href => '#', :tabindex => '-1'} Another action
+      %li
+        %a{:href => '#', :tabindex => '-1'} Something else here
+  %li.launcher
+    %i.icon-camera-retro
+    %a{href: '#'} Photos
+  %li.launcher
+    %i.icon-bookmark
+    %a{href: '#'} Bookmarks
+  %li.launcher
+    %i.icon-cloud
+    %a{href: '#'} Backup
+  %li.launcher
+    %i.icon-bug
+    %a{href: '#'} Feedback
diff --git a/source/partials/_navbar.haml b/source/partials/_navbar.haml
@@ -7,17 +7,13 @@
       %a Hello
     %li
       %a World
-    %li.dropdown.user
+    %li.dropdown.hover.user
       %a.dropdown-toggle{'data-toggle' => 'dropdown', :href => '#'}
         %strong John DOE
         %b.caret
       %ul.dropdown-menu
         %li
-          %a{:href => '#'} Action
-        %li
-          %a{:href => '#'} Another action
-        %li
-          %a{:href => '#'} Something else here
+          %a{:href => '#'} Edit Profile
         %li.divider
         %li
-          %a{:href => '#'} Separated link
+          %a{:href => '#'} Sign Out