From fe8788355afda96dcf984b331eeaf337aea7c666 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tayfun=20O=CC=88zis=CC=A7=20ERI=CC=87KAN?= Date: Sun, 4 Aug 2013 17:43:32 +0300 Subject: [PATCH 01/23] #21 Continues - Prepare layout - Prepare color swatches - Prepare variables --- .../stylesheets/_color-swatches.css.sass | 31 +++++++++++ source/assets/stylesheets/_mixins.css.sass | 4 ++ source/assets/stylesheets/_variables.css.sass | 27 ++++++++++ .../assets/stylesheets/application.css.sass | 53 ++++++++++++++++++- source/index.html.haml | 8 +-- source/layouts/layout.haml | 37 +++++++++++-- source/partials/_navbar.haml | 8 ++- 7 files changed, 160 insertions(+), 8 deletions(-) create mode 100755 source/assets/stylesheets/_color-swatches.css.sass diff --git a/source/assets/stylesheets/_color-swatches.css.sass b/source/assets/stylesheets/_color-swatches.css.sass new file mode 100755 index 0000000..fb20d2d --- /dev/null +++ b/source/assets/stylesheets/_color-swatches.css.sass @@ -0,0 +1,31 @@ +// Flat Color Swatches by Flat-ui (http://designmodo.github.io/Flat-UI/) + +$turquoise: #1abc9c +$green-sea: #16a085 + +$emerald: #2ecc71 +$nephritis: #27ae60 + +$peter-river: #3498db +$belize-hole: #2980b9 + +$amethyst: #9b59b6 +$wisteria: #8e44ad + +$wet-asphalt: #34495e +$midnight-blue: #2c3e50 + +$sun-flower: #f1c40f +$orange: #f39c12 + +$carrot: #e67e22 +$pumpkin: #d35400 + +$alizarin: #e74c3c +$pomegranate: #c0392b + +$clouds: #ecf0f1 +$silver: #bdc3c7 + +$concrete: #95a5a6 +$asbestos: #7f8c8d \ No newline at end of file diff --git a/source/assets/stylesheets/_mixins.css.sass b/source/assets/stylesheets/_mixins.css.sass index e69de29..e0e11ae 100755 --- a/source/assets/stylesheets/_mixins.css.sass +++ b/source/assets/stylesheets/_mixins.css.sass @@ -0,0 +1,4 @@ +@mixin animate-property($property, $duration, $timing) + +transition-property($property) + +transition-duration($duration) + +transition-timing-function($timing) \ No newline at end of file diff --git a/source/assets/stylesheets/_variables.css.sass b/source/assets/stylesheets/_variables.css.sass index e69de29..d864147 100755 --- a/source/assets/stylesheets/_variables.css.sass +++ b/source/assets/stylesheets/_variables.css.sass @@ -0,0 +1,27 @@ +@import 'color-swatches' + +// Globals +$base-color: $turquoise + +$body-bg-primary: $silver +$body-bg-secondary: $asbestos + +$sidebar-width: 80px +$sidebar-bg: $midnight-blue + + +$dock-bg: $midnight-blue +$dock-active-icon-color: $base-color + +$animation-duration: .4s + +// Bootstrap Overrides + +$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 \ No newline at end of file diff --git a/source/assets/stylesheets/application.css.sass b/source/assets/stylesheets/application.css.sass index 89a44ad..4142d96 100755 --- a/source/assets/stylesheets/application.css.sass +++ b/source/assets/stylesheets/application.css.sass @@ -1,4 +1,55 @@ @import 'compass' @import 'variables' @import 'mixins' -@import 'bootstrap' \ No newline at end of file +@import 'bootstrap' + +body.main + padding: 10px + 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 + position: absolute + top: 70px + bottom: 0 + left: 20px + right: 20px + +#sidebar + +border-top-left-radius(10px) + background-color: $sidebar-bg + width: $sidebar-width + + #dock + width: $sidebar-width + text-align: center + color: $clouds + .launcher + margin-top: 10px + cursor: pointer + i + display: block + font-size: 2.5em + a + text-decoration: none + color: $clouds + font-size: .7em + &:hover, &.active + i, a + +animate-property(font-size, $animation-duration, ease-in-out) + +animate-property(color, $animation-duration, ease-in-out) + color: $dock-active-icon-color + +#content + +border-top-right-radius(10px) + background-color: $body-bg + padding: 10px + left: $sidebar-width + 20 + +#toolbar + position: relative + top: 10px \ No newline at end of file diff --git a/source/index.html.haml b/source/index.html.haml index 03b3d35..13d47c7 100755 --- a/source/index.html.haml +++ b/source/index.html.haml @@ -1,6 +1,8 @@ - @title = '## HIERAPOLIS ##' - @body_class = 'main' -%h1 - %i.icon-beer.icon-large - Hierapolis Rocks! +.panel + .panel-heading + %i.icon-beer.icon-large + Hierapolis Rocks! + Lorem ipsum diff --git a/source/layouts/layout.haml b/source/layouts/layout.haml index 1bb86d9..ee63e71 100755 --- a/source/layouts/layout.haml +++ b/source/layouts/layout.haml @@ -26,9 +26,41 @@ = yield_content :head %body{class: @body_class || 'page'} - .container{ role: 'main' } + + / Navbar + = 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 + + / Content + #content + = partial 'partials/breadcrumb' = yield + / Javascripts = javascript_include_tag '//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js', '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js', @@ -36,5 +68,4 @@ 'application' / Google Analytics - = partial 'partials/trackers' - + = partial 'partials/trackers' \ No newline at end of file diff --git a/source/partials/_navbar.haml b/source/partials/_navbar.haml index b338037..61d3134 100644 --- a/source/partials/_navbar.haml +++ b/source/partials/_navbar.haml @@ -1,4 +1,10 @@ .navbar %a.navbar-brand{:href => "#"} %i.icon-beer - Hierapolis \ No newline at end of file + Hierapolis + %ul.nav.navbar-nav.pull-right + %li.active + .navbar-text + %strong John DOE + =image_tag 'http://lorempixel.com/30/30/nature', class: 'img-circle' + %a{:href => "#"} Home 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 02/23] #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 From 0806b7ccd533db5edaa0fbab50529a56e7f5d1b6 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:55:09 +0300 Subject: [PATCH 03/23] #21 Continues - Active item's highlight was added to the dock. --- source/assets/stylesheets/application.css.sass | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/source/assets/stylesheets/application.css.sass b/source/assets/stylesheets/application.css.sass index fe19c2b..91df9b7 100755 --- a/source/assets/stylesheets/application.css.sass +++ b/source/assets/stylesheets/application.css.sass @@ -24,6 +24,7 @@ body.main -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) + overflow: hidden #content, #sidebar position: absolute @@ -33,16 +34,16 @@ body.main right: 0 #sidebar - +border-top-left-radius($wrapper-corner-width) background-color: $sidebar-bg width: $sidebar-width + z-index: 1 #dock width: $sidebar-width text-align: center color: $clouds .launcher - margin-top: 10px + margin-top: 15px cursor: pointer i display: block @@ -57,13 +58,16 @@ body.main +animate-property(color, $animation-duration, ease-in-out) color: $dock-active-icon-color &.active - &:after - display: none - // TODO content: "\f0da" + &:before + content: "" + background: $dock-active-icon-color + position: absolute + height: 55px + right: -2px + width: 4px #content - +border-top-right-radius($wrapper-corner-width) background-color: $body-bg padding: 20px left: $sidebar-width 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 04/23] #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 From 75bce4652bb13263f5d7f60fdbde267ab80aea12 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 22:52:31 +0300 Subject: [PATCH 05/23] #21 Continues - Beaker added to the bottom of the dock. - Breadcrumb position was fixed --- source/assets/images/sprite.png | Bin 0 -> 2208 bytes .../assets/stylesheets/application.css.sass | 23 +++++++++++++++--- source/partials/_breadcrumb.haml | 2 -- source/partials/_dock.haml | 4 ++- 4 files changed, 23 insertions(+), 6 deletions(-) create mode 100644 source/assets/images/sprite.png diff --git a/source/assets/images/sprite.png b/source/assets/images/sprite.png new file mode 100644 index 0000000000000000000000000000000000000000..fad2c4ade8800dc737b285a1456ef2d7e9efb9bf GIT binary patch literal 2208 zcmaJ@Yg7~08XaT-!UCyc3-U4s>N_NpNFhNWK#0qE_z2#KioHKBch;IY=R0Tb{q66Z z@5k(q<7{$q@^k_Kz$IoggNu!?uy^A^d+fU<<@DdNVHp~oh{hwCsGKK-fCvGS0pVg` zo)F?fJVD-$PG}N}+fqCxNfb=2Hdu@G#s)1q~B`A(V$xz&TgX?i*5=bGEC`6D#0Le5G zl?DdlK0J6Vn^cfV<1&~Za$!*@J_|)9G$K(hmj}ox0fCCvfZ z?Eepi;g4t;%7y;&`#*(c33(ET$c1D`u9S~mT&ABjm4p^0g?K0;O+b*Gxl@eGLQq7O zg-CEwQMlD?9$zH3#%taY*lb#iScdY%d?A5AWeXP@ueTxMjJ0B8b?JmXoy4d_@6ad({#V{fg z6a&v{Iu9poUD~!KhO*|k4a06XVJ)Y`i9=|Fv%Qo3w|lpIXSYLGDt_bceNUWH{fYa^ zCHwxx<3+MOyh|2;MK`27dw%|J+as-0AvaF9upBn$PLGet*Xh!ps~_IIH8J9!Rugh8 zAE{gIbiU+M{cU}$k!obw79~rz6~ig(31ykA1C9i`YV_=-U+Pb(^v~oO zK3f^S!pE->Fl3{^Xbbo%A#!1FGvB=T4l!ljMEN!5bxWq`J99Z&{l|h4*j%iS=b8Sd zZq{>+{WG)CBCkhw9lG(M)mL}yj$3f2s)5sXqx1F2aZ@ok=+{*5{CKkB&?l)yH%kl8 zqH?rPzWHsdZ293JM?d;3-<+qnH|{09p47Wnu6=0w{wb3=z1-&B7(fnu)kwN3zptXg zO2KpCsiR*SW~xs0EL=mkWC_WpO~zbfw&;rbNn5u8Jq&cplYnNFP-uO4K^>N;Vl<&nBLYE=GG`V+nRcOJ=+rZ@@Wm7abo676b+6ww} zb;-(9&&wMghgFQL-A_ftE-I_<+ttvRs!i3zX&A`?DZV|EI_NKwdzUr zR{cvo)40IsYW&pb&AKIVa9l&zG7-j~NL!*|e4wZDP`kWapAVFY?yLNxjYmK#y~@)E zAklzy6!>)%DC)BT>TCg~!~6O1^9M~(eRurL;d7FUIlmOD=#*LbOg zvzFLMC(M`Sr2TNknEYI~YkY{dp|z)Am{7CMkd>2T)1e>L+THCzruntuW!nZjqgGgc zNV}lGHEz?CTv{+9M8i`uq3Q>endgg#iRG0slS#C1GhC8@nc<34+c0uYrf%zxD|Rn3o{OOjL959y6T{5Q&4?bSOeNKKtDS1@<(O8nJ0L$BGNf7 ztuEY`FH7T2h4cwaPj+u2q|_GBH9g!FF2J3x(Vse169rYMVrl=)){`FfI%19RY>7Rv zJrnKeNY%}9s?h&z8@4z@DjZjt#4|}Fe&+fR^9H-$Z32hS>&fCUb?z7w$ z-dBac^wQft?t1#fx5bxry+OH6Xz!c8L`nRB-r%_*Ma;GR@tDf;-sAFu;z0_hKAR)&*)bX%3nKsouK6w7YmLaduz1@1K za?v@UXpxuYnn#F^U=W|}P=EO|vng!bTY}OR=;hVr%Ljr^dhgE(Tl~611rG@y?IYBL zI{-dkXxtm0Is0+$RW}r91Gy1EUyooKz11ytwO_7cg8m1zfAl6+u zwpaI>`(u?h3{R*zqjUS=O$y6R%8qpHrOvvi1Mu "#"} Library %li.active Data \ No newline at end of file diff --git a/source/partials/_dock.haml b/source/partials/_dock.haml index 938d1c3..1bfe20c 100644 --- a/source/partials/_dock.haml +++ b/source/partials/_dock.haml @@ -27,4 +27,6 @@ %a{href: '#'} Backup %li.launcher %i.icon-bug - %a{href: '#'} Feedback \ No newline at end of file + %a{href: '#'} Feedback + +#beaker \ No newline at end of file From a54209d2dc333f60b7af417f2fee29cf6050f664 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tayfun=20O=CC=88zis=CC=A7=20ERI=CC=87KAN?= Date: Fri, 9 Aug 2013 05:11:28 +0300 Subject: [PATCH 06/23] #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 --- .../assets/javascripts/application.js.coffee | 12 +- source/assets/stylesheets/_variables.css.sass | 8 +- .../assets/stylesheets/application.css.sass | 110 ++++++++++++++---- source/layouts/layout.haml | 1 + source/partials/_breadcrumb.haml | 6 +- source/partials/_dock.haml | 20 ++-- source/partials/_navbar.haml | 27 ++++- source/partials/_toolbar.haml | 15 +++ 8 files changed, 154 insertions(+), 45 deletions(-) create mode 100755 source/partials/_toolbar.haml diff --git a/source/assets/javascripts/application.js.coffee b/source/assets/javascripts/application.js.coffee index 5b96b17..80707ff 100644 --- 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 \ No newline at end of file + $(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 index 2b32173..5fa3317 100755 --- 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 index c2280bf..6affd67 100755 --- 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 index 8cfb08f..697030c 100755 --- 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 index 17152ab..ecab8dc 100755 --- 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 \ No newline at end of file + %a{:href => "#"} Dashboard + %li.active Reports \ No newline at end of file diff --git a/source/partials/_dock.haml b/source/partials/_dock.haml index 1bfe20c..bed9ca4 100644 --- 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 \ No newline at end of file +#beaker{data: {toggle: 'tooltip'}, title: 'Made by lab2023'} \ No newline at end of file diff --git a/source/partials/_navbar.haml b/source/partials/_navbar.haml index 60bbb9d..af4f6fb 100644 --- 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 new file mode 100755 index 0000000..8c06b8e --- /dev/null +++ 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 \ No newline at end of file From b7949e165b92a80abf8441e3dcac15ab97df9e79 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tayfun=20O=CC=88zis=CC=A7=20ERI=CC=87KAN?= Date: Sat, 10 Aug 2013 01:48:57 +0300 Subject: [PATCH 07/23] #26 Panel icon, title and toolbar was added --- .../assets/javascripts/application.js.coffee | 6 +-- source/assets/stylesheets/_variables.css.sass | 1 - .../assets/stylesheets/application.css.sass | 53 ++++++++++++++++--- source/index.html.haml | 24 +++++++-- source/partials/_breadcrumb.haml | 3 +- source/partials/_dock.haml | 14 ++--- source/partials/_navbar.haml | 2 +- source/partials/_toolbar.haml | 8 +-- 8 files changed, 83 insertions(+), 28 deletions(-) diff --git a/source/assets/javascripts/application.js.coffee b/source/assets/javascripts/application.js.coffee index 80707ff..3163250 100644 --- a/source/assets/javascripts/application.js.coffee +++ b/source/assets/javascripts/application.js.coffee @@ -16,13 +16,13 @@ $(document).ready -> # Dock dropdown fix $('#dock li.launcher').each -> - $(this).find('.dropdown-menu').css 'top', $(this).position().top + 23 + $(this).find('.dropdown-menu').css 'top', $(this).position().top + 33 $('#toggle').click -> $('#dock .launcher a').toggle() $('#dock li.launcher').each -> - $(this).find('.dropdown-menu').css 'top', $(this).position().top + 23 + $(this).find('.dropdown-menu').css 'top', $(this).position().top + 33 # Enable toolbar tooltips - $('#toolbar [title]').tooltip + $('[data-toggle=toolbar-tooltip]').tooltip placement: 'bottom' diff --git a/source/assets/stylesheets/_variables.css.sass b/source/assets/stylesheets/_variables.css.sass index 5fa3317..2789d4a 100755 --- a/source/assets/stylesheets/_variables.css.sass +++ b/source/assets/stylesheets/_variables.css.sass @@ -21,7 +21,6 @@ $dock-link-font-size: .8em $animation-duration: .4s // Bootstrap Overrides - $brand-primary: $base-color $brand-success: $brand-primary diff --git a/source/assets/stylesheets/application.css.sass b/source/assets/stylesheets/application.css.sass index 6affd67..ad01aa0 100755 --- a/source/assets/stylesheets/application.css.sass +++ b/source/assets/stylesheets/application.css.sass @@ -18,6 +18,41 @@ .panel // Remove box shadow from panels +box-shadow(none) + // Panel heading styles + .panel-heading + color: $base-dark-color + i[class*='icon-'] + margin-right: 10px + .panel-tools + float: right + margin-top: -48px + margin-right: -8px + .btn-group + margin-top: -6px + .btn-group, .label, .badge + float: right + display: inline-block + .btn + padding: 8px 6px + font-weight: 200 + font-size: 1em + color: $base-dark-color + &:hover + color: $base-color + &:active, &:focus + color: darken($base-color, 10) + +box-shadow(none) + span.badge + font-size: .7em + padding: 2px 4px + .label, .badge + margin-right: 5px + margin-top: 4px + padding-bottom: 4px + font-weight: 200 + .panel-body + clear: both + body.main padding: 15px background-color: $body-bg-primary @@ -32,7 +67,7 @@ body.main .nav > li > a padding: 15px 10px .navbar-nav > li > .dropdown-menu - margin-top: -10px + margin-top: -5px li.dropdown.user img margin: -2px 5px 0 5px width: 20px @@ -75,7 +110,7 @@ body.main color: lighten($base-dark-color, 10) ul#dock - margin: 0 0 0 0 + margin: -15px 0 0 0 padding: 0 width: $sidebar-width text-align: center @@ -83,13 +118,18 @@ body.main border-right: 1px solid $dropdown-border li.launcher list-style: none - margin-top: 15px + margin-top: 25px cursor: pointer > i display: block font-size: 2.5em margin-bottom: -2px > a + height: 36px + display: block + position: relative + padding-top: 36px + margin-top: -36px text-decoration: none color: $clouds font-size: $dock-link-font-size @@ -167,10 +207,11 @@ body.main border-bottom: 0 border: 1px solid #ddd border-bottom: 0 - .btn-group + .btn-group, .label, form float: right display: inline-block - button + .btn-group + .btn height: 37px @extend .btn-success span.badge @@ -179,8 +220,6 @@ body.main font-size: .7em font-weight: 200 .label - display: inline-block - float: right margin-right: 5px margin-top: 7px padding: 5px diff --git a/source/index.html.haml b/source/index.html.haml index 8dff105..6226ea8 100755 --- a/source/index.html.haml +++ b/source/index.html.haml @@ -1,8 +1,26 @@ -- @title = '## HIERAPOLIS ##' -- @body_class = 'main' +- page 'Dashboard', 'dashboard' .panel .panel-heading %i.icon-beer.icon-large Hierapolis Rocks! - Lorem ipsum \ No newline at end of file + .panel-tools + .btn-group + %a.btn{href: '#'} + %i.icon-wrench + Settings + %a.btn{href: '#'} + %i.icon-filter + Filters + %a.btn{href: '#', data: {toggle: 'toolbar-tooltip'}, title: 'Reload'} + %i.icon-refresh + %a.btn{href: '#', data: {toggle: 'toolbar-tooltip'}, title: 'Toggle'} + %i.icon-chevron-down + .badge 3 record + .panel-body + Lorem ipsum + + %a.btn.btn-default{:href => "#"} Link + %button.btn.btn-default{:type => "submit"} Button + %input.btn.btn-default{:type => "button", :value => "Input"}/ + %input.btn.btn-default{:type => "submit", :value => "Submit"}/ \ No newline at end of file diff --git a/source/partials/_breadcrumb.haml b/source/partials/_breadcrumb.haml index ecab8dc..bc520d2 100755 --- a/source/partials/_breadcrumb.haml +++ b/source/partials/_breadcrumb.haml @@ -1,4 +1,3 @@ %ul#breadcrumb.breadcrumb - %li - %a{:href => "#"} Dashboard + %li Dashboard %li.active Reports \ No newline at end of file diff --git a/source/partials/_dock.haml b/source/partials/_dock.haml index bed9ca4..dd85f05 100644 --- a/source/partials/_dock.haml +++ b/source/partials/_dock.haml @@ -1,12 +1,15 @@ %i#toggle.icon-align-justify.icon-large %ul#dock - %li.launcher.active + %li.launcher{launcher_active('dashboard')} %i.icon-dashboard - %a{href: '#'} Dashboard + =link_to 'Dashboard', 'index.html' + %li.launcher{launcher_active('forms')} + %i.icon-file-text-alt + =link_to 'Forms', 'forms.html' %li.launcher - %i.icon-user - %a{href: '#'} Forms + %i.icon-table + %a{href: '#'} Tables %li.launcher.dropdown.hover %i.icon-flag %a{href: '#'} Reports @@ -18,9 +21,6 @@ %a{:href => '#'} Another action %li %a{:href => '#'} Something else here - %li.launcher - %i.icon-picture - %a{href: '#'} Pictures %li.launcher %i.icon-bookmark %a{href: '#'} Bookmarks diff --git a/source/partials/_navbar.haml b/source/partials/_navbar.haml index af4f6fb..1de2cab 100644 --- a/source/partials/_navbar.haml +++ b/source/partials/_navbar.haml @@ -26,7 +26,7 @@ %a.dropdown-toggle{'data-toggle' => 'dropdown', :href => '#'} %i.icon-user %strong John DOE - =image_tag 'http://placehold.it/20x20/777', class: 'img-rounded' + =image_tag lorem.image('300x400', color: '#777'), class: 'img-rounded' %b.caret %ul.dropdown-menu %li diff --git a/source/partials/_toolbar.haml b/source/partials/_toolbar.haml index 8c06b8e..408dc12 100755 --- a/source/partials/_toolbar.haml +++ b/source/partials/_toolbar.haml @@ -1,13 +1,13 @@ #toolbar .btn-group - %button.btn{title: 'Building'} + %a.btn{href: '#', data: {toggle: 'toolbar-tooltip'}, title: 'Building'} %i.icon-building - %button.btn{title: 'Laptop'} + %a.btn{href: '#', data: {toggle: 'toolbar-tooltip'}, title: 'Laptop'} %i.icon-laptop - %button.btn{title: 'Calendar'} + %a.btn{href: '#', data: {toggle: 'toolbar-tooltip'}, title: 'Calendar'} %i.icon-calendar %span.badge 3 - %button.btn{title: 'Lemon'} + %a.btn{href: '#', data: {toggle: 'toolbar-tooltip'}, title: 'Lemon'} %i.icon-lemon .label.label-danger Danger From c84da35eb80a638bb63ab09419dd652f85d89267 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tayfun=20O=CC=88zis=CC=A7=20ERI=CC=87KAN?= Date: Sat, 10 Aug 2013 01:50:29 +0300 Subject: [PATCH 08/23] #27 Custom view helpers was created --- helpers/view_helpers.rb | 12 ++++++++++++ source/layouts/layout.haml | 4 ++-- 2 files changed, 14 insertions(+), 2 deletions(-) create mode 100644 helpers/view_helpers.rb diff --git a/helpers/view_helpers.rb b/helpers/view_helpers.rb new file mode 100644 index 0000000..e46a9a4 --- /dev/null +++ b/helpers/view_helpers.rb @@ -0,0 +1,12 @@ +module ViewHelpers + def page(title, id) + @page_id = id + content_for :title do + title + end + end + + def launcher_active(page) + @page_id == page ? {class:'active'} : {} + end +end \ No newline at end of file diff --git a/source/layouts/layout.haml b/source/layouts/layout.haml index 697030c..28dc5c9 100755 --- a/source/layouts/layout.haml +++ b/source/layouts/layout.haml @@ -4,7 +4,7 @@ /[if lt IE 10] %html{lang: 'en', class: 'no-js'} %head - %title= @title || 'Hierapolis' + %title= yield_content :title %meta(http-equiv="content-type" content="text/html" charset="utf-8") %meta(http-equiv="x-ua-compatible" content="ie=edge,chrome=1") %meta(name="description" content="") @@ -25,7 +25,7 @@ '//netdna.bootstrapcdn.com/font-awesome/3.2.0/css/font-awesome.min.css' = yield_content :head - %body{class: @body_class || 'page'} + %body.main{class: @page || 'page'} / Navbar = partial 'partials/navbar' From 4edfef7894d3331d03b78831ef50075c92749435 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tayfun=20O=CC=88zis=CC=A7=20ERI=CC=87KAN?= Date: Sat, 10 Aug 2013 02:39:37 +0300 Subject: [PATCH 09/23] #28 Create forms page - Default and horizontal forms were added - Bootstrap overrides sass file was added --- .../stylesheets/_bootstrap_overrides.css.sass | 61 +++++++++++++++++++ .../assets/stylesheets/application.css.sass | 54 +--------------- source/forms.html.haml | 46 ++++++++++++++ 3 files changed, 109 insertions(+), 52 deletions(-) create mode 100755 source/assets/stylesheets/_bootstrap_overrides.css.sass create mode 100755 source/forms.html.haml diff --git a/source/assets/stylesheets/_bootstrap_overrides.css.sass b/source/assets/stylesheets/_bootstrap_overrides.css.sass new file mode 100755 index 0000000..45aba60 --- /dev/null +++ b/source/assets/stylesheets/_bootstrap_overrides.css.sass @@ -0,0 +1,61 @@ +// Bootstrap overrides + +// Navbars +.navbar-nav > li > .dropdown-menu // Add arrow and border radius from dropdowns + +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 + +// Panels +.panel // Remove box shadow from panels + +box-shadow(none) + + // Panel heading styles + .panel-heading + color: $base-dark-color + i[class*='icon-'] + margin-right: 5px + .panel-tools + float: right + margin-top: -48px + margin-right: -8px + .btn-group + margin-top: -6px + .btn-group, .label, .badge + float: right + display: inline-block + .btn + padding: 8px 6px + font-weight: 200 + font-size: 1em + color: $base-dark-color + &:hover + color: $base-color + &:active, &:focus + color: darken($base-color, 10) + +box-shadow(none) + span.badge + font-size: .7em + padding: 2px 4px + .label, .badge + margin-right: 5px + margin-top: 4px + padding-bottom: 4px + font-weight: 200 + .panel-body + clear: both + +// Buttons +.btn + padding: 6px 12px + +// Forms +.form-control + height: 34px diff --git a/source/assets/stylesheets/application.css.sass b/source/assets/stylesheets/application.css.sass index ad01aa0..e474471 100755 --- a/source/assets/stylesheets/application.css.sass +++ b/source/assets/stylesheets/application.css.sass @@ -2,56 +2,7 @@ @import 'variables' @import 'mixins' @import 'bootstrap' - -// Bootstrap overrides -.navbar-nav > li > .dropdown-menu // Add arrow and border radius from dropdowns - +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 -.panel // Remove box shadow from panels - +box-shadow(none) - - // Panel heading styles - .panel-heading - color: $base-dark-color - i[class*='icon-'] - margin-right: 10px - .panel-tools - float: right - margin-top: -48px - margin-right: -8px - .btn-group - margin-top: -6px - .btn-group, .label, .badge - float: right - display: inline-block - .btn - padding: 8px 6px - font-weight: 200 - font-size: 1em - color: $base-dark-color - &:hover - color: $base-color - &:active, &:focus - color: darken($base-color, 10) - +box-shadow(none) - span.badge - font-size: .7em - padding: 2px 4px - .label, .badge - margin-right: 5px - margin-top: 4px - padding-bottom: 4px - font-weight: 200 - .panel-body - clear: both +@import 'bootstrap_overrides' body.main padding: 15px @@ -212,7 +163,6 @@ body.main display: inline-block .btn-group .btn - height: 37px @extend .btn-success span.badge background-color: $base-dark-color @@ -221,7 +171,7 @@ body.main font-weight: 200 .label margin-right: 5px - margin-top: 7px + margin-top: 6px padding: 5px height: 23px font-size: 0.9em diff --git a/source/forms.html.haml b/source/forms.html.haml new file mode 100755 index 0000000..4569a21 --- /dev/null +++ b/source/forms.html.haml @@ -0,0 +1,46 @@ +- page 'Forms', 'forms' + +.panel + .panel-heading + %i.icon-edit.icon-large + Form Default + .panel-body + + %form + %fieldset + %legend Legend + .form-group + %label{:for => "exampleInputEmail"} Email address + %input#exampleInputEmail.form-control{:placeholder => "Enter email", :type => "text"}/ + .form-group.has-error + %label{:for => "exampleInputPassword"} Password + %input#exampleInputPassword.form-control{:placeholder => "Password", :type => "password"}/ + %p.help-block Example block-level help text here. + .form-group + %label{:for => "exampleInputFile"} File input + %input#exampleInputFile{:type => "file"}/ + %p.help-block Example block-level help text here. + %button.btn.btn-default{:type => "submit"} Submit + +.panel + .panel-heading + %i.icon-edit.icon-large + Form Horizontal + .panel-body + + %form.form-horizontal + + .form-group.has-warning + %label.col-lg-2.control-label{for: 'inputEmail'} Email + .col-lg-10 + %input#inputEmail.form-control{placeholder: 'Email', type: 'text'}/ + + .form-group.has-error + %label.col-lg-2.control-label{for: 'inputPassword'} Password + .col-lg-10 + %input#inputPassword.form-control{placeholder: 'Password', type: 'password'}/ + + .form-group + .col-lg-12 + %button.btn.btn-default{type: 'submit'} Sign in + From 717367141ad40fba7f2094fa62e558f6fe62dee6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tayfun=20O=CC=88zis=CC=A7=20ERI=CC=87KAN?= Date: Sun, 11 Aug 2013 11:26:34 +0300 Subject: [PATCH 10/23] #29 Layout overflow problems was fixed. --- .../assets/stylesheets/application.css.sass | 69 +++++++++---------- source/layouts/layout.haml | 13 ++-- 2 files changed, 39 insertions(+), 43 deletions(-) diff --git a/source/assets/stylesheets/application.css.sass b/source/assets/stylesheets/application.css.sass index e474471..0537b33 100755 --- a/source/assets/stylesheets/application.css.sass +++ b/source/assets/stylesheets/application.css.sass @@ -5,7 +5,7 @@ @import 'bootstrap_overrides' body.main - padding: 15px + padding: 10px 20px 0px 20px background-color: $body-bg-primary //+background-image(linear-gradient(left, $body-bg-primary, $body-bg-secondary)) @@ -27,7 +27,7 @@ body.main padding: 1px background-color: rgba(white, .6) -#outer-wrapper +#wrapper position: absolute top: 70px bottom: 0 @@ -130,53 +130,46 @@ body.main margin-top: 22px #content + overflow: auto + margin-top: 50px background-color: $body-bg padding: 20px left: $sidebar-width +#tools + margin-left: 80px + #breadcrumb font-weight: 800 +border-radius(0) - padding: 20px - margin: -20px -20px 20px -20px + padding: 15px 20px 15px 20px border-bottom: 1px solid #ddd #toolbar - position: relative - top: -68px + margin-top: -70px + margin-right: 10px 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, .label, form - float: right - display: inline-block - .btn-group - .btn - @extend .btn-success - span.badge - background-color: $base-dark-color - padding: 3px 5px - font-size: .7em - font-weight: 200 - .label - margin-right: 5px - margin-top: 6px - padding: 5px - height: 23px - font-size: 0.9em - font-weight: 200 - + height: 50px + padding: 8px + border-bottom: 0 + .btn-group, .label, form + float: right + display: inline-block + .btn-group + .btn + @extend .btn-success + span.badge + background-color: $base-dark-color + padding: 3px 5px + font-size: .7em + font-weight: 200 + .label + margin-right: 5px + margin-top: 6px + padding: 5px + height: 23px + font-size: 0.9em + font-weight: 200 #beaker @extend .sprite-image diff --git a/source/layouts/layout.haml b/source/layouts/layout.haml index 28dc5c9..0e3df62 100755 --- a/source/layouts/layout.haml +++ b/source/layouts/layout.haml @@ -29,17 +29,20 @@ / Navbar = partial 'partials/navbar' - / Sidebar - #outer-wrapper + #wrapper - #sidebar + / Sidebar + %section#sidebar = partial 'partials/dock' - / Content - #content + / Tools + %section#tools = partial 'partials/breadcrumb' = partial 'partials/toolbar' + + / Content + #content = yield From 13f8847ca000d1dcefc65e6a35134f9a6214f096 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tayfun=20O=CC=88zis=CC=A7=20ERI=CC=87KAN?= Date: Sun, 11 Aug 2013 14:05:52 +0300 Subject: [PATCH 11/23] #28 Create forms page - Many form variations were added. --- .../stylesheets/_bootstrap_overrides.css.sass | 5 +- .../assets/stylesheets/application.css.sass | 14 +- source/forms.html.haml | 179 ++++++++++++++++-- source/partials/_breadcrumb.haml | 2 +- 4 files changed, 175 insertions(+), 25 deletions(-) diff --git a/source/assets/stylesheets/_bootstrap_overrides.css.sass b/source/assets/stylesheets/_bootstrap_overrides.css.sass index 45aba60..6d7d72c 100755 --- a/source/assets/stylesheets/_bootstrap_overrides.css.sass +++ b/source/assets/stylesheets/_bootstrap_overrides.css.sass @@ -56,6 +56,5 @@ .btn padding: 6px 12px -// Forms -.form-control - height: 34px +.radio, .checkbox + margin-top: 0 diff --git a/source/assets/stylesheets/application.css.sass b/source/assets/stylesheets/application.css.sass index 0537b33..1d4c21e 100755 --- a/source/assets/stylesheets/application.css.sass +++ b/source/assets/stylesheets/application.css.sass @@ -12,6 +12,16 @@ body.main .sprite-image background-image: url(../images/sprite.png) +form + .form-actions + background-color: lighten($panel-heading-bg, 3) + margin: 15px -15px -15px + padding: 15px + +border-bottom-left-radius(4px) + +border-bottom-right-radius(4px) + a.btn:hover + color: lighten($base-color, 10) + #navbar .navbar-brand font-size: $brand-font-size @@ -140,10 +150,12 @@ body.main margin-left: 80px #breadcrumb - font-weight: 800 +border-radius(0) padding: 15px 20px 15px 20px border-bottom: 1px solid #ddd + .title + font-weight: 800 + color: $base-color #toolbar margin-top: -70px diff --git a/source/forms.html.haml b/source/forms.html.haml index 4569a21..03abf9c 100755 --- a/source/forms.html.haml +++ b/source/forms.html.haml @@ -7,20 +7,133 @@ .panel-body %form + %fieldset - %legend Legend + %legend Default Inputs + .form-group - %label{:for => "exampleInputEmail"} Email address - %input#exampleInputEmail.form-control{:placeholder => "Enter email", :type => "text"}/ - .form-group.has-error - %label{:for => "exampleInputPassword"} Password - %input#exampleInputPassword.form-control{:placeholder => "Password", :type => "password"}/ + %label.control-label Text field + %input.form-control{placeholder: 'Enter username', type: 'text'}/ + + .form-group + %label.control-label Password field + %input.form-control{placeholder: 'Enter password', type: 'password'}/ + + .form-group + %label.control-label Input field with help + %input.form-control{placeholder: '.help-block'}/ %p.help-block Example block-level help text here. + + .form-group + %label.control-label Disabled field + %input.form-control{placeholder: 'This is field is disabled!', disabled: true}/ + + .form-group + %label.control-label Tooltip field + %input.form-control{data: {toggle: 'tooltip'}, title: 'Input tips here', placeholder: 'This is field is disabled!'}/ + + .form-group + %label.control-label Textarea field + %textarea.form-control{rows: 4} + .form-group - %label{:for => "exampleInputFile"} File input - %input#exampleInputFile{:type => "file"}/ + %label.control-label File input + %input{type: 'file'} + + .form-group + %label.control-label Large field + %input.form-control.input-lg{type: 'text', placeholder: '.input-lg'}/ + + .form-group + %label.control-label Small field + %input.form-control.input-sm{type: 'text', placeholder: '.input-sm'}/ + + .form-group.row + .col-lg-2 + %label.control-label Column sizing + %input.form-control{type: 'text', placeholder: '.col-lg-2'}/ + .col-lg-3 + %label.control-label Column sizing + %input.form-control{type: 'text', placeholder: '.col-lg-3'}/ + .col-lg-7 + %label.control-label Column sizing + %input.form-control{type: 'text', placeholder: '.col-lg-7'}/ + + %fieldset + %legend Input Validation States + + .form-group.has-warning + %label.control-label Input field with help + %input.form-control{placeholder: '.has-warning'}/ + %p.help-block Example block-level help text here. + + .form-group.has-error + %label.control-label Input field with help + %input.form-control{placeholder: '.has-error'}/ + %p.help-block Example block-level help text here. + + .form-group.has-success + %label.control-label Input field with help + %input.form-control{placeholder: '.has-success'}/ %p.help-block Example block-level help text here. - %button.btn.btn-default{:type => "submit"} Submit + + %fieldset + %legend Checkboxes and radios + + .form-group + %label.control-label Checkbox + .checkbox + %input{type: 'checkbox', value: ''}/ + Option one is this and that—be sure to include why it's great + + .form-group + %label.control-label Inline checkbox + %br/ + .checkbox-inline + %input{type: 'checkbox', value: ''}/ + 1 + .checkbox-inline + %input{type: 'checkbox', value: ''}/ + 2 + .checkbox-inline + %input{type: 'checkbox', value: ''}/ + 3 + + .form-group + %label.control-label Radio + .radio + %input{type: 'radio', name:'options_radio', value: 'option1', checked: true} + Option one is this and that—be sure to include why it's great + + %br/ + + %input{type: 'radio', name:'options_radio', value: 'option2', checked: true} + Option two can be something else and selecting it will deselect option one + + %fieldset + %legend Selects + + .form-group + %label.control-label Single select + %select.form-control + %option 1 + %option 2 + %option 3 + %option 4 + %option 5 + + .form-group + %label.control-label Multiple select + %select.form-control{multiple: true} + %option 1 + %option 2 + %option 3 + %option 4 + %option 5 + + .form-actions + %button.btn.btn-default{:type => 'submit'} Submit + %a.btn{href: '#'} Cancel .panel .panel-heading @@ -30,17 +143,43 @@ %form.form-horizontal - .form-group.has-warning - %label.col-lg-2.control-label{for: 'inputEmail'} Email - .col-lg-10 - %input#inputEmail.form-control{placeholder: 'Email', type: 'text'}/ + %fieldset + %legend Default inputs - .form-group.has-error - %label.col-lg-2.control-label{for: 'inputPassword'} Password - .col-lg-10 - %input#inputPassword.form-control{placeholder: 'Password', type: 'password'}/ + .form-group + %label.col-lg-2.control-label Text field + .col-lg-10 + %input.form-control{placeholder: 'Enter username', type: 'text'}/ + + .form-group + %label.col-lg-2.control-label Password field + .col-lg-10 + %input.form-control{placeholder: 'Enter password', type: 'password'}/ + + .form-group + %label.col-lg-2.control-label Input field with help + .col-lg-10 + %input.form-control{placeholder: '.help-block'}/ + %p.help-block Example block-level help text here.%fieldset + + %legend Validation inputs + + .form-group.has-warning + %label.col-lg-2.control-label Text field + .col-lg-10 + %input.form-control{placeholder: 'Enter username', type: 'text'}/ + + .form-group.has-error + %label.col-lg-2.control-label Password field + .col-lg-10 + %input.form-control{placeholder: 'Enter password', type: 'password'}/ - .form-group - .col-lg-12 - %button.btn.btn-default{type: 'submit'} Sign in + .form-group.has-success + %label.col-lg-2.control-label Input field with help + .col-lg-10 + %input.form-control{placeholder: '.help-block'}/ + %p.help-block Example block-level help text here. + .form-actions + %button.btn.btn-default{:type => 'submit'} Save + %a.btn{href: '#'} Cancel \ No newline at end of file diff --git a/source/partials/_breadcrumb.haml b/source/partials/_breadcrumb.haml index bc520d2..e4b31e9 100755 --- a/source/partials/_breadcrumb.haml +++ b/source/partials/_breadcrumb.haml @@ -1,3 +1,3 @@ %ul#breadcrumb.breadcrumb - %li Dashboard + %li.title Dashboard %li.active Reports \ No newline at end of file From 74a5849beaa6d93202dcdea4c143c9fe7a1ef931 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tayfun=20O=CC=88zis=CC=A7=20ERI=CC=87KAN?= Date: Sun, 11 Aug 2013 16:34:27 +0300 Subject: [PATCH 12/23] #28 Create forms page - Jquery knob plugin was added --- .../assets/javascripts/application.js.coffee | 3 + .../assets/javascripts/vendor/jquery.knob.js | 685 ++++++++++++++++++ .../stylesheets/_bootstrap_overrides.css.sass | 2 - .../assets/stylesheets/application.css.sass | 6 +- source/forms.html.haml | 11 +- source/index.html.haml | 17 +- 6 files changed, 714 insertions(+), 10 deletions(-) create mode 100644 source/assets/javascripts/vendor/jquery.knob.js diff --git a/source/assets/javascripts/application.js.coffee b/source/assets/javascripts/application.js.coffee index 3163250..dcf666d 100644 --- a/source/assets/javascripts/application.js.coffee +++ b/source/assets/javascripts/application.js.coffee @@ -26,3 +26,6 @@ $(document).ready -> # Enable toolbar tooltips $('[data-toggle=toolbar-tooltip]').tooltip placement: 'bottom' + + # Enable knob inputs + $('.knob').knob() diff --git a/source/assets/javascripts/vendor/jquery.knob.js b/source/assets/javascripts/vendor/jquery.knob.js new file mode 100644 index 0000000..ae36b6b --- /dev/null +++ b/source/assets/javascripts/vendor/jquery.knob.js @@ -0,0 +1,685 @@ +/*!jQuery Knob*/ +/** + * Downward compatible, touchable dial + * + * Version: 1.2.0 (15/07/2012) + * Requires: jQuery v1.7+ + * + * Copyright (c) 2012 Anthony Terrien + * Under MIT and GPL licenses: + * http://www.opensource.org/licenses/mit-license.php + * http://www.gnu.org/licenses/gpl.html + * + * Thanks to vor, eskimoblood, spiffistan, FabrizioC + */ +(function($) { + + /** + * Kontrol library + */ + "use strict"; + + /** + * Definition of globals and core + */ + var k = {}, // kontrol + max = Math.max, + min = Math.min; + + k.c = {}; + k.c.d = $(document); + k.c.t = function (e) { + return e.originalEvent.touches.length - 1; + }; + + /** + * Kontrol Object + * + * Definition of an abstract UI control + * + * Each concrete component must call this one. + * + * k.o.call(this); + * + */ + k.o = function () { + var s = this; + + this.o = null; // array of options + this.$ = null; // jQuery wrapped element + this.i = null; // mixed HTMLInputElement or array of HTMLInputElement + this.g = null; // 2D graphics context for 'pre-rendering' + this.v = null; // value ; mixed array or integer + this.cv = null; // change value ; not commited value + this.x = 0; // canvas x position + this.y = 0; // canvas y position + this.$c = null; // jQuery canvas element + this.c = null; // rendered canvas context + this.t = 0; // touches index + this.isInit = false; + this.fgColor = null; // main color + this.pColor = null; // previous color + this.dH = null; // draw hook + this.cH = null; // change hook + this.eH = null; // cancel hook + this.rH = null; // release hook + this.scale = 1; // scale factor + + this.run = function () { + var cf = function (e, conf) { + var k; + for (k in conf) { + s.o[k] = conf[k]; + } + s.init(); + s._configure() + ._draw(); + }; + + if(this.$.data('kontroled')) return; + this.$.data('kontroled', true); + + this.extend(); + this.o = $.extend( + { + // Config + min : this.$.data('min') || 0, + max : this.$.data('max') || 100, + stopper : true, + readOnly : this.$.data('readonly'), + + // UI + cursor : (this.$.data('cursor') === true && 30) + || this.$.data('cursor') + || 0, + thickness : this.$.data('thickness') || 0.35, + lineCap : this.$.data('linecap') || 'butt', + width : this.$.data('width') || 200, + height : this.$.data('height') || 200, + displayInput : this.$.data('displayinput') == null || this.$.data('displayinput'), + displayPrevious : this.$.data('displayprevious'), + fgColor : this.$.data('fgcolor') || '#87CEEB', + inputColor: this.$.data('inputcolor') || this.$.data('fgcolor') || '#87CEEB', + inline : false, + step : this.$.data('step') || 1, + + // Hooks + draw : null, // function () {} + change : null, // function (value) {} + cancel : null, // function () {} + release : null, // function (value) {} + error : null // function () {} + }, this.o + ); + + // routing value + if(this.$.is('fieldset')) { + + // fieldset = array of integer + this.v = {}; + this.i = this.$.find('input') + this.i.each(function(k) { + var $this = $(this); + s.i[k] = $this; + s.v[k] = $this.val(); + + $this.bind( + 'change' + , function () { + var val = {}; + val[k] = $this.val(); + s.val(val); + } + ); + }); + this.$.find('legend').remove(); + + } else { + // input = integer + this.i = this.$; + this.v = this.$.val(); + (this.v == '') && (this.v = this.o.min); + + this.$.bind( + 'change' + , function () { + s.val(s._validate(s.$.val())); + } + ); + } + + (!this.o.displayInput) && this.$.hide(); + + this.$c = $(''); + + this.c = this.$c[0].getContext? this.$c[0].getContext('2d') : null; + + if (!this.c) { + this.o.error && this.o.error(); + return; + } + + this.$ + .wrap($('
')) + .before(this.$c); + + this.scale = (window.devicePixelRatio || 1) / + ( + this.c.webkitBackingStorePixelRatio || + this.c.mozBackingStorePixelRatio || + this.c.msBackingStorePixelRatio || + this.c.oBackingStorePixelRatio || + this.c.backingStorePixelRatio || 1 + ); + if (this.scale !== 1) { + this.$c[0].width = this.$c[0].width * this.scale; + this.$c[0].height = this.$c[0].height * this.scale; + this.$c.width(this.o.width); + this.$c.height(this.o.height); + } + + if (this.v instanceof Object) { + this.cv = {}; + this.copy(this.v, this.cv); + } else { + this.cv = this.v; + } + + this.$ + .bind("configure", cf) + .parent() + .bind("configure", cf); + + this._listen() + ._configure() + ._xy() + .init(); + + this.isInit = true; + + this._draw(); + + return this; + }; + + this._draw = function () { + + // canvas pre-rendering + var d = true, + c = document.createElement('canvas'); + + c.width = s.o.width * s.scale; + c.height = s.o.height * s.scale; + + s.g = c.getContext('2d'); + + s.clear(); + + s.dH + && (d = s.dH()); + + (d !== false) && s.draw(); + + s.c.drawImage(c, 0, 0); + c = null; + }; + + this._touch = function (e) { + + var touchMove = function (e) { + + var v = s.xy2val( + e.originalEvent.touches[s.t].pageX, + e.originalEvent.touches[s.t].pageY + ); + + if (v == s.cv) return; + + if ( + s.cH + && (s.cH(v) === false) + ) return; + + + s.change(s._validate(v)); + s._draw(); + }; + + // get touches index + this.t = k.c.t(e); + + // First touch + touchMove(e); + + // Touch events listeners + k.c.d + .bind("touchmove.k", touchMove) + .bind( + "touchend.k" + , function () { + k.c.d.unbind('touchmove.k touchend.k'); + + if ( + s.rH + && (s.rH(s.cv) === false) + ) return; + + s.val(s.cv); + } + ); + + return this; + }; + + this._mouse = function (e) { + + var mouseMove = function (e) { + var v = s.xy2val(e.pageX, e.pageY); + if (v == s.cv) return; + + if ( + s.cH + && (s.cH(v) === false) + ) return; + + s.change(s._validate(v)); + s._draw(); + }; + + // First click + mouseMove(e); + + // Mouse events listeners + k.c.d + .bind("mousemove.k", mouseMove) + .bind( + // Escape key cancel current change + "keyup.k" + , function (e) { + if (e.keyCode === 27) { + k.c.d.unbind("mouseup.k mousemove.k keyup.k"); + + if ( + s.eH + && (s.eH() === false) + ) return; + + s.cancel(); + } + } + ) + .bind( + "mouseup.k" + , function (e) { + k.c.d.unbind('mousemove.k mouseup.k keyup.k'); + + if ( + s.rH + && (s.rH(s.cv) === false) + ) return; + + s.val(s.cv); + } + ); + + return this; + }; + + this._xy = function () { + var o = this.$c.offset(); + this.x = o.left; + this.y = o.top; + return this; + }; + + this._listen = function () { + + if (!this.o.readOnly) { + this.$c + .bind( + "mousedown" + , function (e) { + e.preventDefault(); + s._xy()._mouse(e); + } + ) + .bind( + "touchstart" + , function (e) { + e.preventDefault(); + s._xy()._touch(e); + } + ); + this.listen(); + } else { + this.$.attr('readonly', 'readonly'); + } + + return this; + }; + + this._configure = function () { + + // Hooks + if (this.o.draw) this.dH = this.o.draw; + if (this.o.change) this.cH = this.o.change; + if (this.o.cancel) this.eH = this.o.cancel; + if (this.o.release) this.rH = this.o.release; + + if (this.o.displayPrevious) { + this.pColor = this.h2rgba(this.o.fgColor, "0.4"); + this.fgColor = this.h2rgba(this.o.fgColor, "0.6"); + } else { + this.fgColor = this.o.fgColor; + } + + return this; + }; + + this._clear = function () { + this.$c[0].width = this.$c[0].width; + }; + + this._validate = function(v) { + return (~~ (((v < 0) ? -0.5 : 0.5) + (v/this.o.step))) * this.o.step; + }; + + // Abstract methods + this.listen = function () {}; // on start, one time + this.extend = function () {}; // each time configure triggered + this.init = function () {}; // each time configure triggered + this.change = function (v) {}; // on change + this.val = function (v) {}; // on release + this.xy2val = function (x, y) {}; // + this.draw = function () {}; // on change / on release + this.clear = function () { this._clear(); }; + + // Utils + this.h2rgba = function (h, a) { + var rgb; + h = h.substring(1,7) + rgb = [parseInt(h.substring(0,2),16) + ,parseInt(h.substring(2,4),16) + ,parseInt(h.substring(4,6),16)]; + return "rgba(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + "," + a + ")"; + }; + + this.copy = function (f, t) { + for (var i in f) { t[i] = f[i]; } + }; + }; + + + /** + * k.Dial + */ + k.Dial = function () { + k.o.call(this); + + this.startAngle = null; + this.xy = null; + this.radius = null; + this.lineWidth = null; + this.cursorExt = null; + this.w2 = null; + this.PI2 = 2*Math.PI; + + this.extend = function () { + this.o = $.extend( + { + bgColor : this.$.data('bgcolor') || '#EEEEEE', + angleOffset : this.$.data('angleoffset') || 0, + angleArc : this.$.data('anglearc') || 360, + inline : true + }, this.o + ); + }; + + this.val = function (v) { + if (null != v) { + this.cv = this.o.stopper ? max(min(v, this.o.max), this.o.min) : v; + this.v = this.cv; + this.$.val(this.v); + this._draw(); + } else { + return this.v; + } + }; + + this.xy2val = function (x, y) { + var a, ret; + + a = Math.atan2( + x - (this.x + this.w2) + , - (y - this.y - this.w2) + ) - this.angleOffset; + + if(this.angleArc != this.PI2 && (a < 0) && (a > -0.5)) { + // if isset angleArc option, set to min if .5 under min + a = 0; + } else if (a < 0) { + a += this.PI2; + } + + ret = ~~ (0.5 + (a * (this.o.max - this.o.min) / this.angleArc)) + + this.o.min; + + this.o.stopper + && (ret = max(min(ret, this.o.max), this.o.min)); + + return ret; + }; + + this.listen = function () { + // bind MouseWheel + var s = this, + mw = function (e) { + e.preventDefault(); + var ori = e.originalEvent + ,deltaX = ori.detail || ori.wheelDeltaX + ,deltaY = ori.detail || ori.wheelDeltaY + ,v = parseInt(s.$.val()) + (deltaX>0 || deltaY>0 ? s.o.step : deltaX<0 || deltaY<0 ? -s.o.step : 0); + + if ( + s.cH + && (s.cH(v) === false) + ) return; + + s.val(v); + } + , kval, to, m = 1, kv = {37:-s.o.step, 38:s.o.step, 39:s.o.step, 40:-s.o.step}; + + this.$ + .bind( + "keydown" + ,function (e) { + var kc = e.keyCode; + + // numpad support + if(kc >= 96 && kc <= 105) { + kc = e.keyCode = kc - 48; + } + + kval = parseInt(String.fromCharCode(kc)); + + if (isNaN(kval)) { + + (kc !== 13) // enter + && (kc !== 8) // bs + && (kc !== 9) // tab + && (kc !== 189) // - + && e.preventDefault(); + + // arrows + if ($.inArray(kc,[37,38,39,40]) > -1) { + e.preventDefault(); + + var v = parseInt(s.$.val()) + kv[kc] * m; + + s.o.stopper + && (v = max(min(v, s.o.max), s.o.min)); + + s.change(v); + s._draw(); + + // long time keydown speed-up + to = window.setTimeout( + function () { m*=2; } + ,30 + ); + } + } + } + ) + .bind( + "keyup" + ,function (e) { + if (isNaN(kval)) { + if (to) { + window.clearTimeout(to); + to = null; + m = 1; + s.val(s.$.val()); + } + } else { + // kval postcond + (s.$.val() > s.o.max && s.$.val(s.o.max)) + || (s.$.val() < s.o.min && s.$.val(s.o.min)); + } + + } + ); + + this.$c.bind("mousewheel DOMMouseScroll", mw); + this.$.bind("mousewheel DOMMouseScroll", mw) + }; + + this.init = function () { + + if ( + this.v < this.o.min + || this.v > this.o.max + ) this.v = this.o.min; + + this.$.val(this.v); + this.w2 = this.o.width / 2; + this.cursorExt = this.o.cursor / 100; + this.xy = this.w2 * this.scale; + this.lineWidth = this.xy * this.o.thickness; + this.lineCap = this.o.lineCap; + this.radius = this.xy - this.lineWidth / 2; + + this.o.angleOffset + && (this.o.angleOffset = isNaN(this.o.angleOffset) ? 0 : this.o.angleOffset); + + this.o.angleArc + && (this.o.angleArc = isNaN(this.o.angleArc) ? this.PI2 : this.o.angleArc); + + // deg to rad + this.angleOffset = this.o.angleOffset * Math.PI / 180; + this.angleArc = this.o.angleArc * Math.PI / 180; + + // compute start and end angles + this.startAngle = 1.5 * Math.PI + this.angleOffset; + this.endAngle = 1.5 * Math.PI + this.angleOffset + this.angleArc; + + var s = max( + String(Math.abs(this.o.max)).length + , String(Math.abs(this.o.min)).length + , 2 + ) + 2; + + this.o.displayInput + && this.i.css({ + 'width' : ((this.o.width / 2 + 4) >> 0) + 'px' + ,'height' : ((this.o.width / 3) >> 0) + 'px' + ,'position' : 'absolute' + ,'vertical-align' : 'middle' + ,'margin-top' : ((this.o.width / 3) >> 0) + 'px' + ,'margin-left' : '-' + ((this.o.width * 3 / 4 + 2) >> 0) + 'px' + ,'border' : 0 + ,'background' : 'none' + ,'font' : 'bold ' + ((this.o.width / s) >> 0) + 'px Arial' + ,'text-align' : 'center' + ,'color' : this.o.inputColor || this.o.fgColor + ,'padding' : '0px' + ,'-webkit-appearance': 'none' + }) + || this.i.css({ + 'width' : '0px' + ,'visibility' : 'hidden' + }); + }; + + this.change = function (v) { + this.cv = v; + this.$.val(v); + }; + + this.angle = function (v) { + return (v - this.o.min) * this.angleArc / (this.o.max - this.o.min); + }; + + this.draw = function () { + + var c = this.g, // context + a = this.angle(this.cv) // Angle + , sat = this.startAngle // Start angle + , eat = sat + a // End angle + , sa, ea // Previous angles + , r = 1; + + c.lineWidth = this.lineWidth; + + c.lineCap = this.lineCap; + + this.o.cursor + && (sat = eat - this.cursorExt) + && (eat = eat + this.cursorExt); + + c.beginPath(); + c.strokeStyle = this.o.bgColor; + c.arc(this.xy, this.xy, this.radius, this.endAngle, this.startAngle, true); + c.stroke(); + + if (this.o.displayPrevious) { + ea = this.startAngle + this.angle(this.v); + sa = this.startAngle; + this.o.cursor + && (sa = ea - this.cursorExt) + && (ea = ea + this.cursorExt); + + c.beginPath(); + c.strokeStyle = this.pColor; + c.arc(this.xy, this.xy, this.radius, sa, ea, false); + c.stroke(); + r = (this.cv == this.v); + } + + c.beginPath(); + c.strokeStyle = r ? this.o.fgColor : this.fgColor ; + c.arc(this.xy, this.xy, this.radius, sat, eat, false); + c.stroke(); + }; + + this.cancel = function () { + this.val(this.v); + }; + }; + + $.fn.dial = $.fn.knob = function (o) { + return this.each( + function () { + var d = new k.Dial(); + d.o = o; + d.$ = $(this); + d.run(); + } + ).parent(); + }; + +})(jQuery); \ No newline at end of file diff --git a/source/assets/stylesheets/_bootstrap_overrides.css.sass b/source/assets/stylesheets/_bootstrap_overrides.css.sass index 6d7d72c..d0e0514 100755 --- a/source/assets/stylesheets/_bootstrap_overrides.css.sass +++ b/source/assets/stylesheets/_bootstrap_overrides.css.sass @@ -49,8 +49,6 @@ margin-top: 4px padding-bottom: 4px font-weight: 200 - .panel-body - clear: both // Buttons .btn diff --git a/source/assets/stylesheets/application.css.sass b/source/assets/stylesheets/application.css.sass index 1d4c21e..29d8971 100755 --- a/source/assets/stylesheets/application.css.sass +++ b/source/assets/stylesheets/application.css.sass @@ -22,6 +22,9 @@ form a.btn:hover color: lighten($base-color, 10) +.text-center + text-align: center + #navbar .navbar-brand font-size: $brand-font-size @@ -141,13 +144,14 @@ form #content overflow: auto - margin-top: 50px + margin-top: 51px background-color: $body-bg padding: 20px left: $sidebar-width #tools margin-left: 80px + box-shadow: 0 4px 2px -2px gray #breadcrumb +border-radius(0) diff --git a/source/forms.html.haml b/source/forms.html.haml index 03abf9c..f5616aa 100755 --- a/source/forms.html.haml +++ b/source/forms.html.haml @@ -182,4 +182,13 @@ .form-actions %button.btn.btn-default{:type => 'submit'} Save - %a.btn{href: '#'} Cancel \ No newline at end of file + %a.btn{href: '#'} Cancel + +.panel + .panel-heading + %i.icon-edit.icon-large + Knob Inputs + .panel-body.text-center + %input.knob{type: 'text', value: '75', data: {width: 150, height: 150}}/ + %input.knob{type: 'text', value: '100', data: {fgColor: '#16a085', width: 150, height: 150}}/ + %input.knob{type: 'text', value: '200', data: {fgColor: '#7f8c8d', width: 150, height: 150}}/ diff --git a/source/index.html.haml b/source/index.html.haml index 6226ea8..03dc0c9 100755 --- a/source/index.html.haml +++ b/source/index.html.haml @@ -18,9 +18,14 @@ %i.icon-chevron-down .badge 3 record .panel-body - Lorem ipsum - - %a.btn.btn-default{:href => "#"} Link - %button.btn.btn-default{:type => "submit"} Button - %input.btn.btn-default{:type => "button", :value => "Input"}/ - %input.btn.btn-default{:type => "submit", :value => "Submit"}/ \ No newline at end of file + .page-header + %h4 User statics + .row.text-center + .col-3 + %input.knob.second{'data-bgcolor' => '#d4ecfd', 'data-fgcolor' => '#30a1ec', 'data-inputcolor' => '#333', 'data-thickness' => '.3', 'data-width' => '140', 'data-height' => '140', :type => 'text', :value => '50'}/ + .col-3 + %input.knob.second{'data-bgcolor' => '#c4e9aa', 'data-fgcolor' => '#8ac368', 'data-inputcolor' => '#333', 'data-thickness' => '.3', 'data-width' => '140', 'data-height' => '140', :type => 'text', :value => '75'}/ + .col-3 + %input.knob.second{'data-bgcolor' => '#cef3f5', 'data-fgcolor' => '#5ba0a3', 'data-inputcolor' => '#333', 'data-thickness' => '.3', 'data-width' => '140', 'data-height' => '140', :type => 'text', :value => '35'}/ + .col-3 + %input.knob.second{'data-bgcolor' => '#f8d2e0', 'data-fgcolor' => '#b85e80', 'data-inputcolor' => '#333', 'data-thickness' => '.3', 'data-width' => '140', 'data-height' => '140', :type => 'text', :value => '85'}/ \ No newline at end of file From fa4375bb0abb833e824b6954254525de23e2523f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tayfun=20O=CC=88zis=CC=A7=20ERI=CC=87KAN?= Date: Sun, 11 Aug 2013 16:38:03 +0300 Subject: [PATCH 13/23] Dashboard improvements --- source/index.html.haml | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/source/index.html.haml b/source/index.html.haml index 03dc0c9..6771722 100755 --- a/source/index.html.haml +++ b/source/index.html.haml @@ -18,6 +18,12 @@ %i.icon-chevron-down .badge 3 record .panel-body + .page-header + %h4 System usage + .progress + .progress-bar.progress-bar-success{style: 'width: 35%'} + .progress-bar.progress-bar-warning{style: 'width: 20%'} + .progress-bar.progress-bar-danger{style: 'width: 10%'} .page-header %h4 User statics .row.text-center From 4cc2d8bc25fa1a6cc4bcc4962373852386afaee1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tayfun=20O=CC=88zis=CC=A7=20ERI=CC=87KAN?= Date: Sun, 11 Aug 2013 17:01:36 +0300 Subject: [PATCH 14/23] #30 Create tables page - Table variations was adde - No-padding panel was fixed for table usage --- .../stylesheets/_bootstrap_overrides.css.sass | 9 ++ source/index.html.haml | 8 +- source/partials/_dock.haml | 4 +- source/tables.html.haml | 131 ++++++++++++++++++ 4 files changed, 143 insertions(+), 9 deletions(-) create mode 100755 source/tables.html.haml diff --git a/source/assets/stylesheets/_bootstrap_overrides.css.sass b/source/assets/stylesheets/_bootstrap_overrides.css.sass index d0e0514..e0bfd4d 100755 --- a/source/assets/stylesheets/_bootstrap_overrides.css.sass +++ b/source/assets/stylesheets/_bootstrap_overrides.css.sass @@ -49,6 +49,11 @@ margin-top: 4px padding-bottom: 4px font-weight: 200 + .panel-body + &.no-padding + margin-left: -15px + margin-right: -15px + margin-top: -15px // Buttons .btn @@ -56,3 +61,7 @@ .radio, .checkbox margin-top: 0 + +.table + @extend .table-striped + @extend .table-hover diff --git a/source/index.html.haml b/source/index.html.haml index 6771722..ced6d65 100755 --- a/source/index.html.haml +++ b/source/index.html.haml @@ -7,16 +7,10 @@ .panel-tools .btn-group %a.btn{href: '#'} - %i.icon-wrench - Settings - %a.btn{href: '#'} - %i.icon-filter - Filters - %a.btn{href: '#', data: {toggle: 'toolbar-tooltip'}, title: 'Reload'} %i.icon-refresh + Refresh statics %a.btn{href: '#', data: {toggle: 'toolbar-tooltip'}, title: 'Toggle'} %i.icon-chevron-down - .badge 3 record .panel-body .page-header %h4 System usage diff --git a/source/partials/_dock.haml b/source/partials/_dock.haml index dd85f05..cddfe65 100644 --- a/source/partials/_dock.haml +++ b/source/partials/_dock.haml @@ -7,9 +7,9 @@ %li.launcher{launcher_active('forms')} %i.icon-file-text-alt =link_to 'Forms', 'forms.html' - %li.launcher + %li.launcher{launcher_active('tables')} %i.icon-table - %a{href: '#'} Tables + =link_to 'Tables', 'tables.html' %li.launcher.dropdown.hover %i.icon-flag %a{href: '#'} Reports diff --git a/source/tables.html.haml b/source/tables.html.haml new file mode 100755 index 0000000..ca697fa --- /dev/null +++ b/source/tables.html.haml @@ -0,0 +1,131 @@ +- page 'Tables', 'tables' + +.panel + .panel-heading + %i.icon-edit.icon-large + Default Table + .panel-tools + .btn-group + %a.btn{href: '#'} + %i.icon-wrench + Settings + %a.btn{href: '#'} + %i.icon-filter + Filters + %a.btn{href: '#', data: {toggle: 'toolbar-tooltip'}, title: 'Reload'} + %i.icon-refresh + .badge 3 record + .panel-body.no-padding + %table.table + %thead + %tr + %th # + %th First Name + %th Last Name + %th Username + %tbody + %tr + %td 1 + %td Mark + %td Otto + %td @mdo + %tr + %td 2 + %td Jacob + %td Thornton + %td @fat + %tr + %td 3 + %td Larry + %td the Bird + %td @twitter + +.row + .col-lg-6 + .panel + .panel-heading + %i.icon-edit.icon-large + Bordered Table + .panel-body + %table.table.table-bordered + %thead + %tr + %th # + %th First Name + %th Last Name + %th Username + %tbody + %tr + %td 1 + %td Mark + %td Otto + %td @mdo + %tr + %td 2 + %td Jacob + %td Thornton + %td @fat + %tr + %td 3 + %td Larry + %td the Bird + %td @twitter + + .col-lg-6 + .panel + .panel-heading + %i.icon-edit.icon-large + Default Table + .panel-body + %table.table + %thead + %tr + %th # + %th First Name + %th Last Name + %th Username + %tbody + %tr + %td 1 + %td Mark + %td Otto + %td @mdo + %tr + %td 2 + %td Jacob + %td Thornton + %td @fat + %tr + %td 3 + %td Larry + %td the Bird + %td @twitter + +.panel + .panel-heading + %i.icon-edit.icon-large + Condensed Table + .panel-body + %table.table.table-condensed + %thead + %tr + %th # + %th First Name + %th Last Name + %th Username + %tbody + %tr + %td 1 + %td Mark + %td Otto + %td @mdo + %tr + %td 2 + %td Jacob + %td Thornton + %td @fat + %tr + %td 3 + %td Larry + %td the Bird + %td @twitter \ No newline at end of file From cc04127499da7624e6deb328c31a4571317bb1bf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tayfun=20O=CC=88zis=CC=A7=20ERI=CC=87KAN?= Date: Sun, 11 Aug 2013 17:38:02 +0300 Subject: [PATCH 15/23] #30 Create tables page - Quick search and filters was added --- .../assets/stylesheets/_bootstrap_overrides.css.sass | 2 ++ source/assets/stylesheets/application.css.sass | 11 +++++++++++ 2 files changed, 13 insertions(+) diff --git a/source/assets/stylesheets/_bootstrap_overrides.css.sass b/source/assets/stylesheets/_bootstrap_overrides.css.sass index e0bfd4d..112bd1f 100755 --- a/source/assets/stylesheets/_bootstrap_overrides.css.sass +++ b/source/assets/stylesheets/_bootstrap_overrides.css.sass @@ -59,9 +59,11 @@ .btn padding: 6px 12px +// Form elements .radio, .checkbox margin-top: 0 +// Tables .table @extend .table-striped @extend .table-hover diff --git a/source/assets/stylesheets/application.css.sass b/source/assets/stylesheets/application.css.sass index 29d8971..9616622 100755 --- a/source/assets/stylesheets/application.css.sass +++ b/source/assets/stylesheets/application.css.sass @@ -25,6 +25,17 @@ form .text-center text-align: center +table + .table-header + text-align: left + padding: 10px + background-color: lighten($panel-heading-bg, 3) + border-bottom: 1px solid $table-border-color + .input-group + margin-right: -15px + input + height: 33px + #navbar .navbar-brand font-size: $brand-font-size From 7a444bbbd9f57b895b54ae11a5fa7e21ed4b5b77 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tayfun=20O=CC=88zis=CC=A7=20ERI=CC=87KAN?= Date: Sun, 11 Aug 2013 17:38:14 +0300 Subject: [PATCH 16/23] #30 Create tables page - Table variations was added --- source/tables.html.haml | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/source/tables.html.haml b/source/tables.html.haml index ca697fa..cd92d19 100755 --- a/source/tables.html.haml +++ b/source/tables.html.haml @@ -17,6 +17,15 @@ .badge 3 record .panel-body.no-padding %table.table + %caption.table-header + .col-lg-9 + Per page + .col-lg-3 + .input-group + %input.form-control{placeholder: 'Quick search...', type: 'text'}/ + %span.input-group-btn + %button.btn{type: 'button'} + %i.icon-search %thead %tr %th # @@ -45,9 +54,9 @@ .panel .panel-heading %i.icon-edit.icon-large - Bordered Table + Padding Table .panel-body - %table.table.table-bordered + %table.table %thead %tr %th # @@ -70,14 +79,13 @@ %td Larry %td the Bird %td @twitter - .col-lg-6 .panel .panel-heading %i.icon-edit.icon-large - Default Table + Bordered Table .panel-body - %table.table + %table.table.table-bordered %thead %tr %th # @@ -101,6 +109,7 @@ %td the Bird %td @twitter + .panel .panel-heading %i.icon-edit.icon-large From 5a42f4b813ab92a9bd9de2585163c208aa8eaa97 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tayfun=20O=CC=88zis=CC=A7=20ERI=CC=87KAN?= Date: Sun, 11 Aug 2013 22:25:46 +0300 Subject: [PATCH 17/23] #30 Create tables page - Table th and td padding values was fixed - Table header and table footer was added - 'tables' css class was added to panels --- .../assets/stylesheets/application.css.sass | 32 +++++++++---- source/tables.html.haml | 47 +++++++++++++------ 2 files changed, 54 insertions(+), 25 deletions(-) diff --git a/source/assets/stylesheets/application.css.sass b/source/assets/stylesheets/application.css.sass index 9616622..9816174 100755 --- a/source/assets/stylesheets/application.css.sass +++ b/source/assets/stylesheets/application.css.sass @@ -25,16 +25,28 @@ form .text-center text-align: center -table - .table-header - text-align: left - padding: 10px - background-color: lighten($panel-heading-bg, 3) - border-bottom: 1px solid $table-border-color - .input-group - margin-right: -15px - input - height: 33px +.tables + .panel-body + margin-left: -15px + margin-right: -15px + margin-top: -15px + .table-header + text-align: left + padding: 10px + background-color: lighten($panel-heading-bg, 3) + border-bottom: 1px solid $table-border-color + &.row + margin: 0 + .input-group + margin-right: -15px + input + height: 33px + table + th:first-child, td:first-child + padding-left: 15px + + + #navbar .navbar-brand diff --git a/source/tables.html.haml b/source/tables.html.haml index cd92d19..3bb48ca 100755 --- a/source/tables.html.haml +++ b/source/tables.html.haml @@ -1,8 +1,8 @@ - page 'Tables', 'tables' -.panel +.panel.tables .panel-heading - %i.icon-edit.icon-large + %i.icon-table.icon-large Default Table .panel-tools .btn-group @@ -15,17 +15,17 @@ %a.btn{href: '#', data: {toggle: 'toolbar-tooltip'}, title: 'Reload'} %i.icon-refresh .badge 3 record - .panel-body.no-padding + .panel-body + .table-header.row + .col-lg-9 + Per page + .col-lg-3 + .input-group + %input.form-control{placeholder: 'Quick search...', type: 'text'}/ + %span.input-group-btn + %button.btn{type: 'button'} + %i.icon-search %table.table - %caption.table-header - .col-lg-9 - Per page - .col-lg-3 - .input-group - %input.form-control{placeholder: 'Quick search...', type: 'text'}/ - %span.input-group-btn - %button.btn{type: 'button'} - %i.icon-search %thead %tr %th # @@ -49,11 +49,28 @@ %td the Bird %td @twitter + .table-footer + %ul.pagination + %li + %a{:href => "#"} « + %li + %a{:href => "#"} 1 + %li + %a{:href => "#"} 2 + %li + %a{:href => "#"} 3 + %li + %a{:href => "#"} 4 + %li + %a{:href => "#"} 5 + %li + %a{:href => "#"} » + .row .col-lg-6 .panel .panel-heading - %i.icon-edit.icon-large + %i.icon-table.icon-large Padding Table .panel-body %table.table @@ -82,7 +99,7 @@ .col-lg-6 .panel .panel-heading - %i.icon-edit.icon-large + %i.icon-table.icon-large Bordered Table .panel-body %table.table.table-bordered @@ -112,7 +129,7 @@ .panel .panel-heading - %i.icon-edit.icon-large + %i.icon-table.icon-large Condensed Table .panel-body %table.table.table-condensed From ebf27f1deae142385439cc03e800d1b53850b431 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tayfun=20O=CC=88zis=CC=A7=20ERI=CC=87KAN?= Date: Mon, 12 Aug 2013 01:51:43 +0300 Subject: [PATCH 18/23] #30 Create tables page - Pagination controls was added - Row actions was added - Row states was added --- .../assets/stylesheets/application.css.sass | 34 +++- source/tables.html.haml | 147 ++++++++++++++++-- 2 files changed, 158 insertions(+), 23 deletions(-) diff --git a/source/assets/stylesheets/application.css.sass b/source/assets/stylesheets/application.css.sass index 9816174..1ca730c 100755 --- a/source/assets/stylesheets/application.css.sass +++ b/source/assets/stylesheets/application.css.sass @@ -27,9 +27,6 @@ form .tables .panel-body - margin-left: -15px - margin-right: -15px - margin-top: -15px .table-header text-align: left padding: 10px @@ -40,13 +37,36 @@ form .input-group margin-right: -15px input - height: 33px + height: 30px + button + height: 30px + padding: 0 10px + .table-footer + background-color: lighten($panel-heading-bg, 3) + border-top: 1px solid $table-border-color + +border-bottom-left-radius(4px) + +border-bottom-right-radius(4px) + padding: 10px 10px 5px 10px + margin-bottom: -14px + .pagination + margin: 0 table + margin-bottom: 0 th:first-child, td:first-child padding-left: 15px - - - + tr.disabled + +opacity(.4) + td + text-decoration: line-through + td.action + text-decoration: none !important + td.action + width: 15% + padding: 5px + .btn + @extend .btn-sm + height: 25px + padding: 2px 6px #navbar .navbar-brand diff --git a/source/tables.html.haml b/source/tables.html.haml index 3bb48ca..15b8716 100755 --- a/source/tables.html.haml +++ b/source/tables.html.haml @@ -15,10 +15,10 @@ %a.btn{href: '#', data: {toggle: 'toolbar-tooltip'}, title: 'Reload'} %i.icon-refresh .badge 3 record - .panel-body + .panel-body.no-padding .table-header.row .col-lg-9 - Per page + TODO: Add filters here .col-lg-3 .input-group %input.form-control{placeholder: 'Quick search...', type: 'text'}/ @@ -32,43 +32,158 @@ %th First Name %th Last Name %th Username + %th.actions + Actions %tbody - %tr + %tr.success %td 1 %td Mark %td Otto %td @mdo - %tr + %td.action + %a.btn.btn-success{href: '#', data: {toggle: 'tooltip'}, title: 'Zoom'} + %i.icon-zoom-in + %a.btn.btn-info{href: '#'} + %i.icon-edit + %a.btn.btn-danger{href: '#'} + %i.icon-trash + %tr.danger %td 2 %td Jacob %td Thornton %td @fat - %tr + %td.action + %a.btn.btn-success{href: '#', data: {toggle: 'tooltip'}, title: 'Zoom'} + %i.icon-zoom-in + %a.btn.btn-info{href: '#'} + %i.icon-edit + %a.btn.btn-danger{href: '#'} + %i.icon-trash + %tr.warning %td 3 %td Larry %td the Bird %td @twitter + %td.action + %a.btn.btn-success{href: '#', data: {toggle: 'tooltip'}, title: 'Zoom'} + %i.icon-zoom-in + %a.btn.btn-info{href: '#'} + %i.icon-edit + %a.btn.btn-danger{href: '#'} + %i.icon-trash + %tr.active + %td 4 + %td Mark + %td Otto + %td @mdo + %td.action + %a.btn.btn-success{href: '#', data: {toggle: 'tooltip'}, title: 'Zoom'} + %i.icon-zoom-in + %a.btn.btn-info{href: '#'} + %i.icon-edit + %a.btn.btn-danger{href: '#'} + %i.icon-trash + %tr.disabled + %td 5 + %td Jacob + %td Thornton + %td @fat + %td.action + %a.btn.btn-success{href: '#', data: {toggle: 'tooltip'}, title: 'Zoom'} + %i.icon-zoom-in + %a.btn.btn-info{href: '#'} + %i.icon-edit + %a.btn.btn-danger{href: '#'} + %i.icon-trash + %tr + %td 6 + %td Larry + %td the Bird + %td @twitter + %td.action + %a.btn.btn-success{href: '#', data: {toggle: 'tooltip'}, title: 'Zoom'} + %i.icon-zoom-in + %a.btn.btn-info{href: '#'} + %i.icon-edit + %a.btn.btn-danger{href: '#'} + %i.icon-trash + %tr + %td 7 + %td Jacob + %td Thornton + %td @fat + %td.action + %a.btn.btn-success{href: '#', data: {toggle: 'tooltip'}, title: 'Zoom'} + %i.icon-zoom-in + %a.btn.btn-info{href: '#'} + %i.icon-edit + %a.btn.btn-danger{href: '#'} + %i.icon-trash + %tr + %td 8 + %td Larry + %td the Bird + %td @twitter + %td.action + %a.btn.btn-success{href: '#', data: {toggle: 'tooltip'}, title: 'Zoom'} + %i.icon-zoom-in + %a.btn.btn-info{href: '#'} + %i.icon-edit + %a.btn.btn-danger{href: '#'} + %i.icon-trash + %tr + %td 9 + %td Mark + %td Otto + %td @mdo + %td.action + %a.btn.btn-success{href: '#', data: {toggle: 'tooltip'}, title: 'Zoom'} + %i.icon-zoom-in + %a.btn.btn-info{href: '#'} + %i.icon-edit + %a.btn.btn-danger{href: '#'} + %i.icon-trash + %tr + %td 10 + %td Jacob + %td Thornton + %td @fat + %td.action + %a.btn.btn-success{href: '#', data: {toggle: 'tooltip'}, title: 'Zoom'} + %i.icon-zoom-in + %a.btn.btn-info{href: '#'} + %i.icon-edit + %a.btn.btn-danger{href: '#'} + %i.icon-trash .table-footer %ul.pagination %li - %a{:href => "#"} « + %a{:href => '#'} « + %li.active + %a{:href => '#'} 1 + %li + %a{:href => '#'} 2 %li - %a{:href => "#"} 1 + %a{:href => '#'} 3 %li - %a{:href => "#"} 2 + %a{:href => '#'} 4 %li - %a{:href => "#"} 3 + %a{:href => '#'} 5 %li - %a{:href => "#"} 4 + %a{:href => '#'} 6 %li - %a{:href => "#"} 5 + %a{:href => '#'} 7 %li - %a{:href => "#"} » + %a{:href => '#'} 8 + %li + %a{:href => '#'} » + .pull-right + Showing 1 to 10 of 32 entries .row .col-lg-6 - .panel + .panel.tables .panel-heading %i.icon-table.icon-large Padding Table @@ -97,7 +212,7 @@ %td the Bird %td @twitter .col-lg-6 - .panel + .panel.tables .panel-heading %i.icon-table.icon-large Bordered Table @@ -127,11 +242,11 @@ %td @twitter -.panel +.panel.tables .panel-heading %i.icon-table.icon-large Condensed Table - .panel-body + .panel-body.no-padding %table.table.table-condensed %thead %tr From da668bd3037b1fa5e43fc35925cb9ac20faef247 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tayfun=20O=CC=88zis=CC=A7=20ERI=CC=87KAN?= Date: Mon, 12 Aug 2013 03:34:43 +0300 Subject: [PATCH 19/23] #22 Design login layout - Login layout was created - Sign in page was created - Forgot password page was created --- config.rb | 7 ++- source/assets/stylesheets/_variables.css.sass | 4 +- .../assets/stylesheets/application.css.sass | 49 ++++++++++++++--- source/dashboard.html.haml | 31 +++++++++++ source/forgot_password.html.haml | 12 ++++ source/index.html.haml | 55 +++++++++---------- source/layouts/layout.haml | 8 +-- source/layouts/login.haml | 37 +++++++++++++ source/partials/_dock.haml | 2 +- source/partials/_footer.haml | 6 ++ source/partials/_navbar.haml | 4 +- 11 files changed, 163 insertions(+), 52 deletions(-) create mode 100755 source/dashboard.html.haml create mode 100755 source/forgot_password.html.haml create mode 100755 source/layouts/login.haml create mode 100644 source/partials/_footer.haml diff --git a/config.rb b/config.rb index 9e81cb2..6ddaab7 100755 --- a/config.rb +++ b/config.rb @@ -37,9 +37,10 @@ # page "/path/to/file.html", :layout => :otherlayout # # A path which all have the same layout -# with_layout :admin do -# page "/admin/*" -# end +with_layout :login do + page '/index.html' + page '/forgot_password.html' +end # Proxy (fake) files # page "/this-page-has-no-template.html", :proxy => "/template-file.html" do diff --git a/source/assets/stylesheets/_variables.css.sass b/source/assets/stylesheets/_variables.css.sass index 2789d4a..111c28d 100755 --- a/source/assets/stylesheets/_variables.css.sass +++ b/source/assets/stylesheets/_variables.css.sass @@ -10,7 +10,7 @@ $brand-font-size: 1.8em $body-bg-primary: $silver $body-bg-secondary: $asbestos -$wrapper-corner-width: 15px +$wrapper-corner-size: 15px $sidebar-width: 80px $sidebar-bg: $base-dark-color @@ -20,6 +20,8 @@ $dock-link-font-size: .8em $animation-duration: .4s +$box-shadow-color: rgba(black, 0.04) + // Bootstrap Overrides $brand-primary: $base-color $brand-success: $brand-primary diff --git a/source/assets/stylesheets/application.css.sass b/source/assets/stylesheets/application.css.sass index 1ca730c..824b53a 100755 --- a/source/assets/stylesheets/application.css.sass +++ b/source/assets/stylesheets/application.css.sass @@ -4,6 +4,42 @@ @import 'bootstrap' @import 'bootstrap_overrides' +body.login + color: $base-dark-color + background-color: $body-bg-primary + .wrapper + padding: 20px + background-color: $clouds + +border-radius($wrapper-corner-size) + +box-shadow(0 0 0 2px $box-shadow-color) + border: 1px solid rgba(black, .3) + margin: 10% auto + width: 300px + h4 + margin: 0 0 15px 0 + text-align: center + .brand + margin-top: -15px + h1 + display: block + margin-bottom: 20px + .logo-icon + width: 75px + height: 75px + margin: auto + padding: 15px + border-radius: 40px + background: $base-dark-color + i[class*='icon-'] + margin-left: -5px + color: $base-color + font-size: 140% + .text-center + .checkbox + text-align: center + input + float: none + body.main padding: 10px 20px 0px 20px background-color: $body-bg-primary @@ -64,7 +100,6 @@ form width: 15% padding: 5px .btn - @extend .btn-sm height: 25px padding: 2px 6px @@ -89,13 +124,10 @@ form bottom: 0 left: 20px right: 20px - border: 1px solid rgba(black, .15) - +border-top-left-radius($wrapper-corner-width) - +border-top-right-radius($wrapper-corner-width) - // 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) + border: 1px solid rgba(black, .2) + +border-top-left-radius($wrapper-corner-size) + +border-top-right-radius($wrapper-corner-size) + +box-shadow(0 0 0 2px $box-shadow-color) overflow: hidden #content, #sidebar @@ -194,7 +226,6 @@ form #tools margin-left: 80px - box-shadow: 0 4px 2px -2px gray #breadcrumb +border-radius(0) diff --git a/source/dashboard.html.haml b/source/dashboard.html.haml new file mode 100755 index 0000000..ced6d65 --- /dev/null +++ b/source/dashboard.html.haml @@ -0,0 +1,31 @@ +- page 'Dashboard', 'dashboard' + +.panel + .panel-heading + %i.icon-beer.icon-large + Hierapolis Rocks! + .panel-tools + .btn-group + %a.btn{href: '#'} + %i.icon-refresh + Refresh statics + %a.btn{href: '#', data: {toggle: 'toolbar-tooltip'}, title: 'Toggle'} + %i.icon-chevron-down + .panel-body + .page-header + %h4 System usage + .progress + .progress-bar.progress-bar-success{style: 'width: 35%'} + .progress-bar.progress-bar-warning{style: 'width: 20%'} + .progress-bar.progress-bar-danger{style: 'width: 10%'} + .page-header + %h4 User statics + .row.text-center + .col-3 + %input.knob.second{'data-bgcolor' => '#d4ecfd', 'data-fgcolor' => '#30a1ec', 'data-inputcolor' => '#333', 'data-thickness' => '.3', 'data-width' => '140', 'data-height' => '140', :type => 'text', :value => '50'}/ + .col-3 + %input.knob.second{'data-bgcolor' => '#c4e9aa', 'data-fgcolor' => '#8ac368', 'data-inputcolor' => '#333', 'data-thickness' => '.3', 'data-width' => '140', 'data-height' => '140', :type => 'text', :value => '75'}/ + .col-3 + %input.knob.second{'data-bgcolor' => '#cef3f5', 'data-fgcolor' => '#5ba0a3', 'data-inputcolor' => '#333', 'data-thickness' => '.3', 'data-width' => '140', 'data-height' => '140', :type => 'text', :value => '35'}/ + .col-3 + %input.knob.second{'data-bgcolor' => '#f8d2e0', 'data-fgcolor' => '#b85e80', 'data-inputcolor' => '#333', 'data-thickness' => '.3', 'data-width' => '140', 'data-height' => '140', :type => 'text', :value => '85'}/ \ No newline at end of file diff --git a/source/forgot_password.html.haml b/source/forgot_password.html.haml new file mode 100755 index 0000000..de4c064 --- /dev/null +++ b/source/forgot_password.html.haml @@ -0,0 +1,12 @@ +- page 'Forgot password', 'forgot-password' + +.row + .col-lg-12 + %h4 + Reset your password + %form + .form-group + %input.form-control{placeholder: 'Email address', type: 'text'}/ + + =link_to 'Send', 'index.html', class: 'btn btn-default' + =link_to 'Go back', 'index.html' diff --git a/source/index.html.haml b/source/index.html.haml index ced6d65..2087df6 100755 --- a/source/index.html.haml +++ b/source/index.html.haml @@ -1,31 +1,26 @@ -- page 'Dashboard', 'dashboard' +- page 'Sign in', 'sign-in' -.panel - .panel-heading - %i.icon-beer.icon-large - Hierapolis Rocks! - .panel-tools - .btn-group - %a.btn{href: '#'} - %i.icon-refresh - Refresh statics - %a.btn{href: '#', data: {toggle: 'toolbar-tooltip'}, title: 'Toggle'} - %i.icon-chevron-down - .panel-body - .page-header - %h4 System usage - .progress - .progress-bar.progress-bar-success{style: 'width: 35%'} - .progress-bar.progress-bar-warning{style: 'width: 20%'} - .progress-bar.progress-bar-danger{style: 'width: 10%'} - .page-header - %h4 User statics - .row.text-center - .col-3 - %input.knob.second{'data-bgcolor' => '#d4ecfd', 'data-fgcolor' => '#30a1ec', 'data-inputcolor' => '#333', 'data-thickness' => '.3', 'data-width' => '140', 'data-height' => '140', :type => 'text', :value => '50'}/ - .col-3 - %input.knob.second{'data-bgcolor' => '#c4e9aa', 'data-fgcolor' => '#8ac368', 'data-inputcolor' => '#333', 'data-thickness' => '.3', 'data-width' => '140', 'data-height' => '140', :type => 'text', :value => '75'}/ - .col-3 - %input.knob.second{'data-bgcolor' => '#cef3f5', 'data-fgcolor' => '#5ba0a3', 'data-inputcolor' => '#333', 'data-thickness' => '.3', 'data-width' => '140', 'data-height' => '140', :type => 'text', :value => '35'}/ - .col-3 - %input.knob.second{'data-bgcolor' => '#f8d2e0', 'data-fgcolor' => '#b85e80', 'data-inputcolor' => '#333', 'data-thickness' => '.3', 'data-width' => '140', 'data-height' => '140', :type => 'text', :value => '85'}/ \ No newline at end of file +.row + .col-lg-12 + .brand.text-center + %h1 + .logo-icon + %i.icon-beer + Hierapolis +.row + .col-lg-12 + %h4 + Login to your account + %form + .form-group + %input.form-control{placeholder: 'Email address', type: 'text'}/ + .form-group + %input.form-control{placeholder: 'Password', type: 'password'}/ + .text-center + .checkbox + %label + %input{:type => 'checkbox'}/ + Remember me on this computer + =link_to 'Sign in', 'dashboard.html', class: 'btn btn-default' + %br/ + =link_to 'Forgot password?', 'forgot_password.html' diff --git a/source/layouts/layout.haml b/source/layouts/layout.haml index 0e3df62..0d7866e 100755 --- a/source/layouts/layout.haml +++ b/source/layouts/layout.haml @@ -45,12 +45,8 @@ #content = yield - - / Javascripts - = javascript_include_tag '//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js', - '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js', - '//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js', - 'application' + / Footer + = partial 'partials/footer' / Google Analytics = partial 'partials/trackers' \ No newline at end of file diff --git a/source/layouts/login.haml b/source/layouts/login.haml new file mode 100755 index 0000000..64d8587 --- /dev/null +++ b/source/layouts/login.haml @@ -0,0 +1,37 @@ +!!! 5 +/[if IE 8] +/[if IE 9] +/[if lt IE 10] +%html{lang: 'en', class: 'no-js'} + %head + %title= yield_content :title + %meta(http-equiv="content-type" content="text/html" charset="utf-8") + %meta(http-equiv="x-ua-compatible" content="ie=edge,chrome=1") + %meta(name="description" content="") + %meta(name="author" content="") + %meta{content: 'initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width', name: 'viewport'} + %meta(name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)") + %meta(name='apple-mobile-web-app-capable' content='yes') + %meta(name='apple-mobile-web-app-status-bar-style' content='translucent-black') + + %link(rel="shortcut icon" href="/assets/images/favicon.ico") + %link(rel="apple-touch-icon-precomposed" href="/assets/images/apple-touch-icon-precomposed.png") + %link(rel="apple-touch-icon-precomposed" sizes="57x57" href="/assets/images/apple-touch-icon-57x57-precomposed.png") + %link(rel="apple-touch-icon-precomposed" sizes="72x72" href="/assets/images/apple-touch-icon-72x72-precomposed.png") + %link(rel="apple-touch-icon-precomposed" sizes="114x114" href="/assets/images/apple-touch-icon-114x114-precomposed.png") + + / Stylesheets (Don't change include order) + = stylesheet_link_tag 'application', + '//netdna.bootstrapcdn.com/font-awesome/3.2.0/css/font-awesome.min.css' + = yield_content :head + + %body.login + + .wrapper + = yield + + / Footer + = partial 'partials/footer' + + / Google Analytics + = partial 'partials/trackers' \ No newline at end of file diff --git a/source/partials/_dock.haml b/source/partials/_dock.haml index cddfe65..a1e4052 100644 --- a/source/partials/_dock.haml +++ b/source/partials/_dock.haml @@ -3,7 +3,7 @@ %ul#dock %li.launcher{launcher_active('dashboard')} %i.icon-dashboard - =link_to 'Dashboard', 'index.html' + =link_to 'Dashboard', 'dashboard.html' %li.launcher{launcher_active('forms')} %i.icon-file-text-alt =link_to 'Forms', 'forms.html' diff --git a/source/partials/_footer.haml b/source/partials/_footer.haml new file mode 100644 index 0000000..d68fbfd --- /dev/null +++ b/source/partials/_footer.haml @@ -0,0 +1,6 @@ + +/ Javascripts += javascript_include_tag '//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js', + '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js', + '//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js', + 'application' \ No newline at end of file diff --git a/source/partials/_navbar.haml b/source/partials/_navbar.haml index 1de2cab..30b1836 100644 --- a/source/partials/_navbar.haml +++ b/source/partials/_navbar.haml @@ -26,11 +26,11 @@ %a.dropdown-toggle{'data-toggle' => 'dropdown', :href => '#'} %i.icon-user %strong John DOE - =image_tag lorem.image('300x400', color: '#777'), class: 'img-rounded' + =image_tag lorem.image('20x20', color: '#777'), class: 'img-rounded' %b.caret %ul.dropdown-menu %li %a{:href => '#'} Edit Profile %li.divider %li - %a{:href => '#'} Sign Out + =link_to 'Sign out', 'index.html' From 29bfd35892dd3b9819c7f4f169bd30cf50a54edc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tayfun=20O=CC=88zis=CC=A7=20ERI=CC=87KAN?= Date: Mon, 12 Aug 2013 03:50:08 +0300 Subject: [PATCH 20/23] #2 Configure Middleman i18n - i18n was enabled - Sign in and forgot password page's translations was added --- config.rb | 3 +++ locales/en.yml | 13 +++++++++++++ source/forgot_password.html.haml | 10 +++++----- source/index.html.haml | 13 ++++++------- 4 files changed, 27 insertions(+), 12 deletions(-) create mode 100644 locales/en.yml diff --git a/config.rb b/config.rb index 6ddaab7..6d8a358 100755 --- a/config.rb +++ b/config.rb @@ -64,6 +64,9 @@ # end # end +# i18n +activate :i18n + set :fonts_dir, 'assets/fonts' set :css_dir, 'assets/stylesheets' set :js_dir, 'assets/javascripts' diff --git a/locales/en.yml b/locales/en.yml new file mode 100644 index 0000000..c871bab --- /dev/null +++ b/locales/en.yml @@ -0,0 +1,13 @@ +en: + login_heading: "Login to your account" + login_remember_me: "Remember me on this computer" + login_email: "Email address" + login_email_hint: "Enter your email address" + login_password: "Password" + forgot_password: "Forgot password?" + forgot_password_heading: "Reset your password" + + sign_in: "Sign in" + sign_out: "Sign out" + send: "Send" + go_back: "Go back" diff --git a/source/forgot_password.html.haml b/source/forgot_password.html.haml index de4c064..f80e507 100755 --- a/source/forgot_password.html.haml +++ b/source/forgot_password.html.haml @@ -2,11 +2,11 @@ .row .col-lg-12 - %h4 - Reset your password + %h4=t(:forgot_password_heading) %form .form-group - %input.form-control{placeholder: 'Email address', type: 'text'}/ + %label.control-label=t(:login_email) + %input.form-control{placeholder: t(:login_email_hint), type: 'text'}/ - =link_to 'Send', 'index.html', class: 'btn btn-default' - =link_to 'Go back', 'index.html' + =link_to t(:send), 'index.html', class: 'btn btn-default' + =link_to t(:go_back), 'index.html' diff --git a/source/index.html.haml b/source/index.html.haml index 2087df6..87b8bdb 100755 --- a/source/index.html.haml +++ b/source/index.html.haml @@ -9,18 +9,17 @@ Hierapolis .row .col-lg-12 - %h4 - Login to your account + %h4=t(:login_heading) %form .form-group - %input.form-control{placeholder: 'Email address', type: 'text'}/ + %input.form-control{placeholder: t(:login_email), type: 'text'}/ .form-group - %input.form-control{placeholder: 'Password', type: 'password'}/ + %input.form-control{placeholder: t(:login_password), type: 'password'}/ .text-center .checkbox %label %input{:type => 'checkbox'}/ - Remember me on this computer - =link_to 'Sign in', 'dashboard.html', class: 'btn btn-default' + =t(:login_remember_me) + =link_to t(:sign_in), 'dashboard.html', class: 'btn btn-default' %br/ - =link_to 'Forgot password?', 'forgot_password.html' + =link_to t(:forgot_password), 'forgot_password.html' From 840b30370ddda54c06586d88c3b8c65e4b340983 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tayfun=20O=CC=88zis=CC=A7=20ERI=CC=87KAN?= Date: Mon, 12 Aug 2013 19:19:15 +0300 Subject: [PATCH 21/23] #28 Form headings was changed with fieldset and legend tags. --- .../assets/stylesheets/application.css.sass | 5 ++-- source/forgot_password.html.haml | 3 ++- source/index.html.haml | 27 ++++++++++--------- 3 files changed, 18 insertions(+), 17 deletions(-) diff --git a/source/assets/stylesheets/application.css.sass b/source/assets/stylesheets/application.css.sass index 824b53a..31b34e2 100755 --- a/source/assets/stylesheets/application.css.sass +++ b/source/assets/stylesheets/application.css.sass @@ -15,9 +15,6 @@ body.login border: 1px solid rgba(black, .3) margin: 10% auto width: 300px - h4 - margin: 0 0 15px 0 - text-align: center .brand margin-top: -15px h1 @@ -37,6 +34,8 @@ body.login .text-center .checkbox text-align: center + legend + text-align: center input float: none diff --git a/source/forgot_password.html.haml b/source/forgot_password.html.haml index f80e507..244b63f 100755 --- a/source/forgot_password.html.haml +++ b/source/forgot_password.html.haml @@ -2,8 +2,9 @@ .row .col-lg-12 - %h4=t(:forgot_password_heading) %form + %fieldset + %legend=t(:forgot_password_heading) .form-group %label.control-label=t(:login_email) %input.form-control{placeholder: t(:login_email_hint), type: 'text'}/ diff --git a/source/index.html.haml b/source/index.html.haml index 87b8bdb..c623bde 100755 --- a/source/index.html.haml +++ b/source/index.html.haml @@ -9,17 +9,18 @@ Hierapolis .row .col-lg-12 - %h4=t(:login_heading) %form - .form-group - %input.form-control{placeholder: t(:login_email), type: 'text'}/ - .form-group - %input.form-control{placeholder: t(:login_password), type: 'password'}/ - .text-center - .checkbox - %label - %input{:type => 'checkbox'}/ - =t(:login_remember_me) - =link_to t(:sign_in), 'dashboard.html', class: 'btn btn-default' - %br/ - =link_to t(:forgot_password), 'forgot_password.html' + %fieldset.text-center + %legend=t(:login_heading) + .form-group + %input.form-control{placeholder: t(:login_email), type: 'text'}/ + .form-group + %input.form-control{placeholder: t(:login_password), type: 'password'}/ + .text-center + .checkbox + %label + %input{:type => 'checkbox'}/ + =t(:login_remember_me) + =link_to t(:sign_in), 'dashboard.html', class: 'btn btn-default' + %br/ + =link_to t(:forgot_password), 'forgot_password.html' From 4fc953cc11f6465689562aefb2e650a82cb970e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tayfun=20O=CC=88zis=CC=A7=20ERI=CC=87KAN?= Date: Mon, 12 Aug 2013 19:26:27 +0300 Subject: [PATCH 22/23] 31 Add more content view helpers - Breadcrumb yield content was added --- source/assets/stylesheets/application.css.sass | 2 ++ source/partials/_breadcrumb.haml | 5 +++-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/source/assets/stylesheets/application.css.sass b/source/assets/stylesheets/application.css.sass index 31b34e2..66d8a13 100755 --- a/source/assets/stylesheets/application.css.sass +++ b/source/assets/stylesheets/application.css.sass @@ -233,6 +233,8 @@ form .title font-weight: 800 color: $base-color + a + color: darken($silver, 20) #toolbar margin-top: -70px diff --git a/source/partials/_breadcrumb.haml b/source/partials/_breadcrumb.haml index e4b31e9..3df2c63 100755 --- a/source/partials/_breadcrumb.haml +++ b/source/partials/_breadcrumb.haml @@ -1,3 +1,4 @@ %ul#breadcrumb.breadcrumb - %li.title Dashboard - %li.active Reports \ No newline at end of file + %li.title=yield_content :title + %li=link_to 'Lorem', '#' + %li.active=link_to 'ipsum', '#' \ No newline at end of file From b6f0f0f4ef80ae0aab56c2db272f23c7df804b48 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tayfun=20O=CC=88zis=CC=A7=20ERI=CC=87KAN?= Date: Wed, 11 Sep 2013 16:09:09 +0300 Subject: [PATCH 23/23] 31 Add more content view helpers - Toolbar yield content was added - Font-family was added to global variables --- Gemfile.lock | 2 +- source/assets/stylesheets/_variables.css.sass | 2 ++ .../assets/stylesheets/application.css.sass | 3 +++ source/dashboard.html.haml | 24 +++++++++++++++---- source/partials/_toolbar.haml | 15 +----------- source/tables.html.haml | 12 ++++++++++ 6 files changed, 39 insertions(+), 19 deletions(-) diff --git a/Gemfile.lock b/Gemfile.lock index aee9e65..84e9535 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,6 +1,6 @@ GIT remote: git://github.com/thomas-mcdonald/bootstrap-sass.git - revision: 79e7f27bcd70aa56682a8460c0bd6871bb6da172 + revision: 0e88056ac5d58fb0bbd23d3fe929eac01712d964 branch: 3 specs: bootstrap-sass (3.0.0.0) diff --git a/source/assets/stylesheets/_variables.css.sass b/source/assets/stylesheets/_variables.css.sass index 111c28d..0334a2d 100755 --- a/source/assets/stylesheets/_variables.css.sass +++ b/source/assets/stylesheets/_variables.css.sass @@ -5,6 +5,8 @@ $base-color: $turquoise $base-dark-color: $midnight-blue $base-dark-color-alternative: $wet-asphalt +$base-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif + $brand-font-size: 1.8em $body-bg-primary: $silver diff --git a/source/assets/stylesheets/application.css.sass b/source/assets/stylesheets/application.css.sass index 66d8a13..5e102df 100755 --- a/source/assets/stylesheets/application.css.sass +++ b/source/assets/stylesheets/application.css.sass @@ -4,6 +4,9 @@ @import 'bootstrap' @import 'bootstrap_overrides' +body + font-family: $base-font-family + body.login color: $base-dark-color background-color: $body-bg-primary diff --git a/source/dashboard.html.haml b/source/dashboard.html.haml index ced6d65..8996bb1 100755 --- a/source/dashboard.html.haml +++ b/source/dashboard.html.haml @@ -1,5 +1,21 @@ - page 'Dashboard', 'dashboard' +- content_for :toolbar do + .btn-group + %a.btn{href: '#', data: {toggle: 'toolbar-tooltip'}, title: 'Building'} + %i.icon-building + %a.btn{href: '#', data: {toggle: 'toolbar-tooltip'}, title: 'Laptop'} + %i.icon-laptop + %a.btn{href: '#', data: {toggle: 'toolbar-tooltip'}, title: 'Calendar'} + %i.icon-calendar + %span.badge 3 + %a.btn{href: '#', data: {toggle: 'toolbar-tooltip'}, title: 'Lemon'} + %i.icon-lemon + .label.label-danger + Danger + .label.label-info + Info + .panel .panel-heading %i.icon-beer.icon-large @@ -14,10 +30,10 @@ .panel-body .page-header %h4 System usage - .progress - .progress-bar.progress-bar-success{style: 'width: 35%'} - .progress-bar.progress-bar-warning{style: 'width: 20%'} - .progress-bar.progress-bar-danger{style: 'width: 10%'} + .progress + .progress-bar.progress-bar-success{style: 'width: 35%'} + .progress-bar.progress-bar-warning{style: 'width: 20%'} + .progress-bar.progress-bar-danger{style: 'width: 10%'} .page-header %h4 User statics .row.text-center diff --git a/source/partials/_toolbar.haml b/source/partials/_toolbar.haml index 408dc12..14b3a1a 100755 --- a/source/partials/_toolbar.haml +++ b/source/partials/_toolbar.haml @@ -1,15 +1,2 @@ #toolbar - .btn-group - %a.btn{href: '#', data: {toggle: 'toolbar-tooltip'}, title: 'Building'} - %i.icon-building - %a.btn{href: '#', data: {toggle: 'toolbar-tooltip'}, title: 'Laptop'} - %i.icon-laptop - %a.btn{href: '#', data: {toggle: 'toolbar-tooltip'}, title: 'Calendar'} - %i.icon-calendar - %span.badge 3 - %a.btn{href: '#', data: {toggle: 'toolbar-tooltip'}, title: 'Lemon'} - %i.icon-lemon - .label.label-danger - Danger - .label.label-info - Info \ No newline at end of file + =yield_content :toolbar \ No newline at end of file diff --git a/source/tables.html.haml b/source/tables.html.haml index 15b8716..e75b886 100755 --- a/source/tables.html.haml +++ b/source/tables.html.haml @@ -1,5 +1,17 @@ - page 'Tables', 'tables' +- content_for :toolbar do + .btn-group + %a.btn{href: '#', data: {toggle: 'toolbar-tooltip'}, title: 'Building'} + %i.icon-building + %a.btn{href: '#', data: {toggle: 'toolbar-tooltip'}, title: 'Laptop'} + %i.icon-laptop + %a.btn{href: '#', data: {toggle: 'toolbar-tooltip'}, title: 'Calendar'} + %i.icon-calendar + %span.badge 3 + %a.btn{href: '#', data: {toggle: 'toolbar-tooltip'}, title: 'Lemon'} + %i.icon-lemon + .panel.tables .panel-heading %i.icon-table.icon-large