From a5d038197b7a31c2d354fed242985cb604c4f8a8 Mon Sep 17 00:00:00 2001 From: Daniel Karbach Date: Sun, 20 Aug 2023 16:07:41 +0200 Subject: [PATCH] schedule responsive style --- resources/js/components/episodes/Channel.js | 2 +- resources/js/components/episodes/Crew.js | 12 +-- resources/js/components/episodes/Item.js | 82 ++++++++++----------- resources/js/components/episodes/Player.js | 2 +- resources/sass/bootstrap.scss | 4 +- resources/sass/episodes.scss | 10 +++ 6 files changed, 61 insertions(+), 51 deletions(-) diff --git a/resources/js/components/episodes/Channel.js b/resources/js/components/episodes/Channel.js index 5b6c5e2..d0360bd 100644 --- a/resources/js/components/episodes/Channel.js +++ b/resources/js/components/episodes/Channel.js @@ -7,7 +7,7 @@ import { mayEditRestream } from '../../helpers/permissions'; import { withUser } from '../../helpers/UserContext'; const Channel = ({ channel, episode, onEditRestream, user }) => -
+
-
- : null} -
+
+
+ {t('schedule.startTime', { date: new Date(episode.start) })}
+
+ {episode.title || episode.event ? +
+ {episode.title || episode.event.title} +
+ : null} + {episode.comment ? +
+ {episode.comment} +
+ : null} +
+
+ {hasChannels ? + + : null} + {!hasChannels && hasPlayers ? + + : null} + {onAddRestream && canRestreamEpisode(user, episode) ? +
+ +
+ : null} +
+
+
{hasPlayers ? : null} diff --git a/resources/js/components/episodes/Player.js b/resources/js/components/episodes/Player.js index 4fdc591..3fc285f 100644 --- a/resources/js/components/episodes/Player.js +++ b/resources/js/components/episodes/Player.js @@ -15,7 +15,7 @@ const Player = ({ player }) => { variant="outline-twitch" > - {getName(player)} + {getName(player)}
; }; diff --git a/resources/sass/bootstrap.scss b/resources/sass/bootstrap.scss index bcc81c8..62ec344 100644 --- a/resources/sass/bootstrap.scss +++ b/resources/sass/bootstrap.scss @@ -1,7 +1,7 @@ @import '~bootstrap/scss/functions'; - @import "~bootstrap/scss/variables"; @import "~bootstrap/scss/mixins"; +@import "~bootstrap/scss/utilities"; $body-bg: $gray-800; $body-color: $gray-200; @@ -30,4 +30,6 @@ $table-striped-color: $table-color; $theme-colors: map-merge($theme-colors, $custom-colors); +$utilities: map-merge($utilities, ("font-size": map-merge(map-get($utilities, "font-size"), (responsive: true)))); + @import '~bootstrap/scss/bootstrap'; diff --git a/resources/sass/episodes.scss b/resources/sass/episodes.scss index 45582a0..eed1913 100644 --- a/resources/sass/episodes.scss +++ b/resources/sass/episodes.scss @@ -22,6 +22,11 @@ .episode-start { width: 4rem; } + @include media-breakpoint-up(md) { + .episode-body { + margin-left: 5rem; + } + } .episode-channel-links > * { margin: 0.5ex 0; &:first-child { @@ -35,6 +40,11 @@ display: grid; grid-template-columns: 1fr 1fr; } + @include media-breakpoint-down(md) { + .episode-event { + margin-left: 5rem; + } + } .event-link { color: inherit; -- 2.39.2