Restyling of osf-dialog to work on mobile screens

CenterForOpenScience · Oct 4, 2022 · c33bfea · c33bfea
1 parent 650c71d
commit c33bfea
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 5 deletions.
diff --git a/lib/osf-components/addon/components/osf-dialog/footer/styles.scss b/lib/osf-components/addon/components/osf-dialog/footer/styles.scss
@@ -1,7 +1,7 @@
 .Footer {
     display: flex;
     justify-content: flex-end;
-    max-height: 15vh;
+    height: 50px;
     overflow: auto;
 
     border-top: 1px solid $color-border-gray;

diff --git a/lib/osf-components/addon/components/osf-dialog/heading/styles.scss b/lib/osf-components/addon/components/osf-dialog/heading/styles.scss
@@ -1,7 +1,7 @@
 .HeadingWrapper {
     display: flex;
     justify-content: space-between;
-    max-height: 15vh;
+    height: 50px;
     overflow-y: auto;
 
     border-bottom: 1px solid #ddd;

diff --git a/lib/osf-components/addon/components/osf-dialog/main/styles.scss b/lib/osf-components/addon/components/osf-dialog/main/styles.scss
@@ -1,5 +1,12 @@
+$dialog-background-top: 50px;
+$dialog-header-height: 50px;
+$dialog-footer-height: 50px;
+$dialog-main-adjustment: $dialog-background-top + $dialog-header-height + $dialog-footer-height;
+
 .Main {
     max-height: 60vh;
     overflow: auto;
     padding: 1rem 1.25rem;
+    height: calc(100vh - #{$dialog-main-adjustment});
+    min-height: 175px;
 }
diff --git a/lib/osf-components/addon/components/osf-dialog/styles.scss b/lib/osf-components/addon/components/osf-dialog/styles.scss
@@ -1,12 +1,10 @@
 .DialogBackground {
     position: fixed;
-    top: 0;
+    top: 50px;
     bottom: 0;
     left: 0;
     right: 0;
 
-    padding-bottom: 10vh;
-
     display: flex;
     align-items: center;
     justify-content: center;
@@ -23,11 +21,13 @@
     backdrop-filter: grayscale(100%) blur(5px);
 }
 
+
 .Dialog {
     pointer-events: auto;
     max-height: 90vh;
 
     .DialogDocument {
+        min-height: 250px;
         display: flex;
         flex-direction: column;
         background: $color-bg-white;