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

Fix card height in compact mode

Browse Source 
Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl
2020-05-23 17:58:52 +02:00
parent 7b5bda4ed3
commit 46afcac4a3
2 changed files with 17 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/cards/CardItem.vue
View File

@@ -47,7 +47,7 @@
<input type="button" class="icon-confirm" @click="finishedEdit(card)"> <input type="button" class="icon-confirm" @click="finishedEdit(card)">
</form> </form>
<div v-if="!editing" class="right"> <div v-if="!editing" class="duedate right">
<transition name="zoom"> <transition name="zoom">
<div v-if="card.duedate" :class="dueIcon"> <div v-if="card.duedate" :class="dueIcon">
<span>{{ relativeDate }}</span> <span>{{ relativeDate }}</span>
@@ -57,7 +57,8 @@
<CardMenu v-if="!editing && compactMode" :id="id" class="right" /> <CardMenu v-if="!editing && compactMode" :id="id" class="right" />
</div> </div>
<transition-group name="zoom" <transition-group v-if="card.labels.length"
name="zoom"
tag="ul" tag="ul"
class="labels" class="labels"
@click="openCard"> @click="openCard">
@@ -190,7 +191,7 @@ export default {
.card-upper { .card-upper {
display: flex; display: flex;
min-height: 50px; min-height: 44px;
form { form {
display: flex; display: flex;
padding: 5px 7px; padding: 5px 7px;
@@ -201,7 +202,7 @@ export default {
} }
h3 { h3 {
margin: 14px $card-padding; margin: 12px $card-padding;
flex-grow: 1; flex-grow: 1;
font-size: 100%; font-size: 100%;
overflow-x: hidden; overflow-x: hidden;
@@ -258,10 +259,12 @@ export default {
} }
} }
} }
.duedate {
margin-right: 9px;
}
.right { .right {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
margin-right: 9px;
} }
.icon.due { .icon.due {
@@ -270,6 +273,7 @@ export default {
margin-top: 9px; margin-top: 9px;
margin-bottom: 9px; margin-bottom: 9px;
padding: 3px 4px; padding: 3px 4px;
padding-right: 0;
font-size: 90%; font-size: 90%;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -285,14 +289,17 @@ export default {
background-color: var(--color-error); background-color: var(--color-error);
color: var(--color-primary-text); color: var(--color-primary-text);
opacity: .7; opacity: .7;
padding: 3px 4px;
} }
&.now { &.now {
background-color: var(--color-warning); background-color: var(--color-warning);
opacity: .7; opacity: .7;
padding: 3px 4px;
} }
&.next { &.next {
background-color: var(--color-background-dark); background-color: var(--color-background-dark);
opacity: .7; opacity: .7;
padding: 3px 4px;
} }
span { span {
@@ -304,8 +311,11 @@ export default {
} }
.compact { .compact {
min-height: 50px; min-height: 44px;
.duedate {
margin-right: 0;
}
&.has-labels { &.has-labels {
padding-bottom: $card-padding; padding-bottom: $card-padding;
} }

2
src/store/main.js
View File

@@ -124,7 +124,7 @@ export default new Vuex.Store({
}, },
isArchived: state => { isArchived: state => {
return state.currentBoard && state.currentBoard.archived return state.currentBoard && state.currentBoard.archived
} },
}, },
mutations: { mutations: {
setSearchQuery(state, searchQuery) { setSearchQuery(state, searchQuery) {