BASIRA #270 - Refactoring artwork, physical component, visual context…

…, and document detail page layouts
performant-software · Dec 9, 2024 · cafc33d · cafc33d
1 parent c88ac5c
commit cafc33d
Show file tree

Hide file tree

Showing 17 changed files with 639 additions and 561 deletions.
diff --git a/client/src/components/ArtworkCreators.css b/client/src/components/ArtworkCreators.css
@@ -0,0 +1,3 @@
+.artwork-creators.ui.items > .item > .content > .header > .ui.header.tiny {
+  font-size: 1rem;
+}
diff --git a/client/src/components/ArtworkCreators.js b/client/src/components/ArtworkCreators.js
@@ -1,13 +1,14 @@
 // @flow
 
 import React from 'react';
-import { Item } from 'semantic-ui-react';
+import { Header, Item } from 'semantic-ui-react';
 import _ from 'underscore';
 import type { Participation } from '../types/Participation';
 import Qualifiables from '../utils/Qualifiables';
 import CertaintyLabel from './CertaintyLabel';
 import RolesView from './RolesView';
 import SimpleLink from './SimpleLink';
+import './ArtworkCreators.css';
 
 type Props = {
   items: Array<Participation>
@@ -20,18 +21,23 @@ const ArtworkCreators = (props: Props) => {
 
   return (
     <Item.Group
+      className='artwork-creators'
       divided
       relaxed='very'
     >
       { _.map(props.items, (item) => (
         <Item>
           <Item.Content>
             <Item.Header>
-              <SimpleLink
-                url={`/people/${item.person.id}`}
+              <Header
+                className='tiny'
               >
-                { item.person.display_name }
-              </SimpleLink>
+                <SimpleLink
+                  url={`/people/${item.person.id}`}
+                >
+                  { item.person.display_name }
+                </SimpleLink>
+              </Header>
             </Item.Header>
             <Item.Meta>
               { Qualifiables.getValueListValue(item.person, 'Person', 'Nationality') }

diff --git a/client/src/components/ArtworkTitles.css b/client/src/components/ArtworkTitles.css
@@ -1,3 +1,7 @@
 .artwork-titles .icon.white {
   color: #FFFFFF;
 }
+
+.artwork-titles.list > .item > .content > .description {
+  margin-top: 0.5rem;
+}
diff --git a/client/src/components/ArtworkTitles.js b/client/src/components/ArtworkTitles.js
@@ -27,7 +27,6 @@ const ArtworkTitles = (props: Props) => {
           <List.Icon
             color={item.primary ? 'green' : 'white'}
             name='check circle'
-            verticalAlign='middle'
           />
           <List.Content>
             <List.Header

diff --git a/client/src/components/AttributesGrid.css b/client/src/components/AttributesGrid.css
@@ -0,0 +1,28 @@
+.attributes-grid.ui.segment {
+  font-size: 13px;
+}
+
+.attributes-grid.ui.segment .ui[class*="vertically divided"].grid > .row {
+  padding: 0px;
+}
+
+.attributes-grid.ui.segment .ui[class*="vertically divided"].grid > .row:before {
+  width: 100%;
+  margin: 0px;
+}
+
+.attributes-grid.ui.segment .ui[class*="vertically divided"].grid > .row:first-child > .column {
+  margin-top: 1rem;
+}
+
+.attributes-grid.ui.segment .ui[class*="vertically divided"].grid > .row > .column {
+  margin: 0.5rem 0px;
+}
+
+.attributes-grid.ui.segment .ui[class*="vertically divided"].grid > .row > .column.label {
+  color: #6c757d;
+}
+
+.attributes-grid.ui.segment .ui[class*="vertically divided"].grid > .row > .column.value {
+  font-weight: 400;
+}
diff --git a/client/src/components/AttributesGrid.js b/client/src/components/AttributesGrid.js
@@ -1,8 +1,9 @@
 // @flow
 
 import React, { useCallback, type Element } from 'react';
-import { Grid, Segment } from 'semantic-ui-react';
+import { Grid, Header, Segment } from 'semantic-ui-react';
 import _ from 'underscore';
+import './AttributesGrid.css';
 
 type Attribute = {
   name: string,
@@ -91,13 +92,12 @@ const AttributesGrid = (props: Props) => {
       >
         <Grid.Column
           className='label'
-          floated='right'
-          textAlign='right'
           width={8}
         >
           { attribute.label }
         </Grid.Column>
         <Grid.Column
+          className='value'
           width={8}
           floated='left'
           textAlign='left'
@@ -109,11 +109,24 @@ const AttributesGrid = (props: Props) => {
   }, [renderAttributeValue]);
 
   return (
-    <Segment>
+    <Segment
+      className='attributes-grid'
+    >
       <Grid
-        className='attributes-grid'
-        divided
+        divided='vertically'
       >
+        { props.title && (
+          <Grid.Row
+            className='title'
+          >
+            <Grid.Column>
+              <Header
+                content={props.title}
+                size='tiny'
+              />
+            </Grid.Column>
+          </Grid.Row>
+        )}
         { _.map(props.attributes, renderRow.bind(this)) }
       </Grid>
     </Segment>

diff --git a/client/src/components/DocumentActions.css b/client/src/components/DocumentActions.css
@@ -0,0 +1,3 @@
+.document-actions.ui.cards > .card > .content > .header > .ui.header.tiny {
+  font-size: 1rem;
+}
diff --git a/client/src/components/DocumentActions.js b/client/src/components/DocumentActions.js
@@ -2,12 +2,12 @@
 
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Item, Label } from 'semantic-ui-react';
+import { Card, Header, Label } from 'semantic-ui-react';
 import _ from 'underscore';
 import type { Action } from '../types/Action';
+import './DocumentActions.css';
 
 type Props = {
-  // $FlowIgnore - Not sure why this is throwing a Flow error
   items: Array<Action>
 };
 
@@ -50,28 +50,37 @@ const DocumentActions = (props: Props) => {
   }
 
   return (
-    <Item.Group
-      divided
+    <Card.Group
+      className='document-actions'
+      itemsPerRow={4}
     >
       { _.map(props.items, (item, index) => (
-        <Item
+        <Card
           key={index}
         >
-          <Item.Content>
-            <Item.Header>
-              { renderActionText(item) }
-            </Item.Header>
-            <Item.Description>
-              { item.notes }
-            </Item.Description>
-            <Item.Extra>
-              { renderDescriptors(item, 'Characteristic', 'blue') }
-              { renderDescriptors(item, 'Body', 'green') }
-            </Item.Extra>
-          </Item.Content>
-        </Item>
+          <Card.Content>
+            <Card.Header
+            >
+              <Header
+                content={renderActionText(item)}
+                size='tiny'
+              />
+            </Card.Header>
+            { item.notes && (
+              <Card.Description
+                content={item.notes}
+              />
+            )}
+          </Card.Content>
+          <Card.Content
+            extra
+          >
+            { renderDescriptors(item, 'Characteristic', 'blue') }
+            { renderDescriptors(item, 'Body', 'green') }
+          </Card.Content>
+        </Card>
       ))}
-    </Item.Group>
+    </Card.Group>
   );
 };
 

diff --git a/client/src/components/Locations.css b/client/src/components/Locations.css
@@ -0,0 +1,3 @@
+.locations.ui.items > .item > .content > .header > .ui.header.tiny {
+  font-size: 1rem;
+}
diff --git a/client/src/components/Locations.js b/client/src/components/Locations.js
@@ -2,13 +2,14 @@
 
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Item } from 'semantic-ui-react';
+import { Header, Item } from 'semantic-ui-react';
 import _ from 'underscore';
 import CertaintyLabel from './CertaintyLabel';
 import type { Location } from '../types/Location';
 import RolesView from './RolesView';
 import Qualifiables from '../utils/Qualifiables';
 import SimpleLink from './SimpleLink';
+import './Locations.css';
 
 type Props = {
   items: Array<Location>
@@ -23,18 +24,23 @@ const Locations = (props: Props) => {
 
   return (
     <Item.Group
+      className='locations'
       divided
       relaxed='very'
     >
       { _.map(props.items, (item) => (
         <Item>
           <Item.Content>
             <Item.Header>
-              <SimpleLink
-                url={`/places/${item.place_id}`}
+              <Header
+                size='tiny'
               >
-                { item.place?.name }
-              </SimpleLink>
+                <SimpleLink
+                  url={`/places/${item.place_id}`}
+                >
+                  { item.place?.name }
+                </SimpleLink>
+              </Header>
             </Item.Header>
             <Item.Meta
               content={item.place?.country}

diff --git a/client/src/components/RecordPage.css b/client/src/components/RecordPage.css
@@ -11,29 +11,13 @@
   margin-bottom: 2em;
 }
 
-.record-page .attributes-grid > .row:nth-child(odd) {
-  background-color: #f1f1f1;
-}
-
-.record-page .attributes-grid > .row > .column.label {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  font-weight: bold;
-}
-
-.record-page .record-page-image {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
 .record-page .lazy-image {
-  width: fit-content;
+  width: 250px;
+  height: 250px;
 }
 
-.record-page .lazy-image img {
-  max-height: 500px;
+.record-page .lazy-image .ui.medium.image {
+  width: 100%;
+  height: 100%;
   object-fit: cover;
-}
-
+}
diff --git a/client/src/components/RecordPage.js b/client/src/components/RecordPage.js
@@ -11,8 +11,8 @@ import React, {
 import { Link } from 'react-router-dom';
 import {
   Button,
-  Container,
-  Header,
+  Container, Grid,
+  Header as SemanticHeader,
   Loader,
   Menu,
   Ref,
@@ -142,10 +142,10 @@ const Section = (props: SectionProps) => (
     className={`section ${props.className ? props.className : ''}`}
   >
     { props.title && (
-      <Header
+      <SemanticHeader
         content={props.title}
         dividing
-        size='large'
+        size='small'
       />
     )}
     { props.children }
@@ -178,4 +178,32 @@ const Image = (props: ImageProps) => (
 
 RecordPage.Image = Image;
 
+type HeaderProps = {
+  children: Node,
+  image: Attachment
+};
+
+const Header = (props: HeaderProps) => (
+  <Grid
+    columns={2}
+  >
+    { props.image && (
+      <Grid.Column
+        width={4}
+      >
+        <RecordPage.Image
+          item={props.image}
+        />
+      </Grid.Column>
+    )}
+    <Grid.Column
+      width={12}
+    >
+      { props.children }
+    </Grid.Column>
+  </Grid>
+);
+
+RecordPage.Header = Header;
+
 export default RecordPage;
diff --git a/client/src/i18n/en.json b/client/src/i18n/en.json
@@ -168,6 +168,7 @@
     },
     "labels": {
       "artwork": "Artwork",
+      "details": "Details",
       "document": "Document",
       "id": "ID",
       "physicalComponent": "Physical Component",