Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-07 18:44:08 +00:00
Code Issues Actions Projects Releases Wiki Activity

signature vue app: improve responsive design

Browse Source
This commit is contained in:
nobohan 2024-10-30 10:29:08 +01:00
parent 3bc6595f58
commit 5259ea71a1
1 changed files with 31 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
View File

@ -41,7 +41,7 @@
</option> </option>
</select> </select>
<button <button
class="btn btn-light btn-sm" class="btn btn-light btn-xs p-1"
:disabled="page <= 1" :disabled="page <= 1"
@click="turnPage(-1)" @click="turnPage(-1)"
> >
@ -49,14 +49,17 @@
</button> </button>
<span>{{ page }}/{{ pageCount }}</span> <span>{{ page }}/{{ pageCount }}</span>
<button <button
class="btn btn-light btn-sm" class="btn btn-light btn-xs p-1"
:disabled="page >= pageCount" :disabled="page >= pageCount"
@click="turnPage(1)" @click="turnPage(1)"
> >
❯ ❯
</button> </button>
</div> </div>
<div v-if="signature.zones.length > 1" class="col-3 p-0"> <div
v-if="signature.zones.length > 1"
class="col-5 p-0 text-center turnSignature"
>
<button <button
:disabled="userSignatureZone === null || userSignatureZone?.index < 1" :disabled="userSignatureZone === null || userSignatureZone?.index < 1"
class="btn btn-light btn-sm" class="btn btn-light btn-sm"
@ -64,8 +67,7 @@
> >
{{ $t("last_zone") }} {{ $t("last_zone") }}
</button> </button>
</div> <span>|</span>
<div v-if="signature.zones.length > 1" class="col-3 p-0">
<button <button
:disabled="userSignatureZone?.index >= signature.zones.length - 1" :disabled="userSignatureZone?.index >= signature.zones.length - 1"
class="btn btn-light btn-sm" class="btn btn-light btn-sm"
@ -74,7 +76,7 @@
{{ $t("next_zone") }} {{ $t("next_zone") }}
</button> </button>
</div> </div>
<div class="col text-end p-0"> <div class="col text-end" v-if="signedState !== 'signed'">
<button <button
class="btn btn-misc btn-sm" class="btn btn-misc btn-sm"
:hidden="!userSignatureZone" :hidden="!userSignatureZone"
@ -92,8 +94,6 @@
> >
{{ $t("cancel") }} {{ $t("cancel") }}
</button> </button>
</div>
<div class="col-1" v-if="signedState !== 'signed'">
<button <button
class="btn btn-create btn-sm" class="btn btn-create btn-sm"
:class="{ active: canvasEvent === 'add' }" :class="{ active: canvasEvent === 'add' }"
@ -106,7 +106,7 @@
<div <div
class="row justify-content-center border-bottom pdf-tools d-none d-md-flex" class="row justify-content-center border-bottom pdf-tools d-none d-md-flex"
> >
<div v-if="pageCount > 1" class="col-3 text-center turn-page"> <div v-if="pageCount > 1" class="col-3 text-center turn-page ps-3">
<select <select
class="form-select form-select-sm" class="form-select form-select-sm"
id="zoomSelect" id="zoomSelect"
@ -119,7 +119,7 @@
</option> </option>
</select> </select>
<button <button
class="btn btn-light btn-sm" class="btn btn-light btn-xs p-1"
:disabled="page <= 1" :disabled="page <= 1"
@click="turnPage(-1)" @click="turnPage(-1)"
> >
@ -127,7 +127,7 @@
</button> </button>
<span>{{ page }} / {{ pageCount }}</span> <span>{{ page }} / {{ pageCount }}</span>
<button <button
class="btn btn-light btn-sm" class="btn btn-light btn-xs p-1"
:disabled="page >= pageCount" :disabled="page >= pageCount"
@click="turnPage(1)" @click="turnPage(1)"
> >
@ -136,7 +136,7 @@
</div> </div>
<div <div
v-if="signature.zones.length > 1 && signedState !== 'signed'" v-if="signature.zones.length > 1 && signedState !== 'signed'"
class="col text-end d-xl-none" class="col-4 d-xl-none text-center turnSignature p-0"
> >
<button <button
:disabled="userSignatureZone === null || userSignatureZone?.index < 1" :disabled="userSignatureZone === null || userSignatureZone?.index < 1"
@ -145,11 +145,7 @@
> >
{{ $t("last_zone") }} {{ $t("last_zone") }}
</button> </button>
</div> <span>|</span>
<div
v-if="signature.zones.length > 1 && signedState !== 'signed'"
class="col text-start d-xl-none"
>
<button <button
:disabled="userSignatureZone?.index >= signature.zones.length - 1" :disabled="userSignatureZone?.index >= signature.zones.length - 1"
class="btn btn-light btn-sm" class="btn btn-light btn-sm"
@ -160,7 +156,7 @@
</div> </div>
<div <div
v-if="signature.zones.length > 1 && signedState !== 'signed'" v-if="signature.zones.length > 1 && signedState !== 'signed'"
class="col text-end d-none d-xl-flex p-0" class="col-4 d-none d-xl-flex p-0 text-center turnSignature"
> >
<button <button
:disabled="userSignatureZone === null || userSignatureZone?.index < 1" :disabled="userSignatureZone === null || userSignatureZone?.index < 1"
@ -169,11 +165,7 @@
> >
{{ $t("last_sign_zone") }} {{ $t("last_sign_zone") }}
</button> </button>
</div> <span>|</span>
<div
v-if="signature.zones.length > 1 && signedState !== 'signed'"
class="col text-start d-none d-xl-flex p-0"
>
<button <button
:disabled="userSignatureZone?.index >= signature.zones.length - 1" :disabled="userSignatureZone?.index >= signature.zones.length - 1"
class="btn btn-light btn-sm" class="btn btn-light btn-sm"
@ -182,7 +174,7 @@
{{ $t("next_sign_zone") }} {{ $t("next_sign_zone") }}
</button> </button>
</div> </div>
<div class="col text-end p-0" v-if="signedState !== 'signed'"> <div class="col text-end" v-if="signedState !== 'signed'">
<button <button
class="btn btn-misc btn-sm" class="btn btn-misc btn-sm"
:hidden="!userSignatureZone" :hidden="!userSignatureZone"
@ -199,11 +191,6 @@
> >
{{ $t("cancel") }} {{ $t("cancel") }}
</button> </button>
</div>
<div
class="col text-end p-0 pe-2 pe-xxl-4"
v-if="signedState !== 'signed'"
>
<button <button
class="btn btn-create btn-sm" class="btn btn-create btn-sm"
:class="{ active: canvasEvent === 'add' }" :class="{ active: canvasEvent === 'add' }"
@ -286,7 +273,7 @@ const signedState: Ref<SignedState> = ref("pending");
const page: Ref<number> = ref(1); const page: Ref<number> = ref(1);
const pageCount: Ref<number> = ref(0); const pageCount: Ref<number> = ref(0);
const zoom: Ref<number> = ref(1); const zoom: Ref<number> = ref(1);
const zoomLevel = ''; const zoomLevel = "";
const zoomLevels: Ref<ZoomLevel[]> = ref([ const zoomLevels: Ref<ZoomLevel[]> = ref([
{ {
id: 0, id: 0,
@ -323,6 +310,13 @@ const zoomLevels: Ref<ZoomLevel[]> = ref([
fr: "200%", fr: "200%",
}, },
}, },
{
id: 5,
zoom: 3,
label: {
fr: "300%",
},
},
]); ]);
let userSignatureZone: Ref<null | SignatureZone> = ref(null); let userSignatureZone: Ref<null | SignatureZone> = ref(null);
let pdf = {} as PDFDocumentProxy; let pdf = {} as PDFDocumentProxy;
@ -684,7 +678,12 @@ div.pdf-tools {
background-color: #f3f3f3; background-color: #f3f3f3;
font-size: 0.6rem; font-size: 0.6rem;
button { button {
font-size: 0.75rem!important; font-size: 0.75rem !important;
}
div.turnSignature {
span {
font-size: 1rem;
}
} }
@media (min-width: 1400px) { @media (min-width: 1400px) {
// background: none; // background: none;
@ -698,10 +697,7 @@ div.turn-page {
margin: auto 0.4rem; margin: auto 0.4rem;
} }
select { select {
width: 3.5rem;
@media (min-width: 850px) {
width: 5rem; width: 5rem;
}
font-size: 0.75rem; font-size: 0.75rem;
} }
} }