Skip to content
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

Fix bottom content formatting #6

Merged
merged 1 commit into from
Feb 18, 2024
Merged

Fix bottom content formatting #6

Show file tree
Hide file tree
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
245 changes: 51 additions & 194 deletions src/M101SN.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,6 +146,7 @@
@deselect="onItemDeselected"
/>
</div>

<div class="bottom-content">

<div id="tools">
Expand All @@ -158,24 +159,24 @@
@click="chartVisible = !chartVisible"
@keyup.enter="chartVisible = !chartVisible"
:color="accentColor"
>
<font-awesome-icon
id="chart-icon"
class="control-icon"
:icon="chartVisible ? 'circle-xmark' : 'chart-line'"
size="xl"
/>
>
<font-awesome-icon
id="chart-icon"
class="control-icon"
:icon="chartVisible ? 'circle-xmark' : 'chart-line'"
size="xl"
/>
<span id="button-text">{{ chartVisible ? 'Hide' : 'Show' }} supernova brightness graph</span>
</v-btn>
</div>
<div id="chart-container" v-show="chartVisible" >
<div id="chart-title">
Supernova Light Curve (Change in Brightness Over Time)
</div>
<div id="yaxis-text">
Supernova <br />
Brightness
</div>
<div id="chart-container" v-show="chartVisible" >
<div id="chart-title">
Supernova Light Curve (Change in Brightness Over Time)
</div>
<div id="yaxis-text">
Supernova <br />
Brightness
</div>
<!-- :lineData="dates.map(d => {return {x: d, y: 12.5}})" -->
<chartjs-scatter
reversedY
Expand Down Expand Up @@ -216,10 +217,8 @@

<div id="xaxis-text">
Time
</div>

</div>
</div>

<span class="tool-container">
<icon-button
Expand All @@ -233,16 +232,16 @@
playingImagePath = false; // don't reverse the order of this line and previous or logic will break.
}"
>
<template #button>
<span class="play-icon-text">Watch over time&nbsp;</span>
<font-awesome-icon
id="play-pause-icon"
class="control-icon"
:icon="!(playing || playingImagePath) ? 'play' : 'pause'"
size="sm"
></font-awesome-icon>
</template>
</icon-button>
<template #button>
<span class="play-icon-text">Watch over time&nbsp;</span>
<font-awesome-icon
id="play-pause-icon"
class="control-icon"
:icon="!(playing || playingImagePath) ? 'play' : 'pause'"
size="sm"
></font-awesome-icon>
</template>
</icon-button>
<vue-slider
adsorb
included
Expand All @@ -261,120 +260,18 @@
:tooltip-formatter="(v: number) =>
toDateString(new Date(v))
"
>
<template v-slot:mark="{ pos, value }">
<div
:class="[{ 'mark-line': imageDates.includes(value) }]"
:style="{ left: `${pos}%` }">
</div>
</template>
</vue-slider>
</span>
>
<template v-slot:mark="{ pos, value }">
<div
:class="[{ 'mark-line': imageDates.includes(value) }]"
:style="{ left: `${pos}%` }">
</div>
</template>
</vue-slider>
</span>
</div>

<div
v-if="false"
id="controls"
class="control-icon-wrapper"
>
<div id="controls-top-row">
<font-awesome-icon
size="lg"
class="ma-1"
:color="accentColor"
:icon="showControls ? `chevron-down` : `gear`"
@click="showControls = !showControls"
@keyup.enter="showControls = !showControls"
tabindex="0"
/>
</div>
<transition-expand>
<div v-if="showControls" class="controls-content">
<v-btn
block
:color="accentColor"
@click="() => {
playing = !(playing || playingImagePath);;
playingImagePath = !playingImagePath;
}"
>
{{ `${playingImagePath ? 'Stop' : 'Play'} supernova images` }}
</v-btn>

<!-- <v-btn
block
:color="accentColor"
@click="centerView"
@keyup.enter="centerView"
class="mb-2"
>
Center the Pinwheel
</v-btn> -->

