From 1895a716c30b6a217536532784d554a892357355 Mon Sep 17 00:00:00 2001
From: Harry Minsky <harry.minsky@gmail.com>
Date: Thu, 5 Sep 2024 16:59:28 -0400
Subject: [PATCH] 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                    |   4 +-
 front-end/src/assets/base.css                 |  17 ++-
 front-end/src/assets/main.css                 |   3 -
 front-end/src/components/LeafletMap.vue       |  18 +++
 .../src/components/MoreArtworksByArtist.vue   |   2 +-
 front-end/src/components/ResourceDetail.vue   |   8 +-
 .../src/components/ResourceDetailItem.vue     |   7 +-
 front-end/src/components/ResourcePanel.vue    |  41 ++---
 front-end/src/components/SearchList.vue       |  16 +-
 front-end/src/components/SearchListItem.vue   |  20 ++-
 front-end/src/pages/HomePage.vue              | 144 ++++++++++++------
 11 files changed, 189 insertions(+), 91 deletions(-)

diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
index c926c6b..63dbe87 100644
--- a/.github/workflows/lint.yml
+++ b/.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
diff --git a/front-end/src/assets/base.css b/front-end/src/assets/base.css
index 33b01d6..dafc776 100644
--- a/front-end/src/assets/base.css
+++ b/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);
 }
diff --git a/front-end/src/assets/main.css b/front-end/src/assets/main.css
index 5b6cdb5..d181494 100644
--- a/front-end/src/assets/main.css
+++ b/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;
diff --git a/front-end/src/components/LeafletMap.vue b/front-end/src/components/LeafletMap.vue
index c98e179..2c07852 100644
--- a/front-end/src/components/LeafletMap.vue
+++ b/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>
diff --git a/front-end/src/components/MoreArtworksByArtist.vue b/front-end/src/components/MoreArtworksByArtist.vue
index 499dbd3..f63edaf 100644
--- a/front-end/src/components/MoreArtworksByArtist.vue
+++ b/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;
diff --git a/front-end/src/components/ResourceDetail.vue b/front-end/src/components/ResourceDetail.vue
index d66a92d..a692098 100644
--- a/front-end/src/components/ResourceDetail.vue
+++ b/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>
diff --git a/front-end/src/components/ResourceDetailItem.vue b/front-end/src/components/ResourceDetailItem.vue
index d1f28e9..cad3616 100644
--- a/front-end/src/components/ResourceDetailItem.vue
+++ b/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;
diff --git a/front-end/src/components/ResourcePanel.vue b/front-end/src/components/ResourcePanel.vue
index ccc7422..0280372 100644
--- a/front-end/src/components/ResourcePanel.vue
+++ b/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>
diff --git a/front-end/src/components/SearchList.vue b/front-end/src/components/SearchList.vue
index c58f240..822a573 100644
--- a/front-end/src/components/SearchList.vue
+++ b/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>
diff --git a/front-end/src/components/SearchListItem.vue b/front-end/src/components/SearchListItem.vue
index 5c764e7..f36ed0a 100644
--- a/front-end/src/components/SearchListItem.vue
+++ b/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>
diff --git a/front-end/src/pages/HomePage.vue b/front-end/src/pages/HomePage.vue
index 87b64a1..6a5f1c3 100644
--- a/front-end/src/pages/HomePage.vue
+++ b/front-end/src/pages/HomePage.vue
@@ -1,8 +1,9 @@
 <template>
   <div class="home">
     <div class="welcome">
-      <h2>Wabash Arts Corridor</h2>
-      <p>
+      <p class="blurb">
+        <span class="title">Wabash Arts Corridor</span>
+        <br />
         In 2013, Columbia College Chicago launched the Wabash Arts Corridor to immerse students in
         the creative spirit by using urban spaces and reclaimable resources to revitalize and
         transform the South Loop business district into one of the city’s major cultural assets. The
@@ -12,51 +13,53 @@
         collaborative projects.
       </p>
     </div>
