diff --git a/app/partials/membership.jade b/app/partials/membership.jade index 7aa95010..fdb60e6c 100644 --- a/app/partials/membership.jade +++ b/app/partials/membership.jade @@ -7,7 +7,49 @@ block content sidebar.menu-secondary.sidebar include views/modules/admin-menu - section.main.search-result - include views/components/mainTitle - include views/modules/search-filter - include views/modules/search-result-table \ No newline at end of file + section.main.admin-membership + header + include views/components/mainTitle + a.button-green(title="Add New US" href="") + span.text + New role + + section.admin-membership-table + div.row.title + div.header-member Member + div.header-role Role + div.header-status Status + div.row + div.row-member + figure.avatar + img(alt="username" src="http://thecodeplayer.com/u/uifaces/12.jpg") + figcaption + span.name Pilar + span.email pilar.estaban@secuoyas.com + div.row-role + select + option UX + option Front + option Back + div.row-status + div.active Active + a(href="#").delete + span.icon.icon-delete + + div.row + div.row-member + figure.avatar + img(alt="username" src="http://thecodeplayer.com/u/uifaces/12.jpg") + figcaption + span.name Pilar + span.email pilar.estaban@secuoyas.com + div.row-role + select + option UX + option Front + option Back + div.row-status + a(href="#").pending + | Pending + span.icon.icon-reload + a(href="#").delete + span.icon.icon-delete diff --git a/app/styles/main.scss b/app/styles/main.scss index 6d63418f..32a168a0 100755 --- a/app/styles/main.scss +++ b/app/styles/main.scss @@ -42,6 +42,7 @@ $prefix-for-spec: true; @import 'modules/search-filter'; @import 'modules/search-result-table'; @import 'modules/admin-menu'; +@import 'modules/admin-membership'; // Responsive @import 'responsive/mobile'; diff --git a/app/styles/modules/admin-membership.scss b/app/styles/modules/admin-membership.scss new file mode 100644 index 00000000..90a122d5 --- /dev/null +++ b/app/styles/modules/admin-membership.scss @@ -0,0 +1,112 @@ +.admin-membership { + header { + @include clearfix; + margin-bottom: 1rem; + h1 { + float: left; + margin-bottom: 0; + } + a { + float: right; + } + } +} + +.admin-membership-table { + align-content: stretch; + align-items: center; + display: flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: flex-start; + width: 100%; + .title { + font-family: 'DroidSans-Bold'; + } + .row { + align-content: stretch; + align-items: center; + border-bottom: 1px solid $gray-light; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: flex-start; + padding: 1rem 0 1rem 1rem; + text-align: left; + width: 100%; + &:last-child { + border-bottom: 0; + } + } + .avatar { + align-items: center; + display: flex; + figcaption { + margin-left: 1rem; + } + img { + flex-basis: 35px; + } + .name, + .email { + display: block; + width: 100%; + } + .name { + font-family: DroidSans-Bold; + } + .email { + color: $gray-light; + } + } + .active, + .pending { + padding: 8px; + width: 115px; + } + .active { + background-color: $whitish; + } + .pending { + background-color: $red-light; + color: $white; + .icon { + float: right; + } + &:hover { + @include transition (background-color .3s linear); + background-color: $red; + } + } + .header-role, + .header-status { + padding-left: .5rem; + } + .row-role { + padding-right: 1rem; + } + .row-status { + display: flex; + .delete { + @extend %large; + align-items: center; + color: $gray-light; + display: flex; + margin-left: 15px; + padding: 0 15px; + &:hover { + color: $red; + } + } + } + .row-status, + .header-status { + width: 180px; + } + .row-member, + .row-role, + .header-member, + .header-role { + flex: 1 0 50px; + } +} diff --git a/csslintrc.json b/csslintrc.json index 0616cb74..86e74f74 100644 --- a/csslintrc.json +++ b/csslintrc.json @@ -19,5 +19,6 @@ "regex-selectors": false, "floats": false, "fallback-colors": false, - "adjoining-classes": false + "adjoining-classes": false, + "qualified-headings": false }