diff --git a/assets/common.less b/assets/common.less index 17bbe0f9..cd897d55 100644 --- a/assets/common.less +++ b/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 { diff --git a/radwave/src/GifPlayPause.vue b/radwave/src/GifPlayPause.vue new file mode 100644 index 00000000..2856b2de --- /dev/null +++ b/radwave/src/GifPlayPause.vue @@ -0,0 +1,177 @@ + + + + + diff --git a/radwave/src/Radwave.vue b/radwave/src/Radwave.vue index 9e61f3a1..14848688 100644 --- a/radwave/src/Radwave.vue +++ b/radwave/src/Radwave.vue @@ -195,6 +195,8 @@ id="video-container" v-model="showVideoSheet" transition="slide-y-transition" + close-on-back + close-on-content-click fullscreen >
@@ -202,7 +204,7 @@ 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 @@ - - Information goes here + +

Seeing a Wave in the Milky Way

+

+ For most of human history, we have not known how far the stars are from us. + It wasn't until the 20th 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. +

+

+ 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 Radcliffe Wave. + While shaped like a wave, the question remained…phot +

+

Is the “wave” actually waving?

+ +

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 +

+ 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. +
+ +
+

Where is the Radcliffe Wave

+

+ The Radcliffe Wave spans about 100° 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. +

+

 

@@ -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; diff --git a/radwave/src/assets/traveling_wave.gif b/radwave/src/assets/traveling_wave.gif new file mode 100644 index 00000000..dddb73d2 Binary files /dev/null and b/radwave/src/assets/traveling_wave.gif differ diff --git a/radwave/src/main.ts b/radwave/src/main.ts index 3f0ebf36..adaac683 100644 --- a/radwave/src/main.ts +++ b/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");