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

Merge pull request #126 from taigaio/bug/1452/memberlist-layout 

Memberlist list fluid layout fix
stable
David Barragán Merino 2014-10-28 16:29:32 +01:00
parent 6c7d94cfcc cacaf0e897
commit 2f728e4639
2 changed files with 44 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/styles/dependencies/mixins.scss
View File

@ -12,11 +12,11 @@
// Table Flex - http://devbryce.com/site/flexbox/ // Table Flex - http://devbryce.com/site/flexbox/
@mixin table-flex($align-content: stretch, $align-items: stretch, $display: flex, $flex-direction: row, $flex-wrap: wrap, $justify-content: flex-start) { @mixin table-flex($align-content: stretch, $align-items: stretch, $display: flex, $flex-direction: row, $flex-wrap: wrap, $justify-content: flex-start) {
@include display($display); @include display($display);
@include align-content($align-content); @include align-content($align-content); //flex-start | flex-end | center | space-between | space-around | stretch
@include align-items($align-items); @include align-items($align-items); //flex-start | flex-end | center | baseline | stretch
@include flex-direction($flex-direction); @include flex-direction($flex-direction); //row | row-reverse | column | column-reverse
@include flex-wrap($flex-wrap); @include flex-wrap($flex-wrap); //nowrap | wrap | wrap-reverse
@include justify-content($justify-content); @include justify-content($justify-content); //flex-start | flex-end | center | space-between | space-around
} }
@mixin table-flex-child($flex-grow: 1, $flex-basis: 300px, $flex-shrink: 0, $width:'') { @mixin table-flex-child($flex-grow: 1, $flex-basis: 300px, $flex-shrink: 0, $width:'') {

65
app/styles/modules/admin/admin-membership-table.scss
View File

@ -6,6 +6,13 @@
@include table-flex(stretch, center, flex, row, wrap, flex-start); @include table-flex(stretch, center, flex, row, wrap, flex-start);
figcaption { figcaption {
margin-left: 1rem; margin-left: 1rem;
width: 75%;
span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
} }
img { img {
@include table-flex-child(1, 35px, 0); @include table-flex-child(1, 35px, 0);
@ -23,29 +30,6 @@
color: $gray-light; color: $gray-light;
} }
} }
.active,
.pending {
padding: 8px;
width: 115px;
.icon {
@extend %large;
}
}
.active {
background-color: $whitish;
}
.pending {
background-color: $red-light;
color: $white;
.icon {
float: right;
}
&:hover {
@include transition (background-color .3s linear);
background-color: $red;
color: $white;
}
}
.header-role, .header-role,
.header-status { .header-status {
padding-left: .5rem; padding-left: .5rem;
@ -54,18 +38,34 @@
padding-right: 1rem; padding-right: 1rem;
} }
.row-status { .row-status {
@include table-flex(); @include table-flex($justify-content: space-between, $align-items: center);
}
.active,
.pending {
padding: 8px;
}
.active {
background-color: $whitish;
}
.pending {
background-color: $red-light;
color: $white;
.icon {
float: rsdsdfdvsdvight;
}
&:hover {
@include transition (background-color .3s linear);
background-color: $red;
color: $white;
}
}
.delete { .delete {
@extend %large; @extend %large;
@include table-flex(stretch, center, flex, row, wrap, flex-start);
color: $gray-light; color: $gray-light;
margin-left: 15px;
padding: 0 15px;
&:hover { &:hover {
color: $red; color: $red;
} }
} }
}
.row-admin { .row-admin {
input { input {
vertical-align: middle; vertical-align: middle;
@ -78,14 +78,17 @@
.row-role, .row-role,
.header-member, .header-member,
.header-role { .header-role {
@include table-flex-child(3, 35px, 0); @include table-flex-child(4, 0, 0);
}
.row-admin,
.header-admin {
@include table-flex-child(1, 0, 0);
} }
.row-status, .row-status,
.row-admin,
.header-admin,
.header-status { .header-status {
@include table-flex-child(1, 50px, 0); @include table-flex-child(1, 50px, 0);
} }
.check { .check {
background-color: darken($whitish, 10%); background-color: darken($whitish, 10%);
border-radius: 2px; border-radius: 2px;