From b607424d8aef9533e54dc1afda1eeef3c0780def Mon Sep 17 00:00:00 2001
From: Max <walzen665@web.de>
Date: Fri, 16 Feb 2024 17:55:20 +0100
Subject: [PATCH] Update upload.component.html

- Updated mobile design
---
 frontend/src/app/upload/upload.component.html | 26 ++++++++-----------
 1 file changed, 11 insertions(+), 15 deletions(-)

diff --git a/frontend/src/app/upload/upload.component.html b/frontend/src/app/upload/upload.component.html
index 9b09151..335478d 100644
--- a/frontend/src/app/upload/upload.component.html
+++ b/frontend/src/app/upload/upload.component.html
@@ -1,6 +1,6 @@
 <div class="container mx-auto p-4 mt-4">
   <h1 class="text-4xl font-bold text-center text-gray-800 mb-5">Upload Your File</h1>
-  <div class="bg-white shadow-lg rounded-lg p-6">
+  <div class="bg-white shadow-lg rounded-lg lg:p-6 p-3">
     <div *ngIf="!uploadStarted" class="flex flex-col items-center justify-center lg:p-5">
       <!-- File Drop Area -->
       <div
@@ -52,7 +52,7 @@
       <p class="text-gray-700 mt-4">Uploading {{ fileToUpload.name }}...</p>
     </div>
     <!-- Upload Finished -->
-    <div *ngIf="uploadFinished" class="flex flex-col items-center justify-center p-6 animate-fade-in-up">
+    <div *ngIf="uploadFinished" class="flex flex-col items-center justify-center lg:p-6 animate-fade-in-up">
       <div class="flex items-center justify-center rounded-full p-2 border-4 border-indigo-500">
         <img class="w-16" [ngClass]="{'animate-in spin-in-1 duration-1000': uploadFinished}" src="./assets/circle-check-solid.svg" alt="Success">
       </div>
@@ -61,35 +61,31 @@
 
       <div class="flex flex-wrap mt-5 mb-5" *ngIf="uploadData && fileUrls">
         <div class="w-full px-4">
-          <div class="grid grid-cols-2 gap-4 items-center">
-            <div class="text-gray-600 text-right">File Name:</div>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 items-center">
+            <div class="text-gray-600 lg:text-right">File Name:</div>
             <div>{{uploadData.fileName}}</div>
 
-            <div class="text-gray-600 text-right">Is password protected:</div>
+            <div class="text-gray-600 lg:text-right mt-1 lg:mt-0">Is password protected:</div>
             <label class="flex items-center space-x-2">
-              <!-- Use property binding to set checked based on uploadData.passwordProtected -->
               <input type="checkbox" class="checkbox checkbox-primary" [checked]="uploadData.passwordProtected" (click)="$event.preventDefault()"/>
               <span>{{uploadData.passwordProtected ? 'Yes' : 'No'}}</span>
             </label>
 
-            <div class="text-gray-600 text-right">Is single download:</div>
+            <div class="text-gray-600 lg:text-right mt-1 lg:mt-0">Is single download:</div>
             <label class="flex items-center space-x-2">
-              <!-- Use property binding to set checked based on uploadData.singleDownload -->
               <input type="checkbox" class="checkbox checkbox-primary" [checked]="uploadData.singleDownload" (click)="$event.preventDefault()"/>
               <span>{{uploadData.singleDownload ? 'Yes' : 'No'}}</span>
             </label>
-
-            <div class="text-gray-600 text-right">Download Password:</div>
+            <div class="text-gray-600 lg:text-right mt-1 lg:mt-0">Download Password:</div>
             <div>{{uploadData.password || 'N/A'}}</div>
 
-            <div class="text-gray-600 text-right">File ID:</div>
+            <div class="text-gray-600 lg:text-right mt-1 lg:mt-0">File ID:</div>
             <div>{{uploadData.fileId}}</div>
 
-            <!-- Assuming you have properties for downloadURL and statusURL -->
-            <div class="text-gray-600 text-right">Download URL:</div>
+            <div class="text-gray-600 lg:text-right mt-1 lg:mt-0">Download URL:</div>
             <div><a href="{{fileUrls.downloadUrl}}" target="_blank">{{fileUrls.downloadUrl}}</a></div>
 
-            <div class="text-gray-600 text-right">File Status URL:</div>
+            <div class="text-gray-600 lg:text-right mt-1 lg:mt-0">File Status URL:</div>
             <div><a href="{{fileUrls.statusUrl}}" target="_blank">{{fileUrls.statusUrl}}</a></div>
           </div>
         </div>
@@ -98,6 +94,7 @@
 
 
 
+
       <p class="text-sm text-gray-500 mt-1">Your file is now securely stored on our servers.</p>
 
       <div class="mt-4 flex flex-col w-full items-center">
@@ -105,7 +102,6 @@
         <button class="btn btn-primary mt-2 w-full max-w-xs">Upload Another File</button>
         <button class="btn btn-outline btn-secondary mt-2 w-full max-w-xs">Delete this file</button>
       </div>
-      <a href="#" class="link link-primary mt-4">Manage your uploads</a>
     </div>
 
   </div>