From 4cc65541638f4dd5ca6ac4d38336eefb44bb7e5e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Jadach?= Date: Tue, 28 May 2024 15:58:42 +0200 Subject: [PATCH 1/3] mobile first --- frontend/.env.example | 2 +- frontend/src/App.css | 49 +++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 50 insertions(+), 1 deletion(-) diff --git a/frontend/.env.example b/frontend/.env.example index 8ac3c0f..e74d09d 100644 --- a/frontend/.env.example +++ b/frontend/.env.example @@ -1,4 +1,4 @@ -REACT_APP_BACKEND_URL=tokentracker.hoprnet.workers.dev //'127.0.0.1:8787' if local server is used +REACT_APP_BACKEND_URL=backend.mytokentracker.xyz //'127.0.0.1:8787' if local server is used REACT_APP_uHTTP_DP_ENDPOINT= //leave empty to use default REACT_APP_uHTTP_TOKEN= REACT_APP_uHTTP_FORCE_ZERO_HOP=true diff --git a/frontend/src/App.css b/frontend/src/App.css index 68d0f50..2cce05d 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -172,4 +172,53 @@ th.balance, td.balance { .fingerprint > img { width: 74%; +} + + + +@media only screen and (max-width: 900px) { + .App { + display: flex; + flex-direction: column; + } + + .portfolio-container, .logs { + width: 100%; + } + .portfolio-present > .mtt-search-engine-container { + height: 97px; + } + .App .mtt-search-engine-container { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + } + .portfolio-present .mtt-search-engine { + align-items: center; + } + .mtt-search-engine input { + height: 24px; + font-size: 16px; + } + .portfolio-table-container{ + margin: 0; + border: none; + height: calc( (100svh - 97px) / 2 ); + } + .portfolio-table{ + width: calc( 100% - 8px ); + margin: 0; + margin-left: 8px; + border: none; + height: calc( (100svh - 97px) / 2 ); + } + .portfolio-table tbody { + height: 100%; + } + .logs { + margin: 0; + flex-grow: 1; + } + } \ No newline at end of file From c9b087c15a568283866525f9caf126e5ee36d4d7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Jadach?= Date: Wed, 29 May 2024 14:15:56 +0200 Subject: [PATCH 2/3] mobile css --- frontend/src/App.css | 41 +++++++++++++++++++++++++++++++++++---- frontend/src/Portfolio.js | 3 +-- 2 files changed, 38 insertions(+), 6 deletions(-) diff --git a/frontend/src/App.css b/frontend/src/App.css index 2cce05d..837d282 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -1,3 +1,7 @@ +body { + min-width: 300px; +} + .App { display: flex; height: 100svh; @@ -20,7 +24,7 @@ margin-bottom: 8px; } -.portfolio-container img { +.portfolio-container img.mtt-img { max-width: 100%; } @@ -30,6 +34,10 @@ align-items: center; } +.mtt-search-engine input[type="text"] { + width: 420px; +} + .portfolio-present .mtt-search-engine { align-items: flex-start; } @@ -56,7 +64,7 @@ } } -.portfolio-present img { +.portfolio-present img.mtt-img { max-width: 220px; width: 100%; object-fit: contain; @@ -126,6 +134,7 @@ th.icon, td.icon { th.name, td.name { max-width: 300px; + width: 300px; text-align: left; overflow: hidden; text-overflow: ellipsis; @@ -133,6 +142,7 @@ th.name, td.name { th.balance, td.balance { max-width: 300px; + width: 300px; text-align: left; overflow: hidden; text-overflow: ellipsis; @@ -184,8 +194,14 @@ th.balance, td.balance { .portfolio-container, .logs { width: 100%; + height: calc(100svh / 2); + } + .portfolio-container { + display: flex; + flex-direction: column; } .portfolio-present > .mtt-search-engine-container { + flex-shrink: 0; height: 97px; } .App .mtt-search-engine-container { @@ -194,6 +210,9 @@ th.balance, td.balance { align-items: center; justify-content: center; } + .portfolio-container.no-portfolio img.mtt-img { + margin-top: 16svh; + } .portfolio-present .mtt-search-engine { align-items: center; } @@ -204,21 +223,35 @@ th.balance, td.balance { .portfolio-table-container{ margin: 0; border: none; - height: calc( (100svh - 97px) / 2 ); } .portfolio-table{ width: calc( 100% - 8px ); margin: 0; margin-left: 8px; border: none; - height: calc( (100svh - 97px) / 2 ); } .portfolio-table tbody { height: 100%; } .logs { + padding: 8px 0 0 8px; + width: calc(100% - 8px); + border: none; margin: 0; flex-grow: 1; } +} + + +@media only screen and (max-width: 480px) { + .mtt-search-engine input[type="text"] { + width: calc(100svw - 32px); + } +} + +@media only screen and (max-width: 300px) { + .mtt-search-engine input[type="text"] { + width: calc(300px - 32px); + } } \ No newline at end of file diff --git a/frontend/src/Portfolio.js b/frontend/src/Portfolio.js index 11e70f1..066073a 100644 --- a/frontend/src/Portfolio.js +++ b/frontend/src/Portfolio.js @@ -870,7 +870,7 @@ function Portfolio({ serverurl }) { return (
- +
{ !portfolio &&
Search 270,158,000 Ethereum mainnet addresses
@@ -882,7 +882,6 @@ function Portfolio({ serverurl }) { name="address" required minLength="4" - size="50" value={ethAddress} onChange={(event) => { set_ethAddress(event.target.value) }} /> From f073d678b796eef11c9e5b7914586423adb0bfcc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Jadach?= Date: Wed, 29 May 2024 14:21:34 +0200 Subject: [PATCH 3/3] font smaller --- frontend/src/App.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/frontend/src/App.css b/frontend/src/App.css index 837d282..cd6faeb 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -216,13 +216,14 @@ th.balance, td.balance { .portfolio-present .mtt-search-engine { align-items: center; } - .mtt-search-engine input { + .mtt-search-engine input[type="button"] { height: 24px; font-size: 16px; } .portfolio-table-container{ margin: 0; border: none; + font-size: 13px; } .portfolio-table{ width: calc( 100% - 8px ); @@ -239,6 +240,7 @@ th.balance, td.balance { border: none; margin: 0; flex-grow: 1; + font-size: 10.5px; } }