From 9802e612e5fb4f216b9bbfed5937e9cd456f7b1a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tayfun=20O=CC=88zis=CC=A7=20ERI=CC=87KAN?= Date: Thu, 8 Aug 2013 05:39:57 +0300 Subject: [PATCH] #21 Continues - Dropdown menu styles were done - Dock dropdown menus were created - Dropdown menu hover effect was added --- .../assets/javascripts/application.js.coffee | 18 ++++- source/assets/stylesheets/_variables.css.sass | 3 +- .../assets/stylesheets/application.css.sass | 71 +++++++++++++++---- source/index.html.haml | 2 +- source/layouts/layout.haml | 23 +----- source/partials/_dock.haml | 30 ++++++++ source/partials/_navbar.haml | 10 +-- 7 files changed, 111 insertions(+), 46 deletions(-) create mode 100644 source/partials/_dock.haml diff --git a/source/assets/javascripts/application.js.coffee b/source/assets/javascripts/application.js.coffee index 330da73..5b96b17 100644 --- 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() \ No newline at end of file + + # 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 \ No newline at end of file diff --git a/source/assets/stylesheets/_variables.css.sass b/source/assets/stylesheets/_variables.css.sass index da1a357..2b32173 100755 --- 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 index 91df9b7..35b0bea 100755 --- 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 index 13d47c7..8dff105 100755 --- 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 \ No newline at end of file diff --git a/source/layouts/layout.haml b/source/layouts/layout.haml index c240347..8cfb08f 100755 --- 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 new file mode 100644 index 0000000..938d1c3 --- /dev/null +++ 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 \ No newline at end of file diff --git a/source/partials/_navbar.haml b/source/partials/_navbar.haml index 34260d8..60bbb9d 100644 --- 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