From b782b89212e476e9e92c85365ae334de8f4b31e3 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Tue, 31 Oct 2023 09:42:31 +0100
Subject: [PATCH] Adjusted base64 encoder/decoder design

---
 Frontend/src/views/Base64EncoderView.vue | 37 ++++++++++++++----------
 1 file changed, 22 insertions(+), 15 deletions(-)

diff --git a/Frontend/src/views/Base64EncoderView.vue b/Frontend/src/views/Base64EncoderView.vue
index 2bf949a..8511cd4 100644
--- a/Frontend/src/views/Base64EncoderView.vue
+++ b/Frontend/src/views/Base64EncoderView.vue
@@ -35,27 +35,34 @@ function clear(){
 </script>
 
 <template>
-<div id="layoutFull" class="w-full h-full flex">
-    <div id="layoutLeft" class="flex flex-col w-1/2 h-full gap-4">
-        <div class="w-4/5 flex flex-row-reverse gap-2 mt-12 ml-6">
-            <EncoderButton @update:result="setTextFieldValue" :code="data" encode-type="Base64"></EncoderButton>
-            <EncoderButton @update:result="setTextFieldValue" :code="data" encode-type="Text"></EncoderButton>
-            <EncoderButton @image:show="showImage" :code="data" encode-type="Image"></EncoderButton>
-            <button class="tool-button" @click="clear()">Clear</button>
+<div id="layoutFull" class="w-full h-full flex flex-col xl:flex-row">
+    <div id="layoutLeft" class="flex flex-col w-full xl:w-1/2 h-1/3 xl:h-full gap-4 pr-4">
+        <div class="w-full flex flex-row place-content-between items-center">
+            <label class="dark:text-white text-center">Base64/Text</label>
+            <div class="flex flex-row items-center gap-2">
+                <button class="tool-button" @click="clear()">Clear</button>
+                <label class="text-grey-900 dark:text-white">Convert to</label>
+                <EncoderButton @image:show="showImage" :code="data" encode-type="Image"></EncoderButton>
+                <EncoderButton @update:result="setTextFieldValue" :code="data" encode-type="Text"></EncoderButton>
+                <EncoderButton @update:result="setTextFieldValue" :code="data" encode-type="Base64"></EncoderButton>
+            </div>
+            
         </div>
-        <div id="codeEditor" class="w-4/5 h-1/3 ml-6  flex flex-col">
-            <label class="dark:text-white text-center w-full">Base64</label>
+        <div id="codeEditor" class="w-full h-full xl:h-1/3 flex flex-col">
+            
             <CodeEditorComponent @update:updated-code="setTextFieldValue" :config="{language:'base64'}" :code="data"></CodeEditorComponent>
         </div>
-        <div class="w-4/5 flex items-center flex-col ml-6" id="imageImporter">
-            <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" for="file_input">Upload image</label>
-            <input id="imageLoader" ref="inputImage" class="file-selector" accept=".gif, .jpg, .jpeg, .png, .webm, image/gif, image/jpeg, image/png, image/webm"  type="file" @change="convertImageToBase64" />
+        <div class="flex flex-row justify-center w-full">
+            <div class="flex flex-col items-center w-fit" id="imageImporter">
+                <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" for="file_input">Upload image</label>
+                <input id="imageLoader" ref="inputImage" class="file-selector" accept=".gif, .jpg, .jpeg, .png, .webm, image/gif, image/jpeg, image/png, image/webm"  type="file" @change="convertImageToBase64" />
+            </div>    
         </div>
+        
     </div>
-    <div id="separator" class="bg-black h-full w-1" ></div>
     
-    <div id="layoutRight" class=" ml-6 w-2/5">
-        <div v-on="DoshowImage">
+    <div id="layoutRight" class="w-full xl:w-1/2 min-h-[66%] xl:h-full pl-4">
+        <div class="border-2 rounded-lg border-gray-300 dark:border-gray-600 min-h-[50%]" v-on="DoshowImage">
             <img :src="imageData"/>
         </div>