Merge pull request #277 from performant-software/feature/basira270_se…

…arch_detail_layout BASIRA #270 - Search detail layout
performant-software · Dec 10, 2024 · fbfcffa · fbfcffa
2 parents c88ac5c + fac5bb3
commit fbfcffa
Show file tree

Hide file tree

Showing 17 changed files with 654 additions and 562 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
@@ -3,37 +3,33 @@
   margin-bottom: 0;
 }
 
-.record-page > .pushable > .pusher {
-  margin-top: 1em;
-}
-
-.record-page .section {
-  margin-bottom: 2em;
-}
-
-.record-page .attributes-grid > .row:nth-child(odd) {
-  background-color: #f1f1f1;
-}
-
-.record-page .attributes-grid > .row > .column.label {
+.record-page > .pushable {
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  font-weight: bold;
 }
 
-.record-page .record-page-image {
+.record-page > .pushable > .pusher {
   display: flex;
   flex-direction: column;
-  align-items: center;
+  flex-grow: 1;
+  margin-top: 1em;
 }
 
-.record-page .lazy-image {
-  width: fit-content;
+.record-page > .pushable > .pusher > main {
+  flex-grow: 1;
 }
 
-.record-page .lazy-image img {
-  max-height: 500px;
-  object-fit: cover;
+.record-page .section {
+  margin-bottom: 2em;
 }
 
+.record-page .lazy-image {
+  width: 250px;
+  height: 250px;
+}
+
+.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,
@@ -116,7 +116,9 @@ const RecordPage = (props: Props) => {
           </Sidebar>
         )}
         <Sidebar.Pusher>
-          { !props.loading && props.children }
+          <main>
+            { !props.loading && props.children }
+          </main>
           { !props.loading && <PageFooter /> }
         </Sidebar.Pusher>
       </Sidebar.Pushable>
@@ -142,10 +144,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 +180,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;