From d029c03daafc84fa5faceaa1110688d04836d99f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tayfun=20O=CC=88zis=CC=A7=20ERI=CC=87KAN?= Date: Tue, 6 Aug 2013 04:23:25 +0300 Subject: [PATCH] #21 Continues - Dock position was done - Navbar position was done - Content position was done --- .../assets/javascripts/application.js.coffee | 5 +- .../stylesheets/_color-swatches.css.sass | 2 +- source/assets/stylesheets/_variables.css.sass | 16 ++++-- .../assets/stylesheets/application.css.sass | 34 ++++++++--- source/layouts/layout.haml | 56 ++++++++++--------- source/partials/_navbar.haml | 23 ++++++-- 6 files changed, 89 insertions(+), 47 deletions(-) diff --git a/source/assets/javascripts/application.js.coffee b/source/assets/javascripts/application.js.coffee index ec2bdfb..330da73 100644 --- a/source/assets/javascripts/application.js.coffee +++ b/source/assets/javascripts/application.js.coffee @@ -1,3 +1,6 @@ +#= require bootstrap #= require_tree -$(document).ready -> \ No newline at end of file +$(document).ready -> + $('[data-toggle="tooltip"]').tooltip() + $('.dropdown-toggle').dropdown() \ No newline at end of file diff --git a/source/assets/stylesheets/_color-swatches.css.sass b/source/assets/stylesheets/_color-swatches.css.sass index fb20d2d..d2add2e 100755 --- 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 index d864147..da1a357 100755 --- a/source/assets/stylesheets/_variables.css.sass +++ b/source/assets/stylesheets/_variables.css.sass @@ -2,21 +2,24 @@ // 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 @@ -24,4 +27,7 @@ $navbar-brand-hover-color: $wet-asphalt $breadcrumb-bg: $clouds $panel-heading-bg: $clouds -$link-color: $base-color \ No newline at end of file +$dropdown-bg: $sidebar-bg +$dropdown-border: darken($dropdown-bg, 10) !default +$dropdown-divider-bg: $dropdown-border +$dropdown-link-color: $clouds !default \ No newline at end of file diff --git a/source/assets/stylesheets/application.css.sass b/source/assets/stylesheets/application.css.sass index 4142d96..fe19c2b 100755 --- 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 index ee63e71..c240347 100755 --- 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 index 61d3134..34260d8 100644 --- 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