lab2023#22 Design login layout

- Login layout was created - Sign in page was created - Forgot password page was created
lixiansky · Aug 12, 2013 · da668bd · da668bd
1 parent ebf27f1
commit da668bd
Show file tree

Hide file tree

Showing 11 changed files with 163 additions and 52 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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'}/
diff --git a/source/forgot_password.html.haml 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
@@ -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'}/
+.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
@@ -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'
diff --git a/source/layouts/login.haml b/source/layouts/login.haml
@@ -0,0 +1,37 @@
+!!! 5
+/[if IE 8]      <html class="no-js lt-ie10 lt-ie9" lang="en-us">
+/[if IE 9]      <html class="no-js lt-ie10 lt-ie9" lang="en-us">
+/[if lt IE 10]  <html class="no-js lt-ie10" lang="en-us">
+%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'
diff --git 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
@@ -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'
diff --git 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'