Merge pull request #197 from OpenTechStrategies/193-implement-mobile-…

…redesign 193 implement mobile redesign
OpenTechStrategies · Jan 24, 2025 · 0bdb054 · 0bdb054
2 parents 4bbee84 + eb6874a
commit 0bdb054
Show file tree

Hide file tree

Showing 19 changed files with 997 additions and 505 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-peuHzKWn.js",
+    "file": "assets/index-Bho4XSe1.js",
     "name": "index",
     "src": "index.html",
     "isEntry": true,
     "css": [
-      "assets/index-CEMw8OvV.css"
+      "assets/index-D5EU3I_Q.css"
     ]
   }
 }
diff --git a/archesdataviewer/static/vite_build/assets/index-Bho4XSe1.js b/archesdataviewer/static/vite_build/assets/index-Bho4XSe1.js
diff --git a/archesdataviewer/static/vite_build/assets/index-CEMw8OvV.css b/archesdataviewer/static/vite_build/assets/index-CEMw8OvV.css
diff --git a/archesdataviewer/static/vite_build/assets/index-D5EU3I_Q.css b/archesdataviewer/static/vite_build/assets/index-D5EU3I_Q.css
diff --git a/archesdataviewer/static/vite_build/assets/index-peuHzKWn.js b/archesdataviewer/static/vite_build/assets/index-peuHzKWn.js
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-peuHzKWn.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-CEMw8OvV.css">
+    <script type="module" crossorigin src="/assets/index-Bho4XSe1.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-D5EU3I_Q.css">
   </head>
   <body>
     <div id="app"></div>

diff --git a/front-end/src/App.vue b/front-end/src/App.vue
@@ -2,7 +2,7 @@
   <div class="home">
     <header class="welcome">
       <div class="welcome-content">
-        <h1>
+        <h1 class="welcome-text">
           Explore Chicago’s <br />
           Wabash Arts Corridor
         </h1>
@@ -36,7 +36,7 @@
     </header>
     <main>
       <div id="map-container">
-        <LeafletMap
+        <DesktopLeafletMap
           v-if="resourcesPrefetch && idReferences && locationsPrefetch"
           :resources-prefetch="resourcesPrefetch"
           :id-references="idReferences"
@@ -45,16 +45,67 @@
         <div v-else class="map-placeholder">Loading map…</div>
       </div>
       <div id="search-list-container">
+        <div class="search-header">
+          <div class="search-input-wrapper">
+            <MagnifyingGlassIcon class="search-icon" />
+            <input v-model="query" class="search-input" placeholder="Search" />
+          </div>
+          <button
+            type="button"
+            class="nav-button"
+            :class="{ active: activePage === '/artworks' }"
+            @click="router.push('/artworks')"
+          >
+            <PhotoIcon class="button-icon" />
+            <span>Artworks</span>
+          </button>
+          <button
+            type="button"
+            class="nav-button"
+            :class="{ active: activePage === '/artists' }"
+            @click="router.push('/artists')"
+          >
+            <UserIcon class="button-icon" />
+            <span>Artists</span>
+          </button>
+          <button
+            id="map-icon"
+            type="button"
+            class="nav-button map-icon"
+            :class="{ active: activePage === '/map' }"
+            @click="router.push('/map')"
+          >
+            <MapPinIcon class="button-icon" />
+            <span>Map</span>
+          </button>
+          <button
+            type="button"
+            class="nav-button"
+            :class="{ active: activePage === '/about' }"
+            @click="router.push('/about')"
+          >
+            <InformationCircleIcon class="button-icon" />
+            <span>About</span>
+          </button>
+        </div>
         <RouterView v-slot="{ Component }">
           <Transition
-            v-if="resourcesPrefetch && resourceRelationsPrefetch && idReferences && imagesPrefetch"
+            v-if="
+              resourcesPrefetch &&
+              resourceRelationsPrefetch &&
+              idReferences &&
+              imagesPrefetch &&
+              locationsPrefetch
+            "
           >
             <component
               :is="Component"
               :resources-prefetch="resourcesPrefetch"
               :resource-relations-prefetch="resourceRelationsPrefetch"
               :id-references="idReferences"
               :images-prefetch="imagesPrefetch"
+              :locations-prefetch="locationsPrefetch"
+              :query="query"
             />
           </Transition>
         </RouterView>
