From 89506dbeb78ac0734c17bd9f2a9c5a573001d6a3 Mon Sep 17 00:00:00 2001 From: Matt Rogers Date: Fri, 27 Nov 2015 15:19:16 -0600 Subject: [PATCH 1/3] Redesign the login page Makes use of both bootstrap and a rendering of the Tracks logo to provide a bit better experience in term of brand identity as well as also supporting mobile better. --- app/assets/stylesheets/application.css.scss | 2 + app/assets/stylesheets/login.css.scss | 166 ++++---------------- app/assets/stylesheets/tracks-logo.css.scss | 24 +++ app/views/layouts/login.html.erb | 29 ++-- app/views/login/login.html.erb | 64 ++++---- 5 files changed, 109 insertions(+), 176 deletions(-) create mode 100644 app/assets/stylesheets/tracks-logo.css.scss diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss index ac16ce79..e60aef92 100644 --- a/app/assets/stylesheets/application.css.scss +++ b/app/assets/stylesheets/application.css.scss @@ -25,6 +25,8 @@ .bootstrap { @import "bootstrap-sprockets"; @import "bootstrap"; + @import "tracks-logo"; + @import "login"; // resets normally applied to body // TODO: remove when dropping the .bootstrap namespace diff --git a/app/assets/stylesheets/login.css.scss b/app/assets/stylesheets/login.css.scss index 7d80a5a0..28d2c008 100644 --- a/app/assets/stylesheets/login.css.scss +++ b/app/assets/stylesheets/login.css.scss @@ -1,150 +1,50 @@ -body { background-color: #fff; color: #333; } - -body, ol, ul, td { - font-family: verdana, arial, helvetica, sans-serif; - font-size: 12px; - line-height: 18px; - background: #eee; +body { + background-color: rgba(0, 0, 0, 0.75); } -p { - background: #eee; +.login-flash { + @include make-xs-column(12); + @include make-sm-column(6); + @include make-sm-column-offset(3); } -a, a:link, a:active, a:visited { - color: #cc3334; - text-decoration: none; - padding-left: 1px; - padding-right: 1px; +.login-wrapper { + @include make-row(); } -a:hover { - color: #fff; - background-color: #cc3334; +.login-box { + @include make-xs-column(12); + @include make-sm-column(6); + @include make-sm-column-offset(3); + margin: 2em auto 1em; + background-color: rgba(0, 0, 0, 0.75); + color: #eaeaea; + padding: 0 0 1em 0; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), 0 2px 3px rgba(0, 0, 0, 0.3); } -h1, h2, h3 { color: #333; font-family: verdana, arial, helvetica, sans-serif; text-align: center; } -h1 { font-size: 28px } -h2 { font-size: 19px } -h3 { font-size: 16px } - -li { margin-bottom: 7px; } - -pre { - background-color: #eee; - padding: 10px; - font-size: 11px; +@media(min-width: $screen-sm-min) { + .login-box { + border-radius: 5px; + } } -td {background-color: #ff9;} - -#scaffold-main { - width: 80%; - margin: 10px auto; - padding: 6px; +.icon-box { + padding: 1em 0; } -div.form { - width: 350px; - margin: 100px auto 10px auto; - padding: 10px; - border: 1px solid #999; - background: #ff9; +.login-form { + @include make-xs-column(12); + @include make-sm-column(8); + @include make-sm-column-offset(2) } -div.memo { - width: 40%; - margin: 100px auto; - padding: 10px; - border: 1px solid #999; - background: #ff9; +.label-element-combo { + @extend .form-group; } -/* Flash box styling */ - -h4.alert { - font-size: 0.8em; - font-weight: bold; - margin: 0; - padding: 5px; - text-align: center; -} - -h4.warning { - border: 1px solid #ED2E38; - background-color: #F6979C; - color: #000000; -} -h4.error { - color:#fff; - background:#c00; -} -h4.notice { - border: 1px solid #007E00; - background-color: #c2ffc2; - color: #007E00; -} - -#footer { - clear: both; - background-color: #eee; - font-size: 0.8em; - text-align: center; - color: #999; - margin: 20px auto; - padding: 0px; -} - - -/* Error message styles */ -.fieldWithErrors { - padding: 2px; - background-color: red; - display: table; -} - -#errorExplanation { - border: 2px solid #ff0000; - padding: 7px; - padding-bottom: 12px; - margin: 10px auto 10px auto; - background-color: #f0f0f0; - - h2 { - text-align: left; - font-weight: bold; - padding: 5px 5px 5px 15px; - font-size: 12px; - margin: -7px; - background-color: #c00; - color: #fff; - } - - p { - color: #333; - margin-bottom: 0; - padding: 5px; - } - - ul li { - font-size: 1em; - list-style-type: disc; - list-style-position: outside; - } -} - -input.login_text { - width:200px; -} -input.open_id { - background: image-url('open-id-login-bg.gif') no-repeat; - background-color: #fff; - background-position: 0 50%; - color: #000; - padding-left: 18px; - width: 182px; -} -p.alternate_auth { - text-align: center; - a { text-decoration:underline; } +.footer { + @include make-xs-column(12); + @include make-sm-column(6); + @include make-sm-column-offset(3); } diff --git a/app/assets/stylesheets/tracks-logo.css.scss b/app/assets/stylesheets/tracks-logo.css.scss new file mode 100644 index 00000000..5c73ae96 --- /dev/null +++ b/app/assets/stylesheets/tracks-logo.css.scss @@ -0,0 +1,24 @@ +$logo_color: rgb(214, 55, 64); + +.tracks-icon { + font-size: 6.5em; + color: black; + border-radius: 10%; + border: 4px solid $logo_color; + height: 150px; + width: 150px; + padding: 5px; + margin: auto; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.24), 0 2px 3px rgba(0, 0, 0, 0.4); + background: linear-gradient(to bottom, rgb(255, 255, 255), $logo_color 40%); + font-weight: 700; + text-shadow: rgba(255, 255, 255, 0.24) 1px 1px; + position: relative; +} + +.tracks-icon-text { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} diff --git a/app/views/layouts/login.html.erb b/app/views/layouts/login.html.erb index d09bd531..3e726051 100644 --- a/app/views/layouts/login.html.erb +++ b/app/views/layouts/login.html.erb @@ -1,17 +1,14 @@ - - - - - <%= stylesheet_link_tag "login" %> - <%= favicon_link_tag 'favicon.ico' %> - <%= favicon_link_tag 'apple-touch-icon.png', :rel => 'apple-touch-icon', :type => 'image/png' %> -<%= @page_title -%> - - - - -<%= yield %> - -<%= render :partial => "shared/footer" %> - + + + + + + <%= favicon_link_tag 'favicon.ico' %> + <%= favicon_link_tag 'apple-touch-icon.png', :rel => 'apple-touch-icon', :type => 'image/png' %> + <%= @page_title -%> + <%= stylesheet_link_tag "application" %> + + + <%= yield %> + diff --git a/app/views/login/login.html.erb b/app/views/login/login.html.erb index 7db9c2d9..6845876b 100644 --- a/app/views/login/login.html.erb +++ b/app/views/login/login.html.erb @@ -1,28 +1,38 @@ -
- - <%= render_flash %> - -

<%= t('login.please_login') %>:

-
- <%= form_tag :action=> 'login' do %> - - - - - - - - - - - - - - - - - -
- <% end %> +
+
+
-
\ No newline at end of file + From 37c61fa60a2b699645f8d88b6108ef8621cf6996 Mon Sep 17 00:00:00 2001 From: Matt Rogers Date: Sun, 29 Nov 2015 10:03:35 -0600 Subject: [PATCH 2/3] Update the login cucumber steps to match the new UI Removes the colon for the checkbox label since the position of the checkbox and the text on the UI has changed. --- features/step_definitions/login_steps.rb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/features/step_definitions/login_steps.rb b/features/step_definitions/login_steps.rb index d3332e24..52e11947 100644 --- a/features/step_definitions/login_steps.rb +++ b/features/step_definitions/login_steps.rb @@ -7,7 +7,7 @@ end When /^I submit the login form as user "([^\"]*)" with password "([^\"]*)"$/ do |username, password| fill_in 'Login', :with => username fill_in 'Password', :with => password - uncheck "Stay logged in:" + uncheck "Stay logged in" click_button "Sign in" end From a07567086c2ffafd4b5a88957aebdc5bfbfa9cb9 Mon Sep 17 00:00:00 2001 From: Matt Rogers Date: Tue, 15 Dec 2015 19:39:37 -0600 Subject: [PATCH 3/3] Add flash styling of the login page. --- app/assets/stylesheets/login.css.scss | 1 + app/helpers/bootstrap_flash_helper.rb | 36 +++++++++++++++++++++++++++ app/views/login/login.html.erb | 2 +- 3 files changed, 38 insertions(+), 1 deletion(-) create mode 100644 app/helpers/bootstrap_flash_helper.rb diff --git a/app/assets/stylesheets/login.css.scss b/app/assets/stylesheets/login.css.scss index 28d2c008..ed0bab56 100644 --- a/app/assets/stylesheets/login.css.scss +++ b/app/assets/stylesheets/login.css.scss @@ -6,6 +6,7 @@ body { @include make-xs-column(12); @include make-sm-column(6); @include make-sm-column-offset(3); + padding: 10px; } .login-wrapper { diff --git a/app/helpers/bootstrap_flash_helper.rb b/app/helpers/bootstrap_flash_helper.rb new file mode 100644 index 00000000..04ea47bf --- /dev/null +++ b/app/helpers/bootstrap_flash_helper.rb @@ -0,0 +1,36 @@ +module BootstrapFlashHelper + ALERT_MAPPING = { + :notice => :success, + :alert => :danger, + :error => :danger, + :info => :info, + :warning => :warning + } unless const_defined?(:ALERT_MAPPING) + + def bootstrap_flash(options = {:close_button => true}) + flash_messages = [] + flash.each do |type, message| + # Skip empty messages, e.g. for devise messages set to nothing in a locale file. + next if message.blank? + type = type.to_sym + next unless ALERT_MAPPING.keys.include?(type) + + + tag_class = options.extract!(:class)[:class] + tag_options = { + class: "alert fade in alert-#{ALERT_MAPPING[type]} #{tag_class}" + }.merge(options) + + close_button = "" + if options[:close_button] + close_button = content_tag(:button, raw("×"), type: "button", class: "close", "data-dismiss" => "alert") + end + + Array(message).each do |msg| + text = content_tag(:div, close_button + msg, tag_options) + flash_messages << text if msg + end + end + flash_messages.join("\n").html_safe + end +end diff --git a/app/views/login/login.html.erb b/app/views/login/login.html.erb index 6845876b..51d69e0e 100644 --- a/app/views/login/login.html.erb +++ b/app/views/login/login.html.erb @@ -1,7 +1,7 @@