taiga
/
taiga-front
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

user Experience in filters

stable
Xavier Julián 2014-06-30 12:52:24 +02:00
parent 0ac71347b9
commit fcfc0a648e
4 changed files with 25 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/partials/views/modules/lightbox_add-sprint.jade
View File

@ -3,8 +3,8 @@ a.close(href="", title="close")
form form
h2.title New Sprint h2.title New Sprint
fieldset fieldset
input.sprint-name(ng-model="sprint.name", type="text", placeholder="sprint name", name="name", data-required="true")
label.last-sprint-name label.last-sprint-name
input(ng-model="sprint.name", type="text", placeholder="sprint name", name="name", data-required="true")
fieldset.dates fieldset.dates
input.date-start(tg-date-selector, ng-model="sprint.estimated_start", type="text", placeholder="Estimated Start", data-required="true") input.date-start(tg-date-selector, ng-model="sprint.estimated_start", type="text", placeholder="Estimated Start", data-required="true")
input.date-end(tg-date-selector, ng-model="sprint.estimated_finish", type="text", placeholder="Estimated End", data-required="true") input.date-end(tg-date-selector, ng-model="sprint.estimated_finish", type="text", placeholder="Estimated End", data-required="true")

1
app/styles/components/filter.scss
View File

@ -2,6 +2,7 @@
@extend %large; @extend %large;
@include clearfix; @include clearfix;
@extend %title; @extend %title;
cursor: pointer;
display: block; display: block;
height: 32px; height: 32px;
margin-bottom: 1rem; margin-bottom: 1rem;

6
app/styles/modules/filters.scss
View File

@ -17,9 +17,13 @@
} }
.filters { .filters {
form { form {
margin-bottom: 2rem; margin-bottom: 2rem;
.icon-search {
position: absolute;
right: .5rem;
top: .5rem;
}
} }
} }

50
app/styles/modules/lightbox.scss
View File

@ -1,12 +1,7 @@
.lightbox { .lightbox {
@include background-opacity($white, .9); @include background-opacity($white, .95);
align-content: center; @include table-flex(center, center, flex, row, wrap, center);
align-items: center;
bottom: 0; bottom: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
left: 0; left: 0;
position: fixed; position: fixed;
right: 0; right: 0;
@ -37,11 +32,7 @@
.lightbox_add-new-us { .lightbox_add-new-us {
form { form {
flex-basis: 0; @include table-flex-child(0, 600px, 0, 600px);
flex-grow: 0;
flex-shrink: 0;
min-width: 600px;
width: 600px;
} }
fieldset { fieldset {
position: relative; position: relative;
@ -95,6 +86,7 @@
border: 1px solid $gray-light; border: 1px solid $gray-light;
cursor: pointer; cursor: pointer;
display: block; display: block;
padding: 7px 30px;
} }
.requirement, .requirement,
.iocaine { .iocaine {
@ -133,11 +125,7 @@
.lightbox_add-bulk { .lightbox_add-bulk {
form { form {
flex-basis: 0; @include table-flex-child(0, 600px, 0, 600px);
flex-grow: 0;
flex-shrink: 0;
min-width: 600px;
width: 600px;
} }
textarea { textarea {
margin-bottom: 1rem; margin-bottom: 1rem;
@ -186,14 +174,20 @@
.lightbox_add-sprint { .lightbox_add-sprint {
form { form {
flex-basis: 0; @include table-flex-child(0, 600px, 0, 600px);
flex-grow: 0; }
flex-shrink: 0; .sprint-name {
min-width: 600px; &:focus {
width: 600px; &+.last-sprint-name {
@include transition (opacity .3s linear);
opacity: 0;
}
}
} }
.last-sprint-name { .last-sprint-name {
@include transition (opacity .3s linear);
color: $gray; color: $gray;
opacity: 1;
position: absolute; position: absolute;
right: 1rem; right: 1rem;
top: .5rem; top: .5rem;
@ -214,11 +208,7 @@
.lightbox_confirm-delete { .lightbox_confirm-delete {
form { form {
flex-basis: 0; @include table-flex-child(0, 420px, 0, 420px);
flex-grow: 0;
flex-shrink: 0;
min-width: 420px;
width: 420px;
} }
.delete-question, .delete-question,
.subtitle { .subtitle {
@ -243,11 +233,7 @@
.lightbox-generic-error { .lightbox-generic-error {
section { section {
flex-basis: 0; @include table-flex-child(0, 420px, 0, 420px);
flex-grow: 0;
flex-shrink: 0;
min-width: 420px;
width: 420px;
} }
.delete-options { .delete-options {
@include table-flex(); @include table-flex();