Merge pull request #15 from hoprnet/mobile

Mobile css
hoprnet · May 29, 2024 · 6c48a2a · 6c48a2a
2 parents 58f0d38 + f073d67
commit 6c48a2a
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 5 deletions.
diff --git 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
@@ -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,13 +134,15 @@ th.icon, td.icon {
 
 th.name, td.name {
   max-width: 300px;
+  width: 300px;
   text-align: left;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 th.balance, td.balance {
   max-width: 300px;
+  width: 300px;
   text-align: left;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -172,4 +182,78 @@ 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%;
+    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 {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+  .portfolio-container.no-portfolio img.mtt-img {
+    margin-top: 16svh;
+  }
+  .portfolio-present .mtt-search-engine {
+    align-items: center;
+  }
+  .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 );
+    margin: 0;
+    margin-left: 8px;
+    border: none;
+  }
+  .portfolio-table tbody {
+    height: 100%;
+  }
+  .logs {
+    padding: 8px 0 0 8px;
+    width: calc(100% - 8px);
+    border: none;
+    margin: 0;
+    flex-grow: 1;
+    font-size: 10.5px;
+  }
+
+}
+
+
+@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);
+  }
 }
diff --git a/frontend/src/Portfolio.js b/frontend/src/Portfolio.js
@@ -870,7 +870,7 @@ function Portfolio({ serverurl }) {
     return (
         <div className={`portfolio-container ${portfolio ? 'portfolio-present' : 'no-portfolio'}`}>
             <div className="mtt-search-engine-container">
-                <img src='./MTT.png'/>
+                <img className="mtt-img" src='./MTT.png'/>
                 <div className="mtt-search-engine">
                     {
                         !portfolio && <div> Search 270,158,000 Ethereum mainnet addresses</div>
@@ -882,7 +882,6 @@ function Portfolio({ serverurl }) {
                         name="address"
                         required
                         minLength="4"
-                        size="50"
                         value={ethAddress}
                         onChange={(event) => { set_ethAddress(event.target.value) }}
                     />