Merge pull request #122 from M3nin0/dev

table: improving mobile experience
geo-knowledge-hub · Apr 17, 2024 · 75bbe74 · 75bbe74
2 parents 76bdf5c + c6c8d85
commit 75bbe74
Show file tree

Hide file tree

Showing 25 changed files with 249 additions and 609 deletions.
diff --git a/src/lib/components/form/base/fields/MarketplacePricingPlansField.js b/src/lib/components/form/base/fields/MarketplacePricingPlansField.js
diff --git a/src/lib/components/form/base/fields/MarketplacePricingPlansField.stories.js b/src/lib/components/form/base/fields/MarketplacePricingPlansField.stories.js
diff --git a/src/lib/components/form/base/fields/MarketplacePricingPlansField.test.js b/src/lib/components/form/base/fields/MarketplacePricingPlansField.test.js
diff --git a/src/lib/components/form/base/fields/index.js b/src/lib/components/form/base/fields/index.js
@@ -16,5 +16,3 @@ export { WorkProgrammeActivityField } from './WorkProgrammeActivityField';
 
 export { ResourceTypeField } from './ResourceTypeField';
 export { AuthorsField } from './AuthorsField';
-
-export { MarketplacePricingPlansField } from './MarketplacePricingPlansField';
diff --git a/src/lib/components/list/base/EventItem.js b/src/lib/components/list/base/EventItem.js
@@ -31,7 +31,13 @@ export const EventItem = ({ eventData }) => {
       </Grid>
       <Grid padded>
         <Grid.Row columns={2}>
-          <Grid.Column largeScreen={12} widescreen={12} computer={12} mobile={16} tablet={12}>
+          <Grid.Column
+            largeScreen={12}
+            widescreen={12}
+            computer={12}
+            mobile={16}
+            tablet={12}
+          >
             <Header as={'h3'}>{eventData.title}</Header>
           </Grid.Column>
           <Grid.Column
@@ -46,7 +52,13 @@ export const EventItem = ({ eventData }) => {
           </Grid.Column>
         </Grid.Row>
         <Grid.Row verticalAlign={'bottom'}>
-          <Grid.Column largeScreen={9} widescreen={9} computer={9} mobile={16} tablet={9}>
+          <Grid.Column
+            largeScreen={9}
+            widescreen={9}
+            computer={9}
+            mobile={16}
+            tablet={9}
+          >
             <Grid doubling>
               <Grid.Column
                 largeScreen={10}

diff --git a/src/lib/components/list/base/mutations.js b/src/lib/components/list/base/mutations.js
@@ -32,21 +32,22 @@ export const extractProgrammeActivityAcronym = (programmeActivityName) =>
  *  date: string
  * }} Object with the new version of the record.
  */
-export const mutateRecordData = (data, labelType = "initiative", labelColor = "primary") => {
+export const mutateRecordData = (
+  data,
+  labelType = 'initiative',
+  labelColor = 'primary'
+) => {
   // Extracting labels
-  let label = extractProgrammeActivityAcronym(
-    _get(data, 'metadata.geo_work_programme_activity.title.en')
-  ) || "Community";
+  let label =
+    extractProgrammeActivityAcronym(
+      _get(data, 'metadata.geo_work_programme_activity.title.en')
+    ) || 'Community';
 
-  if (labelType === "resourceType") {
-    label = _get(
-      data,
-      "ui.resource_type.title_l10n",
-      "No resource type"
-    );
+  if (labelType === 'resourceType') {
+    label = _get(data, 'ui.resource_type.title_l10n', 'No resource type');
   }
 
-  return ({
+  return {
     title: _get(data, 'metadata.title', 'No title'),
     authors: data.ui.creators.creators
       .slice(0, 3)
@@ -57,9 +58,9 @@ export const mutateRecordData = (data, labelType = "initiative", labelColor = "p
       'ui.publication_date_l10n_long',
       'No publication date found.'
     ),
-    labelColor: labelColor || "primary",
+    labelColor: labelColor || 'primary',
     url: _get(data, 'links.self_html'),
-  })
+  };
 };
 
 /**

diff --git a/src/lib/components/table/base/BaseTable.js b/src/lib/components/table/base/BaseTable.js
@@ -28,7 +28,6 @@ export const BaseTable = ({
 }) => {
   return (
     <Table {...uiProps} {...getTableProps()}>
-
       {showHeader && (
         <Table.Header>
           <Table.Row>
@@ -42,7 +41,9 @@ export const BaseTable = ({
                     : null
                 }
                 {...column.getHeaderProps(
-                  column.getSortByToggleProps ? column.getSortByToggleProps() : {}
+                  column.getSortByToggleProps
+                    ? column.getSortByToggleProps()
+                    : {}
                 )}
               >
                 {column.render('Header')}
@@ -91,5 +92,5 @@ BaseTable.propTypes = {
 };
 
 BaseTable.defaultProps = {
-  showHeader: true
+  showHeader: true,
 };
diff --git a/src/lib/components/table/moldure/PaginableTable.js b/src/lib/components/table/moldure/PaginableTable.js
@@ -48,12 +48,16 @@ export const PaginableTable = ({
     state: { pageSize, globalFilter },
     preGlobalFilteredRows,
     setGlobalFilter,
-    visibleColumns
+    visibleColumns,
   } = useTable(
     {
       columns: columnsConfiguration,
       data: data,
-      initialState: { pageIndex: 0, pageSize: pageSizeSorted[0], ...initialState },
+      initialState: {
+        pageIndex: 0,
+        pageSize: pageSizeSorted[0],
+        ...initialState,
+      },
     },
     useGlobalFilter,
     useSortBy,
@@ -76,7 +80,7 @@ export const PaginableTable = ({
   }
 
   return (
-    <Container>
+    <>
       <BaseTable
         rows={page}
         columns={visibleColumns}
@@ -126,7 +130,7 @@ export const PaginableTable = ({
           </Grid>
         </>
       )}
-    </Container>
+    </>
   );
 };
 

diff --git a/src/lib/components/table/thematic/ExternalResourceTable/ExternalResourceTable.css b/src/lib/components/table/thematic/ExternalResourceTable/ExternalResourceTable.css
@@ -9,3 +9,15 @@
 .table-external-resources .ui.container .grid p {
   overflow-wrap: break-word;
 }
+
+.table-external-resources .ui.grid .row .column.pt-0 {
+  padding-top: 0 !important;
+}
+
+.table-external-resources .ui.grid .row .column.pt-1 {
+  padding-top: 1px !important;
+}
+
+.table-external-resources .ui.table td {
+  overflow: visible;
+}