From cafc33d794960fc162c4c66e4feeafc74834d4ce Mon Sep 17 00:00:00 2001 From: dleadbetter Date: Mon, 9 Dec 2024 14:55:57 -0500 Subject: [PATCH] BASIRA #270 - Refactoring artwork, physical component, visual context, and document detail page layouts --- client/src/components/ArtworkCreators.css | 3 + client/src/components/ArtworkCreators.js | 16 +- client/src/components/ArtworkTitles.css | 4 + client/src/components/ArtworkTitles.js | 1 - client/src/components/AttributesGrid.css | 28 + client/src/components/AttributesGrid.js | 25 +- client/src/components/DocumentActions.css | 3 + client/src/components/DocumentActions.js | 47 +- client/src/components/Locations.css | 3 + client/src/components/Locations.js | 16 +- client/src/components/RecordPage.css | 28 +- client/src/components/RecordPage.js | 36 +- client/src/i18n/en.json | 1 + client/src/pages/Artwork.js | 143 +++-- client/src/pages/Document.js | 688 +++++++++++----------- client/src/pages/PhysicalComponent.js | 54 +- client/src/pages/VisualContext.js | 104 ++-- 17 files changed, 639 insertions(+), 561 deletions(-) diff --git a/client/src/components/ArtworkCreators.css b/client/src/components/ArtworkCreators.css index e69de29..40fbb1b 100644 --- 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; +} \ No newline at end of file diff --git a/client/src/components/ArtworkCreators.js b/client/src/components/ArtworkCreators.js index 3a1b399..0e726b0 100644 --- 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 @@ -20,6 +21,7 @@ const ArtworkCreators = (props: Props) => { return ( @@ -27,11 +29,15 @@ const ArtworkCreators = (props: Props) => { - - { item.person.display_name } - + + { item.person.display_name } + + { Qualifiables.getValueListValue(item.person, 'Person', 'Nationality') } diff --git a/client/src/components/ArtworkTitles.css b/client/src/components/ArtworkTitles.css index c661718..f8f8663 100644 --- 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; +} \ No newline at end of file diff --git a/client/src/components/ArtworkTitles.js b/client/src/components/ArtworkTitles.js index 02d4edf..29f83b9 100644 --- a/client/src/components/ArtworkTitles.js +++ b/client/src/components/ArtworkTitles.js @@ -27,7 +27,6 @@ const ArtworkTitles = (props: Props) => { .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; +} \ No newline at end of file diff --git a/client/src/components/AttributesGrid.js b/client/src/components/AttributesGrid.js index 46f2d9d..3de35ab 100644 --- 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) => { > { attribute.label } { }, [renderAttributeValue]); return ( - + + { props.title && ( + + +
+ + + )} { _.map(props.attributes, renderRow.bind(this)) } diff --git a/client/src/components/DocumentActions.css b/client/src/components/DocumentActions.css index e69de29..600759b 100644 --- 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; +} \ No newline at end of file diff --git a/client/src/components/DocumentActions.js b/client/src/components/DocumentActions.js index 2091ea1..5b2543b 100644 --- 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 }; @@ -50,28 +50,37 @@ const DocumentActions = (props: Props) => { } return ( - { _.map(props.items, (item, index) => ( - - - - { renderActionText(item) } - - - { item.notes } - - - { renderDescriptors(item, 'Characteristic', 'blue') } - { renderDescriptors(item, 'Body', 'green') } - - - + + +
+ + { item.notes && ( + + )} + + + { renderDescriptors(item, 'Characteristic', 'blue') } + { renderDescriptors(item, 'Body', 'green') } + + ))} - + ); }; diff --git a/client/src/components/Locations.css b/client/src/components/Locations.css index e69de29..0cca5d6 100644 --- 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; +} \ No newline at end of file diff --git a/client/src/components/Locations.js b/client/src/components/Locations.js index f9612a9..8b1be2b 100644 --- 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 @@ -23,6 +24,7 @@ const Locations = (props: Props) => { return ( @@ -30,11 +32,15 @@ const Locations = (props: Props) => { - - { item.place?.name } - + + { item.place?.name } + +
.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; -} - +} \ No newline at end of file diff --git a/client/src/components/RecordPage.js b/client/src/components/RecordPage.js index 5d550cc..a894929 100644 --- 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 && ( -
)} { props.children } @@ -178,4 +178,32 @@ const Image = (props: ImageProps) => ( RecordPage.Image = Image; +type HeaderProps = { + children: Node, + image: Attachment +}; + +const Header = (props: HeaderProps) => ( + + { props.image && ( + + + + )} + + { props.children } + + +); + +RecordPage.Header = Header; + export default RecordPage; diff --git a/client/src/i18n/en.json b/client/src/i18n/en.json index 4052d09..bef14f3 100644 --- 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", diff --git a/client/src/pages/Artwork.js b/client/src/pages/Artwork.js index ac5ee64..47b61e9 100644 --- a/client/src/pages/Artwork.js +++ b/client/src/pages/Artwork.js @@ -2,7 +2,6 @@ import React, { useCallback } from 'react'; import { useTranslation } from 'react-i18next'; -import { Segment } from 'semantic-ui-react'; import _ from 'underscore'; import ArtworkCreators from '../components/ArtworkCreators'; import ArtworkTitles from '../components/ArtworkTitles'; @@ -34,86 +33,82 @@ const Artwork = () => { loading={loading} renderTitle={() => getPrimaryTitle(item)} > - { item && item.primary_attachment && ( - - + + t('Artwork.labels.id', { id: item.id }) + }, { + name: 'date_start', + label: t('Artwork.labels.startDate') + }, { + name: 'date_end', + label: t('Artwork.labels.endDate') + }, { + name: 'date_descriptor', + label: t('Artwork.labels.dateDescription') + }, { + name: 'object_work_type', + label: t('Artwork.labels.objectWorkType'), + qualification: { + object: 'Artwork', + group: 'Object/Work Type' + } + }, { + name: 'materials', + label: t('Artwork.labels.materials'), + qualification: { + object: 'Artwork', + group: 'Material' + } + }, { + name: 'techniques', + label: t('Artwork.labels.techniques'), + qualification: { + object: 'Artwork', + group: 'Technique' + } + }, { + name: 'height', + label: t('Artwork.labels.height') + }, { + name: 'width', + label: t('Artwork.labels.width') + }, { + name: 'depth', + label: t('Artwork.labels.depth') + }, { + name: 'commissioning_context', + label: t('Artwork.labels.commissioningContext'), + qualification: { + object: 'Artwork', + group: 'Commissioning Context' + } + }, { + name: 'number_documents_visible', + label: t('Artwork.labels.numberDocumentsVisible') + }, { + name: 'notes_external', + label: t('Artwork.labels.notes') + }]} + item={item} + title={t('Common.labels.details')} /> - - )} + + { !_.isEmpty(item?.artwork_titles) && ( - - - + )} - - t('Artwork.labels.id', { id: item.id }) - }, { - name: 'date_start', - label: t('Artwork.labels.startDate') - }, { - name: 'date_end', - label: t('Artwork.labels.endDate') - }, { - name: 'date_descriptor', - label: t('Artwork.labels.dateDescription') - }, { - name: 'object_work_type', - label: t('Artwork.labels.objectWorkType'), - qualification: { - object: 'Artwork', - group: 'Object/Work Type' - } - }, { - name: 'materials', - label: t('Artwork.labels.materials'), - qualification: { - object: 'Artwork', - group: 'Material' - } - }, { - name: 'techniques', - label: t('Artwork.labels.techniques'), - qualification: { - object: 'Artwork', - group: 'Technique' - } - }, { - name: 'height', - label: t('Artwork.labels.height') - }, { - name: 'width', - label: t('Artwork.labels.width') - }, { - name: 'depth', - label: t('Artwork.labels.depth') - }, { - name: 'commissioning_context', - label: t('Artwork.labels.commissioningContext'), - qualification: { - object: 'Artwork', - group: 'Commissioning Context' - } - }, { - name: 'number_documents_visible', - label: t('Artwork.labels.numberDocumentsVisible') - }, { - name: 'notes_external', - label: t('Artwork.labels.notes') - }]} - item={item} - /> - { !_.isEmpty(item?.participations) && ( { loading={loading} renderTitle={() => item.name} > - { item && item.primary_attachment && ( - - - - )} - + + + { !_.isEmpty(item?.actions) && ( - - - + )} -
- - }, { - name: 'inscription_text', - label: t('Document.labels.inscriptionText') - }, { - name: 'binding_ornamentation', - label: t('Document.labels.bindingOrnamentation'), - qualification: { - object: 'Document', - group: 'Binding Ornamentation' - } - }, { - name: 'binding_iconography', - label: t('Document.labels.bindingIconography'), - qualification: { - object: 'Document', - group: 'Iconography', - formField: 'binding_iconography' - } - }]} - item={item} - /> -
- - }, { - name: 'endband_colors', - label: t('Document.labels.endbandColors'), - qualification: { - object: 'Document', - group: 'Color', - formField: 'endband_colors' - } - }, { - name: 'endband_style', - label: t('Document.labels.endbandStyle'), - qualification: { - object: 'Document', - group: 'Endband Style' - } - }]} - item={item} - /> -
- - }, { - name: 'fore_edges_color', - label: t('Document.labels.colorOfForeEdges'), - qualification: { - object: 'Document', - group: 'Color', - formField: 'fore_edges_color' - } - }, { - name: 'fore_edge_text', - label: t('Document.labels.foreEdgeText') - }]} - item={item} - /> -
- + + + + }, { + name: 'inscription_text', + label: t('Document.labels.inscriptionText') + }, { + name: 'binding_ornamentation', + label: t('Document.labels.bindingOrnamentation'), + qualification: { + object: 'Document', + group: 'Binding Ornamentation' + } + }, { + name: 'binding_iconography', + label: t('Document.labels.bindingIconography'), + qualification: { + object: 'Document', + group: 'Iconography', + formField: 'binding_iconography' + } + }]} + item={item} + title={t('Document.sections.binding')} + /> + + + + }, { + name: 'endband_colors', + label: t('Document.labels.endbandColors'), + qualification: { + object: 'Document', + group: 'Color', + formField: 'endband_colors' + } + }, { + name: 'endband_style', + label: t('Document.labels.endbandStyle'), + qualification: { + object: 'Document', + group: 'Endband Style' + } + }]} + item={item} + title={t('Document.sections.endband')} + /> + + + + }, { + name: 'fore_edges_color', + label: t('Document.labels.colorOfForeEdges'), + qualification: { + object: 'Document', + group: 'Color', + formField: 'fore_edges_color' + } + }, { + name: 'fore_edge_text', + label: t('Document.labels.foreEdgeText') + }]} + item={item} + title={t('Document.sections.foreEdges')} + /> + + + + + -
- - }, { - name: 'ruling_color', - label: t('Document.labels.rulingColor'), - qualification: { - object: 'Document', - group: 'Color', - formField: 'ruling_color' - } - }, { - name: 'rubrication', - label: t('Document.labels.rubrication'), - renderValue: () => - }, { - name: 'rubrication_color', - label: t('Document.labels.rubricationColor'), - qualification: { - object: 'Document', - group: 'Color', - formField: 'rubrication_color' - } - }]} - item={item} - /> -
- + + + + }, { + name: 'ruling_color', + label: t('Document.labels.rulingColor'), + qualification: { + object: 'Document', + group: 'Color', + formField: 'ruling_color' + } + }, { + name: 'rubrication', + label: t('Document.labels.rubrication'), + renderValue: () => + }, { + name: 'rubrication_color', + label: t('Document.labels.rubricationColor'), + qualification: { + object: 'Document', + group: 'Color', + formField: 'rubrication_color' + } + }]} + item={item} + title={t('Document.sections.layout')} + /> + + + + + ); diff --git a/client/src/pages/PhysicalComponent.js b/client/src/pages/PhysicalComponent.js index 279d564..a5e4199 100644 --- a/client/src/pages/PhysicalComponent.js +++ b/client/src/pages/PhysicalComponent.js @@ -29,35 +29,31 @@ const PhysicalComponent = () => { renderTitle={() => item.name} > - { item && item.primary_attachment && ( - - - - )} - - - t('PhysicalComponent.labels.id', { id: item.id }) - }, { - name: 'height', - label: t('PhysicalComponent.labels.height') - }, { - name: 'width', - label: t('PhysicalComponent.labels.width') - }, { - name: 'depth', - label: t('PhysicalComponent.labels.depth') - }, { - name: 'notes', - label: t('PhysicalComponent.labels.notes') - }]} - item={item} - /> + + t('PhysicalComponent.labels.id', { id: item.id }) + }, { + name: 'height', + label: t('PhysicalComponent.labels.height') + }, { + name: 'width', + label: t('PhysicalComponent.labels.width') + }, { + name: 'depth', + label: t('PhysicalComponent.labels.depth') + }, { + name: 'notes', + label: t('PhysicalComponent.labels.notes') + }]} + item={item} + title={t('Common.labels.details')} + /> + ); diff --git a/client/src/pages/VisualContext.js b/client/src/pages/VisualContext.js index 407aaa0..a26aa23 100644 --- a/client/src/pages/VisualContext.js +++ b/client/src/pages/VisualContext.js @@ -30,60 +30,56 @@ const VisualContext = () => { renderTitle={() => item.name} > - { item && item.primary_attachment && ( - - - - )} - - - t('VisualContext.labels.id', { id: item.id }) - }, { - name: 'height', - label: t('VisualContext.labels.height') - }, { - name: 'width', - label: t('VisualContext.labels.width') - }, { - name: 'depth', - label: t('VisualContext.labels.depth') - }, { - name: 'notes', - label: t('VisualContext.labels.notes') - }, { - name: 'general_subject_genre', - label: t('VisualContext.labels.generalSubjectGenre'), - qualification: { - object: 'Visual Context', - group: 'General Subject/Genre' - } - }, { - name: 'subject_cultural_context', - label: t('VisualContext.labels.subjectCulturalContext'), - qualification: { - object: 'Visual Context', - group: 'Subject Cultural Context' - } - }, { - name: 'subject_iconography', - label: t('VisualContext.labels.specificSubjectIconography'), - qualification: { - object: 'Visual Context', - group: 'Specific Subject/Iconography' - } - }, { - name: 'beta', - label: t('VisualContext.labels.beta'), - renderValue: () => - }]} - item={item} - /> + + t('VisualContext.labels.id', { id: item.id }) + }, { + name: 'height', + label: t('VisualContext.labels.height') + }, { + name: 'width', + label: t('VisualContext.labels.width') + }, { + name: 'depth', + label: t('VisualContext.labels.depth') + }, { + name: 'notes', + label: t('VisualContext.labels.notes') + }, { + name: 'general_subject_genre', + label: t('VisualContext.labels.generalSubjectGenre'), + qualification: { + object: 'Visual Context', + group: 'General Subject/Genre' + } + }, { + name: 'subject_cultural_context', + label: t('VisualContext.labels.subjectCulturalContext'), + qualification: { + object: 'Visual Context', + group: 'Subject Cultural Context' + } + }, { + name: 'subject_iconography', + label: t('VisualContext.labels.specificSubjectIconography'), + qualification: { + object: 'Visual Context', + group: 'Specific Subject/Iconography' + } + }, { + name: 'beta', + label: t('VisualContext.labels.beta'), + renderValue: () => + }]} + item={item} + title={t('Common.labels.details')} + /> + );