Merge pull request #6 from LHRUN/feature/1.4.0

Feature/1.4.0

CHANGELOG.md

@@ -1,3 +1,9 @@
+# 1.4.0 (2023-11-15)
+
+### Feat
+
++ add mobile style
+
 # 1.3.0 (2023-11-14)
 
 ### Feat

src/app/page.module.scss

@@ -1,5 +1,4 @@
 .page {
-  min-width: 780px;
   max-width: 980px;
   margin: 0 auto;
 
@@ -22,3 +21,13 @@
     background-color: $secondary-color;
   }
 }
+
+@media screen and (max-width: 700px) {
+  .page {
+    .main {
+      margin-bottom: 0px;
+      border-radius: 0px;
+    }
+  }
+}
+

src/components/componentCard/index.module.scss

@@ -66,3 +66,17 @@
     }
   }
 }
+
+@media screen and (max-width: 900px) {
+  .card {
+    .background {
+      width: 100%;
+      height: 100%;
+    }
+
+    .love {
+      opacity: 1;
+      transform: translateX(0) scale(1);
+    }
+  }
+}

src/components/componentList/index.module.scss

@@ -3,18 +3,6 @@
   flex-wrap: wrap;
   margin: 50px 0;
 
-  .item {
-    width: 30%;
-
-    &:not(:nth-child(3n)) {
-      margin-right: 5%;
-    }
-
-    &:not(:nth-child(-n+3)) {
-      margin-top: 30px;
-    }
-  }
-
   .empty {
     width: 100%;
     height: 258px;
@@ -24,3 +12,47 @@
     text-align: center;
   }
 }
