Merge branch 'main' of github.com:digital-blueprint/esign-app

digital-blueprint · Oct 30, 2024 · ea1533c · ea1533c
2 parents 9c70ed3 + bf5ef14
commit ea1533c
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 20 deletions.
diff --git a/rollup.config.js b/rollup.config.js
@@ -273,6 +273,7 @@ Dependencies:
                 }),
             commonjs({
                 include: 'node_modules/**',
+                strictRequires: 'auto',
             }),
             json(),
             urlPlugin({

diff --git a/src/dbp-pdf-annotation-view.js b/src/dbp-pdf-annotation-view.js
@@ -284,6 +284,11 @@ export class PdfAnnotationView extends ScopedElementsMixin(DBPLitElement) {
                 padding-bottom: 1em;
             }
 
+            #pdf-meta option {
+                color: var(--dbp-content);
+                background-color: var(--dbp-background);
+            }
+
             .input {
                 padding-left: 8px;
                 font-weight: 300;

diff --git a/src/dbp-pdf-preview.js b/src/dbp-pdf-preview.js
@@ -487,10 +487,19 @@ export class PdfPreview extends ScopedElementsMixin(DBPLitElement) {
 
             .buttons {
                 display: flex;
+                flex-direction: column;
                 flex-wrap: wrap;
+                gap: 10px;
                 width: 100%;
                 justify-content: center;
                 align-items: center;
+                container-type: inline-size;
+                container-name: action-buttons;
+            }
+
+            .action-buttons-container {
+                display: flex;
+                gap: 10px;
             }
 
             .nav-buttons {
@@ -500,6 +509,18 @@ export class PdfPreview extends ScopedElementsMixin(DBPLitElement) {
                 flex-wrap: wrap;
             }
 
+            @container action-buttons (max-width: 350px) {
+                .action-buttons-container {
+                    flex-direction: column;
+                    width: 100%;
+                }
+
+                .nav-buttons {
+                    width: 100%;
+                    justify-content: space-between;
+                }
+            }
+
             .buttons .page-info {
                 align-self: center;
                 white-space: nowrap;
@@ -511,6 +532,8 @@ export class PdfPreview extends ScopedElementsMixin(DBPLitElement) {
 
             input[type='number'] {
                 border: var(--dbp-border);
+                color: var(--dbp-content);
+                background-color: var(--dbp-background);
                 padding: 0 0.3em;
             }
 
@@ -573,17 +596,28 @@ export class PdfPreview extends ScopedElementsMixin(DBPLitElement) {
                 <div class="${classMap({hidden: !this.isPageLoaded})}">
                     <div id="pdf-meta">
                         <div class="buttons ${classMap({hidden: !this.isPageLoaded})}">
-                            <button
-                                class="button ${classMap({
-                                    hidden: !this.isShowPlacement || isRotationHidden,
-                                })}"
-                                title="${i18n.t('pdf-preview.rotate-signature')}"
-                                @click="${() => {
-                                    this.rotateSignature();
-                                }}"
-                                ?disabled="${this.isPageRenderingInProgress}">
-                                &#10227; ${i18n.t('pdf-preview.rotate')}
-                            </button>
+                            <div class="action-buttons-container">
+                                <button
+                                    class="button ${classMap({
+                                        hidden: !this.isShowPlacement || isRotationHidden,
+                                    })}"
+                                    title="${i18n.t('pdf-preview.rotate-signature')}"
+                                    @click="${() => {
+                                        this.rotateSignature();
+                                    }}"
+                                    ?disabled="${this.isPageRenderingInProgress}">
+                                    &#10227; ${i18n.t('pdf-preview.rotate')}
+                                </button>
+                                <button
+                                    class="button is-primary ${classMap({
+                                        hidden: !this.isShowPlacement,
+                                    })}"
+                                    @click="${() => {
+                                        this.sendAcceptEvent();
+                                    }}">
+                                    ${i18n.t('pdf-preview.continue')}
+                                </button>
+                            </div>
                             <div class="nav-buttons">
                                 <button
                                     class="button is-icon"
@@ -643,15 +677,6 @@ export class PdfPreview extends ScopedElementsMixin(DBPLitElement) {
                                     <dbp-icon name="angle-double-right" aria-hidden="true"></dbp-icon>
                                 </button>
                             </div>
-                            <button
-                                class="button is-primary ${classMap({
-                                    hidden: !this.isShowPlacement,
-                                })}"
-                                @click="${() => {
-                                    this.sendAcceptEvent();
-                                }}">
-                                ${i18n.t('pdf-preview.continue')}
-                            </button>
                         </div>
                     </div>
                     <div