schedule responsive style

diff --git a/resources/js/components/episodes/Channel.js b/resources/js/components/episodes/Channel.js
index 5b6c5e26e007dc67f2bc2fa4f2e3fc065b96ee19..d0360bd58dc4648fb83521a30940650ac9a915e6 100644 (file)
--- 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 e645edbba17108a5344688ef60be85a9ce5d2a90..2fe58fd8befd1bc14b030b4b098ab8ef76e14279 100644 (file)
--- 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 03cb6febd827301ff7d0a8442a11044b3e95f23a..adb710916a088ba8730f89912ba3e643918a06d5 100644 (file)
--- 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 4fdc591dff098e28e407513b6a822e694b7f27a0..3fc285fe422e2f4decd48d17cbfb3eebb3e1f15c 100644 (file)
--- 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 bcc81c8faf079a5be1d1dc9799f8a26790752b7f..62ec344c475cc1f8d3f69246d6320317624b0457 100644 (file)
--- 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 45582a06fd8b99746fde2861c1db6a2a0b870f8d..eed191331be3d897508843e7313e232d517100b9 100644 (file)
--- 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;