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

This is part one of the style cleanup mentioned in #160.

Browse Source 
Functionality has not been affected (I hope). There will be few more related PRs but I want to keep each one simple so it's easy to review.

Signed-off-by: Marin Treselj <marin@pixelipo.com>
This commit is contained in:
Marin Treselj
2017-05-25 14:57:11 +02:00
committed by Julius Härtl
parent 2adf972440
commit 1defc48179
3 changed files with 40 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
css/style.css
View File

@@ -148,61 +148,28 @@ button.button-inline:hover {
padding: 7px; padding: 7px;
} }
#board-header #home { .board-header-controls {
position: relative;
padding: 0px;
}
#board-actions {
font-size: 10pt;
float: right;
position: relative;
color: #888;
margin: 8px;
}
#board-actions .filter .filter-button {
margin-left: 10px;
margin-right: 10px;
}
#board-actions .filter:hover {
color: #333333;
cursor: pointer;
}
#board-header-controls {
display: flex;
align-items: center;
position: relative;
margin-left: auto; margin-left: auto;
} }
#board-header-controls-menu { .board-header-controls.app-popover-menu-utils {
display: none; display: flex;
} }
#board-header-controls-menu button { .board-header-controls > button {
padding: 15px 20px 15px 20px; padding: 16px 20px;
} }
#board-header-controls-menu #popover-controls { .board-header-controls.app-popover-menu-utils #popover-controls {
display: flex; display: flex;
align-items: center; align-items: center;
padding-left: 3px;
} }
#board-header-controls-menu .popovermenu{ .board-header-controls.app-popover-menu-utils .popovermenu {
margin-top: 35px; margin-top: 35px;
margin-right: 6px; margin-right: 6px;
} }
.board-action-button,
.board-action-button * {
display: flex;
align-items: center;
}
.filter-select { .filter-select {
position: absolute; position: absolute;
right: auto; right: auto;
@@ -224,20 +191,10 @@ button.button-inline:hover {
margin-right: 5px; margin-right: 5px;
} }
#board-actions div {
padding: 5px;
float: left;
}
.board-actions button {
border: none;
background-color: transparent;
}
#stack-add { #stack-add {
background-color: rgba(240,240,240,.9); background-color: rgba(240,240,240,.9);
border-radius: 3px; border-radius: 3px;
margin-right: 3px; margin: 3px;
} }
#stack-add > form { #stack-add > form {
@@ -248,7 +205,7 @@ button.button-inline:hover {
padding: 4px 5px; padding: 4px 5px;
border: 0px none transparent; border: 0px none transparent;
min-height: initial; min-height: initial;
background-color: rgba(240,240,240,.9); background-color: transparent;
} }
#stack-add input:invalid { #stack-add input:invalid {
@@ -887,14 +844,14 @@ button.button-inline:hover {
* Mobile optimizations * Mobile optimizations
*/ */
@media (max-width: 480px) { @media (min-width: 481px) {
/* hide board actions on mobile */ /* hide board actions on mobile */
#board-header-controls { .board-header-controls {
display: none !important; display: flex;
} }
#board-header-controls-menu { .board-header-controls.app-popover-menu-utils {
display: flex; display: none;
} }
} }

20
templates/part.board.headerControls.php Normal file
View File

@@ -0,0 +1,20 @@
<div id="stack-add" ng-if="boardservice.canEdit() && checkCanEdit()">
<form class="ng-pristine ng-valid" ng-submit="createStack()">
<input type="text" class="no-close" placeholder="Add a new stack"
ng-focus="status.addStack=true"
ng-blur="status.addStack=false"
ng-model="newStack.title" required
maxlength="100" />
<button class="button-inline icon icon-add" style="opacity: {{status.addStack ? 1: 0.5}};" type="submit"></button>
</form>
</div>
<a class="board-action-button button" ng-if="filter!='archive'" ng-click="switchFilter('archive')" style="opacity:0.5;" title="<?php p($l->t('Show archived cards')); ?>">
<i class="icon icon-archive"></i>
</a>
<a class="board-action-button button" ng-if="filter=='archive'" ng-click="switchFilter('')" title="<?php p($l->t('Hide archived cards')); ?>">
<i class="icon icon-archive"></i>
</a>
<a class="board-action-button button" ui-sref="board.detail({ id: id })" title="<?php p($l->t('Board details')); ?>">
<i class="icon icon-details"></i>
</a>

