Merge pull request #90 from OpenTechStrategies/87-polish-detail-page

Polish detail page
OpenTechStrategies · Sep 17, 2024 · aef9fcd · aef9fcd
2 parents 6629f85 + 82baaf7
commit aef9fcd
Show file tree

Hide file tree

Showing 15 changed files with 145 additions and 163 deletions.
diff --git a/archesdataviewer/static/vite_build/.vite/manifest.json b/archesdataviewer/static/vite_build/.vite/manifest.json
@@ -1,11 +1,11 @@
 {
   "index.html": {
-    "file": "assets/index-DrE-5eLb.js",
+    "file": "assets/index-CDqcz2DA.js",
     "name": "index",
     "src": "index.html",
     "isEntry": true,
     "css": [
-      "assets/index-B9B43Elo.css"
+      "assets/index-DfABYeLy.css"
     ],
     "assets": [
       "assets/inter-cyrillic-ext-wght-normal-B2xhLi22.woff2",

diff --git a/archesdataviewer/static/vite_build/assets/index-B9B43Elo.css b/archesdataviewer/static/vite_build/assets/index-B9B43Elo.css
diff --git a/...tatic/vite_build/assets/index-DrE-5eLb.js → ...tatic/vite_build/assets/index-CDqcz2DA.js b/...tatic/vite_build/assets/index-DrE-5eLb.js → ...tatic/vite_build/assets/index-CDqcz2DA.js
diff --git a/archesdataviewer/static/vite_build/assets/index-DfABYeLy.css b/archesdataviewer/static/vite_build/assets/index-DfABYeLy.css
diff --git a/archesdataviewer/static/vite_build/index.html b/archesdataviewer/static/vite_build/index.html
@@ -4,8 +4,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Arches Data Viewer</title>
-    <script type="module" crossorigin src="/assets/index-DrE-5eLb.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-B9B43Elo.css">
+    <script type="module" crossorigin src="/assets/index-CDqcz2DA.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-DfABYeLy.css">
   </head>
   <body>
     <div id="app"></div>

diff --git a/front-end/src/App.vue b/front-end/src/App.vue
@@ -120,13 +120,15 @@ prefetchResources();
   line-height: var(--wac--line-height--tight);
   font-size: var(--wac--font-size--lg);
   max-width: var(--wac--text--sensible-max-width);
+  text-wrap: balance;
 }
 
 .footer {
   display: flex;
   flex-direction: column;
   gap: var(--wac--accessible-spacing--2x);
-  max-width: var(--wac--text--sensible-max-width);
+  max-width: calc(var(--wac--text--sensible-max-width) * 1.5);
+  text-wrap: balance;
 }
 
 .footer-blurb {

diff --git a/front-end/src/assets/base.css b/front-end/src/assets/base.css
@@ -14,6 +14,7 @@
   --wac--font-weight--bold: 700;
   --wac--font-weight--xbold: 900;
 
+  --wac--color--gray: #999;
   --wac--color--gray--dark: #363636;
   --wac--color--highlight: #ffe16a;
 
@@ -42,11 +43,15 @@
   --wac--semantic-spacing--primary: var(--wac--accessible-spacing--8x);
   --wac--semantic-spacing--secondary: var(--wac--accessible-spacing--4x);
   --wac--semantic-spacing--tertiary: var(--wac--accessible-spacing--2x);
+  --wac--semantic-spacing--quartary: var(--wac--accessible-spacing--1x);
+  --wac--semantic-spacing--quintary: var(--wac--accessible-spacing--halfx);
 
   --wac--text--sensible-max-width: 60ch;
   --wac--image--thumbnail-size: var(--wac--accessible-spacing--15x);
 
-  --wac--outline: 2px solid blue;
+  --wac--outline--color: blue;
+  --wac--outline--width: 2px;
+  --wac--outline: var(--wac--outline--width) solid var(--wac--outline--color);
 }
 
 *,
@@ -58,6 +63,7 @@
 body {
   font-family: 'Inter Variable', sans-serif;
   font-size: var(--wac--font-size);
+  line-height: var(--wac--line-height);
   background-color: white;
   color: black;
   padding: var(--wac--semantic-spacing--tertiary);
@@ -81,36 +87,64 @@ h1 {
   font-weight: var(--wac--font-weight--xbold);
 }
 
-p {
+p,
+figure {
   margin: 0;
   padding: 0;
 }
 
-button {
+a {
+  text-decoration: underline;
+  color: inherit;
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  &:focus-visible {
+    outline: var(--wac--outline);
+  }
+}
+
+button,
+.button {
+  --wac--button--padding: var(--wac--accessible-spacing--1x);
+
   all: unset;
 
   font-weight: var(--wac--font-weight--bold);
-  padding: var(--wac--accessible-spacing--halfx);
+  padding: var(--wac--button--padding);
+  border: 2px solid black;
 
-  transition: background-color 100ms ease;
+  transition-property: background-color, border-color, outline;
+  transition-duration: 100ms;
+  transition-timing-function: ease;
   cursor: pointer;
 
-  &.active {
-    background: var(--wac--color--highlight);
+  &:has(.button-icon) {
+    display: inline-flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 0.4ch;
   }
 
   &:focus-visible {
     outline: var(--wac--outline);
+    border-color: var(--wac--outline--color);
   }
 }
 
-@media screen and (min-width: 940px) {
-  :root {
-    --wac--semantic-spacing--primary: var(--wac--accessible-spacing--8x);
-    --wac--semantic-spacing--secondary: var(--wac--accessible-spacing--4x);
-    --wac--semantic-spacing--tertiary: var(--wac--accessible-spacing--2x);
+.button-icon {
+  width: calc(var(--wac--line-height) * 1em);
+  height: calc(var(--wac--line-height) * 1em);
+  transition: transform 100ms ease;
+
+  .expanded & {
+    transform: rotate(90deg);
   }
+}
 
+@media screen and (min-width: 940px) {
   body {
     padding: var(--wac--semantic-spacing--primary);
   }

diff --git a/front-end/src/assets/main.css b/front-end/src/assets/main.css
@@ -9,13 +9,3 @@
 .v-leave-to {
   opacity: 0;
 }
-
-.resource-link {
-  text-decoration: underline;
-  cursor: pointer;
-  color: black;
-}
-
-a {
-  color: black;
-}
diff --git a/front-end/src/components/ArtworkDetailItem.vue b/front-end/src/components/ArtworkDetailItem.vue
@@ -4,16 +4,14 @@
     :image-url="props.artwork.Photograph?.Image"
   >
     <template v-if="props.panelResourceType !== PanelResourceEnum.ARTWORK" #item-header-title>
-      <p>
-        <RouterLink
-          :to="`/archesdataviewer/home/resource/${props.artworkId}`"
-          class="resource-link"
-          >{{ artwork.Title }}</RouterLink
-        >
-      </p>
+      <RouterLink
+        :to="`/archesdataviewer/home/resource/${props.artworkId}`"
+        class="resource-link"
+        >{{ artwork.Title }}</RouterLink
+      >
     </template>
     <template v-if="artist && structure" #item-header-byline>
-      <p>
+      <span>
         <span v-if="props.panelResourceType !== PanelResourceEnum.ARTIST"
           >by
           <RouterLink
@@ -26,16 +24,16 @@
           at
           {{ structure.displayname }}</span
         >
-      </p>
+      </span>
     </template>
     <template
       v-if="photographer && props.panelResourceType !== PanelResourceEnum.PHOTOGRAPHER"
       #item-credit
     >
-      <p>
+      <span>
         Photographer:
         {{ photographer.displayname }}
-      </p>
+      </span>
     </template>
     <template
       v-if="props.artwork.Description && props.panelResourceType === PanelResourceEnum.ARTWORK"

diff --git a/front-end/src/components/LeafletMap.vue b/front-end/src/components/LeafletMap.vue
@@ -1,9 +1,11 @@
 <template>
   <div :class="expandMap ? 'map-container expanded' : 'map-container collapsed'">
-    <button type="button" class="toggle-map" @click="expandMap = !expandMap">
-      <span>Explore the artwork geographically</span>
-      <ChevronRightIcon class="button-icon" />
-    </button>
+    <div class="toggle-map-container">
+      <button type="button" class="toggle-map" @click="expandMap = !expandMap">
+        <span>Explore the artwork geographically</span>
+        <ChevronRightIcon class="button-icon" />
+      </button>
+    </div>
     <div @click="expandMap = true">
       <div class="map-wrapper">
         <div id="map" ref="mapElement" />
@@ -108,23 +110,7 @@ watch(
 .map-container {
   display: flex;
   flex-direction: column;
-}
-
-.toggle-map {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  gap: 0.4ch;
-}
-
-.button-icon {
-  width: calc(var(--wac--line-height) * 1em);
-  height: calc(var(--wac--line-height) * 1em);
-  transition: transform 100ms ease;
-
-  .expanded & {
-    transform: rotate(90deg);
-  }
+  gap: var(--wac--semantic-spacing--tertiary);
 }
 
 #map {
@@ -146,7 +132,7 @@ watch(
 }
 
 @media screen and (min-width: 940px) {
-  .toggle-map {
+  .toggle-map-container {
     display: none;
   }
 

diff --git a/front-end/src/components/ResourceDetail.vue b/front-end/src/components/ResourceDetail.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="resource-detail-header">
-    <div class="resource-detail-header-label">
+    <div class="resource-detail-type">
       <slot name="header-label"></slot>
     </div>
-    <div class="resource-detail-header-title">
+    <div class="resource-detail-title">
       <slot name="header-title"></slot>
     </div>
   </div>
@@ -27,17 +27,18 @@
 .resource-detail-header {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
-  padding: 0px;
-  gap: 8px;
+  gap: var(--wac--semantic-spacing--quintary);
 }
 
-.resource-detail-metadata {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  padding: 0px;
-  gap: 16px;
+.resource-detail-type {
+  font-size: var(--wac--font-size--lg);
+  line-height: var(--wac--line-height--tight);
+}
+
+.resource-detail-title {
+  font-weight: var(--wac--font-weight--xbold);
+  font-size: var(--wac--font-size--xxl);
+  line-height: var(--wac--line-height--tight);
 }
 
 .resource-detail-more-by-artist {
@@ -48,35 +49,14 @@
   gap: 16px;
 }
 
-.resource-detail-metadata-title {
-  font-style: normal;
-  font-weight: 700;
-  font-size: var(--wac--font-size);
-  line-height: 100%;
-
-  color: #999999;
-}
-
-.resource-detail-metadata-content {
-  font-style: normal;
-  font-weight: 400;
-  font-size: var(--wac--font-size);
-  line-height: 140%;
-
-  color: #999999;
-}
-
-.resource-detail-header-label {
-  font-style: normal;
-  font-weight: 400;
-  font-size: var(--wac--font-size--lg);
-  line-height: 100%;
+.resource-detail-metadata {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wac--semantic-spacing--quartary);
+  color: var(--wac--color--gray);
 }
 
-.resource-detail-header-title {
-  font-style: normal;
-  font-weight: 900;
-  font-size: var(--wac--font-size--xxl);
-  line-height: 100%;
+.resource-detail-metadata-title {
+  font-weight: var(--wac--font-weight--bold);
 }
 </style>