Implement first pass desktop layout

This commit introduces a first-pass desktop layout for the application,
primarily handled through media queries on the base css. It also
introduces a new set of css variables for setting font size.

.github/workflows/lint.yml

@@ -10,9 +10,9 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           node-version-file: 'front-end/.node-version'
-      - name: Enter frontend directory
-        run: cd front-end
       - name: Install dependencies
+        working-directory: ./front-end
         run: npm ci
       - name: Run ESLint
+        working-directory: ./front-end
         run: npm run lint

front-end/src/assets/base.css

@@ -6,9 +6,24 @@
 :root {
   --color-black: #363636;
   --color-white: #ffffff;
+  --font-size-base: 16px;
+  --wac-font-size--small: calc(var(--font-size-base) * 0.75);
+  --wac-font-size--med: var(--font-size-base);
+  --wac-font-size--lg: calc(var(--font-size-base) * 1.25);
+  --wac-font-size--xl: calc(var(--font-size-base) * 1.5);
+  --wac-font-size--xxl: calc(var(--font-size-base) * 2);
+  --wac-font-size--xxxl: calc(var(--font-size-base) * 3);
+  --wac-font-size--xxxxl: calc(var(--font-size-base) * 4);
+}
+
+@media screen and (max-width: 940px) {
+  :root {
+    --font-size-base: 16px;
+  }
 }
 
 body {
-  background-color: var(--color-background);
+  background-color: var(--color-white);
   font-family: 'Inter', sans-serif;
+  font-size: var(--wac-font-size--med);
 }

front-end/src/assets/main.css

@@ -1,8 +1,5 @@
 @import './base.css';
 
