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

header bar and mobile device improvements

Browse Source 
Signed-off-by: Artem Anufrij <artem.anufrij@live.de>
This commit is contained in:
Artem Anufrij
2017-05-22 00:27:34 +02:00
committed by Julius Härtl
parent fbc12ae8f7
commit c6ebfdc11f
2 changed files with 64 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
css/style.css
View File

@@ -126,21 +126,26 @@ button:hover {
position: relative; position: relative;
z-index: 120; z-index: 120;
height: 44px; height: 44px;
display: flex;
align-items: center;
} }
#board-header > * { #board-header > * {
font-size: 14pt; font-size: 14pt;
padding: 7px;
margin: 7px;
float: left;
} }
#board-header > a { #board-header > h1 {
background: url('/core/img/breadcrumb.svg?v=1'); white-space: nowrap;
background-repeat: no-repeat; }
background-position: right center;
background-size: auto 24px; #board-header #home {
padding-right: 24px; position: relative;
padding: 0px 12px;
}
#board-header #home a{
position: relative;
padding: 0px;
} }
#board-actions { #board-actions {
@@ -161,6 +166,18 @@ button:hover {
cursor: pointer; cursor: pointer;
} }
#board-header-controls {
display: flex;
align-items: center;
position: relative;
}
#board-header-controls .board-action-button,
#board-header-controls .board-action-button * {
display: flex;
align-items: center;
}
.filter-select { .filter-select {
position: absolute; position: absolute;
right: auto; right: auto;
@@ -192,22 +209,19 @@ button:hover {
background-color: transparent; background-color: transparent;
} }
#board-header > .board-action-button {
float: right;
}
#stack-add { #stack-add {
background-color: rgba(240,240,240,.9); background-color: rgba(240,240,240,.9);
border-radius: 3px; border-radius: 3px;
padding: 0; margin-right: 12px;
}
#stack-add > form {
display: flex;
} }
#stack-add input { #stack-add input {
padding: 7px; padding: 4px 5px;
margin: 0px;
border: 0px none transparent; border: 0px none transparent;
display: table-cell;
vertical-align: middle;
min-height: initial; min-height: initial;
background-color: rgba(240,240,240,.9); background-color: rgba(240,240,240,.9);
} }
@@ -224,11 +238,6 @@ button:hover {
box-shadow:none; box-shadow:none;
} }
#stack-add button {
display: table-cell;
vertical-align: middle;
}
.stack { .stack {
width: 320px; width: 320px;
margin-right: 10px; margin-right: 10px;
@@ -321,7 +330,7 @@ button:hover {
opacity: 1; opacity: 1;
} }
.card .card-controls .space { .space {
width: 100%; width: 100%;
min-height: 16px; min-height: 16px;
} }
@@ -845,17 +854,11 @@ button:hover {
@media (max-width: 480px) { @media (max-width: 480px) {
/* hide board actions on mobile */ /* hide board actions on mobile */
#board-actions { #board-header-controls {
display: none !important; display: none !important;
} }
} }
@media only screen and (max-width: 768px) {
#board-header h1 {
margin-left: 50px;
}
}
/** /**
* Markdown rendering * Markdown rendering
*/ */

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

@@ -5,36 +5,39 @@
<p>{{ statusservice.text }}</p></div> <p>{{ statusservice.text }}</p></div>
</div> </div>
<div id="board-header"> <div id="board-header">
<a href="#" title="<?php p($l->t('All Boards')); ?>"> <div id="home" class="crumb svg last">
<i class="icon icon-home"></i> <a href="#" title="<?php p($l->t('All Boards')); ?>">
</a> <img class="svg" src="../../../core/img/places/home.svg" alt="Home">
</a>
</div>
<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 class="board-action-button"> <div class="space"></div>
<a ui-sref="board.detail({ id: id })" title="<?php p($l->t('Board details')); ?>"> <div id="board-header-controls">
<i class="icon icon-details"></i> <div id="stack-add" ng-if="boardservice.canEdit() && checkCanEdit()">
</a> <form class="ng-pristine ng-valid" ng-submit="createStack()">
</div> <input type="text" placeholder="Add a new stack"
<div class="board-action-button" ng-if="filter!='archive'"> ng-focus="status.addStack=true"
<a ng-click="switchFilter('archive')" style="opacity:0.5;" title="<?php p($l->t('Show archived cards')); ?>"> ng-blur="status.addStack=false"
<i class="icon icon-archive"></i> ng-model="newStack.title" required
</a> maxlength="100" />
</div> <button class="icon icon-add" style="opacity: {{status.addStack ? 1: 0.5}};" type="submit"></button>
<div class="board-action-button" ng-if="filter=='archive'"> </form>
<a ng-click="switchFilter('')" title="<?php p($l->t('Hide archived cards')); ?>"> </div>
<i class="icon icon-archive"></i> <div class="board-action-button button" ng-if="filter!='archive'">
</a> <a ng-click="switchFilter('archive')" style="opacity:0.5;" title="<?php p($l->t('Show archived cards')); ?>"><span class="icon icon-archive"></span></a>
</div> </div>
<div id="stack-add" class="board-action-button" ng-if="boardservice.canEdit() && checkCanEdit()"> <div class="board-action-button button" ng-if="filter=='archive'">
<form class="ng-pristine ng-valid" ng-submit="createStack()"> <a ng-click="switchFilter('')" title="<?php p($l->t('Hide archived cards')); ?>">
<input type="text" placeholder="Add a new stack" <i class="icon icon-archive"></i>
ng-focus="status.addStack=true" </a>
ng-blur="status.addStack=false" </div>
ng-model="newStack.title" required <div class="board-action-button button">
maxlength="100" /> <a ui-sref="board.detail({ id: id })" title="<?php p($l->t('Board details')); ?>">
<button class="icon icon-add" style="opacity: {{status.addStack ? 1: 0.5}};" type="submit"></button> <i class="icon icon-details"></i>
</form> </a>
</div>
</div> </div>
</div> </div>