feat: create new file page with improved UI, combine upload and download functionality

This commit is contained in:
2024-09-15 17:24:18 +07:00
parent b54d0f16a5
commit eee047a9b0
22 changed files with 1189 additions and 1137 deletions

View File

@ -48,19 +48,32 @@ templ BaseAuth(title string){
{ children... }
</div>
</div>
<script type="text/javascript">
function addScript() {
if (!window.scriptAdded) {
const script = document.createElement('script');
script.src = "/public/main.js";
window.scriptAdded = true;
script.onerror = onerror;
document.head.appendChild(script);
}
}
addScript()
</script>
<div class="hidden" id="uploadBox">
<div class="fixed bottom-6 right-6 w-80 bg-white rounded-lg shadow-lg border border-gray-200 overflow-hidden">
<div class="p-4 bg-gray-100 flex justify-between items-center">
<div class="flex items-center">
<span class="font-medium text-base">Mengupload 1 item</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</div>
<button class="text-gray-500 hover:text-gray-700">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<div id="FileUploadBoxItem">
</div>
</div>
</div>
@MainScript()
@modalScript()
<script type="text/javascript">
function showFileUploadBox() {
document.getElementById('FileUploadBox').classList.remove('hidden');
}
</script>
</body>
</html>
}
@ -80,6 +93,21 @@ templ modal() {
</div>
}
templ MainScript() {
<script type="text/javascript">
function addScript() {
if (!window.scriptAdded) {
const script = document.createElement('script');
script.src = "/public/main.js";
window.scriptAdded = true;
script.onerror = onerror;
document.head.appendChild(script);
}
}
addScript()
</script>
}
templ modalScript(){
<script type="text/javascript">
window.modalContainer = document.getElementById('modalContainer');