-    <div id="map-container">
-      <LeafletMap
-        v-if="props.resourcesPrefetch && props.idReferences && props.locationsPrefetch"
-        :resources-prefetch="props.resourcesPrefetch"
-        :id-references="props.idReferences"
-        :locations-prefetch="props.locationsPrefetch"
-      />
-      <div v-else class="map-placeholder">Loading Map...</div>
-    </div>
-    <div id="search-list-container">
-      <Transition
-        v-if="
-          resourceStore.resourceId === undefined &&
-          props.resourcesPrefetch &&
-          props.resourceRelationsPrefetch &&
-          props.idReferences &&
-          props.imagesPrefetch
-        "
-      >
-        <SearchList
+    <main>
+      <div id="map-container">
+        <LeafletMap
+          v-if="props.resourcesPrefetch && props.idReferences && props.locationsPrefetch"
           :resources-prefetch="props.resourcesPrefetch"
-          :resource-relations-prefetch="props.resourceRelationsPrefetch"
           :id-references="props.idReferences"
-          :images-prefetch="props.imagesPrefetch"
+          :locations-prefetch="props.locationsPrefetch"
         />
-      </Transition>
-      <ResourcePanelProvider v-else v-slot="{ resource, resourceRelations }">
-        <ResourcePanel
+        <div v-else class="map-placeholder">Loading Map...</div>
+      </div>
+      <div id="search-list-container">
+        <Transition
           v-if="
+            resourceStore.resourceId === undefined &&
+            props.resourcesPrefetch &&
             props.resourceRelationsPrefetch &&
             props.idReferences &&
-            props.imagesPrefetch &&
-            props.resourcesPrefetch &&
-            resourceRelations &&
-            resource
+            props.imagesPrefetch
           "
-          :resource="resource"
-          :resource-relations="resourceRelations"
-          :id-references="props.idReferences"
-          :resource-relations-prefetch="props.resourceRelationsPrefetch"
-          :images-prefetch="props.imagesPrefetch"
-          :resources-prefetch="props.resourcesPrefetch"
-        />
-      </ResourcePanelProvider>
-    </div>
+        >
+          <SearchList
+            :resources-prefetch="props.resourcesPrefetch"
+            :resource-relations-prefetch="props.resourceRelationsPrefetch"
+            :id-references="props.idReferences"
+            :images-prefetch="props.imagesPrefetch"
+          />
+        </Transition>
+        <ResourcePanelProvider v-else v-slot="{ resource, resourceRelations }">
+          <ResourcePanel
+            v-if="
+              props.resourceRelationsPrefetch &&
+              props.idReferences &&
+              props.imagesPrefetch &&
+              props.resourcesPrefetch &&
+              resourceRelations &&
+              resource
+            "
+            :resource="resource"
+            :resource-relations="resourceRelations"
+            :id-references="props.idReferences"
+            :resource-relations-prefetch="props.resourceRelationsPrefetch"
+            :images-prefetch="props.imagesPrefetch"
+            :resources-prefetch="props.resourcesPrefetch"
+          />
+        </ResourcePanelProvider>
+      </div>
+    </main>
     <div class="footer">
       <div class="footer-blurb">
         <h2>About / Credit</h2>
@@ -102,7 +105,6 @@ const props = defineProps<{
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  padding: 32px 16px;
   gap: 64px;
   position: relative;
   overflow-y: scroll;
@@ -112,7 +114,6 @@ const props = defineProps<{
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  padding: 0px;
   gap: 32px;
 }
 
@@ -120,10 +121,67 @@ const props = defineProps<{
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  padding: 0px;
   gap: 8px;
 }
+
 #map-container {
   width: 100%;
 }
+
+.welcome {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  font-size: var(--wac-font-size--med);
+}
+
+.title {
+  font-weight: 900;
+  line-height: 120%;
+  color: #000000;
+}
+
+.blurb {
+  font-weight: 400;
+  line-height: 120%;
+  color: #000000;
+}
+
+#search-list-container {
+  padding-top: 64px;
+}
+
+@media (min-width: 940px) {
+  .home {
+    padding: 64px 64px;
+
+    gap: 64px;
+    background: #ffffff;
+  }
+
+  .welcome {
+    gap: 32px;
+    font-size: var(--wac-font-size--xl);
+    max-width: 860px;
+  }
+
+  main {
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: flex-start;
+    width: 80%;
+    height: 100vh;
+    gap: 64px;
+  }
+  #map-container {
+    width: 50%;
+    height: 100%;
+  }
+  #search-list-container {
+    height: 100%;
+    width: 100%;
+    padding-top: 0px;
+  }
+}
 </style>