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

Rework collection form display on mobile

Browse Source
This commit is contained in:
Arthur Lefebvre
2026-04-22 15:08:50 +02:00
parent 11a23d174e
commit 7d867af654
2 changed files with 47 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
front/src/CollectionFormElement.vue
View File

@@ -80,32 +80,36 @@ function onPointerMove(e) {
@pointerleave="clearGrabVariables"
>
<BookListElement v-bind="props.book">
<div class="separator" />
<div class="centered">
<div
v-if="!isInputtingPosition"
@click="isInputtingPosition = true"
class="positionindicator centered is-narrow clickable"
>
{{ props.position }}
<template v-slot:left>
<div class="inputpositionwidget centered">
<div
v-if="!isInputtingPosition"
@click="isInputtingPosition = true"
class="positionindicator centered is-narrow clickable"
>
{{ props.position }}
</div>
<div v-else>
<input
type="text"
v-model="inputtedPosition"
v-focus
@blur="clearPositionInput"
@keyup.enter="onPositionInput"
size="1"
class="positioninput"
:placeholder="props.position"
/>
</div>
</div>
<div v-else>
<input
type="text"
v-model="inputtedPosition"
v-focus
@blur="clearPositionInput"
@keyup.enter="onPositionInput"
size="1"
class="positioninput"
:placeholder="props.position"
/>
<div class="separator" />
</template>
<template v-slot:right>
<div class="separator" />
<div class="positionwidget centered is-narrow" @pointerdown="onPointerDown">
<b-icon-list />
</div>
</div>
<div class="separator" />
<div class="positionwidget centered is-narrow" @pointerdown="onPointerDown">
<b-icon-list />
</div>
</template>
</BookListElement>
</div>
<div v-if="isDragover && isDragoverFromAbove" class="dragover" />
@@ -164,4 +168,14 @@ function onPointerMove(e) {
border: 3px solid var(--bulma-primary);
border-radius: 10px;
}
@media (max-width: 1024px) {
.inputpositionwidget {
margin-top: 10px;
}
.positionwidget {
margin-bottom: 10px;
}
}
</style>