Max665/sharepulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update upload.component.html

Browse Source 
- Updated mobile design
This commit is contained in:
Max W. 2024-02-16 17:55:20 +01:00
parent 43e0eb1766
commit b607424d8a
1 changed files with 11 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/app/upload/upload.component.html
View File

@ -1,6 +1,6 @@
<div class="container mx-auto p-4 mt-4"> <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> <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"> <div *ngIf="!uploadStarted" class="flex flex-col items-center justify-center lg:p-5">
<!-- File Drop Area --> <!-- File Drop Area -->
<div <div
@ -52,7 +52,7 @@
<p class="text-gray-700 mt-4">Uploading {{ fileToUpload.name }}...</p> <p class="text-gray-700 mt-4">Uploading {{ fileToUpload.name }}...</p>
</div> </div>
<!-- Upload Finished --> <!-- 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"> <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"> <img class="w-16" [ngClass]="{'animate-in spin-in-1 duration-1000': uploadFinished}" src="./assets/circle-check-solid.svg" alt="Success">
</div> </div>
@ -61,35 +61,31 @@
<div class="flex flex-wrap mt-5 mb-5" *ngIf="uploadData && fileUrls"> <div class="flex flex-wrap mt-5 mb-5" *ngIf="uploadData && fileUrls">
<div class="w-full px-4"> <div class="w-full px-4">
<div class="grid grid-cols-2 gap-4 items-center"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 items-center">
<div class="text-gray-600 text-right">File Name:</div> <div class="text-gray-600 lg:text-right">File Name:</div>
<div>{{uploadData.fileName}}</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"> <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()"/> <input type="checkbox" class="checkbox checkbox-primary" [checked]="uploadData.passwordProtected" (click)="$event.preventDefault()"/>
<span>{{uploadData.passwordProtected ? 'Yes' : 'No'}}</span> <span>{{uploadData.passwordProtected ? 'Yes' : 'No'}}</span>
</label> </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"> <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()"/> <input type="checkbox" class="checkbox checkbox-primary" [checked]="uploadData.singleDownload" (click)="$event.preventDefault()"/>
<span>{{uploadData.singleDownload ? 'Yes' : 'No'}}</span> <span>{{uploadData.singleDownload ? 'Yes' : 'No'}}</span>
</label> </label>
<div class="text-gray-600 lg:text-right mt-1 lg:mt-0">Download Password:</div>
<div class="text-gray-600 text-right">Download Password:</div>
<div>{{uploadData.password || 'N/A'}}</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> <div>{{uploadData.fileId}}</div>
<!-- Assuming you have properties for downloadURL and statusURL --> <div class="text-gray-600 lg:text-right mt-1 lg:mt-0">Download URL:</div>
<div class="text-gray-600 text-right">Download URL:</div>
<div><a href="{{fileUrls.downloadUrl}}" target="_blank">{{fileUrls.downloadUrl}}</a></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><a href="{{fileUrls.statusUrl}}" target="_blank">{{fileUrls.statusUrl}}</a></div>
</div> </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> <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"> <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-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> <button class="btn btn-outline btn-secondary mt-2 w-full max-w-xs">Delete this file</button>
</div> </div>
<a href="#" class="link link-primary mt-4">Manage your uploads</a>
</div> </div>
</div> </div>