-:root {
-}
-
 .v-enter-active,
 .v-leave-active {
   transition: opacity 0.5s ease;

front-end/src/components/LeafletMap.vue

@@ -98,6 +98,8 @@ watch(
 <style scoped>
 .expand-map-button {
   cursor: pointer;
+  font-weight: 700;
+  padding-bottom: 16px;
 }
 
 #map {
@@ -118,4 +120,20 @@ watch(
   height: 400px;
   transition: height 0.5s ease;
 }
+
+@media (min-width: 940px) {
+  .map-container-expanded,
+  .map-container-collapsed {
+    height: 100%;
+    transition: none;
+  }
+
+  .map-container-collapsed * {
+    pointer-events: all;
+  }
+
+  .expand-map-button {
+    display: none;
+  }
+}
 </style>

front-end/src/components/MoreArtworksByArtist.vue

@@ -70,7 +70,7 @@ const setActiveResource = (newResourceId: string) => {
 .more-artworks-by-artist-title {
   font-style: normal;
   font-weight: 700;
-  font-size: 16px;
+  font-size: var(--wac-font-size--med);
   line-height: 100%;
 
   color: #000000;

front-end/src/components/ResourceDetail.vue

@@ -51,7 +51,7 @@
 .resource-detail-metadata-title {
   font-style: normal;
   font-weight: 700;
-  font-size: 16px;
+  font-size: var(--wac-font-size--med);
   line-height: 100%;
 
   color: #999999;
@@ -60,7 +60,7 @@
 .resource-detail-metadata-content {
   font-style: normal;
   font-weight: 400;
-  font-size: 16px;
+  font-size: var(--wac-font-size--med);
   line-height: 140%;
 
   color: #999999;
@@ -69,14 +69,14 @@
 .resource-detail-header-label {
   font-style: normal;
   font-weight: 400;
-  font-size: 24px;
+  font-size: var(--wac-font-size--lg);
   line-height: 100%;
 }
 
 .resource-detail-header-title {
   font-style: normal;
   font-weight: 900;
-  font-size: 32px;
+  font-size: var(--wac-font-size--xxl);
   line-height: 100%;
 }
 </style>

front-end/src/components/ResourceDetailItem.vue

@@ -51,13 +51,12 @@ const imageUrl = props.imageUrl ? import.meta.env.VITE_ARCHES_API_URL + props.im
   flex-direction: column;
   align-items: flex-start;
   padding: 0px;
-  gap: 8px;
 }
 
 .resource-detail-item-header-byline {
   font-style: normal;
   font-weight: 700;
-  font-size: 16px;
+  font-size: var(--wac-font-size--med);
   line-height: 100%;
 
   color: #000000;
@@ -66,7 +65,7 @@ const imageUrl = props.imageUrl ? import.meta.env.VITE_ARCHES_API_URL + props.im
 .resource-detail-item-header-title {
   font-style: normal;
   font-weight: 900;
-  font-size: 24px;
+  font-size: var(--wac-font-size--xxl);
   line-height: 120%;
   text-decoration-line: underline;
 
@@ -76,7 +75,7 @@ const imageUrl = props.imageUrl ? import.meta.env.VITE_ARCHES_API_URL + props.im
 .resource-detail-item-credit {
   font-style: normal;
   font-weight: 400;
-  font-size: 16px;
+  font-size: var(--wac-font-size--med);
   line-height: 140%;
 
   color: #000000;

front-end/src/components/ResourcePanel.vue

@@ -22,10 +22,7 @@
           v-for="relatedArtwork in resourceRelations.filter(
             (resourceRelation) => graphIdToNameTable[resourceRelation.graph_id] === 'Artwork'
           )"
-          v-else-if="
-            validateArtistSchema(props.resource.resource) &&
-            graphIdToNameTable[props.resource.graph_id] === 'Artist'
-          "
+          v-else-if="graphIdToNameTable[props.resource.graph_id] === 'Artist'"
           :key="relatedArtwork.graph_id"
           :related-artwork="relatedArtwork"
           :id-references="props.idReferences"
@@ -35,10 +32,7 @@
           v-for="relatedArtwork in resourceRelations.filter(
             (resourceRelation) => graphIdToNameTable[resourceRelation.graph_id] === 'Artwork'
           )"
-          v-else-if="
-            validateStructureSchema(props.resource.resource) &&
-            graphIdToNameTable[props.resource.graph_id] === 'Structure'
-          "
+          v-else-if="graphIdToNameTable[props.resource.graph_id] === 'Structure'"
           :key="relatedArtwork.resourceinstanceid"
           :related-artwork="relatedArtwork"
           :id-references="props.idReferences"
@@ -48,23 +42,14 @@
           v-for="relatedArtwork in resourceRelations.filter(
             (resourceRelation) => graphIdToNameTable[resourceRelation.graph_id] === 'Artwork'
           )"
-          v-else-if="
-            validatePhotographerSchema(props.resource.resource) &&
-            graphIdToNameTable[props.resource.graph_id] === 'Photographer'
-          "
+          v-else-if="graphIdToNameTable[props.resource.graph_id] === 'Photographer'"
           :key="relatedArtwork.root_ontology_class"
           :related-artwork="relatedArtwork"
           :id-references="props.idReferences"
           :panel-resource-type="PanelResourceEnum.PHOTOGRAPHER"
         />
       </template>
-      <template
-        v-if="
-          validateArtworkSchema(props.resource.resource) &&
-          graphIdToNameTable[props.resource.graph_id] === 'Artwork'
-        "
-        #more-by-artist
-      >
+      <template v-if="graphIdToNameTable[props.resource.graph_id] === 'Artwork'" #more-by-artist>
         <MoreArtworksByArtist
           :resource="props.resource"
           :resource-relations="resourceRelations"
@@ -92,13 +77,7 @@ import type {
   ImageTileData,
   Resource
 } from '@/types';
-import {
-  validateArtistSchema,
-  validateArtworkSchema,
-  validateStructureSchema,
-  validatePhotographerSchema,
-  PanelResourceEnum
-} from '@/types';
+import { validateArtworkSchema, PanelResourceEnum } from '@/types';
 import useResourceStore from '@/stores/resourceStore';
 import ResourceDetail from './ResourceDetail.vue';
 import ArtworkDetailItem from './ArtworkDetailItem.vue';
@@ -131,9 +110,19 @@ const clearActiveResource = () => {
   align-items: center;
   padding: 8px 0px;
   gap: 8px;
+  font-weight: 700;
 }
 
 .resource-detail-back-button {
   cursor: pointer;
 }
+
+@media (min-width: 940px) {
+  .resource-detail {
+    height: 100vh;
+  }
+  .resource-detail {
+    overflow-y: scroll;
+  }
+}
 </style>

front-end/src/components/SearchList.vue

@@ -106,7 +106,6 @@ const filterByType = (type: string) => {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  padding: 0px;
   gap: 32px;
   isolation: isolate;
 }
@@ -149,7 +148,7 @@ button {
   background: none;
   font-style: normal;
   font-weight: 700;
-  font-size: 16px;
+  font-size: var(--wac-font-size--med);
   line-height: 100%;
   display: flex;
   align-items: center;
@@ -166,7 +165,6 @@ button.active {
 .search-bar {
   box-sizing: border-box;
 
-  /* Auto layout */
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -177,4 +175,16 @@ button.active {
   border: 1px solid #000000;
   border-radius: 5px;
 }
+
+@media (min-width: 940px) {
+  .search-list-container {
+    height: 100vh;
+  }
+  .search-results {
+    overflow-y: scroll;
+    padding-top: 40px;
+    mask-image: linear-gradient(to top, transparent, black 10%, black 90%, transparent);
+    mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
+  }
+}
 </style>

front-end/src/components/SearchListItem.vue

@@ -72,7 +72,7 @@ const setActiveResource = (newResourceId: string) => {
 .search-result-title {
   font-style: normal;
   font-weight: 900;
-  font-size: 16px;
+  font-size: var(--wac-font-size--lg);
   line-height: 120%;
   display: flex;
   align-items: center;
@@ -81,7 +81,7 @@ const setActiveResource = (newResourceId: string) => {
 .search-result-resource-type {
   font-style: normal;
   font-weight: 400;
-  font-size: 14px;
+  font-size: var(--wac-font-size--med);
   line-height: 100%;
 
   display: flex;
@@ -91,8 +91,8 @@ const setActiveResource = (newResourceId: string) => {
 .search-result-resource-description {
   font-style: normal;
   font-weight: 400;
-  font-size: 12px;
-  line-height: 110%;
+  font-size: var(--wac-font-size--small);
+  line-height: 120%;
   display: -webkit-box;
   -webkit-line-clamp: 5;
   line-clamp: 5;
@@ -106,4 +106,16 @@ const setActiveResource = (newResourceId: string) => {
   object-fit: cover;
   flex-shrink: 0;
 }
+@media (min-width: 940px) {
+  .search-result-title {
+    font-size: var(--wac-font-size--xxl);
+  }
+  .search-result-resource-type {
+    font-size: var(--wac-font-size--med);
+  }
+
+  .search-result-resource-description {
+    font-size: var(--wac-font-size--small);
+  }
+}
 </style>