Skip to content

Commit

Permalink
updated login-card structure and style
Browse files Browse the repository at this point in the history
  • Loading branch information
@rcaferati
rcaferati committed Jun 5, 2015
1 parent 29db81d commit 4690531
Show file tree
Hide file tree
Showing 4 changed files with 129 additions and 177 deletions.
116 changes: 46 additions & 70 deletions client/stylesheets/base.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2392,7 +2392,7 @@ a.github-fork {
}

#login-card {
width: 100%;
width: 90%;
max-width: 520px;
padding: 22px 30px 30px;
margin: 25px auto;
Expand All @@ -2401,10 +2401,21 @@ a.github-fork {
border-radius: 2px;
position: relative;
z-index: 1;
header{
padding: 18px 0;
p{
//font-family: "Muli";
margin: 8px 0 0;
font-size: 14px;
line-height: 22px;
font-weight: 300;
}
}
h2 {
&:extend(.rocket-h2);
color: @primary-font-color;
margin-bottom: 30px;
line-height: 24px;
margin: 0;
&.error {
color: #b40202;
}
Expand Down Expand Up @@ -2435,8 +2446,7 @@ a.github-fork {
font-size: 10px;
}
.submit {
margin-bottom: 12px;
padding-top: 4px;
margin: 12px 0;
}
.remember {
float: left;
Expand All @@ -2448,19 +2458,6 @@ a.github-fork {
float: right;
line-height: 20px;
}
.submit button {}
.fields {
.transform-style(preserve-3d);
.perspective(600px);
margin-bottom: 26px;
label {
font-family: "Roboto";
font-size: 13px;
margin-top: 10px;
color: #AAA;
margin-left: 12px;
}
}
.input-text {
margin: 0 0 14px 0;
position: relative;
Expand All @@ -2477,42 +2474,9 @@ a.github-fork {
&:before {
visibility: hidden;
}
.field {
.transform(rotateX(0));
}
}
&:hover {
i {
background-color: #BFBFBF;
}
label {
color: #999;
}
}
}
.field {
display: block;
.transform-origin(50% 100% 0);
.transform(rotateX(100deg));
.transform-style(preserve-3d);
.backface-visibility(hidden);
.transition(transform .38s cubic-bezier(.5, 0, .1, 1));
i {
display: block;
width: 100%;
height: 3px;
background-color: #EAEAEA;
position: absolute;
bottom: 0;
left: 0;
.transform-origin(50% 100% 0);
.transform(rotateX(-90deg) translateY(4px));
.transition(background .2s ease-out);
}
span {
display: block;
.transform-style(flat);
}
.input-text{
input {
box-shadow: 0 0 0;
background-color: transparent;
Expand Down Expand Up @@ -2727,31 +2691,46 @@ a.github-fork {
}

.avatar-suggestion-item {
height: 80px;
margin: 10px 0px;
text-align: left;

> div {
height: 80px;
width: 80px;
display: table;
width: 100%;
padding: 12px;
background-color: @secondary-background-color;
border: 1px solid darken(@secondary-background-color, 10%);
.transition(background-color .15s ease-out, border-color .15s ease-out);
.avatar {
height: 55px;
width: 55px;
background-size: cover;
display: inline-block;
border: 1px solid #DDD;
font-size: 80px;
display: inline-table;
border: 1px solid darken(@tertiary-background-color, 10%);
font-size: 40px;
text-align: center;
line-height: 80px;
background-color: #EEE;
color: #CCC;
&.question-mark:before {
content: "?";
background-color: @tertiary-background-color;
position: relative;
vertical-align: middle;
}
.question-mark{
&::before {
position: absolute;
left: 0;
width: 80px;
top: 0;
width: 100%;
height: 100%;
margin: 0;
line-height: 55px;
color: darken(@tertiary-background-color, 10%);
}
}
.action{
text-align: right;
display: inline-table;
vertical-align: middle;
padding-left: 20px;
}
button {
display: inline-block;
top: -35px;
min-width: 120px;
}
input[type=file] {
position: absolute !important;
Expand All @@ -2765,9 +2744,6 @@ a.github-fork {
cursor: pointer;
}
}
.avatar:before {
font-size: 44px;
}
}

@media all and(max-width: 1100px) {
Expand Down
83 changes: 45 additions & 38 deletions client/views/avatar/prompt.html
View file
Original file line number Diff line number Diff line change
@@ -1,61 +1,68 @@
<template name="avatarSuggestion">
{{#if .}}
<div class="avatar-suggestion-item">
<div style="background-image: url({{blob}});">
<div class="avatar" style="background-image: url({{blob}});">
</div>
<div class="action">
<button type="button" class="button primary {{service}} select-service">{{_ "avatar.Use_service_avatar" service}}</button>
</div>
<button type="button" class="button primary select-service">{{_ "avatar.Use_service_avatar" service}}</button>
</div>
{{/if}}
</template>

<template name="avatarSuggestionLogin">
{{#if .}}
<div class="avatar-suggestion-item">
<div class="question-mark"></div>
<button type="button" class="button primary login-with-service">{{_ "avatar.Login_with" .}}</button>
<div class="avatar question-mark icon-user"></div>
<div class="action">
<button type="button" class="button primary {{.}} login-with-service">{{_ "avatar.Login_with" .}}</button>
</div>
</div>
{{/if}}
</template>

<template name="avatarPrompt">
<form id="login-card" method='/'>
<div class="fields">
<header>
<h2>{{_ "avatar.Select_an_avatar"}}</h2>
</div>
<p>Select a service to login to load your picture or upload one directly from your computer</p>
</header>
<div class="fields">
<div class='input-text active'>
<div class='field'>
<div class="avatar-suggestions">
{{#if suggestions.ready}}
<div class="avatar-suggestion-item">
{{> avatar username=username preventImage='true'}}
{{#with service='initials'}}
<div class="avatar-suggestions">
{{#if suggestions.ready}}
<div class="avatar-suggestion-item">
{{> avatar username=username preventImage='true'}}
{{#with service='initials'}}
<div class="action">
<button type="button" class="button primary select-service">{{_ "avatar.Use_initials_avatar" }}</button>
{{/with}}
</div>
</div>
{{/with}}
</div>

{{> avatarSuggestion suggestions.avatars.gravatar}}
{{> avatarSuggestion suggestions.avatars.facebook}}
{{> avatarSuggestion suggestions.avatars.google}}
{{> avatarSuggestion suggestions.avatars.github}}
{{> avatarSuggestion suggestions.avatars.linkedin}}
{{> avatarSuggestion suggestions.avatars.gravatar}}
{{> avatarSuggestion suggestions.avatars.facebook}}
{{> avatarSuggestion suggestions.avatars.google}}
{{> avatarSuggestion suggestions.avatars.github}}
{{> avatarSuggestion suggestions.avatars.linkedin}}

{{#unless suggestions.avatars.facebook}}
{{> avatarSuggestionLogin 'facebook'}}
{{/unless}}
{{#unless suggestions.avatars.google}}
{{> avatarSuggestionLogin 'google'}}
{{/unless}}
{{#unless suggestions.avatars.github}}
{{> avatarSuggestionLogin 'github'}}
{{/unless}}
{{#unless suggestions.avatars.linkedin}}
{{> avatarSuggestionLogin 'linkedin'}}
{{/unless}}
{{#unless suggestions.avatars.facebook}}
{{> avatarSuggestionLogin 'facebook'}}
{{/unless}}
{{#unless suggestions.avatars.google}}
{{> avatarSuggestionLogin 'google'}}
{{/unless}}
{{#unless suggestions.avatars.github}}
{{> avatarSuggestionLogin 'github'}}
{{/unless}}
{{#unless suggestions.avatars.linkedin}}
{{> avatarSuggestionLogin 'linkedin'}}
{{/unless}}

<div class="avatar-suggestion-item">
<div style="background-image: url({{upload.blob}});" class="{{#unless upload}}question-mark{{/unless}}">
</div>
<div class="avatar-suggestion-item">
<div style="background-image: url({{upload.blob}});" class="avatar {{#unless upload}}question-mark icon-upload{{/unless}}">
</div>
<div class="action">
{{#with upload}}
<button type="button" class="button primary select-service">{{_ "avatar.Use_uploaded_avatar"}}</button>
{{/with}}
Expand All @@ -65,10 +72,10 @@ <h2>{{_ "avatar.Select_an_avatar"}}</h2>
</button>
{{/unless}}
</div>
{{else}}
{{_ "usernameRegistration.Loading_suggestion"}}
{{/if}}
</div>
</div>
{{else}}
{{_ "usernameRegistration.Loading_suggestion"}}
{{/if}}
</div>
</div>
</div>
Expand Down
49 changes: 13 additions & 36 deletions client/views/login/form.html
View file
Original file line number Diff line number Diff line change
@@ -1,51 +1,28 @@
<template name="loginForm">
<form id="login-card" method='/'>
<div class="fields">
<header>
<h2>{{_ "login.Enter_info"}}</h2>
{{#if needsValidateEmail}}
<div>
{{_ "login.You_neeed_confirm_email"}}
</div>
{{/if}}
</header>
{{#if needsValidateEmail}}
<div class="alert alert-danger">
{{_ "login.You_neeed_confirm_email"}}
</div>
{{/if}}
<div class="fields">
<div class='input-text active {{showName}}'>
<div class='field'>
<span>
<input type="text" name='name' placeholder='{{_ "general.Name"}}' />
</span>
<i></i>
</div>
<input type="text" name='name' placeholder='{{_ "general.Name"}}' />
</div>
<div class='input-text active {{showEmailOrUsername}}'>
<div class='field'>
<span>
<input type="text" name='emailOrUsername' placeholder='{{_ "login.Email_or_username"}}' />
</span>
<i></i>
</div>
<input type="text" name='emailOrUsername' placeholder='{{_ "login.Email_or_username"}}' />
</div>
<div class='input-text active {{showEmail}}'>
<div class='field'>
<span>
<input type="email" name='email' placeholder='{{_ "Email"}}' />
</span>
<i></i>
</div>
<input type="email" name='email' placeholder='{{_ "Email"}}' />
</div>
<div class='input-text active {{showPassword}}'>
<div class='field'>
<span>
<input type="password" name='pass' placeholder='{{_ "login.Password"}}' />
</span>
<i></i>
</div>
<input type="password" name='pass' placeholder='{{_ "login.Password"}}' />
</div>
<div class='input-text active {{showConfirmPassword}}'>
<div class='field'>
<span>
<input type="password" name='confirm-pass' placeholder='{{_ "login.Confirm_password"}}' />
</span>
<i></i>
</div>
<input type="password" name='confirm-pass' placeholder='{{_ "login.Confirm_password"}}' />
</div>
</div>
<div class="submit">
Expand Down
Loading

0 comments on commit 4690531

Please sign in to comment.