svelte5 migration, formatting cleanup
This commit is contained in:
@@ -1,215 +1,204 @@
|
||||
<script>
|
||||
import { currentStream, currentSongIndex } from '$lib/stores.js';
|
||||
import { shorthandCode, formatTrackTime, formatDate } from '$lib/utils.js';
|
||||
import { jumpToTrack } from './Player.svelte';
|
||||
import { Carta } from 'carta-md';
|
||||
import DOMPurify from 'isomorphic-dompurify';
|
||||
import { currentStream, currentSongIndex } from '$lib/stores.js';
|
||||
import { shorthandCode, formatTrackTime, formatDate } from '$lib/utils.js';
|
||||
import { jumpToTrack } from './Player.svelte';
|
||||
import { Carta } from 'carta-md';
|
||||
import DOMPurify from 'isomorphic-dompurify';
|
||||
|
||||
const carta = new Carta({
|
||||
sanitizer: DOMPurify.sanitize
|
||||
});
|
||||
const carta = new Carta({
|
||||
sanitizer: DOMPurify.sanitize
|
||||
});
|
||||
|
||||
$: formattedStreamDate = formatDate($currentStream.stream_date);
|
||||
let formattedStreamDate = $derived(formatDate($currentStream.stream_date));
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{formattedStreamDate} | apt-get's auditorium</title>
|
||||
<title>{formattedStreamDate} | apt-get's auditorium</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="stream-information">
|
||||
<div class="stream-information-flexbox">
|
||||
<h3 class="stream-id">ID: {shorthandCode($currentStream.id)}</h3>
|
||||
<h1 class="stream-date">{formattedStreamDate}</h1>
|
||||
</div>
|
||||
<h5 class="stream-tags"><u>Tags</u>: {$currentStream.tags.join(', ')}</h5>
|
||||
<div class="stream-information-flexbox">
|
||||
<h3 class="stream-id">ID: {shorthandCode($currentStream.id)}</h3>
|
||||
<h1 class="stream-date">{formattedStreamDate}</h1>
|
||||
</div>
|
||||
<h5 class="stream-tags"><u>Tags</u>: {$currentStream.tags.join(', ')}</h5>
|
||||
</div>
|
||||
|
||||
<div class="description-bubble">
|
||||
{@html carta.renderSSR($currentStream.description || 'No description available.')}
|
||||
{@html carta.renderSSR($currentStream.description || 'No description available.')}
|
||||
</div>
|
||||
|
||||
<div id="table-container">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr><th>Timestamp</th><th>Artist</th><th>Title</th></tr>
|
||||
{#each $currentStream.tracks as track, i}
|
||||
<tr class:current={i == $currentSongIndex}>
|
||||
<td class="timestamp-field"
|
||||
><div class="timestamp-field-flex">
|
||||
{formatTrackTime(track[0])}
|
||||
<button
|
||||
on:click={() => jumpToTrack(track[0])}
|
||||
class="material-icons"
|
||||
style="padding: 4px 6px; margin-top: -4px; margin-bottom: -4px; margin-right: -6px"
|
||||
>fast_forward</button
|
||||
>
|
||||
</div>
|
||||
</td>
|
||||
<td class="artist-field">{track[1]}</td>
|
||||
<td class="track-field">{track[2]}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr><th>Timestamp</th><th>Artist</th><th>Title</th></tr>
|
||||
{#each $currentStream.tracks as track, i}
|
||||
<tr class:current={i == $currentSongIndex}>
|
||||
<td class="timestamp-field"
|
||||
><div class="timestamp-field-flex">
|
||||
{formatTrackTime(track[0])}
|
||||
<button
|
||||
onclick={() => jumpToTrack(track[0])}
|
||||
class="material-icons"
|
||||
style="padding: 4px 6px; margin-top: -4px; margin-bottom: -4px; margin-right: -6px"
|
||||
>fast_forward</button
|
||||
>
|
||||
</div>
|
||||
</td>
|
||||
<td class="artist-field">{track[1]}</td>
|
||||
<td class="track-field">{track[2]}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.stream-information {
|
||||
width: 70%;
|
||||
padding: 1px;
|
||||
margin-top: 2%;
|
||||
margin-left: 3%;
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
}
|
||||
.stream-information {
|
||||
width: 70%;
|
||||
padding: 1px;
|
||||
margin-top: 2%;
|
||||
margin-left: 3%;
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.stream-information-flexbox {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin-bottom: calc(1.17em - 4px); /* autism */
|
||||
}
|
||||
.stream-information-flexbox {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin-bottom: calc(1.17em - 4px); /* autism */
|
||||
}
|
||||
|
||||
#table-container {
|
||||
margin-left: 3%;
|
||||
}
|
||||
#table-container {
|
||||
margin-left: 3%;
|
||||
}
|
||||
|
||||
table {
|
||||
border-spacing: 0px;
|
||||
}
|
||||
table {
|
||||
border-spacing: 0px;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
}
|
||||
th {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 3px;
|
||||
line-height: 1.15;
|
||||
}
|
||||
th,
|
||||
td {
|
||||
padding: 3px;
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.timestamp-field {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.timestamp-field {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.timestamp-field-flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.timestamp-field-flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.artist-field {
|
||||
padding-right: 2em;
|
||||
}
|
||||
.artist-field {
|
||||
padding-right: 2em;
|
||||
}
|
||||
|
||||
.stream-date {
|
||||
font-size: x-large;
|
||||
font-family: 'Montserrat';
|
||||
margin-right: 3%;
|
||||
margin-bottom: 0;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.stream-date {
|
||||
font-size: x-large;
|
||||
font-family: 'Montserrat';
|
||||
margin-right: 3%;
|
||||
margin-bottom: 0;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.stream-tags {
|
||||
margin: 0;
|
||||
font-family: Times New Roman;
|
||||
}
|
||||
.stream-id {
|
||||
font-family: 'Montserrat';
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.stream-tags {
|
||||
margin: 0;
|
||||
font-family: Times New Roman;
|
||||
}
|
||||
.stream-id {
|
||||
font-family: 'Montserrat';
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.current {
|
||||
background-color: rgba(128, 128, 128, 0.8);
|
||||
}
|
||||
.current {
|
||||
background-color: rgba(128, 128, 128, 0.8);
|
||||
}
|
||||
|
||||
.description-bubble {
|
||||
position: relative;
|
||||
background-color: rgba(255, 255, 255, 0.75);
|
||||
border: 1px solid #ccc;
|
||||
color: black;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
margin-left: 3%;
|
||||
border-radius: 5px;
|
||||
max-width: 70%;
|
||||
width: fit-content;
|
||||
min-width: 50%;
|
||||
font-family: Verdana;
|
||||
font-size: small;
|
||||
}
|
||||
.description-bubble {
|
||||
position: relative;
|
||||
background-color: rgba(255, 255, 255, 0.75);
|
||||
border: 1px solid #ccc;
|
||||
color: black;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
margin-left: 3%;
|
||||
border-radius: 5px;
|
||||
max-width: 70%;
|
||||
width: fit-content;
|
||||
min-width: 50%;
|
||||
font-family: Verdana;
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
.description-bubble :global(:first-child) {
|
||||
margin-top: 0px;
|
||||
}
|
||||
.description-bubble :global(:first-child) {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.description-bubble :global(:last-child) {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.description-bubble :global(:last-child) {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.description-bubble::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-style: solid;
|
||||
border-width: 10px 0 10px 10px;
|
||||
border-color: transparent transparent transparent #ccc;
|
||||
top: 8px;
|
||||
right: -10px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
.description-bubble::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border-style: solid;
|
||||
border-width: 10px 0 10px 10px;
|
||||
border-color: transparent transparent transparent #ccc;
|
||||
top: 8px;
|
||||
right: -10px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
font-size: 16px;
|
||||
margin-bottom: 0px;
|
||||
color: white;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
border: none;
|
||||
opacity: 0;
|
||||
}
|
||||
.material-icons {
|
||||
font-size: 16px;
|
||||
margin-bottom: 0px;
|
||||
color: white;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
border: none;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
tr:hover .material-icons {
|
||||
opacity: 0.5;
|
||||
}
|
||||
tr:hover .material-icons {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
tr:hover .material-icons:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
tr:hover .material-icons:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.material-icons::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
.material-icons::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
opacity: 0.75;
|
||||
border: 1px solid white;
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
@media (max-width: 575px) {
|
||||
.material-icons {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
opacity: 1;
|
||||
border: 1px solid white;
|
||||
}
|
||||
.stream-id {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
@media (max-width: 575px) {
|
||||
.material-icons {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.stream-information {
|
||||
width: initial;
|
||||
}
|
||||
.description-bubble {
|
||||
max-width: initial;
|
||||
}
|
||||
|
||||
.stream-id {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.stream-information {
|
||||
width: initial;
|
||||
}
|
||||
.description-bubble {
|
||||
max-width: initial;
|
||||
}
|
||||
|
||||
.description-bubble::after {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
.description-bubble::after {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user