refactor: improve UI for small screens

package.json

@@ -89,6 +89,7 @@
     "husky": "^3.0.9",
     "lint-staged": "^9.4.1",
     "mini-css-extract-plugin": "^0.8.0",
+    "postcss-custom-media": "^7.0.8",
     "postcss-extend-rule": "^3.0.0",
     "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",

src/components/Button.module.css

@@ -5,7 +5,6 @@
   background: var(--color-btn-bg);
   border: 1px solid #555;
   border-radius: 100px;
-  padding: 6px 12px;
   user-select: none;
   &:focus {
     border-color: var(--color-focus-blue);
@@ -14,9 +13,15 @@
     background: #387cec;
     border: 1px solid #387cec;
     color: #fff;
-    /* background: darken(#555, 3%); */
   }
   &:active {
     transform: scale(0.97);
   }
+
+  font-size: 0.85em;
+  padding: 5px 8px;
+  @media (--breakpoint-not-small) {
+    font-size: 1em;
+    padding: 6px 12px;
+  }
 }

src/components/Config.module.css

@@ -1,17 +1,25 @@
 .root {
-  padding: 10px 40px 40px;
-
   > div {
-    width: 360px;
+    min-width: 345px;
+    @media (--breakpoint-not-small) {
+      width: 360px;
+    }
   }
 }
 
+.root,
 .section {
-  padding: 10px 40px 40px;
+  padding: 6px 15px 15px;
+  @media (--breakpoint-not-small) {
+    padding: 10px 40px 40px;
+  }
 }
 
 .sep {
-  padding: 0 40px;
+  padding: 0 15px;
+  @media (--breakpoint-not-small) {
+    padding: 0 40px;
+  }
   > div {
     border-top: 1px dashed #373737;
   }

src/components/ContentHeader.module.css

@@ -5,7 +5,12 @@
 }
 
 .h1 {
-  padding: 0 40px;
+  padding: 0 15px;
+  font-size: 1.7em;
+  @media (--breakpoint-not-small) {
+    padding: 0 40px;
+    font-size: 2em;
+  }
   text-align: left;
   margin: 0;
 }

src/components/Home.module.css

@@ -1,6 +1,6 @@
 .root {
-  padding: 10px 40px;
+  padding: 6px 15px;
-}
+  @media (--breakpoint-not-small) {
-
+    padding: 10px 40px;
-.chart {
+  }
 }

src/components/Proxies.module.css

@@ -3,7 +3,10 @@
 }
 
 .group {
-  padding: 10px 40px;
+  padding: 10px 15px;
+  @media (--breakpoint-not-small) {
+    padding: 10px 40px;
+  }
 }
 
 .fabgrp {

src/components/Proxy.module.css

@@ -1,7 +1,11 @@
 .proxy {
   position: relative;
-  padding: 10px;
+  padding: 5px;
-  border-radius: 10px;
+  border-radius: 8px;
+  @media (--breakpoint-not-small) {
+    border-radius: 10px;
+    padding: 10px;
+  }
   background-color: var(--color-bg-proxy-selected);
   &.now {
     background-color: var(--color-focus-blue);
@@ -11,6 +15,10 @@
 
 .proxyType {
   font-family: var(--font-mono);
+  font-size: 0.6em;
+  @media (--breakpoint-not-small) {
+    font-size: 1em;
+  }
 }
 
 .proxyName {
@@ -18,7 +26,10 @@
   overflow: hidden;
   text-overflow: ellipsis;
   margin-bottom: 5px;
-  font-size: 1.1em;
+  font-size: 0.85em;
+  @media (--breakpoint-not-small) {
+    font-size: 1.1em;
+  }
 }
 
 .proxyLatencyWrap {

src/components/ProxyGroup.module.css

@@ -2,6 +2,11 @@
   > h2 {
     margin-top: 0;
 
+    font-size: 1.3em;
+    @media (--breakpoint-not-small) {
+      font-size: 1.5em;
+    }
+
     span:nth-child(2) {
       font-size: 12px;
       color: #777;
@@ -18,8 +23,11 @@
 
 .proxy {
   max-width: 280px;
-  min-width: 150px;
+  margin: 2px;
-  margin: 10px;
+  @media (--breakpoint-not-small) {
+    min-width: 150px;
+    margin: 10px;
+  }
   transition: transform 0.2s ease-in-out;
 
   &.proxySelectable {

src/components/ProxyLatency.module.css

@@ -2,4 +2,8 @@
   border-radius: 20px;
   padding: 3px 0;
   color: #eee;
+  font-size: 0.6em;
+  @media (--breakpoint-not-small) {
+    font-size: 1em;
+  }
 }

src/components/Rule.module.css

@@ -1,7 +1,10 @@
 .rule {
   display: flex;
   align-items: center;
-  padding: 10px 40px;
+  padding: 6px 15px;
+  @media (--breakpoint-not-small) {
+    padding: 10px 40px;
+  }
 }
 
 .left {
@@ -21,7 +24,10 @@
 .b {
   padding: 10px 0;
   font-family: 'Roboto Mono', Menlo, monospace;
-  font-size: 19px;
+  font-size: 16px;
+  @media (--breakpoint-not-small) {
+    font-size: 19px;
+  }
 }
 
 .type {

src/components/SideBar.module.css

@@ -52,7 +52,10 @@
 
   display: flex;
   align-items: center;
-  padding: 8px 20px;
+  padding: 6px 16px;
+  @media (--breakpoint-not-small) {
+    padding: 8px 20px;
+  }
 
   @media (max-width: 768px) {
     flex-direction: column;
@@ -60,6 +63,13 @@
 
   svg {
     color: var(--color-icon);
+    width: 22px;
+    height: 22px;
+
+    @media (--breakpoint-not-small) {
+      width: 24px;
+      height: 24px;
+    }
   }
 }
 
@@ -74,10 +84,15 @@
 
 .label {
   padding-left: 14px;
+  font-size: 0.75em;
   @media (max-width: 768px) {
     padding-left: 0;
     padding-top: 5px;
   }
+
+  @media (--breakpoint-not-small) {
+    font-size: 1em;
+  }
 }
 
 .themeSwitchContainer {

webpack.config.js

@@ -101,6 +101,18 @@ const loaders = {
       plugins: () =>
         [
           require('postcss-import')(),
+          require('postcss-custom-media')({
+            importFrom: [
+              {
+                customMedia: {
+                  '--breakpoint-not-small': 'screen and (min-width: 30em)',
+                  '--breakpoint-medium':
+                    'screen and (min-width: 30em) and (max-width: 60em)',
+                  '--breakpoint-large': 'screen and (min-width: 60em)'
+                }
+              }
+            ]
+          }),
           require('postcss-nested')(),
           require('autoprefixer')(),
           require('postcss-extend-rule')(),

yarn.lock

@@ -5793,6 +5793,13 @@ postcss-convert-values@^4.0.1:
     postcss "^7.0.0"
     postcss-value-parser "^3.0.0"
 
+postcss-custom-media@^7.0.8:
+  version "7.0.8"
+  resolved "https://registry.yarnpkg.com/postcss-custom-media/-/postcss-custom-media-7.0.8.tgz#fffd13ffeffad73621be5f387076a28b00294e0c"
+  integrity sha512-c9s5iX0Ge15o00HKbuRuTqNndsJUbaXdiNsksnVH8H4gdc+zbLzr/UasOwNG6CTDpLFekVY4672eWdiiWu2GUg==
+  dependencies:
+    postcss "^7.0.14"
+
 postcss-discard-comments@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-4.0.2.tgz#1fbabd2c246bff6aaad7997b2b0918f4d7af4033"