From 5a8c635143e9ec9ea080a6bd9bde96b57efe264d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= Date: Wed, 30 Jul 2014 12:10:46 +0200 Subject: [PATCH] Project profile front refactor --- app/partials/admin-project-features.jade | 32 ++++++++++--- app/styles/components/buttons.scss | 1 + app/styles/dependencies/mixins.scss | 10 ++-- .../modules/admin/admin-functionalities.scss | 46 +++++++++++++------ .../modules/admin/admin-project-profile.scss | 2 +- 5 files changed, 65 insertions(+), 26 deletions(-) diff --git a/app/partials/admin-project-features.jade b/app/partials/admin-project-features.jade index 4fd620a3..bd3c053a 100644 --- a/app/partials/admin-project-features.jade +++ b/app/partials/admin-project-features.jade @@ -18,47 +18,67 @@ block content form div.functionality(ng-class="{true:'active', false:''}[project.is_backlog_activated]") - input(type="checkbox", style="width:40px; height: 40px;", ng-model="project.is_backlog_activated") div.icon.icon-backlog div.desc p span Backlog | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis quam augue, quis bibendum lectus porta eget. Nunc dictum imperdiet venenatis. Curabitur vitae augue ut est rhoncus pellentesque. Nunc sed ultricies est, tincidunt euismod nunc. Nunc nec posuere metus. + div.activate + input.activate-input(type="checkbox", id="functionality-backlog", ng-model="project.is_backlog_activated") + label.button.button-gray(ng-switch="project.is_backlog_activated", for="functionality-backlog") + span(ng-switch-when="true") Disable + span(ng-switch-when="false") Enable div.functionality(ng-class="{true:'active', false:''}[project.is_kanban_activated]") - input(type="checkbox", style="width:40px; height: 40px;", ng-model="project.is_kanban_activated") div.icon.icon-kanban div.desc p span Kanban | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis quam augue, quis bibendum lectus porta eget. Nunc dictum imperdiet venenatis. Curabitur vitae augue ut est rhoncus pellentesque. Nunc sed ultricies est, tincidunt euismod nunc. Nunc nec posuere metus. + div.activate + input.activate-input(type="checkbox", id="functionality-kanban", ng-model="project.is_kanban_activated") + label.button.button-gray(ng-switch="project.is_kanban_activated", for="functionality-kanban") + span(ng-switch-when="true") Disable + span(ng-switch-when="false") Enable div.functionality(ng-class="{true:'active', false:''}[project.is_issues_activated]") - input(type="checkbox", style="width:40px; height: 40px;", ng-model="project.is_issues_activated") div.icon.icon-issues div.desc p span Issues | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis quam augue, quis bibendum lectus porta eget. Nunc dictum imperdiet venenatis. Curabitur vitae augue ut est rhoncus pellentesque. Nunc sed ultricies est, tincidunt euismod nunc. Nunc nec posuere metus. + div.activate + input.activate-input(type="checkbox", id="functionality-issues", ng-model="project.is_issues_activated") + label.button.button-gray(ng-switch="project.is_issues_activated", for="functionality-issues") + span(ng-switch-when="true") Disable + span(ng-switch-when="false") Enable div.functionality(ng-class="{true:'active', false:''}[project.is_wiki_activated]") - input(type="checkbox", style="width:40px; height: 40px;", ng-model="project.is_wiki_activated") div.icon.icon-wiki div.desc p span Wiki | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis quam augue, quis bibendum lectus porta eget. Nunc dictum imperdiet venenatis. Curabitur vitae augue ut est rhoncus pellentesque. Nunc sed ultricies est, tincidunt euismod nunc. Nunc nec posuere metus. + div.activate + input.activate-input(type="checkbox", id="functionality-wiki", ng-model="project.is_wiki_activated") + label.button.button-gray(ng-switch="project.is_wiki_activated", for="functionality-wiki") + span(ng-switch-when="true") Disable + span(ng-switch-when="false") Enable div.functionality(ng-class="{true:'active', false:''}[isVideoconferenceActivated]") - input(type="checkbox", style="width:40px; height: 40px;", ng-model="isVideoconferenceActivated") div.icon.icon-video div.desc p span Video | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis quam augue, quis bibendum lectus porta eget. Nunc dictum imperdiet venenatis. Curabitur vitae augue ut est rhoncus pellentesque. Nunc sed ultricies est, tincidunt euismod nunc. Nunc nec posuere metus. + div.activate + input.activate-input(type="checkbox", id="functionality-video", ng-model="isVideoconferenceActivated") + label.button.button-gray(ng-switch="isVideoconferenceActivated", for="functionality-video") + span(ng-switch-when="true") Disable + span(ng-switch-when="false") Enable div.videoconference-attributes.hidden select(ng-model="project.videoconferences", ng-options="e.id as e.name for e in [{'id':'appear-in', 'name':'AppearIn'},{'id':'talky', 'name': 'Talky'}]") - input(ng-model="project.videoconferences_salt", placeholder="write a name for the chat room (ej. the name of the project)") + input(type="text", ng-model="project.videoconferences_salt", placeholder="write a name for the chat room (ej. the name of the project)") input(type="submit", class="hidden") a.button.button-green(href="") Save diff --git a/app/styles/components/buttons.scss b/app/styles/components/buttons.scss index a7beec48..6d2c2e68 100755 --- a/app/styles/components/buttons.scss +++ b/app/styles/components/buttons.scss @@ -42,6 +42,7 @@ a.button-green { } } +.button-gray, a.button-gray { background: $button-gray; &:hover { diff --git a/app/styles/dependencies/mixins.scss b/app/styles/dependencies/mixins.scss index c86c10bd..9ceeadae 100644 --- a/app/styles/dependencies/mixins.scss +++ b/app/styles/dependencies/mixins.scss @@ -11,12 +11,12 @@ // 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) { - align-content: $align-content; - align-items: $align-items; + align-content: $align-content; // flex-start, flex-end, center, space-between, space-around, stretch + align-items: $align-items; //flex-start, flex-end, center, baseline, stretch display: $display; - flex-direction: $flex-direction; - flex-wrap: $flex-wrap; - justify-content: $justify-content; + flex-direction: $flex-direction; //row | row-reverse | column | column-reverse + flex-wrap: $flex-wrap; // nowrap | wrap | wrap-reverse + 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:'') { diff --git a/app/styles/modules/admin/admin-functionalities.scss b/app/styles/modules/admin/admin-functionalities.scss index 16e0902b..77940b2f 100644 --- a/app/styles/modules/admin/admin-functionalities.scss +++ b/app/styles/modules/admin/admin-functionalities.scss @@ -1,32 +1,50 @@ .admin-functionalities { .functionality { + @include transition(all .2s linear); + @include table-flex(); background-color: $whitish; - display: flex; margin-bottom: 1rem; - padding: 2rem; - .icon, - .desc { - opacity: .5; + opacity: .5; + padding: 1rem; + position: relative; + &.active { + background-color: #e9f0da; + opacity: 1; + .icon { + + } } - p { - margin-bottom: 0; + .icon { + @include table-flex-child(1, 0, 0); + @include transform(translate(1rem, 1rem)); + } + .desc { + @include table-flex-child(10 , 0, 0); + } + .activate-input { + display: none; + +label { + color: $white; + cursor: pointer; + } } span { font-weight: bold; } + p { + margin-bottom: .5rem; + } select { margin-top: 1rem; } - &.active { - background-color: #e9f0da; - div, - p { - opacity: 1; - } - } } .icon { @extend %xxlarge; margin-right: 2rem; } + .videoconference-attributes { + select { + margin-bottom: .5rem; + } + } } diff --git a/app/styles/modules/admin/admin-project-profile.scss b/app/styles/modules/admin/admin-project-profile.scss index 5a4fa10e..0a441a84 100644 --- a/app/styles/modules/admin/admin-project-profile.scss +++ b/app/styles/modules/admin/admin-project-profile.scss @@ -11,7 +11,7 @@ label { @extend %title; display: block; - margin-bottom: .5rem; + margin-bottom: .2rem; } input[type="text"] { width: 50%;