From bcb28245c2f9d7fa35a42ce234e6ababcb1aeca8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= Date: Mon, 23 Jun 2014 14:06:48 +0200 Subject: [PATCH] Login layout --- app/partials/layout.jade | 20 +++++++-------- app/partials/login-layout.jade | 13 ++++++++++ app/partials/login.jade | 17 +++++++++---- app/styles/dependencies/colors.scss | 2 ++ app/styles/dependencies/forms.scss | 4 +++ app/styles/layout/login.scss | 38 +++++++++++++++++++++++++++++ app/styles/main.scss | 1 + 7 files changed, 80 insertions(+), 15 deletions(-) create mode 100644 app/partials/login-layout.jade create mode 100644 app/styles/layout/login.scss diff --git a/app/partials/layout.jade b/app/partials/layout.jade index bff3f824..21558079 100644 --- a/app/partials/layout.jade +++ b/app/partials/layout.jade @@ -1,14 +1,14 @@ doctype html html(lang="en") head - title= Taiga - meta(http-equiv="content-type", content="text/html; charset=utf-8") - meta(name="description", content="Taiga Landing page") - meta(name="keywords", content="Agile, Taiga, Management, Github") - meta(name="viewport", content="width=device-width, user-scalable=no") - link(rel="stylesheet", href="/styles/main.css") - block head + title= Taiga + meta(http-equiv="content-type", content="text/html; charset=utf-8") + meta(name="description", content="Taiga Landing page") + meta(name="keywords", content="Agile, Taiga, Management, Github") + meta(name="viewport", content="width=device-width, user-scalable=no") + link(rel="stylesheet", href="/styles/main.css") + block head body - include views/modules/nav - div.master - block content + include views/modules/nav + div.master + block content diff --git a/app/partials/login-layout.jade b/app/partials/login-layout.jade new file mode 100644 index 00000000..5b62e060 --- /dev/null +++ b/app/partials/login-layout.jade @@ -0,0 +1,13 @@ +doctype html +html(lang="en") + head + title= Taiga + meta(http-equiv="content-type", content="text/html; charset=utf-8") + meta(name="description", content="Taiga Landing page") + meta(name="keywords", content="Agile, Taiga, Management, Github") + meta(name="viewport", content="width=device-width, user-scalable=no") + link(rel="stylesheet", href="/styles/main.css") + block head + body + div.master + block content \ No newline at end of file diff --git a/app/partials/login.jade b/app/partials/login.jade index 201e3dda..6fa732c9 100644 --- a/app/partials/login.jade +++ b/app/partials/login.jade @@ -1,11 +1,18 @@ -extends dummy-layout +extends login-layout block head title Taiga Project management web application with scrum in mind! block content div.wrapper(ng-controller="AuthController as ctrl") - form(ng-submit="ctrl.submit()") - input(type="text", name="username", ng-model="form.username", placeholder="User name") - input(type="password", name="password", ng-model="form.password", placeholder="Password") - input(type="submit", value="Submit") + div.login-main + div.login-container + h1.logo + img(src="/images/logo.png", alt="TAIGA") + p.tagline Project management web application with scrum in the mind! + form(ng-submit="ctrl.submit()") + input(type="text", name="username", ng-model="form.username", placeholder="User name") + input(type="password", name="password", ng-model="form.password") + a.button.button-login.button-gray(href="", title="Log in") Log in + a.button.button-signup(href="", title="Log in") Sign up + input(type="submit", value="I am an horrible button to be deleted. Click me to login for the moment") diff --git a/app/styles/dependencies/colors.scss b/app/styles/dependencies/colors.scss index e52d8648..5688be5a 100755 --- a/app/styles/dependencies/colors.scss +++ b/app/styles/dependencies/colors.scss @@ -19,6 +19,8 @@ $very-light-gray: #e3e3e3; $red-light: #ff8282; $red: #f00; +$orange: #d98a0b; + $button-green: #699b05; $button-green-hover: #9dce0a; $button-gray: #585858; diff --git a/app/styles/dependencies/forms.scss b/app/styles/dependencies/forms.scss index 9fa008eb..be4e8848 100644 --- a/app/styles/dependencies/forms.scss +++ b/app/styles/dependencies/forms.scss @@ -7,6 +7,7 @@ fieldset { } input[type="text"], +input[type="password"], input[type="email"], input[type="date"], select, @@ -24,3 +25,6 @@ textarea { color: $white; } } +input[type="password"] { + font-family: 'DroidSans'; +} diff --git a/app/styles/layout/login.scss b/app/styles/layout/login.scss new file mode 100644 index 00000000..5f57cdf3 --- /dev/null +++ b/app/styles/layout/login.scss @@ -0,0 +1,38 @@ +.login-main { + @include table-flex(center, center, flex, row, wrap, center); + background: url('/images/bg.png') no-repeat center center; + background-size: cover; + bottom: 0; + left: 0; + position: fixed; + right: 0; + top: 0; + z-index: 999; + .login-container { + @include table-flex-child(0, 400px, 0, 400px); + } + .logo, + .tagline { + margin-bottom: 1rem; + text-align: center; + } + .tagline { + @extend %xlarge; + color: $white; + font-family: 'ostrichSans'; + line-height: 2rem; + } + input { + margin-bottom: 1rem; + } + .button-login, + .button-signup { + color: $white; + display: block; + margin-bottom: .5rem; + text-align: center; + } + .button-signup { + background: $orange; + } +} diff --git a/app/styles/main.scss b/app/styles/main.scss index 3bbfc4e7..a9a42412 100755 --- a/app/styles/main.scss +++ b/app/styles/main.scss @@ -57,6 +57,7 @@ $prefix-for-spec: true; //Layout @import 'layout/base'; +@import 'layout/login'; @import 'layout/backlog'; @import 'layout/taskboard'; @import 'layout/us-detail';