Refactor: CSS responsive breakpoints (#178)

* refactor: move src/index.css to src/styles/index.css * style: improved stylelint configuration * refactor: remove unnecessary screen option from the media query * refactor: define several CSS breakpoint value variables * refactor: js read the breakpoint values defined in scss * refactor: remove some unconventional CSS breakpoint values from Header * feat: make the Footer more in line with the design draft * refactor: remove unconventional CSS breakpoint values from NFT components * feat: make the TransactionInfoItem more in line with the design draft * refactor: remove unconventional CSS breakpoint values from Script component * feat: make the NFTInfo more in line with the design draft * feat: make the TransactionParameters more in line with the design draft
Magickbase · Dec 21, 2023 · 2619130 · 2619130 · vercel · Dec 21, 2023
1 parent ffd2157
commit 2619130
Show file tree

Hide file tree

Showing 98 changed files with 755 additions and 692 deletions.
diff --git a/.stylelintrc.js b/.stylelintrc.js
@@ -2,7 +2,7 @@ const package = require('./package.json')
 
 module.exports = {
   customSyntax: 'postcss-scss',
-  extends: ['stylelint-config-standard'],
+  extends: ['stylelint-config-standard', 'stylelint-config-css-modules'],
   rules: {
     'no-empty-source': null,
     // Based on the discussion in https://github.com/Magickbase/ckb-explorer-public-issues/issues/442, we have decided to use lower camel case.
@@ -11,20 +11,12 @@ module.exports = {
     'custom-property-pattern': null,
     // This rule provides little benefit relative to the cost of implementing it, so it has been disabled.
     'no-descending-specificity': null,
-
-    'selector-pseudo-class-no-unknown': [
-      true,
-      {
-        // to support `:global`
-        ignorePseudoClasses: ['global'],
-      },
-    ],
   },
 
   overrides: [
     {
       files: ['*.scss', '**/*.scss'],
-      extends: ['stylelint-config-standard-scss'],
+      extends: ['stylelint-config-standard-scss', 'stylelint-config-css-modules'],
       rules: {
         'scss/dollar-variable-pattern': null,
         'scss/at-rule-no-unknown': [
@@ -47,12 +39,15 @@ module.exports = {
       plugins: ['stylelint-no-unsupported-browser-features'],
       rules: {
         'media-feature-range-notation': null,
+        // This is to support the syntax `@media (max-width: ${variables.mobileBreakPoint})`.
+        'media-query-no-invalid': null,
         'plugin/no-unsupported-browser-features': [
           true,
           {
             browsers: package.browserslist,
             // TODO: Perhaps the browserslist should be adjusted to a more reasonable range, at least to a level that is compatible with CSS variables.
             ignore: [
+              'css-grid',
               'css-nesting',
               'css-sticky',
               'css-variables',

diff --git a/package.json b/package.json
@@ -88,8 +88,9 @@
     "rxjs": "7.8.1",
     "storybook": "7.5.3",
     "stylelint": "^15.10.1",
-    "stylelint-config-standard": "^34.0.0",
-    "stylelint-config-standard-scss": "^11.0.0",
+    "stylelint-config-css-modules": "^4.3.0",
+    "stylelint-config-standard": "^35.0.0",
+    "stylelint-config-standard-scss": "^12.0.0",
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-no-unsupported-browser-features": "7.0.0",
     "stylelint-processor-styled-components": "^1.10.0",

diff --git a/src/components/Card/Card.module.scss b/src/components/Card/Card.module.scss
@@ -1,3 +1,5 @@
+@import '../../styles/variables.module';
+
 .card {
   width: 100%;
   height: auto;
@@ -20,7 +22,7 @@
     border-radius: 0 0 4px 4px;
   }
 
-  @media (width <= 750px) {
+  @media (width <= $mobileBreakPoint) {
     padding: 0 16px;
     box-shadow: 1px 1px 3px 0 #dfdfdf;
   }

diff --git a/src/components/Card/CardCell.module.scss b/src/components/Card/CardCell.module.scss
@@ -1,3 +1,5 @@
+@import '../../styles/variables.module';
+
 .cardCell {
   display: flex;
   align-items: center;
@@ -35,7 +37,7 @@
     min-width: 0;
   }
 
-  @media (width <= 750px) {
+  @media (width <= $mobileBreakPoint) {
     flex-direction: column;
     justify-content: initial;
     align-items: initial;

diff --git a/src/components/Card/CardCellsLayout.module.scss b/src/components/Card/CardCellsLayout.module.scss
@@ -1,3 +1,4 @@
+@import '../../styles/variables.module';
 @value cardCell from "./CardCell.module.scss";
 
 .cardCellsLayout {
@@ -55,7 +56,7 @@
     }
   }
 
-  @media (width <= 1200px) {
+  @media (width <= $extraLargeBreakPoint) {
     flex-direction: column;
     gap: 20px;
 
@@ -70,7 +71,7 @@
     }
   }
 
-  @media (width <= 750px) {
+  @media (width <= $mobileBreakPoint) {
     gap: 0;
     padding: 0;
 

diff --git a/src/components/Card/CardHeader.module.scss b/src/components/Card/CardHeader.module.scss
@@ -1,3 +1,5 @@
+@import '../../styles/variables.module';
+
 .cardHeader {
   display: flex;
   align-items: center;
@@ -16,7 +18,7 @@
     color: #333;
   }
 
-  @media (width <= 750px) {
+  @media (width <= $mobileBreakPoint) {
     flex-direction: column;
     justify-content: initial;
     align-items: initial;

diff --git a/src/components/Card/HashCardHeader.module.scss b/src/components/Card/HashCardHeader.module.scss
@@ -1,10 +1,12 @@
+@import '../../styles/variables.module';
+
 .hashCardHeader {
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 80px;
 
-  @media (width <= 750px) {
+  @media (width <= $mobileBreakPoint) {
     height: 56px;
   }
 
@@ -21,7 +23,7 @@
       color: #000;
       white-space: nowrap;
 
-      @media (width <= 750px) {
+      @media (width <= $mobileBreakPoint) {
         font-size: 20px;
       }
     }
@@ -31,7 +33,7 @@
       font-size: 18px;
       color: #000;
 
-      @media (width <= 750px) {
+      @media (width <= $mobileBreakPoint) {
         transform: translateY(2px);
       }
 
@@ -44,7 +46,7 @@
     .title + .hash {
       margin-left: 20px;
 
-      @media (width <= 750px) {
+      @media (width <= $mobileBreakPoint) {
         margin-left: 8px;
       }
     }
@@ -56,7 +58,7 @@
       margin-left: 32px;
       color: #999;
 
-      @media (width <= 750px) {
+      @media (width <= $mobileBreakPoint) {
         gap: 12px;
         margin-left: 8px;
       }
@@ -72,7 +74,7 @@
           color: var(--primary-color);
         }
 
-        @media (width <= 750px) {
+        @media (width <= $mobileBreakPoint) {
           width: 16px;
           height: 16px;
         }

diff --git a/src/components/DecimalCapacity/styled.tsx b/src/components/DecimalCapacity/styled.tsx
@@ -1,4 +1,5 @@
 import styled from 'styled-components'
+import variables from '../../styles/variables.module.scss'
 
 export const DecimalPanel = styled.div`
   display: flex;
@@ -8,7 +9,7 @@ export const DecimalPanel = styled.div`
   .decimalUnit {
     margin-left: 5px;
 
-    @media (max-width: 750px) {
+    @media (max-width: ${variables.mobileBreakPoint}) {
       margin-bottom: 0;
     }
   }
@@ -20,11 +21,11 @@ export const DecimalPartPanel = styled.div`
     props.fontSize ? props.fontSize : '14px'};
   color: ${(props: { color?: string }) => (props.color ? props.color : '#999999')};
 
-  @media (max-width: 1000px) {
+  @media (max-width: ${variables.largeBreakPoint}) {
     font-size: ${(props: { fontSize?: string }) => (props.fontSize ? props.fontSize : '11px')};
   }
 
-  @media (max-width: 750px) {
+  @media (max-width: ${variables.mobileBreakPoint}) {
     margin-bottom: 0;
   }
 `
@@ -35,11 +36,11 @@ export const DecimalZerosPanel = styled.div`
     props.fontSize ? props.fontSize : '14px'};
   color: ${(props: { color?: string }) => (props.color ? props.color : '#999999')};
 
-  @media (max-width: 1000px) {
+  @media (max-width: ${variables.largeBreakPoint}) {
     font-size: ${(props: { fontSize?: string }) => (props.fontSize ? props.fontSize : '11px')};
   }
 
-  @media (max-width: 750px) {
+  @media (max-width: ${variables.mobileBreakPoint}) {
     margin-bottom: 0;
   }
 `
diff --git a/src/components/DecimalCapacity/styles.module.scss b/src/components/DecimalCapacity/styles.module.scss
@@ -1,7 +1,9 @@
+@import '../../styles/variables.module';
+
 .integerPart {
   font-size: 16px;
 
-  @media (width <= 1000px) {
+  @media (width <= $largeBreakPoint) {
     font-size: 12px;
   }
 }
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
@@ -9,7 +9,6 @@ import { ReactComponent as ForumIcon } from './footer_forum.svg'
 import { ReactComponent as Discord } from './footer_discord.svg'
 import { getCurrentYear } from '../../utils/date'
 import { FooterMenuPanel, FooterItemPanel, FooterImageItemPanel, FooterPanel } from './styled'
-import { useIsMobile } from '../../hooks'
 import { udtSubmitEmail } from '../../utils/util'
 
 interface FooterLinkItem {
@@ -44,7 +43,6 @@ const FooterImageItem = ({ item }: { item: FooterLinkItem }) => {
 }
 
 export default memo(() => {
-  const isMobile = useIsMobile()
   const [t] = useTranslation()
   const Footers = useMemo<FooterLink[]>(
     () => [
@@ -143,31 +141,9 @@ export default memo(() => {
             ))}
         </div>
         <div className="footerCommunity">
-          {isMobile ? (
-            <div>
-              {Footers[2].items.map(item => (
-                <FooterImageItem item={item} key={item.label} />
-              ))}
-            </div>
-          ) : (
-            <>
-              <div>
-                {Footers[2].items.slice(0, 3).map(item => (
-                  <FooterImageItem item={item} key={item.label} />
-                ))}
-              </div>
-              <div>
-                {Footers[2].items.slice(3, 6).map(item => (
-                  <FooterImageItem item={item} key={item.label} />
-                ))}
-              </div>
-              <div>
-                {Footers[2].items.slice(6).map(item => (
-                  <FooterImageItem item={item} key={item.label} />
-                ))}
-              </div>
-            </>
-          )}
+          {Footers[2].items.map(item => (
+            <FooterImageItem item={item} key={item.label} />
+          ))}
         </div>
       </FooterMenuPanel>
       <div className="footerCopyright">