sticky schedule group headings

diff --git a/resources/js/components/episodes/List.js b/resources/js/components/episodes/List.js
index a28fa4848968b9e2fa2a455cec44c55b7b74a8c9..6f46e75add208811a83362e9521fb041ca4ab5bd 100644 (file)
--- a/resources/js/components/episodes/List.js
+++ b/resources/js/components/episodes/List.js
@@ -18,7 +18,9 @@ const List = ({ episodes, onAddRestream, onEditRestream }) => {
 
        return <div className="episodes-list">
                {Object.entries(grouped).map(([day, group]) => <div key={day}>
-                       <h2 className="text-center my-5">{moment(day).format('dddd, L')}</h2>
+                       <h2 className="text-center episodes-group-heading">
+                               {moment(day).format('dddd, L')}
+                       </h2>
                        {group.map(episode =>
                                <Item
                                        episode={episode}

diff --git a/resources/sass/episodes.scss b/resources/sass/episodes.scss
index d4d686b6950241615b10a587686f26e3517d63bb..33722576817344250a27a469df59fb66034894f0 100644 (file)
--- a/resources/sass/episodes.scss
+++ b/resources/sass/episodes.scss
@@ -1,3 +1,13 @@
+.episodes-group-heading {
+       position: sticky;
+       top: 0;
+       margin: 2rem 0 0 0;
+       padding: 1rem 0 3rem 0;
+       background: $body-bg;
+       background: linear-gradient(180deg, $body-bg, $body-bg 65%, transparent);
+       z-index: 1;
+}
+
 .episodes-item {
        &.is-active {
                border-color: $success !important;