side scrolling tv list

daleinen7 · Oct 12, 2021 · f237fc2 · f237fc2
1 parent 6caf010
commit f237fc2
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 41 deletions.
diff --git 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
@@ -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>
   );
 }