mirror of
https://github.com/TracksApp/tracks.git
synced 2026-01-06 01:08:50 +01:00
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.
This commit is contained in:
Matt Rogers
parent
3468d1ec13
commit
89506dbeb7
5 changed files with 109 additions and 176 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
24
app/assets/stylesheets/tracks-logo.css.scss
Normal file
24
app/assets/stylesheets/tracks-logo.css.scss
Normal file
|
|
@ -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%);
|
||||
}
|
||||
|
|
@ -1,17 +1,14 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<%= stylesheet_link_tag "login" %>
|
||||
<%= favicon_link_tag 'favicon.ico' %>
|
||||
<%= favicon_link_tag 'apple-touch-icon.png', :rel => 'apple-touch-icon', :type => 'image/png' %>
|
||||
<title><%= @page_title -%></title>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<%= yield %>
|
||||
|
||||
<%= render :partial => "shared/footer" %>
|
||||
</body>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<%= favicon_link_tag 'favicon.ico' %>
|
||||
<%= favicon_link_tag 'apple-touch-icon.png', :rel => 'apple-touch-icon', :type => 'image/png' %>
|
||||
<title><%= @page_title -%></title>
|
||||
<%= stylesheet_link_tag "application" %>
|
||||
</head>
|
||||
<body class="bootstrap">
|
||||
<%= yield %>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,28 +1,38 @@
|
|||
<div title="<%= t('login.account_login') %>" id="loginform" class="form">
|
||||
|
||||
<%= render_flash %>
|
||||
|
||||
<h3><%= t('login.please_login') %>:</h3>
|
||||
<div id="database_auth_form" style="display:block">
|
||||
<%= form_tag :action=> 'login' do %>
|
||||
<table>
|
||||
<tr>
|
||||
<td><label for="user_login"><%= User.human_attribute_name('login') %>:</label></td>
|
||||
<td><input type="text" name="user_login" id="user_login" value="" class="login_text" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="user_password"><%= User.human_attribute_name('password') %>:</label></td>
|
||||
<td><input type="password" name="user_password" id="user_password" class="login_text" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="user_noexpiry"><%= t('login.user_no_expiry') %>:</label></td>
|
||||
<td><input type="checkbox" name="user_noexpiry" id="user_noexpiry" checked /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td><input type="submit" name="login" value="<%= t('login.sign_in') %>" class="primary" /></td>
|
||||
</tr>
|
||||
</table>
|
||||
<% end %>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="login-flash">
|
||||
<%= render_flash %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="login-wrapper">
|
||||
<div class="login-box">
|
||||
<div class="icon-box">
|
||||
<div class="tracks-icon"><div class="tracks-icon-text">10</div>
|
||||
</div>
|
||||
<div title="<%= t('login.account_login') %>" id="loginform" class="login-form">
|
||||
<h3><%= t('login.please_login') %>:</h3>
|
||||
<%= form_tag login_path do %>
|
||||
<div class="label-element-combo">
|
||||
<%= label_tag "user_login", User.human_attribute_name('login') %>
|
||||
<%= text_field_tag "user_login", nil, class: "form-control" %>
|
||||
</div>
|
||||
<div class="label-element-combo">
|
||||
<%= label_tag "user_password", User.human_attribute_name("password") %>
|
||||
<%= password_field_tag "user_password", nil, class: "form-control" %>
|
||||
</div>
|
||||
<div class="label-element-combo">
|
||||
<div class="checkbox">
|
||||
<label for="user_expiry">
|
||||
<input name="user_expiry" type="checkbox" checked><%= t("login.user_no_expiry") %></input>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<%= submit_tag t("login.sign_in"), class: "btn btn-default" %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<%= render :partial => "shared/footer" %>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue