1
0
mirror of https://github.com/moparisthebest/kaiwa synced 2024-11-28 12:12:26 -05:00

[ux] final touch on log in page

This commit is contained in:
karolinaszczur 2013-09-18 19:45:40 +02:00
parent f857e7e527
commit 1e8fb361f4
5 changed files with 54 additions and 38 deletions

View File

@ -6,15 +6,22 @@
#logo #logo
margin: auto margin: auto
#loginbox .box
position: relative position: relative
margin: auto margin: auto
margin-top: 5% margin-top: 5%
padding: 20px padding: 20px 0
background: white background: white
width: 75% width: 75%
roundall(3px) roundall(3px)
.head, .content
padding: 0 20px
.head
margin-bottom: 20px
border-bottom: 1px solid lighten($grayOutline, 50%)
input input
width: 100% width: 100%
margin-bottom: 15px margin-bottom: 15px
@ -23,9 +30,7 @@
float: right float: right
h2 h2
margin-top: 0 margin: 0
color: #222 padding-bottom: 20px
padding-bottom: 10px
border-bottom: 1px solid lighten($grayOutline, 50%)

View File

@ -1,3 +1,5 @@
// Forms and Buttons
input[type=text], input[type=email], input[type=search], input[type=password], textarea input[type=text], input[type=email], input[type=search], input[type=password], textarea
-webkit-appearance: none -webkit-appearance: none
roundall(3px) roundall(3px)

View File

@ -3,10 +3,10 @@
body body
background: #ecf0f2 background: #ecf0f2
color: #222 color: $baseText
font-family: 'Lucdia Grande', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif font-family: 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif
font-size: 17px font-size: 16px
font-weight: 500 font-weight: 400
-webkit-font-smoothing: antialiased -webkit-font-smoothing: antialiased
#pages #pages

View File

@ -658,10 +658,10 @@ td {
} }
body { body {
background: #ecf0f2; background: #ecf0f2;
color: #222; color: #565656;
font-family: 'Lucdia Grande', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-family: 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 17px; font-size: 16px;
font-weight: 500; font-weight: 400;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
body #pages { body #pages {
@ -683,11 +683,11 @@ body #menu {
#logo { #logo {
margin: auto; margin: auto;
} }
#loginbox { .box {
position: relative; position: relative;
margin: auto; margin: auto;
margin-top: 5%; margin-top: 5%;
padding: 20px; padding: 20px 0;
background: #fff; background: #fff;
width: 75%; width: 75%;
-moz-border-radius: 3px; -moz-border-radius: 3px;
@ -697,18 +697,24 @@ body #menu {
-border-radius: 3px; -border-radius: 3px;
border-radius: 3px; border-radius: 3px;
} }
#loginbox input { .box .head,
.box .content {
padding: 0 20px;
}
.box .head {
margin-bottom: 20px;
border-bottom: 1px solid #f2f2f2;
}
.box input {
width: 100%; width: 100%;
margin-bottom: 15px; margin-bottom: 15px;
} }
#loginbox a.button { .box a.button {
float: right; float: right;
} }
#loginbox h2 { .box h2 {
margin-top: 0; margin: 0;
color: #222; padding-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #f2f2f2;
} }
input[type=text], input[type=text],
input[type=email], input[type=email],

View File

@ -1,23 +1,26 @@
extends layout extends layout
block content block content
section#loginbox.content section#loginbox.content.box
h2 .head
| Log in h2
a.button(href="/oauth/login") Have an &yet account? | Log in
a.button(href="/oauth/login") Have an &yet account?
form .content
.fieldContainer
label(for='username') JID
input(type='text', id='jid', name='jid', placeholder='you@aweso.me', tabindex='1', autofocus)
.fieldContainer
label(for='password') Password
input(type='password', id='password', name='password', placeholder='•••••••••••••', tabindex='2')
.fieldContainer
label(for='wsURL') WebSocket URL
input(type='text', id='wsURL', name='wsURL', placeholder='wss://aweso.me:5281/xmpp-websocket', tabindex='3')
button(type='submit', tabindex='3') Go! form
.fieldContainer
label(for='username') JID
input(type='text', id='jid', name='jid', placeholder='you@aweso.me', tabindex='1', autofocus)
.fieldContainer
label(for='password') Password
input(type='password', id='password', name='password', placeholder='•••••••••••••', tabindex='2')
.fieldContainer
label(for='wsURL') WebSocket URL
input(type='text', id='wsURL', name='wsURL', placeholder='wss://aweso.me:5281/xmpp-websocket', tabindex='3')
button(type='submit', tabindex='3') Go!
block scripts block scripts
script(src="/js/login.js") script(src="/js/login.js")