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