From c28ff93b67a3da5cbff0d2ffeddfc16fd1dd3438 Mon Sep 17 00:00:00 2001 From: Haishan Date: Sun, 17 Nov 2019 17:31:59 +0800 Subject: [PATCH] refactor: improve UI for small screens --- package.json | 1 + src/components/Button.module.css | 9 +++++++-- src/components/Config.module.css | 18 +++++++++++++----- src/components/ContentHeader.module.css | 7 ++++++- src/components/Home.module.css | 8 ++++---- src/components/Proxies.module.css | 5 ++++- src/components/Proxy.module.css | 17 ++++++++++++++--- src/components/ProxyGroup.module.css | 12 ++++++++++-- src/components/ProxyLatency.module.css | 4 ++++ src/components/Rule.module.css | 10 ++++++++-- src/components/SideBar.module.css | 17 ++++++++++++++++- webpack.config.js | 12 ++++++++++++ yarn.lock | 7 +++++++ 13 files changed, 106 insertions(+), 21 deletions(-) diff --git a/package.json b/package.json index 61992cb..3a02647 100644 --- a/package.json +++ b/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", diff --git a/src/components/Button.module.css b/src/components/Button.module.css index f0ab4e1..8fb6a92 100644 --- a/src/components/Button.module.css +++ b/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; + } } diff --git a/src/components/Config.module.css b/src/components/Config.module.css index 2f9fad2..d7fa40a 100644 --- a/src/components/Config.module.css +++ b/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; } diff --git a/src/components/ContentHeader.module.css b/src/components/ContentHeader.module.css index 54e4c99..0768fbb 100644 --- a/src/components/ContentHeader.module.css +++ b/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; } diff --git a/src/components/Home.module.css b/src/components/Home.module.css index 464f40f..f15c80f 100644 --- a/src/components/Home.module.css +++ b/src/components/Home.module.css @@ -1,6 +1,6 @@ .root { - padding: 10px 40px; -} - -.chart { + padding: 6px 15px; + @media (--breakpoint-not-small) { + padding: 10px 40px; + } } diff --git a/src/components/Proxies.module.css b/src/components/Proxies.module.css index 9565970..a832ebe 100644 --- a/src/components/Proxies.module.css +++ b/src/components/Proxies.module.css @@ -3,7 +3,10 @@ } .group { - padding: 10px 40px; + padding: 10px 15px; + @media (--breakpoint-not-small) { + padding: 10px 40px; + } } .fabgrp { diff --git a/src/components/Proxy.module.css b/src/components/Proxy.module.css index 03f8b2e..b83bec1 100644 --- a/src/components/Proxy.module.css +++ b/src/components/Proxy.module.css @@ -1,7 +1,11 @@ .proxy { position: relative; - padding: 10px; - border-radius: 10px; + padding: 5px; + 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 { diff --git a/src/components/ProxyGroup.module.css b/src/components/ProxyGroup.module.css index a7cce49..08c4b42 100644 --- a/src/components/ProxyGroup.module.css +++ b/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: 10px; + margin: 2px; + @media (--breakpoint-not-small) { + min-width: 150px; + margin: 10px; + } transition: transform 0.2s ease-in-out; &.proxySelectable { diff --git a/src/components/ProxyLatency.module.css b/src/components/ProxyLatency.module.css index bfd856b..1b971f1 100644 --- a/src/components/ProxyLatency.module.css +++ b/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; + } } diff --git a/src/components/Rule.module.css b/src/components/Rule.module.css index 6505aa6..14da5d9 100644 --- a/src/components/Rule.module.css +++ b/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 { diff --git a/src/components/SideBar.module.css b/src/components/SideBar.module.css index 25726d3..167ca2f 100644 --- a/src/components/SideBar.module.css +++ b/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 { diff --git a/webpack.config.js b/webpack.config.js index eafa1ca..1e79e43 100644 --- a/webpack.config.js +++ b/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')(), diff --git a/yarn.lock b/yarn.lock index c9fcf4d..cf082f1 100644 --- a/yarn.lock +++ b/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"