+
+@media screen and (min-width: 900px) {
+  .container {
+    .item {
+      width: 30%;
+
+      &:not(:nth-child(3n)) {
+        margin-right: 5%;
+      }
+
+      &:not(:nth-child(-n+3)) {
+        margin-top: 30px;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 899px) and (min-width: 450px) {
+  .container {
+    .item {
+      width: 47%;
+
+      &:not(:nth-child(2n)) {
+        margin-right: 6%;
+      }
+
+      &:not(:nth-child(-n+2)) {
+        margin-top: 20px;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 449px) {
+  .container {
+    .item {
+      width: 100%;
+
+      &:not(:first-child) {
+        margin-top: 40px;
+      }
+    }
+  }
+}

src/components/detailModal/index.module.scss

@@ -1,5 +1,4 @@
 .body {
-  position: relative;
   display: flex;
   min-width: 50vw;
   max-width: 70vw;
@@ -8,19 +7,9 @@
   padding: 40px 30px;
   overflow-y: auto;
   color: $light-color;
+  background-color: $secondary-color;
   border-radius: 20px;
 
-  .background {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: -1;
-    width: 100%;
-    height: 100%;
-    background-color: $secondary-color;
-    opacity: 0.9;
-  }
-
   .left {
     width: 50%;
     height: 100%;
@@ -46,6 +35,7 @@
         line-height: 18px;
         color: $light-color;
         text-decoration: underline;
+        word-break: break-all;
         cursor: pointer;
 
         &:hover {
@@ -61,6 +51,8 @@
       border-radius: 15px;
 
       .descItem {
+        word-break: break-all;
+
         &:not(:first-child) {
           margin-top: 10px;
         }
@@ -113,3 +105,39 @@
     }
   }
 }
+
+@media screen and (max-width: 900px){
+  .body {
+    flex-direction: column;
+    max-width: 90vw;
+    max-height: 80vh;
+    overflow-y: auto;
+
+    .left {
+      width: 100%;
+      height: auto;
+      padding-right: 0px;
+      overflow-y: visible;
+      border-right: none;
+
+      .github {
+        flex-direction: column;
+
+        .githubText {
+          margin-top: 10px;
+        }
+      }
+    }
+
+    .right {
+      width: 100%;
+      height: auto;
+      padding-left: 0px;
+      overflow-y: visible;
+
+      .example {
+        margin-top: 20px;
+      }
+    }
+  }
+}

src/components/detailModal/index.tsx

@@ -22,7 +22,6 @@ const DetailModal = () => {
   return (
     <Modal visible={data.visible} changeVisible={changeVisible}>
       <div className={styles.body}>
-        <div className={styles.background}></div>
         <div className={styles.left}>
           <div className={styles.github}>
             <div className={styles.githubTitle}>Github</div>

src/components/header/components/i18nSwitch/index.module.scss

@@ -121,7 +121,9 @@
 
 
 .canToggle {
-  position: relative;
+  position: absolute;
+  top: 2px;
+  left: 0;
   *, *:before, *:after { box-sizing: border-box; }
 
   label {

src/components/header/index.module.scss

@@ -7,17 +7,44 @@
     right: 0;
     z-index: 10;
     display: flex;
+    align-items: center;
 
-    .navIcon {
-      width: 28px;
+    .i18nSwitch {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100px;
       height: 28px;
-      margin-left: 108px;
+    }
+
+    .githubIcon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 32px;
+      margin-left: 10px;
       cursor: pointer;
 
       &:hover {
         opacity: 0.8;
       }
     }
+
+    .coffeeIcon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 32px;
+      margin-left: 10px;
+      background-color: $light-color;
+      border-radius: 6px;
+
+      &:hover {
+        opacity: 0.8;
+      }
+    }
   }
 
   .title {
@@ -72,3 +99,65 @@
   }
 }
 
+@media screen and (min-width:  700px) and (max-width: 980px) {
+  .container {
+    padding: 0 30px;
+
+    .title {
+      .titleText {
+        font-size: 100px;
+        line-height: 110px;
+      }
+
+      .subTitle {
+        .subTitleText {
+          font-size: 100px;
+          line-height: 110px;
+        }
+
+        .subTitleIcon {
+          top: 0px;
+          right: 0px;
+          font-size: 18px;
+        }
+      }
+    }
+
+    .desc {
+      font-size: 32px;
+    }
+  }
+}
+
+@media screen and (max-width: 700px) {
+  .container {
+    padding: 0 15px;
+
+    .title {
+      padding-top: 70px;
+
+      .titleText {
+        font-size: 80px;
+        line-height: 90px;
+      }
+
+      .subTitle {
+        .subTitleText {
+          font-size: 80px;
+          line-height: 90px;
+        }
+
+        .subTitleIcon {
+          top: -5px;
+          right: 0;
+          font-size: 14px;
+        }
+      }
+    }
+
+    .desc {
+      font-size: 20px;
+    }
+  }
+}
+

src/components/header/index.tsx

@@ -3,21 +3,29 @@ import styles from './index.module.scss';
 import classNames from 'classnames';
 import I18NSwitch from './components/i18nSwitch';
 import githubIcon from '@/assets/image/icons/gitHub.svg';
+import buyMeACoffeeIcon from '@/assets/image/icons/buyMeACoffee.svg';
 import Image from 'next/image';
 
 const Header = () => {
   return (
     <div className={classNames(styles.container, LalezarFont.className)}>
       <div className={styles.nav}>
-        <I18NSwitch />
-        <a href="https://github.com/LHRUN/bubble" target="_blank">
-          <Image
-            className={styles.navIcon}
-            src={githubIcon}
-            alt="icon"
-            width={28}
-            height={28}
-          />
+        <div className={styles.i18nSwitch}>
+          <I18NSwitch />
+        </div>
+        <a
+          className={styles.githubIcon}
+          href="https://github.com/LHRUN/bubble"
+          target="_blank"
+        >
+          <Image src={githubIcon} alt="icon" width={32} height={32} />
+        </a>
+        <a
+          className={styles.coffeeIcon}
+          href="https://www.buymeacoffee.com/leo0808"
+          target="_blank"
+        >
+          <Image src={buyMeACoffeeIcon} alt="icon" width={28} height={28} />
         </a>
       </div>
       <div className={styles.title}>

src/components/pagination/index.module.scss

@@ -1,6 +1,8 @@
 .container {
   display: flex;
   flex-wrap: wrap;
+  row-gap: 10px;
+  column-gap: 10px;
   align-items: center;
   justify-content: center;
   margin-bottom: 50px;
@@ -17,10 +19,6 @@
     border: solid 4px #183D3D;
     border-radius: 12px;
 
-    &:not(:first-child) {
-      margin-left: 10px;
-    }
-
     &:hover {
       border-color: $tertiary-color;
     }
@@ -30,3 +28,4 @@
     }
   }
 }
+