feat: allow resize the dialogbox for bigger/hidpi screens (#732)

* resize dialogbox with drag corner of box * update style.css * resizable just for more than full HD display * fix size for initial size for small and big size * full screen dialog box on mobile device - wider dialogbox on device * remvoe custom-dialog.css that combine with style.css * disable resize for moile device Co-authored-by: Felipe Martin <[email protected]> * use new generated style.css * not limit minimum size to 400px * set default value in .custom-dialog --------- Co-authored-by: Felipe Martin <[email protected]>
go-shiori · Oct 9, 2023 · 46c1a6a · 46c1a6a
1 parent c6aabc4
commit 46c1a6a
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 4 deletions.
diff --git a/internal/view/assets/css/style.css b/internal/view/assets/css/style.css
diff --git a/internal/view/assets/less/custom-dialog.less b/internal/view/assets/less/custom-dialog.less
@@ -23,13 +23,14 @@
 	.custom-dialog {
 		display         : flex;
 		flex-flow       : column nowrap;
-		width           : 100%;
-		max-width       : 400px;
 		min-height      : 0;
 		max-height      : 100%;
+        max-width       : 100%;
+        width           : 400px;
 		overflow        : auto;
 		background-color: var(--contentBg);
 		font-size       : 16px;
+        resize          : both;
 
 		.custom-dialog-header {
 			padding         : 16px;
@@ -53,6 +54,7 @@
 			align-content        : start;
 			align-items          : baseline;
 			grid-gap             : 16px;
+            flex-grow            : 1;
 
 			&::after {
 				content          : "";
@@ -153,4 +155,17 @@
 			}
 		}
 	}
-}
+}
+
+
+@media only screen and (max-width: 768px) {
+	.custom-dialog-overlay {
+		padding: 0px;
+	}
+
+	.custom-dialog {
+		width : 100% !important;
+		height: 100% !important;
+		resize: none !important;
+	}
+}