Optimize login form layout & css

Fixes #448
This commit is contained in:
floatinghotpot 2015-12-28 11:35:38 +08:00
parent f90ac03f6d
commit 55bd26dc9c
2 changed files with 66 additions and 61 deletions

View file

@ -12,6 +12,7 @@ template(name="userFormsLayout")
section.auth-layout section.auth-layout
h1.at-form-landing-logo h1.at-form-landing-logo
img(src="{{pathFor '/wekan-logo.png'}}" alt="Wekan") img(src="{{pathFor '/wekan-logo.png'}}" alt="Wekan")
section.auth-dialog
+Template.dynamic(template=content) +Template.dynamic(template=content)
div.at-form-lang div.at-form-lang
select.select-lang.js-userform-set-language select.select-lang.js-userform-set-language

View file

@ -3,20 +3,21 @@
width: 249px width: 249px
margin: auto margin: auto
margin-top: 50px margin-top: 50px
margin-top: 17vh margin-bottom: 20px
.at-form .auth-dialog
margin: auto
width: 275px width: 275px
padding: 25px padding: 25px
margin-top: 20px margin: auto
padding-bottom: 10px margin-bottom: 20px
background: #fff background: #fff
border-radius: 3px border-radius: 3px
border: 1px solid #dbdbdb border: 1px solid #dbdbdb
border-bottom-color: #c2c2c2 border-bottom-color: #c2c2c2
box-shadow: 0 1px 6px rgba(0, 0, 0, .3) box-shadow: 0 1px 6px rgba(0, 0, 0, .3)
.at-form
.at-link .at-link
color: darken(#27AE60, 40%) color: darken(#27AE60, 40%)
@ -26,6 +27,11 @@
input input
width: 100% width: 100%
button
width: 100%
background: #216694
color: #fff
.at-title .at-title
background: #F7F7F7 background: #F7F7F7
margin: -25px margin: -25px
@ -47,14 +53,11 @@
font-weight: bold font-weight: bold
.at-form-lang .at-form-lang
margin: auto margin-top: 0px
width: 275px
padding: 25px
padding-bottom: 10px
.select-lang .select-lang
width: 275px width: 100%
font-size: 1.0em margin-top: 10px
@media screen and (max-width: 800px) @media screen and (max-width: 800px)
.auth-layout .auth-layout
@ -64,26 +67,27 @@
padding: 0px padding: 0px
.at-form-landing-logo .at-form-landing-logo
margin-top: 20px width: 125px
margin-bottom: 20px position: absolute
top: 0px
right: 20px
margin-top: 5px
margin-bottom: 5px
img
width: 125px
.auth-dialog
width: calc(100% - 50px)
height: calc(100% - 50px)
padding: 25px
min-height: 380px
margin: 0px
margin-bottom: 0px
border: 0px
.at-form .at-form
width: calc(100% - 50px) .at-title
height: calc(100% - 162px) h3
margin: 0px width: calc(100% - 125px)
padding: 25px overflow-x: hidden
button
width: 100%
.at-form-lang
width: 100%
margin: 0px
padding: 0px
.select-lang
width: 200px
font-size: 1.2em
position: absolute
left: calc((100% - 200px)/2)
bottom: 25px