getting started + login CSS WIP
This commit is contained in:
Felix Niklas
parent
301bea3afe
commit
98d8d87232
10 changed files with 330 additions and 146 deletions
|
|
@ -1,5 +1,5 @@
|
|||
class Index extends App.ControllerContent
|
||||
className: 'container getstarted'
|
||||
className: 'getstarted fit vertical center justified'
|
||||
|
||||
events:
|
||||
'submit form': 'submit',
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
class Index extends App.ControllerContent
|
||||
className: 'login fit vertical center justified'
|
||||
|
||||
events:
|
||||
'submit #login': 'login'
|
||||
|
||||
|
|
|
|||
|
|
@ -1,36 +1,22 @@
|
|||
<div class="hero-unit">
|
||||
<h1><%- @T( 'Getting started!' ) %><small></small></h1>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<ol>
|
||||
<li><%- @T( 'Create Admin' ) %></li>
|
||||
<li><%- @T( 'Invite Agents' ) %></li>
|
||||
<li><%- @T( 'Configure Channels' ) %></li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-two clearfix">
|
||||
<% if @master_user: %>
|
||||
<div class="master_user hero-left">
|
||||
<h2><%- @T( 'Create Admin' ) %></h2>
|
||||
<form class="form-stacked form-large" id="form-master">
|
||||
<button type="submit" class="btn btn-primary submit"><%- @T( 'Next...' ) %></button>
|
||||
</form>
|
||||
</div>
|
||||
<% end %>
|
||||
<div class="agent_user hero-left hide">
|
||||
<h2><%- @T( 'Invite Agents' ) %></h2>
|
||||
<form class="form-stacked form-large" id="form-agent">
|
||||
<button type="submit" class="btn btn-primary submit"><%- @T( 'Send invitation' ) %></button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="hero-right">
|
||||
<h2><%- @T( 'Tour' ) %></h2>
|
||||
<p>
|
||||
<%- @T( 'Learn all about ...' ) %>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<ol class="horizontal tabs tabs-condensed">
|
||||
<li class="tab contain-text active"><%- @T( 'Create Admin' ) %></li>
|
||||
<li class="tab contain-text"><%- @T( 'Invite Agents' ) %></li>
|
||||
<li class="tab contain-text"><%- @T( 'Configure Channels' ) %></li>
|
||||
</ol>
|
||||
<% if @master_user: %>
|
||||
<div class="master_user hero-left">
|
||||
<h2><%- @T( 'Create Admin' ) %></h2>
|
||||
<form class="form-stacked" id="form-master">
|
||||
<button type="submit" class="btn btn-primary submit"><%- @T( 'Next...' ) %></button>
|
||||
</form>
|
||||
</div>
|
||||
<% end %>
|
||||
<div class="agent_user hero-left hide">
|
||||
<h2><%- @T( 'Invite Agents' ) %></h2>
|
||||
<form class="form-stacked" id="form-agent">
|
||||
<button type="submit" class="btn btn-primary submit"><%- @T( 'Send invitation' ) %></button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,50 +1,46 @@
|
|||
<div id="login">
|
||||
<p>Login with zeughaus.znuny.com:</p> <!-- how do you pass @T a parameter? @T( 'Login with %s', zeughaus.znuny.com )? -->
|
||||
|
||||
<div class="hero-unit">
|
||||
<h1><%- @T( 'Welcome stranger!' ) %></h1>
|
||||
<div class="hero-unit">
|
||||
<form id="login">
|
||||
<label for="username"><%- @Ti( 'Username / email' ) %></label>
|
||||
<input id="username" name="username" type="text" class="form-control" value="<%= @item.username %>" autocapitalize="off" />
|
||||
|
||||
<div class="col-12">
|
||||
<p><%- @T( 'Sign in with' ) %></p>
|
||||
<form id="login" class="form-inline">
|
||||
<input name="username" type="text" class="form-control col-3" placeholder="<%- @Ti( 'Username or email' ) %>" value="<%= @item.username %>" autocapitalize="off"/>
|
||||
<input name="password" type="password" class="form-control col-3" placeholder="<%- @Ti( 'Password' ) %>"/>
|
||||
<button class="btn btn-primary" type="submit"><%- @T( 'Sign in' ) %></button>
|
||||
<div>
|
||||
<span class="small"><label><input name="remember_me" value="1" type="checkbox"/> <%- @T( 'Remember me' ) %></label></span>
|
||||
<% if @C('user_lost_password'): %>
|
||||
<span class="small">·</span>
|
||||
<a href="#reset_password" class="small"><%- @T( 'Forgot password?' ) %></a>
|
||||
<% end %>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<label for="password"><%- @Ti( 'Password' ) %></label>
|
||||
<input id="password" name="password" type="password" class="form-control"/>
|
||||
|
||||
<% if !_.isEmpty( @auth_providers ): %>
|
||||
<div class="col-12">
|
||||
<p>--- <%- @T( 'or' ) %> ---</p>
|
||||
</div>
|
||||
<button class="btn btn-primary" type="submit"><%- @T( 'Sign in' ) %></button>
|
||||
|
||||
<div class="col-12">
|
||||
<p><%- @T( 'Sign in using' ) %></p>
|
||||
<ul>
|
||||
<% for auth_provider in @auth_providers: %>
|
||||
<li><a href="<%= auth_provider.url %>"><%- @T( auth_provider.name ) %></a></li>
|
||||
<div>
|
||||
<% if @C('user_lost_password'): %>
|
||||
<span class="small">·</span>
|
||||
<a href="#reset_password" class="small"><%- @T( 'Forgot password?' ) %></a>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<% if @C('user_create_account'): %>
|
||||
<div class="col-12">
|
||||
<p>--- <%- @T( 'or' ) %> ---</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p><%- @T( 'New to %s join today!', @C( 'product_name' ) ) %></p>
|
||||
<p><a href="#signup" class="btn btn-default"><%- @T( 'Sign up' ) %></a>
|
||||
</div>
|
||||
<% end %>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<% if !_.isEmpty( @auth_providers ): %>
|
||||
<div class="col-12">
|
||||
<p>--- <%- @T( 'or' ) %> ---</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<p><%- @T( 'Sign in using' ) %></p>
|
||||
<ul>
|
||||
<% for auth_provider in @auth_providers: %>
|
||||
<li><a href="<%= auth_provider.url %>"><%- @T( auth_provider.name ) %></a></li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<% if @C('user_create_account'): %>
|
||||
<div class="col-12">
|
||||
<p>--- <%- @T( 'or' ) %> ---</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<p><%- @T( 'New to %s join today!', @C( 'product_name' ) ) %></p>
|
||||
<p><a href="#signup" class="btn btn-default"><%- @T( 'Sign up' ) %></a>
|
||||
</div>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="navbar navbar-fixed-top navbar-inverse">
|
||||
<div class="navbar navbar-inverse">
|
||||
<a class="navbar-brand" href="#/"><%- @C( 'product_name' ) %></a>
|
||||
<ul class="nav navbar-nav">
|
||||
<% for item in @navbar_left: %>
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
*= require ./bootstrap-tokenfield.css
|
||||
*= require ./noty_theme_twitter.css
|
||||
*= require ./sew.css
|
||||
*= require ./layout.css
|
||||
*= require ./zzz.css
|
||||
*
|
||||
*= require_tree ./custom/
|
||||
|
|
|
|||
161
app/assets/stylesheets/layout.css
Executable file
161
app/assets/stylesheets/layout.css
Executable file
|
|
@ -0,0 +1,161 @@
|
|||
.horizontal, .vertical {
|
||||
display: -webkit-box !important;
|
||||
display: -ms-flexbox !important;
|
||||
display: -moz-flex !important;
|
||||
display: -webkit-flex !important;
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.horizontal {
|
||||
-webkit-box-orient: horizontal;
|
||||
-ms-flex-direction: row;
|
||||
-moz-flex-direction: row;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.horizontal.reverse {
|
||||
-webkit-box-direction: reverse;
|
||||
-ms-flex-direction: row-reverse;
|
||||
-moz-flex-direction: row-reverse;
|
||||
-webkit-flex-direction: row-reverse;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.vertical {
|
||||
-webkit-box-orient: vertical;
|
||||
-ms-flex-direction: column;
|
||||
-moz-flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.vertical.reverse {
|
||||
-webkit-box-direction: reverse;
|
||||
-ms-flex-direction: column-reverse;
|
||||
-moz-flex-direction: column-reverse;
|
||||
-webkit-flex-direction: column-reverse;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fit {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body.fit {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.flex {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
-moz-flex: 1;
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.flex-auto {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1 1 auto;
|
||||
-moz-flex: 1 1 auto;
|
||||
-webkit-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.flex-none {
|
||||
-webkit-box-flex: none;
|
||||
-ms-flex: none;
|
||||
-moz-flex: none;
|
||||
-webkit-flex: none;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
-moz-flex: 1;
|
||||
-webkit-flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.flex-2 {
|
||||
-webkit-box-flex: 2;
|
||||
-ms-flex: 2;
|
||||
-moz-flex: 2;
|
||||
-webkit-flex: 2;
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
.flex-3 {
|
||||
-webkit-box-flex: 3;
|
||||
-ms-flex: 3;
|
||||
-moz-flex: 3;
|
||||
-webkit-flex: 3;
|
||||
flex: 3;
|
||||
}
|
||||
|
||||
|
||||
.justify-start {
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
-moz-justify-content: flex-start;
|
||||
-webkit-justify-content: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.justified {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-moz-justify-content: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.justify-end {
|
||||
-webkit-box-pack: end;
|
||||
-ms-flex-pack: end;
|
||||
-moz-justify-content: flex-end;
|
||||
-webkit-justify-content: flex-end;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.justify-between {
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
-moz-justify-content: space-between;
|
||||
-webkit-justify-content: space-between;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
|
||||
.start {
|
||||
-webkit-box-align: start;
|
||||
-ms-flex-align: start;
|
||||
-moz-align-items: flex-start;
|
||||
-webkit-align-items: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.center {
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
-moz-align-items: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.end {
|
||||
-webkit-box-align: end;
|
||||
-ms-flex-align: end;
|
||||
-moz-align-items: flex-end;
|
||||
-webkit-align-items: flex-end;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
|
@ -1,49 +1,7 @@
|
|||
body {
|
||||
padding-top:78px;
|
||||
/*
|
||||
font-size: 13px;
|
||||
*/
|
||||
font-weight: 200;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.glyphicon {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
label, input, button, select, textarea {
|
||||
font-size: 13px;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
select,
|
||||
textarea,
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="datetime"],
|
||||
input[type="datetime-local"],
|
||||
input[type="date"],
|
||||
input[type="month"],
|
||||
input[type="time"],
|
||||
input[type="week"],
|
||||
input[type="number"],
|
||||
input[type="email"],
|
||||
input[type="url"],
|
||||
input[type="search"],
|
||||
input[type="tel"],
|
||||
input[type="color"],
|
||||
.uneditable-input {
|
||||
/*
|
||||
margin-bottom: 1px;
|
||||
*/
|
||||
}
|
||||
|
||||
|
||||
.spinner {
|
||||
float: left;
|
||||
background:url("/assets/images/spinner.gif") no-repeat;
|
||||
|
|
@ -417,16 +375,17 @@ table th, table td {
|
|||
*/
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: 200;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 36px;
|
||||
margin-top: 15px;
|
||||
font-size: 23px;
|
||||
line-height: 29px;
|
||||
color: rgba(0,8,14,.73);
|
||||
}
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
margin-top: 10px;
|
||||
font-size: 19px;
|
||||
color: rgba(0,8,14,.73);
|
||||
}
|
||||
h3 {
|
||||
font-size: 22px;
|
||||
|
|
@ -439,16 +398,53 @@ h5 {
|
|||
font-size: 16px;
|
||||
}
|
||||
|
||||
label {
|
||||
text-transform: uppercase;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
letter-spacing: 0.1em;
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
.form-group .help-message {
|
||||
float: right;
|
||||
margin-right: -23px;
|
||||
margin-top: -23px;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
height: 33px;
|
||||
font-size: 13px;
|
||||
height: 41px;
|
||||
font-weight: normal;
|
||||
box-shadow: none;
|
||||
border-radius: 3px;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
box-shadow: none;
|
||||
border-color: #419ed7;
|
||||
}
|
||||
|
||||
.has-error .form-control,
|
||||
.has-error .form-control:focus {
|
||||
box-shadow: none;
|
||||
border-color: red;
|
||||
}
|
||||
|
||||
.help-inline {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.content {
|
||||
overflow: auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.content.fit {
|
||||
background: #2c2d36;
|
||||
}
|
||||
|
||||
.form-large {
|
||||
width: 85%;
|
||||
max-width: 700px;
|
||||
|
|
@ -563,30 +559,16 @@ h5 {
|
|||
*/
|
||||
|
||||
.hero-unit {
|
||||
width: 940px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
*zoom: 1;
|
||||
padding: 50px 60px 60px 60px;
|
||||
margin-bottom: 30px;
|
||||
font-size: 18px;
|
||||
font-weight: 200;
|
||||
line-height: 30px;
|
||||
width: 500px;
|
||||
padding: 3px 25px 23px;
|
||||
border: 1px solid #e5f0f5;
|
||||
color: inherit;
|
||||
background-color: #eeeeee;
|
||||
-webkit-border-radius: 6px;
|
||||
-moz-border-radius: 6px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.hero-unit h1 {
|
||||
font-size: 52px;
|
||||
margin-top: 4px;
|
||||
background-color: white;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.hero-unit p {
|
||||
font-size: 16px;
|
||||
font-weight: 200;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
|
|
@ -596,6 +578,53 @@ h5 {
|
|||
color: #999999;
|
||||
}
|
||||
|
||||
ol.tabs {
|
||||
padding: 0;
|
||||
list-style: decimal inside;
|
||||
}
|
||||
|
||||
ol.tabs li {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
color: #b8b8b8;
|
||||
border: 1px solid rgba(0,8,14,.08);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.tabs-condensed .tab {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
border-right: 1px solid rgba(0,8,14,.08);
|
||||
cursor: pointer;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
color: white;
|
||||
background: #444a4f;
|
||||
}
|
||||
.tab:first-child {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
.tab:last-child {
|
||||
border-radius: 0 3px 3px 0;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.contain-text {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis
|
||||
}
|
||||
|
||||
/*
|
||||
* removed margin of forms to not break the layout with submit buttons within <form></form> area e. g. for modal dialogs
|
||||
*/
|
||||
|
|
@ -1043,3 +1072,12 @@ footer {
|
|||
width: 100px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-size: 14px;
|
||||
padding: 10px 14px 9px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #419ed7;
|
||||
border-color: #419ed7;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<div id="app">
|
||||
<div id="app" class="fit">
|
||||
<nav></nav>
|
||||
<section></section>
|
||||
<section class="fit"></section>
|
||||
<footer></footer>
|
||||
</div>
|
||||
<div id="splash">
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
<% end %>
|
||||
<%= csrf_meta_tags %>
|
||||
</head>
|
||||
<body>
|
||||
<body class="relative fit">
|
||||
|
||||
<%= yield %>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue