From ca1189a665b59b79d1cbc462e2bfb7facb4a334c Mon Sep 17 00:00:00 2001 From: jb1011 Date: Mon, 22 Jan 2024 17:32:34 +0100 Subject: [PATCH] responsive ok + issues corrected --- frontend/src/App.css | 8 +++++ frontend/src/App.tsx | 18 +++++------ frontend/src/components/Chain/Chain.css | 10 +++++-- frontend/src/components/Chain/Header.css | 30 +++++++++++++++++++ frontend/src/components/Chains.css | 7 +++++ frontend/src/components/List/THead.css | 1 + frontend/src/components/Map/Map.css | 14 +++++++++ frontend/src/components/Settings/Settings.css | 11 ++++++- frontend/src/components/Stats/Stats.css | 4 +-- frontend/src/components/Tile.css | 16 ++++++++++ 10 files changed, 105 insertions(+), 14 deletions(-) diff --git a/frontend/src/App.css b/frontend/src/App.css index 42062bcca..995a28383 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -38,3 +38,11 @@ along with this program. If not, see . font-family: 'Inter', Helvetica, Arial, sans-serif; font-weight: 700; } + +@media (max-width: 900px) { + .App { + font-size: 12px; + min-width: 390px; + max-width: 500px; + } +} diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 3f4b0535b..fab3972c0 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -143,15 +143,15 @@ export default class App extends React.Component { : null; Ago.timeDiff = timeDiff; - - if (chains.length === 0) { - return ( -
- - Waiting for telemetry… -
- ); - } + //ICI + // if (chains.length === 0) { + // return ( + //
+ // + // Waiting for telemetry… + //
+ // ); + // } const overlay = tab === 'all-chains' ? ( diff --git a/frontend/src/components/Chain/Chain.css b/frontend/src/components/Chain/Chain.css index fd9cc0e2d..b40d8d6d4 100644 --- a/frontend/src/components/Chain/Chain.css +++ b/frontend/src/components/Chain/Chain.css @@ -35,10 +35,16 @@ along with this program. If not, see . } .Chain-content { - min-height: 100%; + min-height: 50vh; color: #000; background-color: #fff; border-radius: 10px; - padding: 0px 10%; + margin: 0px 8%; box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1); } + +@media (max-width: 900px) { + .Chain-content-container { + top: 270px; + } +} diff --git a/frontend/src/components/Chain/Header.css b/frontend/src/components/Chain/Header.css index 6ff68c988..80b95c7bf 100644 --- a/frontend/src/components/Chain/Header.css +++ b/frontend/src/components/Chain/Header.css @@ -135,3 +135,33 @@ background-clip: text; color: transparent; /* Fallback for browsers that do not support text-fill-color */ } + +@media (max-width: 900px) { + .Header { + min-width: 100%; + padding: 0px; + } + .Header-top-row { + padding: 20px; + gap: 50px; + } + .Header-row-first { + min-width: 100%; + margin: 0px; + padding: 0px; + } + .ImageIcon { + width: 40px; + height: 40px; + } + .button-outline { + padding: 5px 5px; + font-size: 10px; + } + .text-sm { + font-size: 8px; + } + .Header-row-second { + width: 100%; + } +} diff --git a/frontend/src/components/Chains.css b/frontend/src/components/Chains.css index 53f2e2f94..97285f42e 100644 --- a/frontend/src/components/Chains.css +++ b/frontend/src/components/Chains.css @@ -134,3 +134,10 @@ along with this program. If not, see . background: #393838; color: #fff; } + +@media (max-width: 900px) { + .Chains { + padding: 0px; + min-width: 900px; + } +} diff --git a/frontend/src/components/List/THead.css b/frontend/src/components/List/THead.css index 7011f10ca..a81e55e35 100644 --- a/frontend/src/components/List/THead.css +++ b/frontend/src/components/List/THead.css @@ -18,6 +18,7 @@ along with this program. If not, see . .THead { background: #e6936e; + width: 100%; color: #fff; } diff --git a/frontend/src/components/Map/Map.css b/frontend/src/components/Map/Map.css index 7cd54d024..f46ef42d0 100644 --- a/frontend/src/components/Map/Map.css +++ b/frontend/src/components/Map/Map.css @@ -27,3 +27,17 @@ along with this program. If not, see . top: 0; bottom: 0; } + +@media (max-width: 900px) { + .Map { + min-width: 350px; + background: url('../../assets/world-map.svg') no-repeat; + background-size: contain; + background-position: center; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + } +} diff --git a/frontend/src/components/Settings/Settings.css b/frontend/src/components/Settings/Settings.css index f7a6b4c75..2482263fc 100644 --- a/frontend/src/components/Settings/Settings.css +++ b/frontend/src/components/Settings/Settings.css @@ -19,12 +19,14 @@ along with this program. If not, see . .Settings { text-align: center; padding-top: 50px; + width: 100%; } .Settings-category { text-align: left; margin: 0 auto; - padding: 2em 0; + padding: 2em 20px; + min-width: 700px; } .Settings-category h2 { @@ -33,3 +35,10 @@ along with this program. If not, see . font-size: 20px; font-weight: 100; } + +@media (max-width: 900px) { + .Settings-category { + padding: 20px; + min-width: 300px; + } +} diff --git a/frontend/src/components/Stats/Stats.css b/frontend/src/components/Stats/Stats.css index fe2b8eda8..515fccdb0 100644 --- a/frontend/src/components/Stats/Stats.css +++ b/frontend/src/components/Stats/Stats.css @@ -41,14 +41,14 @@ along with this program. If not, see . } .Stats-percent { - width: 50%; + width: 20%; text-align: right; padding-left: 0.5rem; padding-right: 1rem; } .Stats-count { - width: 50%; + width: 20%; text-align: right; padding-right: 1.5rem; border-right: 1px solid black; diff --git a/frontend/src/components/Tile.css b/frontend/src/components/Tile.css index 9ba101a34..a58a87434 100644 --- a/frontend/src/components/Tile.css +++ b/frontend/src/components/Tile.css @@ -66,3 +66,19 @@ along with this program. If not, see . color: black; border: none; } + +@media (max-width: 900px) { + .Tile { + font-size: 10px; /* Increased text size */ + padding: 10px 0px; + margin: 10px; + } + .Tile-label { + background-color: transparent; + padding: 0px; + font-size: 10px; /* Increased text size */ + font-weight: 800; /* Increased text weight */ + color: black; + letter-spacing: 0px; + } +}