Add radwave info text

assets/common.less

@@ -336,18 +336,24 @@ body {
 }
 
 /* Video and text dialogs */
-.video-wrapper {
+
+.video-wrapper {  
+  display: flex;
   height: 100%;
-  background: black;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(2px);
   text-align: center;
   z-index: 1000;
 }
 
 video {
-  height: 100%;
+  margin: auto;
+  height: 85%;
   width: auto;
   max-width: 100%;
   object-fit: contain;
+  // aspect-ratio: 9/17;
+  border: 5px solid white;
 }
 
 #video-container {
@@ -360,6 +366,28 @@ video {
   overflow: hidden;
   padding: 0px;
   z-index: 1000;
+
+  #video-close-icon {
+    top: 2rem;
+    right: 2rem;
+    transform: scale(2);
+  }
+}
+
+.close-icon {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 15;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &:focus {
+    color: white;
+    border: 2px solid white;
+  }
 }
 
 .bottom-sheet {

radwave/src/GifPlayPause.vue

@@ -0,0 +1,177 @@
+<template>
+  <!-- WCAG (Web Accessability compliant GIF display) -->
+  <div 
+    :id="id"
+    class="wcag-gif-container"
+    >
+    <img 
+      :src="still" 
+      :alt="alt" 
+      loading="lazy">
+    <details v-if="!(stayPaused || stillOnly)">
+      <summary  role="button" aria-label="static image" v-on:click="onClick">
+        <v-icon 
+          color="black"
+        >
+          {{ pause ? 'mdi-play' : 'mdi-pause' }}
+        </v-icon>
+      </summary>
+      <div class="wcag-gif-container1">
+        <img 
+        :src="gif" 
+        :alt="'Animated: ' + alt"
+        loading="lazy"
+        >
+      </div>
+    </details>
+
+    <cite style="display: none"> <!--  in the markup but not visible  -->
+      Adapted from <a href="https://css-tricks.com/pause-gif-details-summary/">CSS Tricks</a> and <a href="https://codepen.io/chriscoyier/pen/pogQJER">CodePen</a>
+    </cite>
+  </div>
+
+
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@vue/runtime-core";
+import { VIcon } from "vuetify/components/VIcon";
+
+
+export default defineComponent({
+  name: "GifPlayPause",
+
+  components: {
+    'v-icon': VIcon,
+  },
+
+
+  props: {
+    stillOnly : {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+
+    startPaused: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+
+    id: {
+      type: String,
+      default: "wcag-gif",
+      required: false,
+    },
+    still: {
+      type: String,
+      required: true,
+    },
+    gif: {
+      type: String,
+      required: true,
+    },
+    alt: {
+      type: String,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      stayPaused: this.stillOnly,
+      pause: this.stillOnly || this.startPaused,
+    };
+  },
+
+  mounted() {
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce))");
+    const details = document.querySelector(".wcag-gif-container > details") as HTMLDetailsElement;
+
+    if (mediaQuery.matches && details) {
+      this.stayPaused = true;
+      details.removeAttribute("open");
+      return;
+    } else if (details) {
+      details.open = ! (this.startPaused || this.stillOnly);
+    }
+  },
+
+  methods: {
+
+    onClick(): void {
+      if (this.stayPaused) {
+        return;
+      } 
+
+      this.pause = !this.pause;
+
+    },
+  }
+
+});
+
+</script>
+
+<style scoped>
+
+
+.wcag-gif-container {
+  /* display: inline-block; */
+  display: flex;
+  position: relative;
+  width: 100%;
+
+}
+
+.wcag-gif-container summary {
+  color: #fff;
+  background: transparent;
+  width: 2rem;
+  height: 2rem;
+  position: absolute;
+  bottom: 0.5rem;
+  left: 0.5rem;
+  z-index: 2;
+  border-radius: 50%;
+  background-color: white;
+}
+
+.wcag-gif-container details[open] summary {
+  background-color: white;
+}
+
+/* for blink/webkit */
+.wcag-gif-container details summary::-webkit-details-marker {
+  display: none;
+}
+/* for firefox */
+.wcag-gif-container details > summary:first-of-type {
+  list-style: none;
+}
+
+.wcag-gif-container summary > .v-icon {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+/* .wcag-gif-container summary:focus {
+  box-shadow: 0 0 0 0.25rem #aade87;
+  outline: transparent;
+} */
+
+.wcag-gif-container .wcag-gif-container1 img {
+  display: inline-block;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  overflow: visible;
+}
+
+.wcag-gif-container img {
+  width: 100%;
+}
+
+</style>

radwave/src/Radwave.vue

@@ -195,14 +195,16 @@
       id="video-container"
       v-model="showVideoSheet"
       transition="slide-y-transition"
+      close-on-back
+      close-on-content-click
       fullscreen
     >
       <div class="video-wrapper">
         <font-awesome-icon
           id="video-close-icon"
           class="close-icon"
           icon="times"
-          size="lg"
+          size="xlg"
           @click="showVideoSheet = false"
           @keyup.enter="showVideoSheet = false"
           tabindex="0"
@@ -257,8 +259,45 @@
         <v-window v-model="tab" id="tab-items" class="pb-2 no-bottom-border-radius">
           <v-window-item>
             <v-card class="no-bottom-border-radius scrollable">
-              <v-card-text class="info-text no-bottom-border-radius">
-                Information goes here
+              <v-card-text class="info-text no-bottom-border-radius d-flex-column">
+                <h2>Seeing a Wave in the Milky Way</h2>
+                <p>
+                  For most of human history, we have not known how far the stars are from us.
+                  It wasn't until the 20<sup>th</sup> century that we developed the tools to measure distances to stars. 
+                  By studying the distances to stars astronomers can learn a great deal about the structure of our galaxy. 
+                </p>
+                <p>
+                  In and amongst the stars are star forming regions - clouds of gas and dust where stars form. 
+                  Because dust is between us and the stars, astronomers can also measure the distances to these star forming regions. 
+                  It was by looking at the distances to nearby star forming regions that astronomers discovered a large structure which they called 
+                    the <a href="https://sites.google.com/cfa.harvard.edu/radcliffewave/"><strong>Radcliffe Wave</strong></a>. 
+                  While shaped like a wave, the question remained&hellip;phot
+                </p>
+                  <h2>Is the &ldquo;wave&rdquo; actually waving?</h2>
+
+                <p>After a great deal of work, the answer is yes. 
+                  By analyzing the velocities of young star clusters associated with the star forming regions,
+                  they determined that their motions match what one would expect if they were riding on a wave as it travels through the galaxy.
+                  The wave goes up and down every 95 million years or so! 
+                  However, the clusters and star forming clouds we see surfing the wave right now will dispers before a full cycle is complete
+                </p>
+                  The clusters follow a "damped traveling wave" pattern. This type of wave motion is practically visualized below by two of the astronomers involved in this discovery, 
+                  Catherine Zucker and Ralf Konietzka.
+                  <figure>
+                    <gif-play-pause
+                      :still="require('./assets/traveling_wave.gif')"
+                      :gif="require('./assets/traveling_wave.gif')"
+                      alt="Image of two scientists demonstrating a damped traveling wave. A traveling wave is like a wave on the ocean, where in the crests and troughs move forward, but the water itself (and also a boat in the water) does not. In a damped traveling wave the height of the waves decreases from one end to the other"
+                      />
+                  </figure>
+                <h2>Where is the Radcliffe Wave</h2>
+                <p>
+                  The Radcliffe Wave spans about 100&deg; of the sky between the constellations of Cygnus (The Swan) and Orion (The Hunter).
+                  It is about 1000 lightyears away at it's closest point, with a length of about 9000 lightyears. 
+                  Despite ~100 clusters and star forming regions being associated with the wave, their connection is not obvious from the view point on Earth.
+                  It was not until astronomers looked at the positions and distances in 3D that the structure became apparent. 
+                </p>
+                <p>&nbsp;</p>
               </v-card-text>
             </v-card>
           </v-window-item>
@@ -1023,6 +1062,46 @@ export default defineComponent({
   gap: 5px;
 }
 
+#text-bottom-sheet {
+
+  overflow-y: scroll;
+
+  h2 {
+    font-size: 1.25rem;
+    font-weight: bold;
+    margin-top: 1rem;
+    margin-bottom: 0.5rem;
+    font-style: italic;
+  }
+
+  h2 {
+    font-weight: bold;
+    margin-inline: auto;
+    width: fit-content;
+
+  }
+
+
+  figure {
+    position: relative;
+    padding-top: 1rem;
+    width: fit-content;
+    margin-inline: auto;
+
+    #wcag-gif {
+      width: fit-content;
+
+      img {
+        max-height: 400px;
+        width: 50vw;
+      }
+
+    }
+
+  }
+
+}
+
 #left-buttons, #right-buttons {
   display: flex;
   flex-direction: column;

radwave/src/main.ts

@@ -4,6 +4,8 @@ import { FundingAcknowledgment, IconButton, CreditLogos, wwtHUD } from "@minids/
 import Radwave from "./Radwave.vue";
 import "../../assets/common.less";
 
+import GifPlayPause from "./GifPlayPause.vue";
+
 import vuetify from "../plugins/vuetify";
 
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
@@ -60,6 +62,7 @@ createApp(Radwave, {
   .component('funding-acknowledgement', FundingAcknowledgment)
   .component('credit-logos', CreditLogos)
   .component('wwt-hud', wwtHUD)
+  .component('gif-play-pause', GifPlayPause)
 
   // Mount
   .mount("#app");