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",
|
||||
"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",
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,17 +1,25 @@
|
|||
.root {
|
||||
padding: 10px 40px 40px;
|
||||
|
||||
> div {
|
||||
min-width: 345px;
|
||||
@media (--breakpoint-not-small) {
|
||||
width: 360px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.root,
|
||||
.section {
|
||||
padding: 6px 15px 15px;
|
||||
@media (--breakpoint-not-small) {
|
||||
padding: 10px 40px 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.sep {
|
||||
padding: 0 15px;
|
||||
@media (--breakpoint-not-small) {
|
||||
padding: 0 40px;
|
||||
}
|
||||
> div {
|
||||
border-top: 1px dashed #373737;
|
||||
}
|
||||
|
|
|
@ -5,7 +5,12 @@
|
|||
}
|
||||
|
||||
.h1 {
|
||||
padding: 0 15px;
|
||||
font-size: 1.7em;
|
||||
@media (--breakpoint-not-small) {
|
||||
padding: 0 40px;
|
||||
font-size: 2em;
|
||||
}
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
}
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
.root {
|
||||
padding: 6px 15px;
|
||||
@media (--breakpoint-not-small) {
|
||||
padding: 10px 40px;
|
||||
}
|
||||
|
||||
.chart {
|
||||
}
|
||||
|
|
|
@ -3,8 +3,11 @@
|
|||
}
|
||||
|
||||
.group {
|
||||
padding: 10px 15px;
|
||||
@media (--breakpoint-not-small) {
|
||||
padding: 10px 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.fabgrp {
|
||||
position: fixed;
|
||||
|
|
|
@ -1,7 +1,11 @@
|
|||
.proxy {
|
||||
position: relative;
|
||||
padding: 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,8 +26,11 @@
|
|||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-bottom: 5px;
|
||||
font-size: 0.85em;
|
||||
@media (--breakpoint-not-small) {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
}
|
||||
|
||||
.proxyLatencyWrap {
|
||||
height: 30px;
|
||||
|
|
|
@ -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;
|
||||
margin: 2px;
|
||||
@media (--breakpoint-not-small) {
|
||||
min-width: 150px;
|
||||
margin: 10px;
|
||||
}
|
||||
transition: transform 0.2s ease-in-out;
|
||||
|
||||
&.proxySelectable {
|
||||
|
|
|
@ -2,4 +2,8 @@
|
|||
border-radius: 20px;
|
||||
padding: 3px 0;
|
||||
color: #eee;
|
||||
font-size: 0.6em;
|
||||
@media (--breakpoint-not-small) {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,8 +1,11 @@
|
|||
.rule {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 6px 15px;
|
||||
@media (--breakpoint-not-small) {
|
||||
padding: 10px 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.left {
|
||||
width: 40px;
|
||||
|
@ -21,8 +24,11 @@
|
|||
.b {
|
||||
padding: 10px 0;
|
||||
font-family: 'Roboto Mono', Menlo, monospace;
|
||||
font-size: 16px;
|
||||
@media (--breakpoint-not-small) {
|
||||
font-size: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
.type {
|
||||
width: 110px;
|
||||
|
|
|
@ -52,7 +52,10 @@
|
|||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
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 {
|
||||
|
|
|
@ -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')(),
|
||||
|
|
|
@ -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"
|
||||
|
|
Loading…
Reference in a new issue