ahtlon/deck
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Implements the compact toggle

Browse Source 
Signed-off-by: Michael Weimann <mail@michael-weimann.eu>
This commit is contained in:
Michael Weimann
2018-08-29 15:28:56 +02:00
parent 2c12a99020
commit e53c623759
12 changed files with 148 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
css/animations.scss Normal file
View File

@@ -0,0 +1,43 @@
/*
* @copyright Copyright (c) 2018 Michael Weimann <mail@michael-weimann.eu>
*
* @author 2018 Michael Weimann <mail@michael-weimann.eu>
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
.compact-item.ng-enter,
.compact-item.ng-leave {
overflow: hidden;
transition: all 250ms linear;
}
.compact-item.ng-enter {
max-height: 0;
&.ng-enter-active {
max-height: 50px;
}
}
.compact-item.ng-leave {
max-height: 50px;
&.ng-leave-active {
max-height: 0;
}
}

41
css/compact-mode.scss Normal file
View File

@@ -0,0 +1,41 @@
/*
* @copyright Copyright (c) 2018 Michael Weimann <mail@michael-weimann.eu>
*
* @author 2018 Michael Weimann <mail@michael-weimann.eu>
*
* @license GNU AGPL version 3 or any later version
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
.compact-mode {
.card {
margin: $compact-board-item-margin;
&:last-child {
margin: $compact-board-last-item-margin;
}
}
.stack {
.as-sortable-placeholder {
margin: $compact-board-item-margin;
&:last-child {
margin: $compact-board-last-item-margin;
}
}
}
}

10
css/icons.scss
View File

@@ -39,4 +39,12 @@
.icon-badge {
background-image: url('../../../core/img/places/calendar-dark.svg');
}
}
.icon-toggle-compact-collapsed {
background-image: url('../img/toggle_view_expand.svg');
}
.icon-toggle-compact-expanded {
background-image: url('../img/toggle_view_collapse.svg');
}

28
css/style.scss
View File

@@ -24,13 +24,23 @@
*
*/
// colors
$color-warning-light: nc-lighten($color-warning, 15%);
$color-lightgrey: nc-darken($color-main-background, 4%);
$color-grey: nc-darken($color-main-background, 7%);
$color-darkgrey: nc-darken($color-main-background, 32%);
@import 'comp-appnav.scss';
@import 'icons.scss';
// margins/paddings
$board-item-margin: 10px 10px 20px 10px;
$board-last-item-margin: 10px;
$compact-board-item-margin: 5px 10px 10px 10px;
$compact-board-last-item-margin: 5px 10px 10px;
@import 'comp-appnav';
@import 'icons';
@import 'animations';
@import 'compact-mode';
/**
* General styles
@@ -338,7 +348,7 @@ input.input-inline {
flex-direction: column;
h3 {
padding: 10px 10px 8px;
padding: 10px 10px 8px;;
margin: 0;
font-size: 12pt;
font-weight: normal;
@@ -380,16 +390,16 @@ input.input-inline {
}
.as-sortable-placeholder {
margin: 10px 10px 20px 10px;
margin: $board-item-margin;
border: 1px dashed $color-darkgrey;
min-height: 96px;
transition: margin 250ms linear;
&:last-child {
margin: 10px;
margin: $board-last-item-margin;
}
}
> ul {
display: flex;
flex-direction: column;
@@ -397,17 +407,17 @@ input.input-inline {
}
.card {
background-color: $color-main-background;
margin: 10px 10px 20px 10px;
margin: $board-item-margin;
white-space: normal;
position: relative;
box-shadow: 0 0 3px $color-darkgrey;
border-radius: 3px;
transition: margin 250ms linear;
&:last-child {
margin: 10px;
margin: $board-last-item-margin;
}
&.archived .card-upper {