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..ed0bab56 100644 --- a/app/assets/stylesheets/login.css.scss +++ b/app/assets/stylesheets/login.css.scss @@ -1,150 +1,51 @@ -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); + padding: 10px; } -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/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/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..51d69e0e 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 + 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