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

WIP improving legibility

stable
Xavier Julián 2015-01-14 18:25:42 +01:00
parent faeddddac0
commit 1c2468a2f3
10 changed files with 222 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
app/partials/views/modules/wizard-create-project.jade
View File

@ -21,16 +21,18 @@ form
div.title div.title
h1 Create Project h1 Create Project
p Fresh and clean. So exciting! p Fresh and clean. So exciting!
fieldset div.template-wrapper
input(type="text", name="name", ng-model="data.name", data-required="true", placeholder="Name", maxlength="45") div.template-inner
fieldset fieldset
textarea(name="description", ng-model="data.description", data-required="true", placeholder="Description") input(type="text", name="name", ng-model="data.name", data-required="true", placeholder="Name", maxlength="45")
fieldset.wizard-action fieldset
div textarea(name="description", ng-model="data.description", data-required="true", placeholder="Description")
a.button-prev.button.button-gray(href="", title="Prev") Prev fieldset.wizard-action
a.submit-button.button.button-green(href="", title="Create") Create div
a.button-prev.button.button-gray(href="", title="Prev") Prev
a.submit-button.button.button-green(href="", title="Create") Create
button(type="submit", class="hidden") button(type="submit", class="hidden")
div.progress-bar div.progress-bar
div.progress-state div.progress-state

11
app/styles/components/basic-table.scss
View File

