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

Change style of add card buttons to be less distracting

Browse Source 
Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
This commit is contained in:
Jan-Christoph Borchardt
2017-09-29 10:10:12 +02:00
committed by Julius Härtl
parent 10c836d864
commit d2dde30098
2 changed files with 22 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
css/style.scss
View File

@@ -334,7 +334,8 @@ input.input-inline {
white-space: normal; white-space: normal;
position: relative; position: relative;
opacity: 1.0; opacity: 1.0;
-webkit-box-shadow: 0 0 5px $color-darkgrey; box-shadow: 0 0 3px $color-darkgrey;
border-radius: 3px;
&:last-child { &:last-child {
margin: 10px; margin: 10px;
@@ -463,34 +464,38 @@ input.input-inline {
&.create { &.create {
text-align: center; text-align: center;
padding: 10px; margin: 20px 10px 10px;
margin: 10px; border: 1px solid;
border: none; border-radius: 3px;
background-color: transparent;
overflow: hidden; overflow: hidden;
-webkit-box-shadow: none; box-shadow: none;
cursor: pointer;
&.emptyStack {
margin-top: 10px;
}
&:hover { &:hover {
text-align: center; text-align: center;
opacity: 1; opacity: 1;
} }
.icon-add {
padding: 20px;
}
h4 { h4 {
width: 100%; width: 100%;
padding: 0; padding: 0;
margin: 0 0 1px; margin: 0;
input { input {
width: 100%; width: 100%;
border: 0; border: 0;
font-weight: bold;
font-size: 10pt; font-size: 10pt;
margin: 0; margin: 0;
padding: 0; padding: 10px;
border-bottom: 1px solid $color-primary-text;
border-radius: 0;
color: $color-primary-text;
background-color: transparent !important;
min-height: initial;
} }
} }
} }

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

@@ -107,20 +107,20 @@
</ul> </ul>
<!-- CREATE CARD //--> <!-- CREATE CARD //-->
<div class="card create" <div class="card create" ng-class="{emptyStack: !s.cards.length}"
ng-style="{'background-color':'#{{ boardservice.getCurrent().color }}'}" ng-if="boardservice.canEdit() && checkCanEdit() && filter!=='archive'"> ng-style="{'border-color':'#{{ boardservice.getCurrent().color }}'}" ng-if="boardservice.canEdit() && checkCanEdit() && filter!=='archive'">
<form ng-submit="createCard(s.id, newCard.title)"> <form ng-submit="createCard(s.id, newCard.title)">
<h4 ng-if="status.addCard[s.id]"> <h4 ng-if="status.addCard[s.id]">
<input type="text" autofocus-on-insert <input type="text" autofocus-on-insert
ng-model="newCard.title" ng-model="newCard.title"
ng-blur="status.addCard[s.id]=false" ng-blur="status.addCard[s.id]=false"
ng-style="{'color':'{{ boardservice.getCurrent().color | textColorFilter }}','border-color':'{{ boardservice.getCurrent().color | textColorFilter }}'}" ng-style="{'border-color':'{{ boardservice.getCurrent().color | textColorFilter }}'}"
maxlength="100" maxlength="100"
required placeholder="<?php p($l->t('Enter a card title')); ?>"/> required placeholder="<?php p($l->t('Enter a card title')); ?>"/>
</h4> </h4>
</form> </form>
<div ng-if="!status.addCard[s.id]" ng-click="status.addCard[s.id]=true" title="<?php p($l->t('Add card')); ?>"> <div ng-if="!status.addCard[s.id]" ng-click="status.addCard[s.id]=true" title="<?php p($l->t('Add card')); ?>">
<i class="icon icon-add{{ boardservice.getCurrent().color | iconWhiteFilter }}"></i> <i class="icon icon-add"></i>
<span class="hidden-visually"><?php p($l->t('Add card')); ?></span> <span class="hidden-visually"><?php p($l->t('Add card')); ?></span>
</div> </div>
</div> </div>