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

Fix overflowing card heading

Browse Source 
If the heading of a card is too long,
it will push interface elements off the
card.

This change will ensure that text that
does not have spaces and thus cannot be
wrapped will simply be cut off with an
ellipsis instead.

Signed-off-by: Gary Kim <gary@garykim.dev>
This commit is contained in:
Gary Kim
2019-09-18 00:02:24 +08:00
parent fd406a0adb
commit 067ec5e057
1 changed files with 16 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -30,23 +30,21 @@
<div class="card-upper"> <div class="card-upper">
<h3 v-if="showArchived">{{ card.title }}</h3> <h3 v-if="showArchived">{{ card.title }}</h3>
<h3 v-else-if="!editing" @click.stop="startEditing(card)">{{ card.title }}</h3> <h3 v-else-if="!editing" @click.stop="startEditing(card)">{{ card.title }}</h3>
<h3 v-else>editing</h3> <h3 v-else>&nbsp;</h3>
<transition name="fade" mode="out-in"> <form v-click-outside="cancelEdit" v-if="editing" @keyup.esc="cancelEdit"
<form v-click-outside="cancelEdit" v-if="editing" @keyup.esc="cancelEdit" @submit.prevent="finishedEdit(card)">
@submit.prevent="finishedEdit(card)"> <input v-model="copiedCard.title" type="text" autofocus>
<input v-model="copiedCard.title" type="text" autofocus> <input type="button" class="icon-confirm" @click="finishedEdit(card)">
<input type="button" class="icon-confirm" @click="finishedEdit(card)"> </form>
</form>
<Actions @click.stop.prevent> <Actions v-if="!editing" @click.stop.prevent>
<ActionButton v-if="showArchived === false" icon="icon-user" @click="assignCardToMe()">{{ t('deck', 'Assign to me') }}</ActionButton> <ActionButton v-if="showArchived === false" icon="icon-user" @click="assignCardToMe()">{{ t('deck', 'Assign to me') }}</ActionButton>
<ActionButton icon="icon-archive" @click="archiveUnarchiveCard()">{{ t('deck', (showArchived ? 'Unarchive card' : 'Archive card')) }}</ActionButton> <ActionButton icon="icon-archive" @click="archiveUnarchiveCard()">{{ t('deck', (showArchived ? 'Unarchive card' : 'Archive card')) }}</ActionButton>
<ActionButton v-if="showArchived === false" icon="icon-delete" @click="deleteCard()">{{ t('deck', 'Delete card') }}</ActionButton> <ActionButton v-if="showArchived === false" icon="icon-delete" @click="deleteCard()">{{ t('deck', 'Delete card') }}</ActionButton>
<ActionButton icon="icon-external" @click.stop="modalShow=true">{{ t('deck', 'Move card') }}</ActionButton> <ActionButton icon="icon-external" @click.stop="modalShow=true">{{ t('deck', 'Move card') }}</ActionButton>
<ActionButton icon="icon-settings-dark" @click="openCard">{{ t('deck', 'Card details') }}</ActionButton> <ActionButton icon="icon-settings-dark" @click="openCard">{{ t('deck', 'Card details') }}</ActionButton>
</Actions> </Actions>
</transition>
<modal v-if="modalShow" title="Move card to another board" @close="modalShow=false"> <modal v-if="modalShow" title="Move card to another board" @close="modalShow=false">
<div class="modal__content"> <div class="modal__content">
<Multiselect :placeholder="t('deck', 'Select a board')" v-model="selectedBoard" :options="boards" <Multiselect :placeholder="t('deck', 'Select a board')" v-model="selectedBoard" :options="boards"
@@ -60,7 +58,6 @@
</div> </div>
</modal> </modal>
</div> </div>
<ul class="labels" @click="openCard"> <ul class="labels" @click="openCard">
<li v-for="label in card.labels" :key="label.id" :style="labelStyle(label)"><span>{{ label.title }}</span></li> <li v-for="label in card.labels" :key="label.id" :style="labelStyle(label)"><span>{{ label.title }}</span></li>
@@ -225,7 +222,7 @@ export default {
display: flex; display: flex;
padding: 5px 7px; padding: 5px 7px;
position: absolute; position: absolute;
width: calc(100% - 14px); width: 100%;
input[type=text] { input[type=text] {
flex-grow: 1; flex-grow: 1;
} }
@@ -236,6 +233,8 @@ export default {
flex-grow: 1; flex-grow: 1;
font-size: 100%; font-size: 100%;
cursor: text; cursor: text;
overflow-x: hidden;
word-wrap: break-word;
} }
} }