Merge pull request #64 from daleinen7/tv-sidescroll

side scrolling tv list
daleinen7 · Oct 13, 2021 · a699452 · a699452
2 parents b46cb4b + bc21f8e
commit a699452
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 42 deletions.
diff --git a/src/components/StoriesList/StoriesList.module.scss b/src/components/StoriesList/StoriesList.module.scss
@@ -10,11 +10,18 @@
 }
 
 .stories_list {
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: center;
-  max-width: 1200px;
-  margin: 0 auto;
+  width: 100%;
+  ul {
+    overflow-x: auto;
+    display: flex;
+    flex-flow: row;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  li {
+    width: 390px;
+  }
 
   a {
     display: flex;
@@ -24,7 +31,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
@@ -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>
   );
 }
diff --git a/static/admin/config.yml b/static/admin/config.yml
@@ -11,14 +11,20 @@ public_folder: /img
 
 collections:
   - name: "story"
+
     label: "Story"
     extension: "json"
     create: true
     folder: "static/stories"
     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"