Merge pull request #134 from OpenTechStrategies/129-clarify-welcome-t…

…ext-block 129 clarify welcome text block
OpenTechStrategies · Oct 10, 2024 · f33c47e · f33c47e
2 parents a686594 + 277746b
commit f33c47e
Show file tree

Hide file tree

Showing 9 changed files with 47 additions and 23 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-wck9c7ec.js",
+    "file": "assets/index-Cg_bCt7v.js",
     "name": "index",
     "src": "index.html",
     "isEntry": true,
     "css": [
-      "assets/index-B4j-7wFH.css"
+      "assets/index-j6YdsBDG.css"
     ]
   }
 }
diff --git a/archesdataviewer/static/vite_build/assets/index-B4j-7wFH.css b/archesdataviewer/static/vite_build/assets/index-B4j-7wFH.css
diff --git a/...tatic/vite_build/assets/index-wck9c7ec.js → ...tatic/vite_build/assets/index-Cg_bCt7v.js b/...tatic/vite_build/assets/index-wck9c7ec.js → ...tatic/vite_build/assets/index-Cg_bCt7v.js
diff --git a/archesdataviewer/static/vite_build/assets/index-j6YdsBDG.css b/archesdataviewer/static/vite_build/assets/index-j6YdsBDG.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-wck9c7ec.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-B4j-7wFH.css">
+    <script type="module" crossorigin src="/assets/index-Cg_bCt7v.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-j6YdsBDG.css">
   </head>
   <body>
     <div id="app"></div>

diff --git a/front-end/src/App.vue b/front-end/src/App.vue
@@ -4,11 +4,14 @@
       <div class="toggle-top-text">
         <button
           type="button"
-          :class="showTopText ? 'expanded' : 'collapsed'"
+          :class="showTopText ? 'top-text-button expanded' : 'top-text-button collapsed'"
           @click="toggleTopText"
         >
           <h1>Explore Chicago’s Wabash Arts Corridor</h1>
-          <ChevronRightIcon class="button-icon" />
+          <InformationCircleIcon class="button-icon" />
+        </button>
+        <button type="button" class="top-text-button x-button" @click="toggleTopText">
+          <XMarkIcon :class="showTopText ? 'button-icon shown' : 'button-icon hidden'" />
         </button>
       </div>
       <p :class="showTopText ? 'top-text expanded' : 'top-text collapsed'">
@@ -80,7 +83,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import { ChevronRightIcon } from '@heroicons/vue/24/solid';
+import { InformationCircleIcon, XMarkIcon } from '@heroicons/vue/24/outline';
 import LeafletMap from '@/components/LeafletMap.vue';
 import type {
   ImageTileData,
@@ -172,12 +175,12 @@ main {
   max-height: 0;
   overflow: hidden;
   transition:
-    max-height 0.6s ease-in-out,
-    padding 0.3s ease;
+    max-height 500ms ease-in-out,
+    padding 300ms ease;
 }
 
 .top-text.expanded {
-  max-height: 400px;
+  max-height: 350px;
   padding-top: 10px;
 }
 
@@ -186,6 +189,24 @@ main {
   padding-top: 0;
 }
 
+.top-text-button {
+  border: none;
+}
+
+.toggle-top-text {
+  display: flex;
+  flex-direction: row;
+}
+
+.x-button {
+  opacity: 1;
+  margin-left: auto;
+}
+
+.hidden {
+  opacity: 0;
+}
+
 @media screen and (min-width: 940px) {
   .welcome {
     font-size: var(--wac--font-size--xxl);

diff --git a/front-end/src/assets/base.css b/front-end/src/assets/base.css
@@ -139,8 +139,9 @@ button,
   width: calc(var(--wac--line-height) * 1em);
   height: calc(var(--wac--line-height) * 1em);
   transition: transform 100ms ease;
+  transition: opacity 300ms ease-in-out;
 
-  .expanded & {
+  .chevron-expanded & {
     transform: rotate(90deg);
   }
 }

diff --git a/front-end/src/components/LeafletMap.vue b/front-end/src/components/LeafletMap.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="expandMap ? 'map-container expanded' : 'map-container collapsed'">
+  <div :class="expandMap ? 'map-container expanded chevron-expanded' : 'map-container collapsed'">
     <div class="toggle-map-container">
       <button type="button" class="toggle-map" @click="expandMap = !expandMap">
         <span>Explore the artwork geographically</span>

diff --git a/front-end/src/components/ResourceDetail.vue b/front-end/src/components/ResourceDetail.vue
@@ -16,7 +16,9 @@
   <div>
     <button
       type="button"
-      :class="showMetadata ? 'toggle-metadata expanded' : 'toggle-metadata collapsed'"
+      :class="
+        showMetadata ? 'toggle-metadata expanded chevron-expanded' : 'toggle-metadata collapsed'
+      "
       @click="toggleMetadata"
     >
       <span>{{ showMetadata ? 'Hide arches metadata' : 'Show arches metadata' }}</span>