refactor: Content component

add responsive design and break it down into smaller components. (i.e. `ContentBoxContainer` and `ContentBoxItem`.)
lumirlumir · Oct 29, 2024 · e92ff5e · e92ff5e
1 parent e68257e
commit e92ff5e
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 68 deletions.
diff --git a/src/components/article/Content/Content.jsx b/src/components/article/Content/Content.jsx
@@ -6,6 +6,19 @@ import { markdownToJsx } from '@/utils/markup';
 
 import styles from './Content.module.scss';
 
+function ContentBoxContainer({ children }) {
+  return <div className={styles['content-box-container']}>{children}</div>;
+}
+
+function ContentBoxItem({ icon, text }) {
+  return (
+    <span className={styles['content-box-item']}>
+      <span className={styles['react-icons']}>{icon}</span>
+      <span>{text}</span>
+    </span>
+  );
+}
+
 export default function Content({ markdownDocument }) {
   const {
     basename,
@@ -21,31 +34,26 @@ export default function Content({ markdownDocument }) {
           {markdownToJsx(description)}
         </div>
 
-        <div>
-          <span className={styles.date}>
-            <span className={styles['react-icons']}>
-              {MARKDOWN_DOCUMENT_DATA_META.created.reactIcons}
-            </span>
-            <span>{created}</span>
-          </span>
-          <span className={styles.date}>
-            <span className={styles['react-icons']}>
-              {MARKDOWN_DOCUMENT_DATA_META.updated.reactIcons}
-            </span>
-            <span>{updated}</span>
-          </span>
-        </div>
+        <ContentBoxContainer>
+          <ContentBoxItem
+            icon={MARKDOWN_DOCUMENT_DATA_META.created.reactIcons}
+            text={created}
+          />
+          <ContentBoxItem
+            icon={MARKDOWN_DOCUMENT_DATA_META.updated.reactIcons}
+            text={updated}
+          />
+        </ContentBoxContainer>
 
-        <div className={styles.tags}>
+        <ContentBoxContainer>
           {tags.map(tag => (
-            <span key={tag} className={styles.tag}>
-              <span className={styles['react-icons']}>
-                {MARKDOWN_DOCUMENT_DATA_META.tags.reactIcons}
-              </span>
-              <span>{MARKDOWN_DOCUMENT_DATA_TAG_META[tag].name.en}</span>
-            </span>
+            <ContentBoxItem
+              key={tag}
+              icon={MARKDOWN_DOCUMENT_DATA_META.tags.reactIcons}
+              text={MARKDOWN_DOCUMENT_DATA_TAG_META[tag].name.en}
+            />
           ))}
-        </div>
+        </ContentBoxContainer>
       </div>
     </Link>
   );

diff --git a/src/components/article/Content/Content.module.scss b/src/components/article/Content/Content.module.scss
@@ -1,3 +1,27 @@
+.content-box-container {
+  @include selector-scrollbar(0, x);
+
+  display: flex;
+  white-space: nowrap;
+}
+
+.content-box-item {
+  padding: $size-6 $size-10;
+  margin-right: $size-8;
+  font-size: $size-12;
+  letter-spacing: $size-letter-spacing-small;
+  border: $border-default;
+  border-radius: $size-border-radius;
+
+  > .react-icons {
+    padding-right: $size-4;
+  }
+
+  @include screen(sm) {
+    font-size: $size-14;
+  }
+}
+
 .content {
   @include selector-hover-default;
 
@@ -6,69 +30,47 @@
   padding: $size-16 $size-24;
   margin-bottom: $size-16;
   background-color: var(--color-bg-default);
-  border: 1px solid var(--color-border-default);
+  border: $border-default;
   border-radius: $size-border-radius;
 
   > div {
-    margin-bottom: 14px;
-  }
-
-  .react-icons {
-    padding-right: 4px;
+    margin-bottom: $size-8;
   }
 
   .title {
-    display: -webkit-box; // ellipsis(...)
-    overflow: hidden; // ellipsis(...)
-    font-size: 28px;
+    @include props-ellipsis(3);
+
+    font-size: $size-24;
     font-weight: $text-weight-semibold;
-    -webkit-line-clamp: 1; // ellipsis(...)
-    line-clamp: 1; // ellipsis(...)
-    letter-spacing: -1px;
-    -webkit-box-orient: vertical; // ellipsis(...)
+    letter-spacing: $size-letter-spacing-medium;
   }
 
   .description {
-    display: -webkit-box; // ellipsis(...)
-    overflow: hidden; // ellipsis(...)
-    color: var(--color-fg-muted);
-    -webkit-line-clamp: 2; // ellipsis(...)
-    line-clamp: 2; // ellipsis(...)
-    letter-spacing: -0.5px;
-    -webkit-box-orient: vertical; // ellipsis(...)
-  }
+    @include props-ellipsis(4);
 
-  .date {
-    padding: 4px 10px;
-    margin-right: 8px;
-    font-size: 14px;
-    letter-spacing: -0.5px;
-    border: 1px solid var(--color-border-default);
-    border-radius: $size-border-radius;
-  }
-
-  .tags {
-    margin-top: 8px;
+    font-size: $size-14;
+    color: var(--color-fg-muted);
+    letter-spacing: $size-letter-spacing-small;
   }
 
-  .tag {
-    padding: 4px 10px;
-    margin-right: 8px;
-    font-size: 14px;
-    letter-spacing: -0.5px;
-    border: 1px solid var(--color-border-default);
-    border-radius: $size-border-radius;
+  &:hover {
+    .title,
+    .description {
+      @include props-line-clamp(10);
+    }
   }
 
-  &:hover {
+  @include screen(sm) {
     .title {
-      -webkit-line-clamp: 10; // ellipsis(...), 10 is just a large number representation.
-      line-clamp: 10; // ellipsis(...)
+      @include props-line-clamp(1);
+
+      font-size: $size-28;
     }
 
     .description {
-      -webkit-line-clamp: 10; // ellipsis(...), 10 is just a large number representation.
-      line-clamp: 10; // ellipsis(...)
+      @include props-line-clamp(2);
+
+      font-size: $size-16;
     }
   }
 }
diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss
@@ -5,6 +5,19 @@
   justify-content: center;
 }
 
+@mixin props-line-clamp($line: 1) {
+  -webkit-line-clamp: $line;
+  line-clamp: $line;
+}
+
+@mixin props-ellipsis($line: 1) {
+  @include props-line-clamp($line);
+
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+}
+
 @mixin props-animation-fade-in {
   animation: fade-in 0.6s ease-in-out;
 
@@ -59,8 +72,12 @@
   }
 }
 
-@mixin selector-scrollbar($width: $size-4) {
-  overflow: hidden auto;
+@mixin selector-scrollbar($width: $size-4, $axis: y) {
+  @if $axis == y {
+    overflow: hidden scroll;
+  } @else {
+    overflow: scroll hidden;
+  }
 
   // Global usage: `*::webkit-scrollbar`.
   &::-webkit-scrollbar {

diff --git a/src/styles/utils/_variables.scss b/src/styles/utils/_variables.scss
@@ -9,9 +9,11 @@ $size-8: 0.5rem;
 $size-10: 0.625rem;
 $size-11: 0.6875rem;
 $size-12: 0.75rem;
+$size-14: 0.875rem;
 $size-16: 1rem;
 $size-20: 1.25rem;
 $size-24: 1.5rem;
+$size-28: 1.75rem;
 $size-40: 2.5rem;
 $size-border-radius: 6px;
 $size-header-height: 64px;