refactor: improve UI for small screens
This commit is contained in:
parent
0df7475791
commit
c28ff93b67
13 changed files with 106 additions and 21 deletions
|
@ -89,6 +89,7 @@
|
||||||
"husky": "^3.0.9",
|
"husky": "^3.0.9",
|
||||||
"lint-staged": "^9.4.1",
|
"lint-staged": "^9.4.1",
|
||||||
"mini-css-extract-plugin": "^0.8.0",
|
"mini-css-extract-plugin": "^0.8.0",
|
||||||
|
"postcss-custom-media": "^7.0.8",
|
||||||
"postcss-extend-rule": "^3.0.0",
|
"postcss-extend-rule": "^3.0.0",
|
||||||
"postcss-import": "^12.0.1",
|
"postcss-import": "^12.0.1",
|
||||||
"postcss-loader": "^3.0.0",
|
"postcss-loader": "^3.0.0",
|
||||||
|
|
|
@ -5,7 +5,6 @@
|
||||||
background: var(--color-btn-bg);
|
background: var(--color-btn-bg);
|
||||||
border: 1px solid #555;
|
border: 1px solid #555;
|
||||||
border-radius: 100px;
|
border-radius: 100px;
|
||||||
padding: 6px 12px;
|
|
||||||
user-select: none;
|
user-select: none;
|
||||||
&:focus {
|
&:focus {
|
||||||
border-color: var(--color-focus-blue);
|
border-color: var(--color-focus-blue);
|
||||||
|
@ -14,9 +13,15 @@
|
||||||
background: #387cec;
|
background: #387cec;
|
||||||
border: 1px solid #387cec;
|
border: 1px solid #387cec;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
/* background: darken(#555, 3%); */
|
|
||||||
}
|
}
|
||||||
&:active {
|
&:active {
|
||||||
transform: scale(0.97);
|
transform: scale(0.97);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
font-size: 0.85em;
|
||||||
|
padding: 5px 8px;
|
||||||
|
@media (--breakpoint-not-small) {
|
||||||
|
font-size: 1em;
|
||||||
|
padding: 6px 12px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,17 +1,25 @@
|
||||||
.root {
|
.root {
|
||||||
padding: 10px 40px 40px;
|
|
||||||
|
|
||||||
> div {
|
> div {
|
||||||
|
min-width: 345px;
|
||||||
|
@media (--breakpoint-not-small) {
|
||||||
width: 360px;
|
width: 360px;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.root,
|
||||||
.section {
|
.section {
|
||||||
|
padding: 6px 15px 15px;
|
||||||
|
@media (--breakpoint-not-small) {
|
||||||
padding: 10px 40px 40px;
|
padding: 10px 40px 40px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.sep {
|
.sep {
|
||||||
|
padding: 0 15px;
|
||||||
|
@media (--breakpoint-not-small) {
|
||||||
padding: 0 40px;
|
padding: 0 40px;
|
||||||
|
}
|
||||||
> div {
|
> div {
|
||||||
border-top: 1px dashed #373737;
|
border-top: 1px dashed #373737;
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,7 +5,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.h1 {
|
.h1 {
|
||||||
|
padding: 0 15px;
|
||||||
|
font-size: 1.7em;
|
||||||
|
@media (--breakpoint-not-small) {
|
||||||
padding: 0 40px;
|
padding: 0 40px;
|
||||||
|
font-size: 2em;
|
||||||
|
}
|
||||||
text-align: left;
|
text-align: left;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
.root {
|
.root {
|
||||||
|
padding: 6px 15px;
|
||||||
|
@media (--breakpoint-not-small) {
|
||||||
padding: 10px 40px;
|
padding: 10px 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chart {
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,7 +3,10 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.group {
|
.group {
|
||||||
|
padding: 10px 15px;
|
||||||
|
@media (--breakpoint-not-small) {
|
||||||
padding: 10px 40px;
|
padding: 10px 40px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.fabgrp {
|
.fabgrp {
|
||||||
|
|
|
@ -1,7 +1,11 @@
|
||||||
.proxy {
|
.proxy {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 10px;
|
padding: 5px;
|
||||||
|
border-radius: 8px;
|
||||||
|
@media (--breakpoint-not-small) {
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
background-color: var(--color-bg-proxy-selected);
|
background-color: var(--color-bg-proxy-selected);
|
||||||
&.now {
|
&.now {
|
||||||
background-color: var(--color-focus-blue);
|
background-color: var(--color-focus-blue);
|
||||||
|
@ -11,6 +15,10 @@
|
||||||
|
|
||||||
.proxyType {
|
.proxyType {
|
||||||
font-family: var(--font-mono);
|
font-family: var(--font-mono);
|
||||||
|
font-size: 0.6em;
|
||||||
|
@media (--breakpoint-not-small) {
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.proxyName {
|
.proxyName {
|
||||||
|
@ -18,7 +26,10 @@
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
|
font-size: 0.85em;
|
||||||
|
@media (--breakpoint-not-small) {
|
||||||
font-size: 1.1em;
|
font-size: 1.1em;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.proxyLatencyWrap {
|
.proxyLatencyWrap {
|
||||||
|
|
|
@ -2,6 +2,11 @@
|
||||||
> h2 {
|
> h2 {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
|
|
||||||
|
font-size: 1.3em;
|
||||||
|
@media (--breakpoint-not-small) {
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
span:nth-child(2) {
|
span:nth-child(2) {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #777;
|
color: #777;
|
||||||
|
@ -18,8 +23,11 @@
|
||||||
|
|
||||||
.proxy {
|
.proxy {
|
||||||
max-width: 280px;
|
max-width: 280px;
|
||||||
|
margin: 2px;
|
||||||
|
@media (--breakpoint-not-small) {
|
||||||
min-width: 150px;
|
min-width: 150px;
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
|
}
|
||||||
transition: transform 0.2s ease-in-out;
|
transition: transform 0.2s ease-in-out;
|
||||||
|
|
||||||
&.proxySelectable {
|
&.proxySelectable {
|
||||||
|
|
|
@ -2,4 +2,8 @@
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
padding: 3px 0;
|
padding: 3px 0;
|
||||||
color: #eee;
|
color: #eee;
|
||||||
|
font-size: 0.6em;
|
||||||
|
@media (--breakpoint-not-small) {
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,7 +1,10 @@
|
||||||
.rule {
|
.rule {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
padding: 6px 15px;
|
||||||
|
@media (--breakpoint-not-small) {
|
||||||
padding: 10px 40px;
|
padding: 10px 40px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.left {
|
.left {
|
||||||
|
@ -21,7 +24,10 @@
|
||||||
.b {
|
.b {
|
||||||
padding: 10px 0;
|
padding: 10px 0;
|
||||||
font-family: 'Roboto Mono', Menlo, monospace;
|
font-family: 'Roboto Mono', Menlo, monospace;
|
||||||
|
font-size: 16px;
|
||||||
|
@media (--breakpoint-not-small) {
|
||||||
font-size: 19px;
|
font-size: 19px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.type {
|
.type {
|
||||||
|
|
|
@ -52,7 +52,10 @@
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
padding: 6px 16px;
|
||||||
|
@media (--breakpoint-not-small) {
|
||||||
padding: 8px 20px;
|
padding: 8px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
@ -60,6 +63,13 @@
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
color: var(--color-icon);
|
color: var(--color-icon);
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
|
||||||
|
@media (--breakpoint-not-small) {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -74,10 +84,15 @@
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
padding-left: 14px;
|
padding-left: 14px;
|
||||||
|
font-size: 0.75em;
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
padding-top: 5px;
|
padding-top: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (--breakpoint-not-small) {
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.themeSwitchContainer {
|
.themeSwitchContainer {
|
||||||
|
|
|
@ -101,6 +101,18 @@ const loaders = {
|
||||||
plugins: () =>
|
plugins: () =>
|
||||||
[
|
[
|
||||||
require('postcss-import')(),
|
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('postcss-nested')(),
|
||||||
require('autoprefixer')(),
|
require('autoprefixer')(),
|
||||||
require('postcss-extend-rule')(),
|
require('postcss-extend-rule')(),
|
||||||
|
|
|
@ -5793,6 +5793,13 @@ postcss-convert-values@^4.0.1:
|
||||||
postcss "^7.0.0"
|
postcss "^7.0.0"
|
||||||
postcss-value-parser "^3.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:
|
postcss-discard-comments@^4.0.2:
|
||||||
version "4.0.2"
|
version "4.0.2"
|
||||||
resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-4.0.2.tgz#1fbabd2c246bff6aaad7997b2b0918f4d7af4033"
|
resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-4.0.2.tgz#1fbabd2c246bff6aaad7997b2b0918f4d7af4033"
|
||||||
|
|
Loading…
Reference in a new issue