table: update external resource and related package table style

geo-knowledge-hub · Apr 16, 2024 · c6c8d85 · c6c8d85
1 parent 114e6ae
commit c6c8d85
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 44 deletions.
diff --git a/src/lib/components/table/thematic/ExternalResourceTable/ExternalResourceTable.css b/src/lib/components/table/thematic/ExternalResourceTable/ExternalResourceTable.css
@@ -17,3 +17,7 @@
 .table-external-resources .ui.grid .row .column.pt-1 {
   padding-top: 1px !important;
 }
+
+.table-external-resources .ui.table td {
+  overflow: visible;
+}
diff --git a/src/lib/components/table/thematic/ExternalResourceTable/ExternalResourceTable.js b/src/lib/components/table/thematic/ExternalResourceTable/ExternalResourceTable.js
@@ -17,7 +17,15 @@ import _truncate from 'lodash/truncate';
 import regeneratorRuntime from 'regenerator-runtime';
 import { useAsyncDebounce } from 'react-table';
 
-import { Grid, Button, Icon, Input, Header, Label } from 'semantic-ui-react';
+import {
+  Grid,
+  Button,
+  Icon,
+  Input,
+  Header,
+  Label,
+  Dropdown,
+} from 'semantic-ui-react';
 
 import './ExternalResourceTable.css';
 
@@ -188,47 +196,46 @@ export const ExternalResourceTable = ({ tableData, tableConfig }) => {
                 <Grid.Column className={'pt-0'}>
                   <Grid stackable>
                     <Grid.Row>
-                      {rowIsYoutubeVideo && (
-                        <Grid.Column width={16} className={'pt-1'}>
-                          <YouTubeViewer
-                            fluid
-                            url={rowUrl}
-                            content={'Watch'}
-                            as={'a'}
-                            size={'mini'}
-                            target={'_blank'}
-                            icon={'youtube'}
-                            animated={false}
-                          />
-                        </Grid.Column>
-                      )}
-                      <Grid.Column width={16} className={'pt-1'}>
-                        <Button
-                          animated
+                      <Grid.Column className={'pt-0'}>
+                        <Dropdown
+                          icon={'caret square down outline'}
+                          floating
+                          button
+                          labeled
                           fluid
-                          content={'Access'}
-                          as={'a'}
-                          size={'mini'}
-                          target={'_blank'}
-                          disabled={_isNil(rowUrl)}
-                          href={rowUrl}
-                          icon={'external alternate'}
-                        />
-                      </Grid.Column>
-                      <Grid.Column width={16} className={'pt-1'}>
-                        <Button
-                          animated
-                          fluid
-                          as={'a'}
-                          size={'mini'}
-                          content={'Copy'}
-                          onClick={() => {
-                            navigator.clipboard.writeText(
-                              rowUrl || rowIdentifier
-                            );
-                          }}
-                          icon={'copy outline'}
-                        />
+                          text={'Options'}
+                          className={'icon right floated tiny'}
+                        >
+                          <Dropdown.Menu>
+                            {rowIsYoutubeVideo && (
+                              <YouTubeViewer
+                                fluid
+                                url={rowUrl}
+                                content={'Watch'}
+                                as={Dropdown.Item}
+                                icon={'youtube'}
+                              />
+                            )}
+
+                            <Dropdown.Item href={rowUrl} target={'_blank'}>
+                              <p>
+                                <Icon name={'external alternate'} /> Access
+                              </p>
+                            </Dropdown.Item>
+
+                            <Dropdown.Item
+                              onClick={() => {
+                                navigator.clipboard.writeText(
+                                  rowUrl || rowIdentifier
+                                );
+                              }}
+                            >
+                              <p>
+                                <Icon name={'copy outline'} /> Copy
+                              </p>
+                            </Dropdown.Item>
+                          </Dropdown.Menu>
+                        </Dropdown>
                       </Grid.Column>
                     </Grid.Row>
                   </Grid>

diff --git a/src/lib/components/table/thematic/RelatedPackagesTable/RelatedPackagesTable.js b/src/lib/components/table/thematic/RelatedPackagesTable/RelatedPackagesTable.js
@@ -78,20 +78,44 @@ export const RelatedPackagesTable = ({ tableData }) => {
                 >
                   <a href={rowLastVersion.url}>{rowLastVersion.title}</a>
                 </Grid.Column>
+                <Grid.Column
+                  mobile={16}
+                  tablet={16}
+                  only={'tablet mobile'}
+                  className={'rel-mt-1'}
+                >
+                  <Dropdown
+                    icon={'history'}
+                    floating
+                    button
+                    labeled
+                    fluid
+                    text={'Versions'}
+                    className="icon right floated tiny"
+                  >
+                    <Dropdown.Menu>
+                      {rowVersions.map((rowVersion) => (
+                        <Dropdown.Item href={rowVersion.url}>
+                          {rowVersion.version}
+                        </Dropdown.Item>
+                      ))}
+                    </Dropdown.Menu>
+                  </Dropdown>
+                </Grid.Column>
+
                 <Grid.Column
                   widescreen={4}
                   largeScreen={4}
                   computer={4}
-                  mobile={16}
-                  tablet={4}
+                  only={'computer'}
                 >
                   <Dropdown
                     icon={'history'}
                     floating
                     button
                     labeled
                     text={'Versions'}
-                    className="icon right floated"
+                    className="icon right floated tiny"
                   >
                     <Dropdown.Menu>
                       {rowVersions.map((rowVersion) => (