Implement responsive content page (#101)

honeynet · Nov 15, 2023 · d9d47b2 · d9d47b2
1 parent 2c5b454
commit d9d47b2
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 8 deletions.
diff --git a/frontend/components/Config.svelte b/frontend/components/Config.svelte
@@ -16,6 +16,6 @@
 
 <style>
     .config {
-        margin: 10px auto;
+        margin: 10px 20px;
     }
 </style>
diff --git a/frontend/components/Content.svelte b/frontend/components/Content.svelte
@@ -9,16 +9,16 @@
     export let isShared: boolean;
 
     function render(payload: string) {
-        const result = hexy(atob(payload), { width: 16 });
+        const result = hexy(atob(payload), { width: 8 });
         const resultLines = result.split('\n');
         let addressStr = '';
         let hexStr = '';
         let plainStr = '';
         resultLines.forEach((item, idx) => {
             if (item) {
                 addressStr += (idx > 0 ? '\n' : '') + item.substring(0, item.indexOf(':'));
-                hexStr += (idx > 0 ? '\n' : '') + item.substring(item.indexOf(':') + 2, 51);
-                plainStr += (idx > 0 ? '\n' : '') + item.substring(51);
+                hexStr += (idx > 0 ? '\n' : '') + item.substring(item.indexOf(':') + 2, 31);
+                plainStr += (idx > 0 ? '\n' : '') + item.substring(31);
             }
         });
         return [
@@ -196,7 +196,7 @@
         display: flex;
         justify-content: flex-start;
         gap: 20px;
-        min-width: 535px;
+        min-width: 355px;
         font-family: monospace;
         padding-top: 15px;
         padding-bottom: 15px;
@@ -214,6 +214,8 @@
         unicode-bidi: embed;
         font-family: monospace;
         white-space: pre;
+        text-wrap: wrap;
         padding-top: 20px;
+        word-break: break-all;
     }
 </style>
diff --git a/frontend/components/Header.svelte b/frontend/components/Header.svelte
@@ -40,6 +40,8 @@
         border-bottom-style: solid;
         padding-bottom: 10px;
         border-width: 1px;
+        margin-right: 20px;
+        margin-left: 20px;
     }
 
     .header__link {

diff --git a/frontend/components/MessageList.svelte b/frontend/components/MessageList.svelte
@@ -70,11 +70,9 @@
     .column {
         flex: 50%;
         padding: 15px 20px;
-        min-width: 300px;
     }
 
     #message-log {
-        width: 100%;
         flex-grow: 1;
         overflow-y: scroll;
     }

diff --git a/frontend/pages/index.svelte b/frontend/pages/index.svelte
@@ -102,4 +102,10 @@
         bottom: 0;
         right: 0;
     }
+
+    @media (width < 710px) {
+        .row {
+            flex-direction: column;
+        }
+    }
 </style>
diff --git a/public/global.css b/public/global.css
@@ -8,7 +8,6 @@ body {
 	color: #333;
 	margin: 0;
 	box-sizing: border-box;
-	padding: 8px;;
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 }