basic support for rendering on mobile (switch flex row to column, and…

… ensure spacing)
jay-hodgson · Nov 7, 2024 · a10c285 · a10c285
1 parent 7fe1d99
commit a10c285
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 4 deletions.
diff --git a/src/main/resources/org/sagebionetworks/web/client/widget/doi/DoiWidgetV2ViewImpl.ui.xml b/src/main/resources/org/sagebionetworks/web/client/widget/doi/DoiWidgetV2ViewImpl.ui.xml
@@ -4,7 +4,7 @@
   xmlns:bh="urn:import:org.gwtbootstrap3.client.ui.html"
   xmlns:b="urn:import:org.gwtbootstrap3.client.ui"
 >
-  <bh:Div addStyleNames="flexcontainer-column margin-right-40">
+  <bh:Div addStyleNames="flexcontainer-column">
     <bh:Span ui:field="synAlertContainer" />
     <bh:Span
       ui:field="doiLabel"

diff --git a/...main/resources/org/sagebionetworks/web/client/widget/entity/EntityMetadataViewImpl.ui.xml b/...main/resources/org/sagebionetworks/web/client/widget/entity/EntityMetadataViewImpl.ui.xml
@@ -8,8 +8,8 @@
   <g:HTMLPanel addStyleNames="entityMetadata entity-page-side-margins">
     <g:HTMLPanel ui:field="detailedMetadata">
       <g:SimplePanel ui:field="entityModalWidgetContainer" />
-      <bh:Div addStyleNames="flexcontainer-row">
-        <bh:Div addStyleNames="flexcontainer-column margin-right-40">
+      <bh:Div addStyleNames="flexcontainer-row-unless-xs gap-20px-40px">
+        <bh:Div addStyleNames="flexcontainer-column">
           <bh:Div addStyleNames="flexcontainer-row">
             <bh:Span
               addStyleNames="boldText margin-right-5"
@@ -30,7 +30,7 @@
         <bh:Span ui:field="doiPanel" />
         <bh:Span
           ui:field="uploadDestinationPanel"
-          addStyleNames="flexcontainer-column margin-right-40"
+          addStyleNames="flexcontainer-column"
           visible="false"
         >
           <bh:Span addStyleNames="boldText">Project Storage Location</bh:Span>

diff --git a/src/main/webapp/sass/_core.scss b/src/main/webapp/sass/_core.scss
@@ -1990,13 +1990,30 @@ input[type='text'].padding-0 {
     margin: auto;
     display: block;
   }
+
+  .gap-20px-40px {
+    gap: 20px 40px;
+  }
   .flexcontainer-row {
     display: -webkit-flex;
     display: flex;
     -webkit-flex-direction: row;
     flex-direction: row;
   }
 
+  @media (min-width: 769px) {
+    .flexcontainer-row-unless-xs {
+      display: flex;
+      flex-direction: row;
+    }
+  }
+  @media (max-width: 768px) {
+    .flexcontainer-row-unless-xs {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
   .flexcontainer-align-items-center {
     align-items: center;
   }