Merge pull request #158 from ChtiJS/refactor/gallery

refactor(ui): move the gallery to CSS modules
ChtiJS · Dec 12, 2023 · dc070e5 · dc070e5
2 parents ccc6e6b + f108ebb
commit dc070e5
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 58 deletions.
diff --git a/src/components/gallery.module.scss b/src/components/gallery.module.scss
@@ -0,0 +1,54 @@
+@import '../layouts/variables.scss';
+
+.root {
+  clear: both;
+  background: var(--secondary);
+  padding: calc(var(--vRythm) / 2) calc(var(--gutter) / 2);
+}
+.root p {
+  text-align: center;
+  padding: calc(var(--vRythm) / 2) calc(var(--gutter) / 2);
+  margin: 0;
+  height: calc(var(--vRythm) * 22);
+  background: var(--light);
+}
+.root p img {
+  max-width: 100%;
+  height: 100%;
+  max-height: 100%;
+}
+.root ul {
+  display: flex;
+  justify-content: left;
+  flex-wrap: wrap;
+  margin: 0 0 0 calc(-0.5 * var(--gutter));
+  padding: 0;
+  overflow: hidden;
+}
+.root ul li {
+  display: block;
+  list-style-type: none;
+  text-align: center;
+  padding: calc(var(--vRythm) / 2) 0 0 calc(var(--gutter) / 2);
+}
+.root ul li a {
+  display: block;
+  height: calc(var(--vRythm) * 4);
+  width: calc(var(--column) * 2);
+  background: var(--light);
+}
+.root ul li img {
+  max-width: 100%;
+  max-height: 100%;
+  height: 100%;
+  cursor: pointer;
+}
+@media screen and (max-width: $CSS_BREAKPOINT_END_M) {
+  .root p {
+    height: calc(var(--vRythm) * 12);
+  }
+  .root ul li a {
+    height: calc(var(--vRythm) * 2);
+    width: calc(var(--column) * 1);
+  }
+}
diff --git a/src/components/gallery.tsx b/src/components/gallery.tsx
@@ -1,13 +1,13 @@
 import { useState } from 'react';
-import { CSS_BREAKPOINT_END_M } from '../utils/constants';
+import styles from './gallery.module.scss';
 import { publicRuntimeConfig } from '../utils/config';
 import type { MarkdownImageNode } from '../utils/markdown';
 
 const Gallery = ({ imagesNodes }: { imagesNodes: MarkdownImageNode[] }) => {
   const [selectedIndex, setSelectedIndex] = useState(0);
 
   return (
-    <div className="root">
+    <div className={styles.root}>
       <p>
         <img
           src={
@@ -40,61 +40,6 @@ const Gallery = ({ imagesNodes }: { imagesNodes: MarkdownImageNode[] }) => {
           </li>
         ))}
       </ul>
-
-      <style jsx>{`
-        .root {
-          clear: both;
-          background: var(--secondary);
-          padding: calc(var(--vRythm) / 2) calc(var(--gutter) / 2);
-        }
-        p {
-          text-align: center;
-          padding: calc(var(--vRythm) / 2) calc(var(--gutter) / 2);
-          margin: 0;
-          height: calc(var(--vRythm) * 22);
-          background: var(--light);
-        }
-        p img {
-          max-width: 100%;
-          height: 100%;
-          max-height: 100%;
-        }
-        ul {
-          display: flex;
-          justify-content: left;
-          flex-wrap: wrap;
-          margin: 0 0 0 calc(-0.5 * var(--gutter));
-          padding: 0;
-          overflow: hidden;
-        }
-        ul li {
-          display: block;
-          list-style-type: none;
-          text-align: center;
-          padding: calc(var(--vRythm) / 2) 0 0 calc(var(--gutter) / 2);
-        }
-        ul li a {
-          display: block;
-          height: calc(var(--vRythm) * 4);
-          width: calc(var(--column) * 2);
-          background: var(--light);
-        }
-        ul li img {
-          max-width: 100%;
-          max-height: 100%;
-          height: 100%;
-          cursor: pointer;
-        }
-        @media screen and (max-width: ${CSS_BREAKPOINT_END_M}) {
-          p {
-            height: calc(var(--vRythm) * 12);
-          }
-          ul li a {
-            height: calc(var(--vRythm) * 2);
-            width: calc(var(--column) * 1);
-          }
-        }
-      `}</style>
     </div>
   );
 };

diff --git a/src/components/social.tsx b/src/components/social.tsx
@@ -9,7 +9,7 @@ export default function Social(): JSX.Element {
   return (
     <nav className={styles.root}>
       <ul>
-        <li className={`${styles.twitter}${styles.twitter}`}>
+        <li className={`${styles.twitter}`}>
           <a
             href={`https://twitter.com/${TWITTER_ACCOUNT}`}
             title="Suivre notre groupe sur Twitter"