Expandable table mobile views

eea · May 9, 2022 · 5ed9d38 · 5ed9d38
1 parent b981776
commit 5ed9d38
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 40 deletions.
diff --git a/src/components/manage/Blocks/SimpleDataTable/templates/expandable/PopupRow.jsx b/src/components/manage/Blocks/SimpleDataTable/templates/expandable/PopupRow.jsx
@@ -199,7 +199,7 @@ const PopupRow = ({
     >
       <Modal.Header className="popup-header">{popupSchema.title}</Modal.Header>
       <Modal.Content scrolling>
-        <div style={{ display: 'flex' }}>
+        <div className="popup-header-data">
           {popupSchema.logo && (
             <a
               className="popup-logo-container"
@@ -215,35 +215,31 @@ const PopupRow = ({
               />
             </a>
           )}
-          {popupSchema.email && popupSchema.url && (
-            <div className="info-container">
-              {popupSchema.email && (
-                <div style={{ display: 'flex' }}>
-                  <p style={{ margin: '0 10px 0 0', fontSize: '24px' }}>
-                    Email:
-                  </p>
-                  <a href={`mailto:${popupSchema.email}`} className="popup-url">
-                    {popupSchema.email}
-                  </a>
-                </div>
-              )}
-              {popupSchema.url && (
-                <div style={{ display: 'flex' }}>
-                  <p style={{ margin: '0 10px 0 0', fontSize: '24px' }}>
-                    Website:
-                  </p>
-                  <a
-                    href={popupSchema.url}
-                    target="_blank"
-                    rel="noreferrer"
-                    className="popup-url"
-                  >
-                    {popupSchema.url}
-                  </a>
-                </div>
-              )}
-            </div>
-          )}
+          <div className="info-container">
+            {popupSchema.email && (
+              <div style={{ display: 'flex' }}>
+                <p style={{ margin: '0 10px 0 0', fontSize: '24px' }}>Email:</p>
+                <a href={`mailto:${popupSchema.email}`} className="popup-url">
+                  {popupSchema.email}
+                </a>
+              </div>
+            )}
+            {popupSchema.url && (
+              <div style={{ display: 'flex' }}>
+                <p style={{ margin: '0 10px 0 0', fontSize: '24px' }}>
+                  Website:
+                </p>
+                <a
+                  href={popupSchema.url}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="popup-url"
+                >
+                  {popupSchema.url}
+                </a>
+              </div>
+            )}
+          </div>
         </div>
         <Modal.Description style={{ display: 'flex' }}>
           {popupSchema.description && (
@@ -253,14 +249,8 @@ const PopupRow = ({
           )}
         </Modal.Description>
 
-        <div
-          style={{
-            display: 'flex',
-            margin: '10px 0',
-            justifyContent: 'space-between',
-          }}
-        >
-          <div style={{ width: '49%' }}>
+        <div className="popup-columns-container">
+          <div className="popup-column">
             {rowData && (
               <PopupTable
                 rowData={rowData}
@@ -269,7 +259,7 @@ const PopupRow = ({
               />
             )}
           </div>
-          <div style={{ width: '49%' }}>
+          <div className="popup-column">
             {rowData && (
               <PopupMap
                 rowData={rowData}

diff --git a/src/components/manage/Blocks/SimpleDataTable/templates/expandable/PopupTable.jsx b/src/components/manage/Blocks/SimpleDataTable/templates/expandable/PopupTable.jsx
@@ -38,7 +38,7 @@ const PopupTable = ({ rowData, providerUrl, provider_data, tableColumns }) => {
 
   return (
     <div className="popup-table-container">
-      <Table striped celled className="popup-table">
+      <Table unstackable striped celled className="popup-table">
         <Table.Header>
           <Table.Row>
             {tableColumns &&

diff --git a/src/components/manage/Blocks/SimpleDataTable/templates/expandable/style.less b/src/components/manage/Blocks/SimpleDataTable/templates/expandable/style.less
@@ -139,6 +139,31 @@
   font-size: 1.5rem !important;
 }
 
+.popup-header-data {
+  display: flex;
+
+  @media screen and (max-width: 800px) {
+    flex-direction: column;
+  }
+}
+
+.popup-columns-container {
+  display: flex;
+  margin: 10px 0;
+  justify-content: space-between;
+
+  @media screen and (max-width: 800px) {
+    flex-direction: column;
+  }
+}
+
+.popup-column {
+  width: 49%;
+  @media screen and (max-width: 800px) {
+    width: 100%;
+  }
+}
+
 .popup-url {
   font-size: 24px;
   font-weight: bold;