From a5d038197b7a31c2d354fed242985cb604c4f8a8 Mon Sep 17 00:00:00 2001
From: Daniel Karbach <daniel.karbach@localhorst.tv>
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 }) =>
-	<div className="episode-channel">
+	<div className="episode-channel text-nowrap">
 		<Button
 			href={channel.stream_link}
 			rel="noreferer"
diff --git a/resources/js/components/episodes/Crew.js b/resources/js/components/episodes/Crew.js
index e645edb..2fe58fd 100644
--- a/resources/js/components/episodes/Crew.js
+++ b/resources/js/components/episodes/Crew.js
@@ -48,8 +48,8 @@ const Crew = ({ episode, onApply, user }) => {
 
 	return <Row className="episode-crew">
 		{showCommentators ?
-			<Col md>
-				<div className="fs-5">
+			<Col xs={6} md>
+				<div className="fs-6 fs-md-5">
 					<Icon.MICROPHONE className="ms-3 me-2" title="" />
 					{t('episodes.commentary')}
 				</div>
@@ -83,8 +83,8 @@ const Crew = ({ episode, onApply, user }) => {
 			</Col>
 		: null}
 		{showTracker ?
-			<Col md>
-				<div className="fs-5">
+			<Col xs={6} md>
+				<div className="fs-6 fs-md-5">
 					<Icon.MOUSE className="ms-3 me-2" title="" />
 					{t('episodes.tracking')}
 				</div>
@@ -118,8 +118,8 @@ const Crew = ({ episode, onApply, user }) => {
 			</Col>
 		: null}
 		{techies.length ?
-			<Col md>
-				<div className="fs-5">
+			<Col xs={6} md>
+				<div className="fs-6 fs-md-5">
 					<Icon.MONITOR className="ms-3 me-2" title="" />
 					{t('episodes.setup')}
 				</div>
diff --git a/resources/js/components/episodes/Item.js b/resources/js/components/episodes/Item.js
index 03cb6fe..adb7109 100644
--- a/resources/js/components/episodes/Item.js
+++ b/resources/js/components/episodes/Item.js
@@ -18,8 +18,6 @@ const Item = ({ episode, onAddRestream, onApply, onEditRestream, user }) => {
 
 	const classNames = [
 		'episodes-item',
-		'd-flex',
-		'align-items-stretch',
 		'my-3',
 		'p-2',
 		'border',
@@ -42,47 +40,47 @@ const Item = ({ episode, onAddRestream, onApply, onEditRestream, user }) => {
 	const hasPlayers = episode.players && episode.players.length;
 
 	return <div className={classNames.join(' ')} style={style}>
-		<div className="episode-start me-3 fs-4 text-end">
-			{t('schedule.startTime', { date: new Date(episode.start) })}
-		</div>
-		<div className="d-flex flex-column flex-fill">
-			<div className="d-flex align-items-start justify-content-between">
-				<div>
-					{episode.title || episode.event ?
-						<div className="episode-title fs-4">
-							{episode.title || episode.event.title}
-						</div>
-					: null}
-					{episode.comment ?
-						<div className="episode-comment">
-							{episode.comment}
-						</div>
-					: null}
-				</div>
-				<div className="episode-channel-links text-end">
-					{hasChannels ?
-						<Channels
-							channels={episode.channels}
-							episode={episode}
-							onEditRestream={onEditRestream}
-						/>
-					: null}
-					{!hasChannels && hasPlayers ?
-						<MultiLink players={episode.players} />
-					: null}
-					{onAddRestream && canRestreamEpisode(user, episode) ?
-						<div>
-							<Button
-								onClick={() => onAddRestream(episode)}
-								title={t('episodes.addRestream')}
-								variant="outline-secondary"
-							>
-								<Icon.ADD title="" />
-							</Button>
-						</div>
-					: null}
-				</div>
+		<div className="d-flex align-items-stretch">
+			<div className="episode-start me-3 fs-5 fs-md-4 text-end">
+				{t('schedule.startTime', { date: new Date(episode.start) })}
 			</div>
+			<div className="episode-titlebar">
+				{episode.title || episode.event ?
+					<div className="episode-title fs-5 fs-md-4">
+						{episode.title || episode.event.title}
+					</div>
+				: null}
+				{episode.comment ?
+					<div className="episode-comment">
+						{episode.comment}
+					</div>
+				: null}
+			</div>
+			<div className="episode-channel-links ms-auto text-end">
+				{hasChannels ?
+					<Channels
+						channels={episode.channels}
+						episode={episode}
+						onEditRestream={onEditRestream}
+					/>
+				: null}
+				{!hasChannels && hasPlayers ?
+					<MultiLink players={episode.players} />
+				: null}
+				{onAddRestream && canRestreamEpisode(user, episode) ?
+					<div>
+						<Button
+							onClick={() => onAddRestream(episode)}
+							title={t('episodes.addRestream')}
+							variant="outline-secondary"
+						>
+							<Icon.ADD title="" />
+						</Button>
+					</div>
+				: null}
+			</div>
+		</div>
+		<div className="episode-body d-flex flex-column flex-fill">
 			{hasPlayers ?
 				<Players players={episode.players} />
 			: 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"
 		>
 			<img alt="" src={getAvatarUrl(player.user)} />
-			<span className="text-light fs-4">{getName(player)}</span>
+			<span className="text-light fs-5 fs-md-4">{getName(player)}</span>
 		</Button>
 	</div>;
 };
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