Made AssetView more mobile friendly

macterra · Oct 22, 2023 · fe3f8f6 · fe3f8f6
1 parent c4a548d
commit fe3f8f6
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 7 deletions.
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -32,17 +32,46 @@
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(360deg);
   }
 }
 
 a {
-  color: white; /* Change this to the desired color for all Link tags */
-  text-decoration: none; /* Optional: remove underline from links */
+  color: white;
+  /* Change this to the desired color for all Link tags */
+  text-decoration: none;
+  /* Optional: remove underline from links */
 }
 
 a:hover {
-  color: lightblue; /* Change this to the desired color for all Link tags on hover */
-  text-decoration: underline; /* Optional: add underline on hover */
+  color: lightblue;
+  /* Change this to the desired color for all Link tags on hover */
+  text-decoration: underline;
+  /* Optional: add underline on hover */
+}
+
+.container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+  flex-wrap: wrap;
+}
+
+.left-pane,
+.right-pane {
+  width: 50%;
+  padding: 16px;
+  box-sizing: border-box;
+}
+
+/* Media query for screens narrower than 768px */
+@media (max-width: 767px) {
+
+  .left-pane,
+  .right-pane {
+    width: 100%;
+  }
 }
diff --git a/frontend/src/AssetView.js b/frontend/src/AssetView.js
@@ -63,11 +63,11 @@ const AssetView = ({ navigate }) => {
     };
 
     return (
-        <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
-            <div style={{ width: '50%', padding: '16px' }}>
+        <div className="container">
+            <div className="left-pane">
                 <img src={metadata.file.path} alt={metadata.asset.title} style={{ width: '100%', height: 'auto' }} />
             </div>
-            <div style={{ width: '50%', padding: '16px' }}>
+            <div className="right-pane">
                 <Tabs
                     value={tab}
                     onChange={handleTabChange}