47
templates/part.board.mainView.php
View File

@@ -4,6 +4,7 @@
<h2>{{ statusservice.title }}</h2> <h2>{{ statusservice.title }}</h2>
<p>{{ statusservice.text }}</p></div> <p>{{ statusservice.text }}</p></div>
</div> </div>
<div id="board-header"> <div id="board-header">
<a class="crumb" href="#" title="<?php p($l->t('All Boards')); ?>"> <a class="crumb" href="#" title="<?php p($l->t('All Boards')); ?>">
<i class="icon icon-home"></i> <i class="icon icon-home"></i>
@@ -12,50 +13,14 @@
<h1 class="title" style="border-bottom: 2px solid #{{boardservice.getCurrent().color }};"> <h1 class="title" style="border-bottom: 2px solid #{{boardservice.getCurrent().color }};">
{{ boardservice.getCurrent().title }} {{ boardservice.getCurrent().title }}
</h1> </h1>
<div id="board-header-controls"> <div class="board-header-controls hidden">
<div id="stack-add" ng-if="boardservice.canEdit() && checkCanEdit()"> <?php print_unescaped($this->inc('part.board.headerControls')); ?>
<form class="ng-pristine ng-valid" ng-submit="createStack()">
<input type="text" placeholder="Add a new stack"
ng-focus="status.addStack=true"
ng-blur="status.addStack=false"
ng-model="newStack.title" required
maxlength="100" />
<button class="button-inline icon icon-add" style="opacity: {{status.addStack ? 1: 0.5}};" type="submit"></button>
</form>
</div> </div>
<a class="board-action-button button" ng-if="filter!='archive'" ng-click="switchFilter('archive')" style="opacity:0.5;" title="<?php p($l->t('Show archived cards')); ?>"> <div class="board-header-controls app-popover-menu-utils">
<i class="icon icon-archive"></i> <button class="icon-more button"></button>
</a>
<a class="board-action-button button" ng-if="filter=='archive'" ng-click="switchFilter('')" title="<?php p($l->t('Hide archived cards')); ?>">
<i class="icon icon-archive"></i>
</a>
<a class="board-action-button button" ui-sref="board.detail({ id: id })" title="<?php p($l->t('Board details')); ?>">
<i class="icon icon-details"></i>
</a>
</div>
<div id="board-header-controls-menu" class="app-popover-menu-utils">
<button class="icon-more button board-action-button"></button>
<div class="popovermenu hidden"> <div class="popovermenu hidden">
<div id="popover-controls"> <div id="popover-controls">
<div id="stack-add" ng-if="boardservice.canEdit() && checkCanEdit()"> <?php print_unescaped($this->inc('part.board.headerControls')); ?>
<form class="ng-pristine ng-valid" ng-submit="createStack()">
<input type="text" class="no-close" placeholder="Add a new stack"
ng-focus="status.addStack=true"
ng-blur="status.addStack=false"
ng-model="newStack.title" required
maxlength="100" />
<button class="button-inline icon icon-add" style="opacity: {{status.addStack ? 1: 0.5}};" type="submit"></button>
</form>
</div>
<a class="board-action-button button" ng-if="filter!='archive'" ng-click="switchFilter('archive')" style="opacity:0.5;" title="<?php p($l->t('Show archived cards')); ?>">
<i class="icon icon-archive"></i>
</a>
<a class="board-action-button button" ng-if="filter=='archive'" ng-click="switchFilter('')" title="<?php p($l->t('Hide archived cards')); ?>">
<i class="icon icon-archive"></i>
</a>
<a class="board-action-button button" ui-sref="board.detail({ id: id })" title="<?php p($l->t('Board details')); ?>">
<i class="icon icon-details"></i>
</a>
</div> </div>
</div> </div>
</div> </div>