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

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

@ -21,6 +21,8 @@ form
div.title
h1 Create Project
p Fresh and clean. So exciting!
div.template-wrapper
div.template-inner
fieldset
input(type="text", name="name", ng-model="data.name", data-required="true", placeholder="Name", maxlength="45")
fieldset

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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