@@ -64,8 +115,16 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import LeafletMap from '@/components/LeafletMap.vue';
+import { ref, watch } from 'vue';
+import DesktopLeafletMap from '@/components/DesktopLeafletMap.vue';
+import { useRouter } from 'vue-router';
+import {
+  PhotoIcon,
+  UserIcon,
+  InformationCircleIcon,
+  MagnifyingGlassIcon,
+  MapPinIcon
+} from '@heroicons/vue/24/outline';
 import type {
   ImageTileData,
   Tile,
@@ -75,13 +134,17 @@ import type {
   ResourceXResource
 } from './types';
 
+const router = useRouter();
+
 const isProd = import.meta.env.PROD;
 
 const idReferences = ref<Prefetch['idReferences'] | undefined>(undefined);
 const imagesPrefetch = ref<Array<Tile<ImageTileData[]>> | undefined>(undefined);
 const locationsPrefetch = ref<Array<Tile<CoordinatesTileData>> | undefined>(undefined);
 const resourceRelationsPrefetch = ref<Array<ResourceXResource> | undefined>(undefined);
 const resourcesPrefetch = ref<Array<Resource> | undefined>(undefined);
+const query = ref<string>('');
+const activePage = ref<string>('');
 
 async function prefetchResources() {
   try {
@@ -103,6 +166,14 @@ async function prefetchResources() {
 }
 
 prefetchResources();
+
+watch(
+  () => router.currentRoute.value,
+  (newValue) => {
+    activePage.value = newValue.path;
+    return true;
+  }
+);
 </script>
 
 <style scoped>
@@ -113,7 +184,6 @@ main {
 .home {
   display: flex;
   flex-direction: column;
-  gap: var(--wac--semantic-spacing--primary);
 }
 
 .welcome {
@@ -124,6 +194,7 @@ main {
   line-height: var(--wac--line-height--tight);
   font-size: var(--wac--font-size--lg);
   text-wrap: balance;
+  margin: var(--wac--accessible-spacing--2x);
 }
 
 .welcome-content {
@@ -150,10 +221,14 @@ main {
   object-fit: contain;
 }
 
+.welcome-text {
+  font-size: var(--wac--font-size--xxl);
+}
+
 .welcome-credits p {
   font-weight: var(--wac--font-weight--normal);
   font-size: var(--wac--font-size);
-  margin: 0;
+  margin: 0px;
   white-space: nowrap;
 }
 
@@ -169,9 +244,72 @@ main {
 }
 
 #search-list-container {
-  background-color: #fff8e0;
+  border-radius: 32px;
+  order: -1;
+  background: #fff8e0;
+}
+
+#map-container {
+  display: none;
+}
+
+.search-header {
+  --wac--search-header--internal-spacing: var(--wac--semantic-spacing--tertiary);
+  position: sticky;
+  top: 0;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(
+    180deg,
+    white calc(100% - var(--wac--search-header--internal-spacing)),
+    rgba(255, 255, 255, 0) 100%
+  );
+  width: 100vw;
+  gap: var(--wac--semantic-spacing--tertiary);
+  z-index: 999;
+}
+
+.search-input-wrapper {
+  display: flex;
+  align-items: center;
+  background: #ffd54f;
+  max-height: 50px;
+  width: 100%;
   border-radius: 32px;
   padding: var(--wac--accessible-spacing--2x);
+  gap: var(--wac--accessible-spacing--halfx);
+  grid-column-start: 1;
+  grid-column-end: 5;
+}
+
+.search-input {
+  width: 100%;
+  border: none;
+  font-size: inherit;
+  background: transparent;
+  outline: none;
+}
+
+.search-icon {
+  width: 24px;
+  height: 24px;
+  color: black;
+}
+.nav-button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--wac--accessible-spacing--halfx);
+  border: none;
+  background: none;
+  font-size: inherit;
+  cursor: pointer;
+  font-weight: var(--wac--font-weight--normal);
+  &.active {
+    background: var(--wac--color--highlight);
+  }
 }
 
 @media screen and (min-width: 940px) {
@@ -215,8 +353,42 @@ main {
     font-size: var(--wac--font-size--xxl);
   }
 
+  #search-list-container {
+    order: 0;
+    padding: var(--wac--accessible-spacing--2x);
+    background: none;
+  }
+
   main {
     flex-direction: row-reverse;
   }
+  .home {
+    gap: var(--wac--semantic-spacing--primary);
+  }
+  #map-container {
+    display: block;
+  }
+
+  .search-header {
+    --wac--search-header--internal-spacing: var(--wac--semantic-spacing--tertiary);
+    position: sticky;
+    top: 0;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: var(--wac--search-header--internal-spacing);
+    padding-block: var(--wac--search-header--internal-spacing);
+    width: 100%;
+
+    background: linear-gradient(
+      180deg,
+      #fff8e0 calc(100% - var(--wac--search-header--internal-spacing)),
+      rgba(255, 255, 255, 0) 100%
+    );
+  }
+  #map-icon {
+    display: none;
+  }
 }
 </style>
diff --git a/front-end/src/assets/base.css b/front-end/src/assets/base.css
@@ -69,12 +69,12 @@ body {
   font-size: var(--wac--font-size);
   line-height: var(--wac--line-height);
   color: black;
-  padding: var(--wac--semantic-spacing--tertiary);
   background-image: linear-gradient(to bottom, white 30%, rgba(255, 255, 255, 0) 70%),
     url('https://arches-app-demo.opentechstrategies.com/archesdataviewer/background.png');
   background-size: cover;
   background-repeat: no-repeat;
   background-attachment: fixed;
+  margin: 0px;
 }
 
 h1,
@@ -169,8 +169,58 @@ button,
   height: 1rem;
 }
 
+.map-icon {
+  display: flex;
+}
+
+.search-results-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wac--accessible-spacing--1x);
+}
+
+.search-results {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin: auto;
+  max-width: 650px;
+  overflow-x: scroll;
+}
+
+.search-results-header {
+  display: flex;
+  justify-content: space-between;
+}
+
+.search-results-header-icon {
+  width: calc(var(--wac--line-height) * 1em);
+  height: calc(var(--wac--line-height) * 1em);
+}
+
+.search-results-header-title {
+  display: flex;
+  font-size: var(--wac--font-size--xxl);
+  gap: var(--wac--accessible-spacing--2x);
+}
+
 @media screen and (min-width: 940px) {
   body {
     padding: var(--wac--semantic-spacing--primary);
+    margin: 8px;
+  }
+
+  .map-icon {
+    display: none;
+  }
+
+  .search-results {
+    display: grid;
+    flex-direction: column;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+    margin: auto;
+    max-width: 650px;
+    overflow-x: scroll;
   }
 }
diff --git a/front-end/src/components/LeafletMap.vue → ...-end/src/components/DesktopLeafletMap.vue b/front-end/src/components/LeafletMap.vue → ...-end/src/components/DesktopLeafletMap.vue