Fixed wrong dialog layout on mobile

On mobile devices, the dialog wasn't centered due to the "padding" property applied directly to the dialog. With this, the padding is applied in a div inside the dialog.
dinoosauro · Jun 12, 2024 · a041cf9 · a041cf9
1 parent 56bb34a
commit a041cf9
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 26 deletions.
diff --git a/src/app.css b/src/app.css
@@ -175,7 +175,6 @@ button:active {
   left: 15vw;
   width: 70vw;
   border-radius: 12px;
-  padding: 20px 15px;
   transition: opacity 0.2s ease-in-out;
 }
 
@@ -265,4 +264,8 @@ a {
   left: calc(50vw - 50px);
   width: 100px;
   height: 100px;
+}
+
+.fullDialogPadding {
+  padding: 20px 15px;
 }
diff --git a/src/lib/ExportDialog.svelte b/src/lib/ExportDialog.svelte
@@ -39,33 +39,37 @@
 </script>
 
 <div bind:this={div} class="topDialog" style="display: none; opacity: 0">
-    <label>The download has started!</label>
-    <a style="margin-left: 10px;" href={$outputLink}>Force download</a>
-    <label
-        style="margin-left: 10px; text-decoration: underline"
-        class="pointer"
-        on:click={() => closePopup()}>Close alert</label
-    >
+    <div class="fullDialogPadding">
+        <label>The download has started!</label>
+        <a style="margin-left: 10px;" href={$outputLink}>Force download</a>
+        <label
+            style="margin-left: 10px; text-decoration: underline"
+            class="pointer"
+            on:click={() => closePopup()}>Close alert</label
+        >
+    </div>
 </div>
 <div
     bind:this={bottomDiv}
     class="topDialog"
     style="top: auto; bottom: 10vh; display: none; opacity: 0"
 >
-    <div class="flex hcenter">
-        <div class="spinner" style="margin-right: 10px"></div>
-        <label
-            >{$conversionType === "fileopen"
-                ? "Reading file"
-                : "Converting image"}
-            {$conversionProgress !== undefined
-                ? $conversionProgress + 1
-                : "operation completed"}</label
-        >
-        <label
-            style="margin-left: 10px; text-decoration: underline"
-            class="pointer"
-            on:click={() => closePopup(true)}>Close alert</label
-        >
+    <div class="fullDialogPadding">
+        <div class="flex hcenter">
+            <div class="spinner" style="margin-right: 10px"></div>
+            <label
+                >{$conversionType === "fileopen"
+                    ? "Reading file"
+                    : "Converting image"}
+                {$conversionProgress !== undefined
+                    ? $conversionProgress + 1
+                    : "operation completed"}</label
+            >
+            <label
+                style="margin-left: 10px; text-decoration: underline"
+                class="pointer"
+                on:click={() => closePopup(true)}>Close alert</label
+            >
+        </div>
     </div>
 </div>
diff --git a/src/lib/Styles/Dialog.svelte b/src/lib/Styles/Dialog.svelte
@@ -4,8 +4,10 @@
 
 <div class="dialogContainer">
     <div class="fullDialog">
-        <slot></slot>
-        <br /><br />
-        <button on:click={close}>Close dialog</button>
+        <div class="fullDialogPadding">
+            <slot></slot>
+            <br /><br />
+            <button on:click={close}>Close dialog</button>
+        </div>
     </div>
 </div>