artlef/bibliomane
1
0
Fork 0
Code Issues 14 Pull Requests Actions Packages Projects 1 Releases 3 Wiki Activity

Improve book list buttons in mobile view

Browse Source
This commit is contained in:
Arthur Lefebvre
2026-03-27 14:16:59 +01:00
parent 57a41e0e3e
commit 7b5da2df61
1 changed files with 32 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
front/src/BookListElement.vue
View File

@@ -143,24 +143,26 @@ async function importInventaireEdition(inventaireid) {
</div>
</div>
<div v-if="id && id != 0" class="column is-narrow">
<button @click="onUserBookWantRead" class="button is-large verticalbutton">
<span class="icon" :title="$t('booklistelement.wantread')">
<b-icon-eye-fill v-if="isWantRead" />
<b-icon-eye v-else />
</span>
</button>
<button @click="onUserBookStartRead" class="button is-large verticalbutton">
<span class="icon" :title="$t('booklistelement.startread')">
<b-icon-book-fill v-if="isStartRead" />
<b-icon-book v-else />
</span>
</button>
<button @click="onUserBookRead" class="button is-large verticalbutton">
<span class="icon" :title="$t('booklistelement.read')">
<b-icon-check-circle-fill v-if="isRead" />
<b-icon-check-circle v-else />
</span>
</button>
<div class="buttons">
<button @click="onUserBookWantRead" class="button is-large verticalbutton">
<span class="icon" :title="$t('booklistelement.wantread')">
<b-icon-eye-fill v-if="isWantRead" />
<b-icon-eye v-else />
</span>
</button>
<button @click="onUserBookStartRead" class="button is-large verticalbutton">
<span class="icon" :title="$t('booklistelement.startread')">
<b-icon-book-fill v-if="isStartRead" />
<b-icon-book v-else />
</span>
</button>
<button @click="onUserBookRead" class="button is-large verticalbutton">
<span class="icon" :title="$t('booklistelement.read')">
<b-icon-check-circle-fill v-if="isRead" />
<b-icon-check-circle v-else />
</span>
</button>
</div>
</div>
</div>
</template>
@@ -183,6 +185,10 @@ img {
transition: ease-in-out 0.02s;
}
.buttons {
display: block;
}
.verticalbutton {
display: block;
}
@@ -194,4 +200,12 @@ img {
.no-margin {
margin: 0px;
}
@media (max-width: 1024px) {
.buttons {
display: flex;
justify-content: center;
align-items: center;
}
}
</style>