From f237fc224171084501d84d69ba2ecf2f586307a4 Mon Sep 17 00:00:00 2001
From: daleinen7 <daleinen@gmail.com>
Date: Mon, 11 Oct 2021 22:42:52 -0500
Subject: [PATCH 1/2] side scrolling tv list

---
 .../StoriesList/StoriesList.module.scss       | 23 ++++--
 src/components/StoriesList/index.jsx          | 72 ++++++++++---------
 2 files changed, 54 insertions(+), 41 deletions(-)

diff --git a/src/components/StoriesList/StoriesList.module.scss b/src/components/StoriesList/StoriesList.module.scss
index 7debf19..9fb5302 100644
--- a/src/components/StoriesList/StoriesList.module.scss
+++ b/src/components/StoriesList/StoriesList.module.scss
@@ -10,11 +10,21 @@
 }
 
 .stories_list {
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: center;
-  max-width: 1200px;
-  margin: 0 auto;
+  overflow-x: auto;
+  width: 100%;
+  ul {
+    overflow-x: auto;
+    width: 100%;
+    display: flex;
+    flex-flow: row;
+    justify-content: center;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  li {
+    width: 390px;
+  }
 
   a {
     display: flex;
@@ -24,7 +34,8 @@
     text-decoration: none;
     background: $blue;
     border-radius: 36px;
-    max-width: 350px;
+    width: 350px;
+
     height: 330px;
     margin: 20px;
     padding: 20px;
diff --git a/src/components/StoriesList/index.jsx b/src/components/StoriesList/index.jsx
index 337a3db..42d82be 100644
--- a/src/components/StoriesList/index.jsx
+++ b/src/components/StoriesList/index.jsx
@@ -8,43 +8,45 @@ export default function StoriesList({ stories, images }) {
   return (
     <section className={styles.stories}>
       <Arrow color={"white"} />
-      <ul className={styles.stories_list}>
-        {stories.map((story, index) => {
-          // find element in the images array that has the first image of the story being mapped over
-          const image = images.find((ele) => {
-            return ele.relativePath === story.title_card?.slice(5);
-          });
-          return (
-            <li key={index}>
-              <Link to={story.parent.name}>
-                <div className={styles.screen_and_controls}>
-                  <div className={styles.screenContainer}>
-                    <GatsbyImage
-                      className={styles.gatsby_wrapper}
-                      image={image?.childrenImageSharp[0].gatsbyImageData}
-                      alt={story.title}
-                    />
-                    <div className={styles.screen}></div>
-                  </div>
-                  <div className={styles.controls}>
-                    <div className={styles.dial}></div>
-                    <div className={styles.dial}></div>
-                    <div className={styles.led_container}>
-                      <div className={styles.led}></div>
-                      <div className={styles.led}></div>
-                      <div className={styles.led}></div>
+      <div className={styles.stories_list}>
+        <ul>
+          {stories.map((story, index) => {
+            // find element in the images array that has the first image of the story being mapped over
+            const image = images.find((ele) => {
+              return ele.relativePath === story.title_card?.slice(5);
+            });
+            return (
+              <li key={index}>
+                <Link to={story.parent.name}>
+                  <div className={styles.screen_and_controls}>
+                    <div className={styles.screenContainer}>
+                      <GatsbyImage
+                        className={styles.gatsby_wrapper}
+                        image={image?.childrenImageSharp[0].gatsbyImageData}
+                        alt={story.title}
+                      />
+                      <div className={styles.screen}></div>
+                    </div>
+                    <div className={styles.controls}>
+                      <div className={styles.dial}></div>
+                      <div className={styles.dial}></div>
+                      <div className={styles.led_container}>
+                        <div className={styles.led}></div>
+                        <div className={styles.led}></div>
+                        <div className={styles.led}></div>
+                      </div>
+                      <div className={styles.vent}></div>
+                      <div className={styles.vent}></div>
+                      <div className={styles.vent}></div>
                     </div>
-                    <div className={styles.vent}></div>
-                    <div className={styles.vent}></div>
-                    <div className={styles.vent}></div>
                   </div>
-                </div>
-                <div className={styles.title}>{story.title}</div>
-              </Link>
-            </li>
-          );
-        })}
-      </ul>
+                  <div className={styles.title}>{story.title}</div>
+                </Link>
+              </li>
+            );
+          })}
+        </ul>
+      </div>
     </section>
   );
 }

From bc21f8ec2f0d1e79990521b00cb8c72d3a760c6d Mon Sep 17 00:00:00 2001
From: daleinen7 <daleinen@gmail.com>
Date: Tue, 12 Oct 2021 18:52:16 -0500
Subject: [PATCH 2/2] justify tvs to flex-start

---
 src/components/StoriesList/StoriesList.module.scss | 3 ---
 static/admin/config.yml                            | 8 +++++++-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/StoriesList/StoriesList.module.scss b/src/components/StoriesList/StoriesList.module.scss
index 9fb5302..566b785 100644
--- a/src/components/StoriesList/StoriesList.module.scss
+++ b/src/components/StoriesList/StoriesList.module.scss
@@ -10,14 +10,11 @@
 }
 
 .stories_list {
-  overflow-x: auto;
   width: 100%;
   ul {
     overflow-x: auto;
-    width: 100%;
     display: flex;
     flex-flow: row;
-    justify-content: center;
     max-width: 1200px;
     margin: 0 auto;
   }
diff --git a/static/admin/config.yml b/static/admin/config.yml
index b958f8a..7d140d3 100644
--- a/static/admin/config.yml
+++ b/static/admin/config.yml
@@ -11,6 +11,7 @@ public_folder: /img
 
 collections:
   - name: "story"
+
     label: "Story"
     extension: "json"
     create: true
@@ -18,7 +19,12 @@ collections:
     editor:
       preview: false
     fields:
-      - { label: "Title", name: "title", widget: "string" }
+      - {
+          label: "Title",
+          name: "title",
+          widget: "string",
+          pattern: ["^.{0,10}$", "Must have at least 20 characters"],
+        }
       - { label: "Level", name: "level", widget: "number" }
       - { label: "Title Card", name: "title-card", widget: "image" }
       - label: "Authors"