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] #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'