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/
@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 align-content($align-content);
@include align-items($align-items);
@include flex-direction($flex-direction);
@include flex-wrap($flex-wrap);
@include justify-content($justify-content);
@include align-content($align-content); //flex-start | flex-end | center | space-between | space-around | stretch
@include align-items($align-items); //flex-start | flex-end | center | baseline | stretch
@include flex-direction($flex-direction); //row | row-reverse | column | column-reverse
@include flex-wrap($flex-wrap); //nowrap | wrap | wrap-reverse
@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:'') {

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

@ -6,6 +6,13 @@
@include table-flex(stretch, center, flex, row, wrap, flex-start);
figcaption {
margin-left: 1rem;
width: 75%;
span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
}
img {
@include table-flex-child(1, 35px, 0);
@ -23,29 +30,6 @@
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-status {
padding-left: .5rem;
@ -54,16 +38,32 @@
padding-right: 1rem;
}
.row-status {
@include table-flex();
.delete {
@extend %large;
@include table-flex(stretch, center, flex, row, wrap, flex-start);
color: $gray-light;
margin-left: 15px;
padding: 0 15px;
&:hover {
color: $red;
}
@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 {
@extend %large;
color: $gray-light;
&:hover {
color: $red;
}
}
.row-admin {
@ -78,14 +78,17 @@
.row-role,
.header-member,
.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-admin,
.header-admin,
.header-status {
@include table-flex-child(1, 50px, 0);
}
.check {
background-color: darken($whitish, 10%);
border-radius: 2px;