From 392a93ccdd15ab3c90296d232cae130b75ffe5a8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= Date: Fri, 6 Jun 2014 10:12:32 +0200 Subject: [PATCH] Lightbox for new US --- app/backlog.jade | 2 + app/styles/components/buttons.scss | 3 +- app/styles/dependencies/forms.scss | 6 +- app/styles/dependencies/mixins.scss | 5 + app/styles/dependencies/typography.scss | 6 ++ app/styles/main.scss | 1 + app/styles/modules/lightbox.scss | 107 +++++++++++++++++++++ app/views/modules/lightbox_add-new-us.jade | 26 +++++ 8 files changed, 151 insertions(+), 5 deletions(-) create mode 100644 app/styles/modules/lightbox.scss create mode 100644 app/views/modules/lightbox_add-new-us.jade diff --git a/app/backlog.jade b/app/backlog.jade index c180d818..605aa139 100644 --- a/app/backlog.jade +++ b/app/backlog.jade @@ -24,3 +24,5 @@ block content include views/modules/backlog-table sidebar.menu-secondary.sidebar include views/modules/sprints + div.lightbox.lightbox_add-new-us + include views/modules/lightbox_add-new-us diff --git a/app/styles/components/buttons.scss b/app/styles/components/buttons.scss index f26ca97a..ec5a98fa 100755 --- a/app/styles/components/buttons.scss +++ b/app/styles/components/buttons.scss @@ -14,8 +14,7 @@ .button{ font-family: 'ostrichSans'; @extend .large; - padding: 5px 40px; - height: 32px; + padding: 8px 40px; display: inline-block; .icon { margin-right: .3rem; diff --git a/app/styles/dependencies/forms.scss b/app/styles/dependencies/forms.scss index 29022e96..efaf5962 100644 --- a/app/styles/dependencies/forms.scss +++ b/app/styles/dependencies/forms.scss @@ -11,11 +11,11 @@ fieldset{ } } -input[type="text"], input[type="email"], textarea{ +input[type="text"], input[type="email"], select, textarea{ font-family: 'ostrichSans'; @extend .large; - padding: 5px; - height: 32px; + padding: 8px; + height: 40px; background: $grayLight; width: 100%; border: 0; diff --git a/app/styles/dependencies/mixins.scss b/app/styles/dependencies/mixins.scss index b79d3a7e..070180ed 100644 --- a/app/styles/dependencies/mixins.scss +++ b/app/styles/dependencies/mixins.scss @@ -4,3 +4,8 @@ overflow: hidden; text-overflow: ellipsis; } + +@mixin background-opacity($color: $white, $opacity: 0.3) { + background: $color; /* The Fallback */ + background: rgba($color, $opacity); +} diff --git a/app/styles/dependencies/typography.scss b/app/styles/dependencies/typography.scss index a7a6382e..6cfc96e9 100755 --- a/app/styles/dependencies/typography.scss +++ b/app/styles/dependencies/typography.scss @@ -38,6 +38,12 @@ h1 { } } +h2 { + @extend .xlarge; + font-family: 'ostrichSans'; + margin-bottom: 1rem; +} + p { margin: 0 0 20px 0; img { margin: 0; diff --git a/app/styles/main.scss b/app/styles/main.scss index 55ef43e9..ba897377 100755 --- a/app/styles/main.scss +++ b/app/styles/main.scss @@ -37,6 +37,7 @@ $prefix-for-spec: true; @import 'modules/burndown'; @import 'modules/backlog-table'; @import 'modules/filters'; +@import 'modules/lightbox'; // Responsive @import 'responsive/mobile'; diff --git a/app/styles/modules/lightbox.scss b/app/styles/modules/lightbox.scss new file mode 100644 index 00000000..270c32f2 --- /dev/null +++ b/app/styles/modules/lightbox.scss @@ -0,0 +1,107 @@ +.lightbox { + display:flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-content: center; + align-items: center; + @include background-opacity( $white, .9); + position: fixed; + z-index: 999; + top: 0; + left: 0; + bottom: 0; + right: 0; + .close { + position: absolute; + top: 2rem; + right: 2rem; + @extend .large; + } + .title { + text-align: center; + } + input, select { + margin-bottom: 1rem; + } + textarea { + resize:vertical; + } + .button-green { + display: block; + text-align: center; + padding: 12px; + } +} + +.lightbox_add-new-us{ + form { + width: 600px; + min-width: 600px; + flex-grow: 0; + flex-shrink: 0; + flex-basis: 0; + } + textarea { + min-height: 7rem; + max-height: 9rem; + margin-bottom: 1rem; + } + .new-us-settings { + display:flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: flex-start; + align-content: flex-start; + align-items: stretch; + margin-bottom: 1rem; + fieldset { + flex-grow: 1; + flex-shrink: 0; + flex-basis: 30%; + text-align: center; + margin-right: .5rem; + &:last-child { + margin: 0; + } + } + label{ + @extend .button; + border: 1px solid $grayLight; + display: block; + cursor: pointer; + @include transition( all .2s ease-in ); + } + .requirement{ + &:hover { + background: $freshTaiga; + color: $white; + border: 1px solid $freshTaiga; + @include transition( all .2s ease-in ); + } + } + .requirement-selected { + background: $greenTaiga; + color: $white; + border: 1px solid $greenTaiga; + @include transition( all .2s ease-in ); + } + .blocked { + &:hover { + background: $redLight; + color: $white; + border: 1px solid $redLight; + @include transition( all .2s ease-in ); + } + } + .blocked-selected { + background: $red; + color: $white; + border: 1px solid $red; + @include transition( all .2s ease-in ); + } + input[type="checkbox"] { + display: none; + } + } +} diff --git a/app/views/modules/lightbox_add-new-us.jade b/app/views/modules/lightbox_add-new-us.jade new file mode 100644 index 00000000..f447468c --- /dev/null +++ b/app/views/modules/lightbox_add-new-us.jade @@ -0,0 +1,26 @@ +a.close(href="", title="close") + span.icon.icon-delete +form + h2.title New User Story + fieldset + input(type="text", placeholder="Subject") + fieldset + select + option(selected, value="open") Open + option(selected, value="closed") Closed + fieldset + input(type="text", placeholder="Tags") + fieldset + textarea + div.new-us-settings + fieldset + label.requirement(for="team-requirement") Team Requirement + input(type="checkbox", name="team-requirement", id="team-requirement") + fieldset + label.requirement(for="client-requirement") Team Requirement + input(type="checkbox", name="client-requirement", id="client-requirement") + fieldset + label.blocked(for="blocked-us") Blocked + input(type="checkbox", name="blocked-us", id="blocked-us") + a.button.button-green(href="", title="Save") + span Save