@ -1,15 +1,20 @@
.basic-table { .basic-table {
@include table-flex(stretch, center, flex, column, wrap, flex-start); display: flex;
flex-direction: column;
width: 100%; width: 100%;
.row { .row {
@include table-flex(stretch, center, flex, row, nowrap, flex-start); align-items: center;
border-bottom: 1px solid darken($whitish, 4%); border-bottom: 1px solid darken($whitish, 4%);
display: flex;
flex-direction: row;
flex-wrap: nowrap;
padding: .3rem 0; padding: .3rem 0;
text-align: left; text-align: left;
width: 100%; width: 100%;
@for $i from 1 through 8 { @for $i from 1 through 8 {
.width-#{$i} { .width-#{$i} {
@include table-flex-child($i, 50px, 0); flex-grow: #{$i};
flex-basis: 50px;
} }
} }
&:last-child { &:last-child {

8
app/styles/components/created-by.scss
View File

@ -1,17 +1,19 @@
.us-created-by { .us-created-by {
@include table-flex(); display: flex;
margin-bottom: 1rem; margin-bottom: 1rem;
margin-top: .5rem; margin-top: .5rem;
position: relative; position: relative;
.user-avatar { .user-avatar {
@include table-flex-child(0, 40px, 0); flex-basis: 40px;
flex-grow: 0;
img { img {
border-radius: 8%; border-radius: 8%;
width: 100%; width: 100%;
} }
} }
.created-by { .created-by {
@include table-flex-child(3, 70px, 0); flex-basis: 70px;
flex-grow: 3;
margin-left: .5rem; margin-left: .5rem;
.created-title, .created-title,
.created-date { .created-date {

17
app/styles/components/kanban-task.scss
View File

@ -27,17 +27,17 @@
} }
} }
.kanban-tagline { .kanban-tagline {
@include table-flex();
border-color: $postit-hover; border-color: $postit-hover;
display: flex;
height: .6rem; height: .6rem;
} }
.kanban-tag { .kanban-tag {
@include table-flex-child(1, 0, 0, 0);
border-color: $postit-hover; border-color: $postit-hover;
flex-grow: 1;
height: .6rem; height: .6rem;
} }
.kanban-task-inner { .kanban-task-inner {
@include table-flex(); display: flex;
} }
.avatar { .avatar {
a { a {
@ -69,7 +69,8 @@
} }
.task-text { .task-text {
@extend %small; @extend %small;
@include table-flex-child($flex-grow: 10, $flex-basis: 50px); flex-basis: 50px;
flex-grow: 10;
padding: 0 .5rem 0 .8rem; padding: 0 .5rem 0 .8rem;
word-wrap: break-word; word-wrap: break-word;
} }
@ -126,7 +127,9 @@
} }
} }
.avatar { .avatar {
@include table-flex-child($flex-basis: 50px); flex-basis: 50px;
flex-grow: 1;
width: 55px;
} }
.task-name { .task-name {
word-wrap: break-word; word-wrap: break-word;
@ -188,7 +191,9 @@
} }
} }
.avatar { .avatar {
@include table-flex-child($flex-basis: 40px); flex-basis: 50px;
flex-grow: 1;
width: 55px;
} }
.task-num { .task-num {
vertical-align: top; vertical-align: top;

61
app/styles/components/taskboard-task.scss
View File

@ -32,49 +32,49 @@
} }
} }
.taskboard-tagline { .taskboard-tagline {
@include table-flex();
border-color: $postit-hover; border-color: $postit-hover;
display: flex;
height: .6rem; height: .6rem;
} }
.taskboard-tag { .taskboard-tag {
@include table-flex-child(1, 0, 0, 0);
border-top: .3rem solid $postit-hover; border-top: .3rem solid $postit-hover;
flex-basis: 0;
flex-grow: 1;
height: .6rem; height: .6rem;
z-index: 100; z-index: 100;
} }
.taskboard-task-inner { .taskboard-task-inner {
@include table-flex(); display: flex;
padding: .5rem; padding: .5rem;
} }
.taskboard-user-avatar { .taskboard-user-avatar {
.avatar { flex-basis: 50px;
@include table-flex-child($flex-basis: 50px); flex-grow: 1;
a { max-width: 55px;
@extend %small; a {
display: block; @extend %small;
text-align: center; display: block;
} text-align: center;
img { }
margin: 0 auto; img {
&:hover { margin: 0 auto;
border: 2px solid $green-taiga; &:hover {
transition: border .3s linear; border: 2px solid $green-taiga;
} transition: border .3s linear;
}
figcaption {
color: darken($postit-hover, 15%);
display: none;
//display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
} }
} }
&.iocaine { figcaption {
img { color: darken($postit-hover, 15%);
filter: hue-rotate(150deg) saturate(200%); display: none;
} overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
}
.iocaine {
img {
filter: hue-rotate(150deg) saturate(200%);
} }
} }
.icon-iocaine { .icon-iocaine {
@ -101,7 +101,8 @@
} }
.taskboard-text { .taskboard-text {
@extend %small; @extend %small;
@include table-flex-child($flex-grow: 10, $flex-basis: 50px); flex-basis: 50px;
flex-grow: 10;
padding: 0 .5rem 0 1rem; padding: 0 .5rem 0 1rem;
word-wrap: break-word; word-wrap: break-word;
} }

9
app/styles/components/watchers.scss
View File

@ -19,9 +19,12 @@
} }
} }
.watcher-single { .watcher-single {
@include table-flex(center, center, flex, row, wrap, center); align-content: center;
align-items: center;
background: transparent; background: transparent;
border-bottom: 1px solid $gray-light; border-bottom: 1px solid $gray-light;
display: flex;
justify-content: center;
padding: .5rem; padding: .5rem;
vertical-align: middle; vertical-align: middle;
&:last-child { &:last-child {
@ -36,13 +39,13 @@
} }
.watcher-name { .watcher-name {
@extend %small; @extend %small;
@include table-flex-child(8, 0);
color: $grayer; color: $grayer;
flex-grow: 8;
margin-left: 1rem; margin-left: 1rem;
position: relative; position: relative;
} }
.watcher-avatar { .watcher-avatar {
@include table-flex-child(1, 0); flex-grow: 1;
} }
.icon-delete { .icon-delete {
opacity: 0; opacity: 0;

16
app/styles/modules/common/colors-table.scss
View File

@ -11,7 +11,9 @@
} }
} }
.row { .row {
@include table-flex(stretch, center, flex, row, wrap, center); align-items: center;
display: flex;
justify-content: center;
padding: 1rem; padding: 1rem;
&:hover { &:hover {
.options-column { .options-column {
@ -32,7 +34,8 @@
} }
} }
.color-column { .color-column {
@include table-flex-child(1, 60px, 0); flex-basis: 60px;
flex-grow: 1;
max-width: 100px; max-width: 100px;
position: relative; position: relative;
} }
@ -40,10 +43,12 @@
.is-closed-column, .is-closed-column,
.options-column, .options-column,
.status-wip-limit { .status-wip-limit {
@include table-flex-child(1, 100px, 0); flex-grow: 1;
flex-basis: 100px;
} }
.status-name { .status-name {
@include table-flex-child(6, 150px, 0); flex-grow: 6;
flex-basis: 150px;
padding: 0 10px; padding: 0 10px;
position: relative; position: relative;
span { span {
@ -52,7 +57,8 @@
} }
} }
.status-slug { .status-slug {
@include table-flex-child(6, 150px, 0); flex-grow: 6;
flex-basis: 150px;
padding: 0 10px; padding: 0 10px;
} }
.options-column { .options-column {

111
app/styles/modules/common/lightbox.scss
View File

@ -25,7 +25,9 @@
.lightbox-generic-form { .lightbox-generic-form {
form { form {
@include table-flex-child(0, 600px, 0, 600px); flex-basis: 600px;
flex-grow: 0;
max-width: 600px;
} }
fieldset { fieldset {
@ -58,11 +60,15 @@
} }
.settings { .settings {
@include table-flex(flex-start, stretch, flex, row, wrap, flex-start); align-content: flex-start;
align-items: stretch;
display: flex;
justify-content: flex-start;
margin-bottom: 1rem; margin-bottom: 1rem;
fieldset { fieldset {
@include table-flex-child(1, 30%, 0); flex-basis: 30%;
flex-grow: 1;
margin-right: .5rem; margin-right: .5rem;
text-align: center; text-align: center;
&:last-child { &:last-child {
@ -94,28 +100,20 @@
.client-requirement, .client-requirement,
.team-requirement, .team-requirement,
.iocaine-flag { .iocaine-flag {
input { input:checked+label {
&:checked { background: $fresh-taiga;
+label { color: $white;
background: $fresh-taiga;
color: $white;
}
}
} }
} }
.blocking-flag { .blocking-flag {
input { input:checked+label {
&:checked { background: $red;
+label { color: $white;
background: $red;
color: $white;
}
}
} }
} }
input[type="checkbox"] { input {
display: none; display: none;
} }
} }
@ -128,7 +126,9 @@
.lightbox-generic-bulk { .lightbox-generic-bulk {
form { form {
@include table-flex-child(0, 600px, 0, 600px); flex-basis: 600px;
flex-grow: 0;
max-width: 600px;
} }
textarea { textarea {
margin-bottom: 1rem; margin-bottom: 1rem;
@ -139,7 +139,9 @@
.lightbox-search { .lightbox-search {
form { form {
@include table-flex-child(0, 600px, 0, 600px); flex-basis: 600px;
flex-grow: 0;
max-width: 600px;
} }
input { input {
margin-bottom: 1rem; margin-bottom: 1rem;
@ -148,7 +150,7 @@
.lightbox-add-member { .lightbox-add-member {
.add-member-wrapper { .add-member-wrapper {
@include table-flex(); display: flex;
margin-bottom: .5rem; margin-bottom: .5rem;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
@ -156,10 +158,12 @@
fieldset { fieldset {
position: relative; position: relative;
&:first-child { &:first-child {
@include table-flex-child(3, 400px); flex-basis: 400px;
flex-grow: 3;
} }
&:last-child { &:last-child {
@include table-flex-child(1, 200px); flex-basis: 200px;
flex-grow: 1;
margin-left: .5rem; margin-left: .5rem;
} }
} }
@ -167,7 +171,7 @@
.extra-text { .extra-text {
margin-top: 1rem; margin-top: 1rem;
} }
input[type=email], input,
select { select {
margin-bottom: 0; margin-bottom: 0;
} }
@ -203,7 +207,9 @@
.lightbox-sprint-add-edit { .lightbox-sprint-add-edit {
form { form {
@include table-flex-child(0, 600px, 0, 600px); flex-basis: 600px;
flex-flow: 0;
max-width: 600px;
} }
.last-sprint-name { .last-sprint-name {
color: $gray; color: $gray;
@ -250,7 +256,9 @@
.lightbox-generic-ask { .lightbox-generic-ask {
form { form {
@include table-flex-child(0, 420px, 0, 420px); flex-basis: 420px;
flex-flow: 0;
max-width: 420px;
} }
.subtitle, .subtitle,
.message { .message {
@ -263,9 +271,9 @@
@extend %title; @extend %title;
} }
.options { .options {
@include table-flex(); display: flex;
a { a {
@include table-flex-child(1, 0, 0); flex-grow: 1;
padding: 8px 0; padding: 8px 0;
text-align: center; text-align: center;
&:first-child { &:first-child {
@ -278,7 +286,8 @@
.lightbox-ask-choice { .lightbox-ask-choice {
text-align: center; text-align: center;
form { form {
@include table-flex-child(0, 420px, 0); flex-basis: 420px;
flex-grow: 0;
} }
.question, .question,
.subtitle { .subtitle {
@ -297,9 +306,9 @@
} }
} }
.options { .options {
@include table-flex(); display: flex;
a { a {
@include table-flex-child(1, 0, 0); flex-grow: 1;
padding: 8px 0; padding: 8px 0;
text-align: center; text-align: center;
&:first-child { &:first-child {
@ -311,7 +320,9 @@
.lightbox-delete-account { .lightbox-delete-account {
form { form {
@include table-flex-child(0, 420px, 0, 420px); flex-basis: 420px;
flex-grow: 0;
width: 420px;
} }
.question, .question,
.subtitle { .subtitle {
@ -335,9 +346,9 @@
} }
} }
.options { .options {
@include table-flex(); display: flex;
a { a {
@include table-flex-child(1, 0, 0); flex-grow: 1;
padding: 8px 0; padding: 8px 0;
text-align: center; text-align: center;
&:first-child { &:first-child {
@ -349,7 +360,9 @@
.lightbox-delete-project { .lightbox-delete-project {
form { form {
@include table-flex-child(0, 420px, 0, 420px); flex-basis: 420px;
flex-grow: 0;
width: 420px;
} }
.question, .question,
.subtitle { .subtitle {
@ -362,9 +375,9 @@
@extend %title; @extend %title;
} }
.options { .options {
@include table-flex(); display: flex;
a { a {
@include table-flex-child(1, 0, 0); flex-grow: 1;
padding: 8px 0; padding: 8px 0;
text-align: center; text-align: center;
&:first-child { &:first-child {
@ -378,7 +391,9 @@
.lightbox-generic-success, .lightbox-generic-success,
.lightbox-generic-error { .lightbox-generic-error {
section { section {
@include table-flex-child(0, 420px, 0, 420px); flex-basis: 420px;
flex-grow: 0;
width: 420px;
} }
h2 { h2 {
line-height: 2rem; line-height: 2rem;
@ -387,14 +402,18 @@
.lightbox-create-issue { .lightbox-create-issue {
form { form {
@include table-flex-child(0, 600px, 0, 600px); flex-basis: 600px;
flex-grow: 0;
width: 600px;
} }
.fieldset-row { .fieldset-row {
@include table-flex(); display: flex;
fieldset { fieldset {
@include table-flex-child(1, 100px, 0, 30%); flex-basis: 100px;
flex-grow: 1;
margin-right: .5rem; margin-right: .5rem;
width: 30%;
&:last-child { &:last-child {
margin: 0; margin: 0;
} }
@ -410,7 +429,9 @@
.lightbox-block { .lightbox-block {
.form { .form {
@include table-flex-child(0, 420px, 0, 420px); flex-basis: 420px;
flex-grow: 0;
width: 420px;
} }
textarea { textarea {
margin-bottom: 1rem; margin-bottom: 1rem;
@ -421,14 +442,16 @@
.lightbox-select-user { .lightbox-select-user {
.form { .form {
@include table-flex-child(0, 600px, 0, 600px); flex-basis: 600px;
flex-grow: 0;
width: 600px;
} }
.watchers { .watchers {
margin-top: 1rem; margin-top: 1rem;
min-height: 440px; min-height: 440px;
.watcher-name { .watcher-name {
@include table-flex-child(12, 0); flex-grow: 12;
} }
} }
.watcher-single { .watcher-single {

17
app/styles/modules/common/related-tasks.scss
View File

@ -4,8 +4,11 @@
} }
.related-tasks-header { .related-tasks-header {
@include table-flex(space-between, center, flex, row, wrap, space-between); align-content: space-between;
align-items: center;
background: $whitish; background: $whitish;
display: flex;
justify-content: space-between;
padding: .5rem 1rem; padding: .5rem 1rem;
.related-tasks-title { .related-tasks-title {
@extend %medium; @extend %medium;
@ -26,8 +29,11 @@
width: 100%; width: 100%;
.row { .row {
@extend %small; @extend %small;
@include table-flex(center, center, flex, row, wrap, center); align-content: center;
align-items: center;
border-bottom: 1px solid $whitish; border-bottom: 1px solid $whitish;
display: flex;
justify-content: center;
padding: .5rem 0 .5rem .5rem; padding: .5rem 0 .5rem .5rem;
position: relative; position: relative;
text-align: left; text-align: left;
@ -43,13 +49,14 @@
border: 0; border: 0;
} }
.tasks { .tasks {
@include table-flex-child(10, 78%, 0); flex-basis: 78%;
flex-grow: 10;
} }
.status { .status {
@include table-flex-child(0, 10%, 0); flex-basis: 10%;
} }
.assigned-to { .assigned-to {
@include table-flex-child(0, 10%, 0); flex-basis: 10%;
} }
} }
.related-task-create-form { .related-task-create-form {

120
app/styles/modules/common/wizard.scss
View File

@ -42,9 +42,7 @@
&.active { &.active {
animation: formSlide .4s ease-in-out; animation: formSlide .4s ease-in-out;
&.create-step2, &.create-step2,
&.create-step3 { &.create-step3,
@include table-flex();
}
&.create-step1 { &.create-step1 {
display: block; display: block;
} }
@ -52,12 +50,13 @@
} }
.wizard-action { .wizard-action {
div { div {
@include table-flex(); display: flex;
} }
a { a {
@include table-flex-child(1, 40%, 0);
color: $white; color: $white;
display: inline-block; display: inline-block;
flex-grow: 1;
flex-basis: 40%;
&:first-child { &:first-child {
margin-right: .5rem; margin-right: .5rem;
} }
@ -65,38 +64,38 @@
} }
.create-step1 { .create-step1 {
.template-inner { .template-inner {
@include table-flex(); display: flex;
fieldset { }
@include table-flex-child(1, 0, 0); fieldset {
&:first-child { flex-grow: 1;
margin-right: .5rem; &:first-child {
} margin-right: .5rem;
} }
} }
input[type="radio"] { input {
display: none; display: none;
&:checked { }
+label { input:checked {
background: rgba($fresh-taiga, .7);
transition: background .3s ease-in;
}
}
+label { +label {
background: rgba($whitish, .7); background: rgba($fresh-taiga, .7);
cursor: pointer;
display: block;
margin-bottom: 1rem;
padding: 1rem;
text-align: center;
transition: background .3s ease-in; transition: background .3s ease-in;
&:hover { }
background: rgba($green-taiga, .7); }
transition: background .3s ease-in; input+label {
} background: rgba($whitish, .7);
.icon { cursor: pointer;
@extend %xxlarge; display: block;
color: $white; margin-bottom: 1rem;
} padding: 1rem;
text-align: center;
transition: background .3s ease-in;
&:hover {
background: rgba($green-taiga, .7);
transition: background .3s ease-in;
}
.icon {
@extend %xxlarge;
color: $white;
} }
} }
h2 { h2 {
@ -115,39 +114,40 @@
left: 0; left: 0;
position: absolute; position: absolute;
width: 100%; width: 100%;
&.step1 { }
.bar { .step1 {
transition: width .6s ease-in-out; .bar {
width: 25%; transition: width .6s ease-in-out;
} width: 25%;
.progress-state {
span {
&:nth-child(1) {
color: rgba($white, 1);
transition: color .3s ease-in-out;
transition-delay: .6s;
}
}
}
} }
&.step2 { .progress-state {
.bar { span {
transition: width .6s ease-in-out; &:nth-child(1) {
// width: 50%; color: rgba($white, 1);
width: 75%; transition: color .3s ease-in-out;
} transition-delay: .6s;
.progress-state {
span {
&:nth-child(1),
&:nth-child(2) {
color: rgba($white, 1);
transition: color .3s ease-in-out;
transition-delay: .6s;
}
} }
} }
} }
} }
.step2 {
.bar {
transition: width .6s ease-in-out;
// width: 50%;
width: 75%;
}
.progress-state {
span {
&:nth-child(1),
&:nth-child(2) {
color: rgba($white, 1);
transition: color .3s ease-in-out;
transition-delay: .6s;
}
}
}
}
.progress-state { .progress-state {
position: absolute; position: absolute;
width: 100%; width: 100%;