<toggle
:show="false"
:color="accentColor"
:item="showAltAzGrid"
label="Grid"
@toggle="showAltAzGrid = $event"
/>
<toggle
:color="accentColor"
:item="showConstellations"
label="Constellations"
@toggle="showConstellations = $event"
/>
<toggle
:show="false"
:color="accentColor"
:item="showHorizon"
label="Horizon"
@toggle="showHorizon = $event"
/>
<div
v-if="false"
id="time-picker-wrapper">
<div
style="color:white;"
class="mt-3"
>
Selected location's time:
</div>
<date-picker
v-if="false"
dark
time-picker
enable-seconds
:is-24="false"
v-model="timeOfDay"
:clearable="false"
close-on-scroll
class="mb-4 mt-1"
>
<template #input-icon>
<font-awesome-icon
icon="clock"
class="mx-2"
:color="accentColor"
></font-awesome-icon>
</template>
</date-picker>
</div>
<!--
<v-btn
block
:color="accentColor"
@click="setToFirstCometImage"
>
Best view for comet images
</v-btn> -->
</div>
</transition-expand>
</div>

</div>

<div class="opacity-slider-wrapper">
<div class="opacity-slider-wrapper">
<vue-slider
v-if="!smallSize"
class="opacity-slider"
Expand All @@ -389,11 +286,13 @@
@change="(opacity: number) => currentLayer?.set_opacity(opacity)"
>
<span>Change image opacity</span>
</vue-slider>
</vue-slider>
</div>

<story-credits class="bottom-credits" v-if="!smallSize"></story-credits>

</div>

<story-credits class="bottom-credits"></story-credits>

<v-dialog
id="video-container"
v-model="showVideoSheet"
Expand Down Expand Up @@ -836,7 +735,7 @@ export default defineComponent({
data() {
const now = new Date();
return {
showSplashScreen: true,
showSplashScreen: true, // ACTION NEEDED - reset to true
imagesetLayers: {} as Record<string, ImageSetLayer>,
layersLoaded: false,
positionSet: false,
Expand Down Expand Up @@ -912,7 +811,6 @@ export default defineComponent({
showResetTooltip: false,
showConstellationTooltip: false,
showLocationSelector: false,
showControls: false,
tab: 0,
chartVisible: false,
revealAnswer: false,
Expand Down Expand Up @@ -991,8 +889,6 @@ export default defineComponent({

this.setTime(this.dateTime);

this.showControls = !this.mobile;

Promise.all(layerPromises).then(() => {
this.layersLoaded = true;

Expand Down Expand Up @@ -2719,6 +2615,7 @@ body {
div.opacity-slider-wrapper {
display:flex;
position:absolute;

bottom: 1rem;
left: 1rem;
width: 200px;
Expand All @@ -2741,19 +2638,13 @@ div.opacity-slider-wrapper {
display: flex;
flex-direction: column;
position: absolute;
bottom: 4rem;
bottom: 1rem;
right: 1rem;
width: calc(100% - 2rem);
pointer-events: none;
align-items: center;
gap: 5px;
}

.bottom-credits {
position: absolute;
bottom: 1rem;
right: 1rem;
}

div#main-content > div {
content: "";
Expand Down Expand Up @@ -2813,41 +2704,10 @@ div#main-content > div {
width: ~"min(160px, 35vw)";
}

#controls {
position: absolute;
bottom: 8rem;
z-index: 10;
background: black;
padding: 10px;
border-radius: 10px;
border: solid 1px var(--accent-color);
display: flex;
flex-direction: column;
align-self: flex-end;
margin-right: 1rem;
margin-bottom: 1rem;
pointer-events: auto;

.v-label {
// color: var(--accent-color);
color: white;
opacity: 1;
}

#controls-top-row {
margin-right: 0px;
margin-left: auto;
}
}

.dp__select {
color: var(--accent-color) !important;
}

#show-controls {
color: var(--accent-color);
}

.v-selection-control--focus-visible .v-selection-control__input::before {
opacity: 0.25;
}
Expand Down Expand Up @@ -3068,7 +2928,9 @@ video, #info-video {

#slider {
width: 100% !important;
margin: 5px 30px;
margin-top: 1rem;
margin-bottom: 2rem;
margin-inline: 6rem;
// display: none;
// opacity: 0;

Expand All @@ -3089,7 +2951,9 @@ video, #info-video {

#opacity-slider {
width: 100% !important;
margin: 5px 30px;
margin-inline: 30px;
margin-top: 5px;
margin-bottom: 10px;
}

.vue-slider-process {
Expand Down Expand Up @@ -3287,13 +3151,6 @@ video, #info-video {

}

#overlays {
margin: 5px;
position: absolute;
bottom: 0.5rem;
left: 0.5rem;
}

ul.text-list {
margin-left:1em;
margin-top: 0.5em;
Expand Down
Loading
Loading