Skip to content

Make info sheet slide in from left on large screens #58

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Carifio24 merged 1 commit into from
Feb 18, 2026
Merged

Make info sheet slide in from left on large screens #58

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 43 additions & 10 deletions src/SeasonsStory.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,6 +151,7 @@
:tooltip-text="showTextSheet ? 'Hide Info' : 'Learn More'"
tooltip-location="start"
size="sm"

>
</icon-button>
</div>
Expand Down Expand Up @@ -448,8 +449,8 @@

<v-dialog
:style="cssVars"
class="bottom-sheet"
id="text-bottom-sheet"
:class="['info-sheet', `info-sheet-${infoSheetLocation}`]"
id="text-info-sheet"
hide-overlay
persistent
no-click-animation
Expand All @@ -458,7 +459,7 @@
:scrim="false"
location="bottom"
v-model="showTextSheet"
transition="dialog-bottom-transition"
:transition="infoSheetTransition"
>
<v-card height="100%">
<v-tabs
Expand All @@ -469,7 +470,7 @@
id="tabs"
dense
>
<v-tab class="info-tabs" tabindex="0"><h3>How to Use this App</h3></v-tab>
<v-tab class="info-tabs" tabindex="0"><h3>How to Use</h3></v-tab>
<v-tab class="info-tabs" tabindex="0"><h3>What to Explore</h3></v-tab>
</v-tabs>
<font-awesome-icon
Expand Down Expand Up @@ -1442,20 +1443,32 @@ const inNorthernHemisphere = computed(() => selectedLocation.value.latitudeDeg >
const smallSize = computed(() => smAndDown.value);
const mobile = computed(() => smallSize.value && touchscreen);

const infoFraction = 34;
const infoSheetLocation = computed(() => smallSize.value ? "bottom" : "left");
const infoSheetHeight = computed(() => infoSheetLocation.value === "bottom" ? `${infoFraction}%` : "100%");
const infoSheetWidth = computed(() => infoSheetLocation.value === "bottom" ? "100%" : `${infoFraction}%`);
const infoTextHeight = computed(() => infoSheetLocation.value === "bottom" ? `calc(${infoFraction}vh - 25px)` : "calc(100vh - 25px)");
const infoSheetTransition = computed(() => infoSheetLocation.value === "bottom" ? "dialog-bottom-transition" : "slide-x-transition");

/* This lets us inject component data into element CSS */
const cssVars = computed(() => {
return {
"--accent-color": accentColor.value,
"--app-content-height": showTextSheet.value ? "66%" : "100%",
"--app-content-height": showTextSheet.value && infoSheetLocation.value === "bottom" ? `${100 - infoFraction}vh` : "100dvh",
"--app-content-width": showTextSheet.value && infoSheetLocation.value === "left" ? `${100 - infoFraction}vw` : "100dvw",
"--time-slider-width": `${daylightPercentage.value.toFixed(2)}%`,
"--time-slider-left": `${(100 * Math.min(1, dayFractionForTimestamp(startTime.value + selectedTimezoneOffset.value))).toFixed(2)}%`,
"--thumb-label-color": sunAlways.value === "down" ? NIGHTTIME : accentColor.value,
"--info-sheet-width": infoSheetWidth.value,
"--info-sheet-height": infoSheetHeight.value,
"--info-text-height": infoTextHeight.value,
};
});

const daylightPercentage = computed(() => 100 * Math.min(1, dayFractionForTimestamp(endTime.value - startTime.value)));



/**
Computed flags that control whether the relevant dialogs display.
The `sheet` data member stores which sheet is open, so these are just
Expand Down Expand Up @@ -1929,11 +1942,12 @@ body {

#main-content {
position: fixed;
width: 100%;
right: 0;
width: var(--app-content-width);
height: var(--app-content-height);
overflow: hidden;

transition: height 0.1s ease-in-out;
transition: all 0.3s ease-in-out;
}

#app {
Expand Down Expand Up @@ -2088,13 +2102,28 @@ video {
z-index: 10;
}

.bottom-sheet {
.info-sheet {
.v-overlay__content {
align-self: flex-end;
padding: 0 !important;
margin: 0 !important;
max-width: 100% !important;
height: 34%;
height: var(--info-sheet-height) !important;
width: var(--info-sheet-width) !important;
}

&.info-sheet-left .v-overlay__content {
position: absolute;
top: 0;
left: 0;
max-height: 100%;
& .v-card, & .v-card .v-window {
height: 100%;
}

& .info-tabs h3 {
font-size: 10pt;
}
}

#tabs {
Expand All @@ -2103,7 +2132,7 @@ video {
}

.info-text {
height: 33vh;
height: var(--info-text-height);
padding-bottom: 25px;

& a {
Expand Down Expand Up @@ -2303,6 +2332,10 @@ video {
}
}

.control-icon {
pointer-events: auto;
}

#bottom-content {
width: 75%;
display: flex;
Expand Down