Expandable table mobile views

CHANGELOG.md

@@ -4,8 +4,16 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [0.2.10](https://github.com/eea/volto-forests-theme/compare/0.2.9...0.2.10)
+
+- stylelint [`bb88d6e`](https://github.com/eea/volto-forests-theme/commit/bb88d6ef8034df89108a0f386baa033b1afc529c)
+- Expandable table mobile views [`5ed9d38`](https://github.com/eea/volto-forests-theme/commit/5ed9d38493e2f2ea05b060f1470b317001701ca5)
+
 #### [0.2.9](https://github.com/eea/volto-forests-theme/compare/0.2.8...0.2.9)
 
+> 5 May 2022
+
+- Develop [`#66`](https://github.com/eea/volto-forests-theme/pull/66)
 - Expandable table popup format changes [`1c0d096`](https://github.com/eea/volto-forests-theme/commit/1c0d09674796c485ad48335dc5f0debdd0712018)
 - Readmore inline [`167e6ed`](https://github.com/eea/volto-forests-theme/commit/167e6edc30a0037506e32527d11037d5aa785c6b)
 - Email in expandable popup [`997b71d`](https://github.com/eea/volto-forests-theme/commit/997b71d35400e997de99b3d730c82431fe7ad305)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-forests-theme",
-  "version": "0.2.9",
+  "version": "0.2.10",
   "description": "@eeacms/volto-forests-theme: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

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}

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 &&

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;
+  justify-content: space-between;
+  margin: 10px 0;
+
+  @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;