KAZ/webtransfer
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

padding of webcontent view

Browse Source
This commit is contained in:
GMrrc 2024-11-28 15:04:30 +01:00
parent 8f580aa924
commit b80807cc3c
3 changed files with 38 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.vue
View File

@ -4,12 +4,12 @@
<div class="h-full w-full flex flex-col sm:flex-row">
<!-- Première section -->
<div
class="w-full sm:w-1/3 max-sm:h-2/5 p-4 sm:m-6 rounded-xl bg-NcBlack/40">
class="w-full sm:w-1/3 max-sm:h-2/5 p-4 sm:m-6 sm:mr-0 rounded-xl bg-NcBlack/40">
<WebContentViewer @zip-upload="handleZipUpload" @file-upload="handleFileUpload" zipUrl="http://localhost:8000/dummyZip.zip"/>
</div>
<!-- Deuxième section -->
<div
class="w-full sm:w-2/3 max-sm:h-3/5 p-4 sm:m-6 bg-NcBlack rounded-xl">
class="w-full sm:w-2/3 max-sm:h-3/5 p-4 sm:m-6 sm:ml-4 bg-NcBlack rounded-xl">
<FileTable :file="sharedFile" :zip="zip"/>
</div>
</div>

24
src/components/WebContentViewer.vue
View File

@ -1,8 +1,8 @@
<template>
<div class="flex flex-col h-full w-full border">
<div class="flex h-12 items-center border-b border-gray-300">
<div class="w-4/6 px-4 py-2 text-gray-500 font-semibold border-r border-gray-300">Nom</div>
<div class="w-2/6 px-4 py-2 text-gray-500 font-semibold">Taille</div>
<div class="w-5/6 px-4 py-2 text-gray-500 font-semibold border-r border-gray-300">Nom</div>
<div class="w-1/6 px-4 py-2 text-gray-500 font-semibold">Taille</div>
</div>
<div class="flex h-16 hover:bg-NcGray items-center pl-4 cursor-pointer rounded-lg border-b last:border-b-0 border-gray-300" v-if="!isLoading"
@ -14,11 +14,11 @@
</svg>
</div>
</template>
<div class="w-4/6 flex items-center px-4 py-2 cursor-pointer">
<div class="w-5/6 flex items-center px-4 py-2 cursor-pointer">
<div class="truncate max-sm:max-w-32 max-w-64 cursor-pointer">{{ zipName }}</div>
</div>
<div class="w-2/6 py-2 cursor-pointer">
<div class="w-1/6 py-2 cursor-pointer">
{{ formatFileSize(zipSize) }}
</div>
</div>
@ -27,8 +27,11 @@
<div v-for="(file, index) in sortedFiles" :key="file.fullPath" class="flex flex-col">
<div class="flex h-16 hover:bg-NcGray items-center pl-4 cursor-pointer rounded-lg border-b last:border-b-0 border-gray-300"
:style="{
'padding-left': `${0.5 * (file.depth + 1)}rem`
}"
@click="toggleFolder(file)" v-if="file.isDirectory" draggable="true" @dragstart="onDragStart(file)">
<div class="w-4/6 flex items-center py-2 border-r border-gray-300 cursor-pointer">
<div class="w-5/6 flex items-center py-2 border-r border-gray-300 cursor-pointer">
<div class="w-12 h-12 flex items-center justify-center cursor-pointer">
<template>
<svg fill="currentColor" viewBox="0 0 24 24" class="text-NcBlue w-10 h-10 ">
@ -51,6 +54,9 @@
</div>
<div class="flex h-16 hover:bg-NcGray items-center pl-4 cursor-pointer rounded-lg border-b last:border-b-0 border-gray-300"
:style="{
'padding-left': `${0.5 * (file.depth + 1)}rem`
}"
v-else draggable="true" @dragstart="onDragStart(file, $event)">
<template>
<div class="flex items-center justify-center cursor-pointer">
@ -63,11 +69,11 @@
</svg>
</div>
</template>
<div class="w-4/6 flex items-center px-4 py-2 cursor-pointer">
<div class="truncate max-sm:max-w-32 max-w-64 cursor-pointer">{{ file.name }}</div>
<div class="w-5/6 flex items-center px-4 py-2 cursor-pointer">
<div class="truncate max-sm:max-w-32 max-w-96 cursor-pointer">{{ file.name }}</div>
</div>
<div class="w-2/6 py-2 cursor-pointer">
<div class="w-1/6 py-2 cursor-pointer">
{{ formatFileSize(file.size) }}
</div>
</div>
@ -89,6 +95,7 @@ import ChevronRightIcon from 'vue-material-design-icons/ChevronRight.vue';
import ChevronDownIcon from 'vue-material-design-icons/ChevronDown.vue';
import Loading from 'vue-material-design-icons/Loading.vue';
import { ref } from 'vue';
import path from 'path';
export default {
name: 'WebContentViewer',
@ -186,6 +193,7 @@ export default {
size: isDirectory ? 0 : file._data.uncompressedSize,
content: isDirectory ? null : '', // Initialiser 'content' pour les fichiers
children: isDirectory ? [] : null,
depth: pathParts.length, // Profondeur du fichier dans l'arborescence
//remove the name of the file from the path
parentPath: i > 0 ? pathParts[i - 1] : '',
unzip: promise

20
src/output.css
View File

@ -707,10 +707,18 @@ video {
width: 100%;
}
.w-5\/6 {
width: 83.333333%;
}
.max-w-64 {
max-width: 16rem;
}
.max-w-96 {
max-width: 24rem;
}
.transform {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@ -1031,6 +1039,18 @@ video {
margin: 1.5rem;
}
.sm\:ml-0 {
margin-left: 0px;
}
.sm\:mr-0 {
margin-right: 0px;
}
.sm\:ml-4 {
margin-left: 1rem;
}
.sm\:w-1\/3 {
width: 33.333333%;
}