diff --git a/app/images/invitation_bg.jpg b/app/images/invitation_bg.jpg new file mode 100644 index 00000000..45e37759 Binary files /dev/null and b/app/images/invitation_bg.jpg differ diff --git a/app/partials/invitation.jade b/app/partials/invitation.jade new file mode 100644 index 00000000..c17848e4 --- /dev/null +++ b/app/partials/invitation.jade @@ -0,0 +1,42 @@ +extends login-layout + +block head + title Taiga Project management web application with scrum in mind! + +block content + div.wrapper + div.invitation-main + div.invitation-container + //h1.logo + //img(src="/images/logo.png", alt="TAIGA") + figure.avatar + a(href="", title="UserName") + img.avatar(src="http://thecodeplayer.com/u/uifaces/12.jpg", alt="username") + figcaption Username + p.invitation-text has sent you an invitation to join the taiga project + span.project-name taiga + div.invitation-form + + form.login-form + fieldset + input(type="text", name="username", placeholder="User name") + fieldset.login-password + input(type="password", name="password", ng-model="form.password") + a.forgot-pass(href="", title="Did you forgot your pass?") Forgot it? + fieldset + a.button.button-login.button-gray(href="", title="Log in") Enter + + form.register-form + fieldset + input(type="text" placeholder="Pick a username") + fieldset + input(type="text" placeholder="Your email") + fieldset + input(type="password" placeholder="Set a password") + fieldset + a.button.button-register.button-gray(href="", title="Sign up") Sign up + p.register-text + span By clicking "Sign up", you agree to our
+ a(href="", title="See terms of service") terms of service + span and + a(href="", title="See privacy policy") privacy policy. diff --git a/app/styles/layout/invitation.scss b/app/styles/layout/invitation.scss new file mode 100644 index 00000000..ca9ca1ae --- /dev/null +++ b/app/styles/layout/invitation.scss @@ -0,0 +1,101 @@ +.invitation-main { + @include table-flex(center, center, flex, row, wrap, center); + background: url('/images/invitation_bg.jpg') no-repeat center center; + background-size: cover; + bottom: 0; + left: 0; + position: fixed; + right: 0; + top: 0; + z-index: 999; + .invitation-container { + @include table-flex-child(0, 650px, 0, 650px); + } + .logo { + margin: 1rem auto; + width: 150px; + } + .avatar { + margin: 0 auto 1rem; + width: 150px; + a { + @extend %small; + color: $white; + text-align: center; + } + img { + display: block; + text-align: center; + width: 50px; + } + } + .invitation-text { + @extend %xlarge; + color: $white; + font-family: 'ostrichSans'; + line-height: 3rem; + text-align: center; + .project-name { + @extend %xxlarge; + display: block; + } + } + .invitation-form { + @include table-flex(); + input { + background: $white; + color: $gray; + margin-bottom: 1rem; + position: relative; + @include placeholder { + color: $gray-light; + } + } + input:focus { + &+.forgot-pass { + @include transition(opacity .5s linear); + opacity: 0; + } + } + .forgot-pass { + @include transition(all .3s linear); + @extend %small; + color: $gray-light; + opacity: 1; + position: absolute; + right: 1rem; + top: .5rem; + &:hover { + @include transition(color .3s linear); + color: $grayer; + } + } + .button { + color: $white; + display: block; + margin-bottom: .5rem; + text-align: center; + &:hover { + background: $fresh-taiga; + } + } + } + .login-form, + .register-form { + @include table-flex-child(1, 200px, 0, 200px); + padding: 1rem; + } + .register-text { + @extend %small; + color: $white; + a { + color: $green-taiga; + &:hover { + color: $fresh-taiga; + } + } + } + .login-form { + border-right: 1px solid $white; + } +} diff --git a/app/styles/main.scss b/app/styles/main.scss index 6b9075e8..9b2c5bf3 100755 --- a/app/styles/main.scss +++ b/app/styles/main.scss @@ -65,6 +65,7 @@ $prefix-for-spec: true; //Layout @import 'layout/base'; @import 'layout/login'; +@import 'layout/invitation'; @import 'layout/backlog'; @import 'layout/taskboard'; @import 'layout/us-detail';