Responsive Design
This commit is contained in:
GMrrc
parent
3ff323ae71
commit
8a34ab14d3
124
js/main.js
124
js/main.js
@ -1018,11 +1018,11 @@ var render = function render() {
|
||||
id: "app"
|
||||
}
|
||||
}, [_c("div", {
|
||||
staticClass: "h-full w-full flex flex-row"
|
||||
staticClass: "h-full w-full flex flex-col sm:flex-row"
|
||||
}, [_c("div", {
|
||||
staticClass: "w-1/3 p-4 m-6 mr-2 rounded-xl"
|
||||
staticClass: "w-full sm:w-1/3 max-sm:h-2/5 p-4 sm:m-6 rounded-xl bg-NcBlack/40"
|
||||
}), _vm._v(" "), _c("div", {
|
||||
staticClass: "w-2/3 p-4 m-6 ml-2 bg-NcBlack rounded-xl"
|
||||
staticClass: "w-full sm:w-2/3 max-sm:h-3/5 p-4 sm:m-6 bg-NcBlack rounded-xl"
|
||||
}, [_c("FileTable")], 1)])]);
|
||||
};
|
||||
var staticRenderFns = [];
|
||||
@ -1066,7 +1066,7 @@ var render = function render() {
|
||||
attrs: {
|
||||
size: 20
|
||||
}
|
||||
}), _vm._v(" "), _c("span", [_vm._v("Add")])], 1)])];
|
||||
}), _vm._v(" "), _c("span", [_vm._v("Nouveau")])], 1)])];
|
||||
},
|
||||
proxy: true
|
||||
}])
|
||||
@ -1131,7 +1131,9 @@ var render = function render() {
|
||||
on: {
|
||||
click: _vm.createNewFile
|
||||
}
|
||||
}, [_vm._v("\n Créer\n ")])])])]) : _vm._e(), _vm._v(" "), _vm._m(0), _vm._v(" "), _vm._l(_vm.files, function (file) {
|
||||
}, [_vm._v("\n Créer\n ")])])])]) : _vm._e(), _vm._v(" "), _vm._m(0), _vm._v(" "), _c("div", {
|
||||
staticClass: "overflow-y-auto"
|
||||
}, _vm._l(_vm.files, function (file) {
|
||||
return _c("div", {
|
||||
key: file.filename,
|
||||
staticClass: "flex h-16 items-center hover:bg-NcGray rounded-lg border-b last:border-b-0 border-gray-300",
|
||||
@ -1179,13 +1181,13 @@ var render = function render() {
|
||||
transform: "matrix(.7 0 0 .7 -.43 -.388)"
|
||||
}
|
||||
})])])]], 2), _vm._v(" "), _c("div", {
|
||||
staticClass: "ml-4 cursor-pointer"
|
||||
staticClass: "ml-4 cursor-pointer max-sm:max-w-32 truncate"
|
||||
}, [_vm._v(_vm._s(file.basename))])]), _vm._v(" "), _c("div", {
|
||||
staticClass: "w-1/6 px-4 py-2 border-r border-gray-300 cursor-pointer"
|
||||
}, [_vm._v("\n " + _vm._s(file.type === "directory" ? "Dossier" : "Fichier") + "\n ")]), _vm._v(" "), _c("div", {
|
||||
}, [_vm._v("\n " + _vm._s(file.type === "directory" ? "Dossier" : "Fichier") + "\n ")]), _vm._v(" "), _c("div", {
|
||||
staticClass: "w-1/6 px-4 py-2 cursor-pointer"
|
||||
}, [_vm._v("\n " + _vm._s(file.type === "directory" ? "-" : _vm.formatFileSize(file.size)) + "\n ")])]);
|
||||
})], 2);
|
||||
}, [_vm._v("\n " + _vm._s(file.type === "directory" ? "-" : _vm.formatFileSize(file.size)) + "\n ")])]);
|
||||
}), 0)]);
|
||||
};
|
||||
var staticRenderFns = [function () {
|
||||
var _vm = this,
|
||||
@ -3191,6 +3193,14 @@ video {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.ml-6 {
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
|
||||
.mr-6 {
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
|
||||
.inline {
|
||||
display: inline;
|
||||
}
|
||||
@ -3215,6 +3225,14 @@ video {
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
.h-1\\/3 {
|
||||
height: 33.333333%;
|
||||
}
|
||||
|
||||
.h-2\\/3 {
|
||||
height: 66.666667%;
|
||||
}
|
||||
|
||||
.max-h-8 {
|
||||
max-height: 2rem;
|
||||
}
|
||||
@ -3297,6 +3315,16 @@ video {
|
||||
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
|
||||
}
|
||||
|
||||
.overflow-y-auto {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.truncate {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.rounded-lg {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
@ -3364,6 +3392,14 @@ video {
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.bg-NcBlack\\/20 {
|
||||
background-color: rgb(23 23 23 / 0.2);
|
||||
}
|
||||
|
||||
.bg-NcBlack\\/40 {
|
||||
background-color: rgb(23 23 23 / 0.4);
|
||||
}
|
||||
|
||||
.bg-opacity-50 {
|
||||
--tw-bg-opacity: 0.5;
|
||||
}
|
||||
@ -3480,6 +3516,76 @@ video {
|
||||
.focus\\:ring-blue-500:focus {
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
|
||||
}
|
||||
|
||||
@media not all and (min-width: 640px) {
|
||||
.max-sm\\:h-1\\/3 {
|
||||
height: 33.333333%;
|
||||
}
|
||||
|
||||
.max-sm\\:h-2\\/3 {
|
||||
height: 66.666667%;
|
||||
}
|
||||
|
||||
.max-sm\\:h-2\\/5 {
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
.max-sm\\:h-3\\/5 {
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.max-sm\\:w-1\\/3 {
|
||||
width: 33.333333%;
|
||||
}
|
||||
|
||||
.max-sm\\:w-2\\/3 {
|
||||
width: 66.666667%;
|
||||
}
|
||||
|
||||
.max-sm\\:max-w-32 {
|
||||
max-width: 8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.sm\\:m-6 {
|
||||
margin: 1.5rem;
|
||||
}
|
||||
|
||||
.sm\\:ml-2 {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.sm\\:mr-2 {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.sm\\:h-full {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sm\\:w-1\\/3 {
|
||||
width: 33.333333%;
|
||||
}
|
||||
|
||||
.sm\\:w-2\\/3 {
|
||||
width: 66.666667%;
|
||||
}
|
||||
|
||||
.sm\\:flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
@media not all and (min-width: 640px) {
|
||||
.sm\\:max-sm\\:w-1\\/3 {
|
||||
width: 33.333333%;
|
||||
}
|
||||
|
||||
.sm\\:max-sm\\:w-2\\/3 {
|
||||
width: 66.666667%;
|
||||
}
|
||||
}
|
||||
}`, ""]);
|
||||
// Exports
|
||||
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
|
||||
|
||||
File diff suppressed because one or more lines are too long
12
src/App.vue
12
src/App.vue
@ -1,13 +1,17 @@
|
||||
<template>
|
||||
<div id="app" class="h-full w-full bg-black/80">
|
||||
<div class="h-full w-full flex flex-row">
|
||||
<div class="w-1/3 p-4 m-6 mr-2 rounded-xl">
|
||||
<!-- Conteneur principal, ajustement en flex-row à partir de sm -->
|
||||
<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">
|
||||
</div>
|
||||
<div class="w-2/3 p-4 m-6 ml-2 bg-NcBlack rounded-xl">
|
||||
<!-- 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">
|
||||
<FileTable/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
class="flex items-center space-x-2 bg-blue-100 text-blue-600 font-medium px-4 py-2 rounded-md hover:bg-blue-200 transition"
|
||||
>
|
||||
<Plus :size="20" />
|
||||
<span>Add</span>
|
||||
<span>Nouveau</span>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
@ -59,43 +59,45 @@
|
||||
</div>
|
||||
|
||||
<!-- Contenu -->
|
||||
<div v-for="file in files" :key="file.filename"
|
||||
class="flex h-16 items-center hover:bg-NcGray rounded-lg border-b last:border-b-0 border-gray-300"
|
||||
@click="handleClickElem(file)">
|
||||
<div class="overflow-y-auto">
|
||||
<div v-for="file in files" :key="file.filename"
|
||||
class="flex h-16 items-center hover:bg-NcGray rounded-lg border-b last:border-b-0 border-gray-300"
|
||||
@click="handleClickElem(file)">
|
||||
|
||||
<!-- Nom -->
|
||||
<div class="w-4/6 flex items-center px-4 py-2 border-r border-gray-300 cursor-pointer">
|
||||
<div class="w-12 h-12 flex items-center justify-center cursor-pointer">
|
||||
<template v-if="file.type === 'directory'">
|
||||
<svg fill="currentColor" viewBox="0 0 24 24" class="text-NcBlue w-10 h-10 ">
|
||||
<path
|
||||
d="M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z">
|
||||
</path>
|
||||
</svg>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="flex items-center justify-center cursor-pointer">
|
||||
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"
|
||||
class="w-10 h-10"
|
||||
style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2">
|
||||
<!-- Nom -->
|
||||
<div class="w-4/6 flex items-center px-4 py-2 border-r border-gray-300 cursor-pointer">
|
||||
<div class="w-12 h-12 flex items-center justify-center cursor-pointer">
|
||||
<template v-if="file.type === 'directory'">
|
||||
<svg fill="currentColor" viewBox="0 0 24 24" class="text-NcBlue w-10 h-10 ">
|
||||
<path
|
||||
d="M6 22c-.55 0-1.021-.196-1.412-.587A1.927 1.927 0 0 1 4 20V4c0-.55.196-1.021.588-1.413A1.926 1.926 0 0 1 6 2h8l6 6v12a1.93 1.93 0 0 1-.587 1.413A1.93 1.93 0 0 1 18 22H6Z"
|
||||
style="fill:#969696;fill-rule:nonzero" transform="matrix(.7 0 0 .7 -.43 -.388)" />
|
||||
d="M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="flex items-center justify-center cursor-pointer">
|
||||
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"
|
||||
class="w-10 h-10"
|
||||
style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2">
|
||||
<path
|
||||
d="M6 22c-.55 0-1.021-.196-1.412-.587A1.927 1.927 0 0 1 4 20V4c0-.55.196-1.021.588-1.413A1.926 1.926 0 0 1 6 2h8l6 6v12a1.93 1.93 0 0 1-.587 1.413A1.93 1.93 0 0 1 18 22H6Z"
|
||||
style="fill:#969696;fill-rule:nonzero" transform="matrix(.7 0 0 .7 -.43 -.388)" />
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="ml-4 cursor-pointer max-sm:max-w-32 truncate">{{ file.basename }}</div>
|
||||
</div>
|
||||
<div class="ml-4 cursor-pointer">{{ file.basename }}</div>
|
||||
</div>
|
||||
|
||||
<!-- Type -->
|
||||
<div class="w-1/6 px-4 py-2 border-r border-gray-300 cursor-pointer">
|
||||
{{ file.type === 'directory' ? 'Dossier' : 'Fichier' }}
|
||||
</div>
|
||||
<!-- Type -->
|
||||
<div class="w-1/6 px-4 py-2 border-r border-gray-300 cursor-pointer">
|
||||
{{ file.type === 'directory' ? 'Dossier' : 'Fichier' }}
|
||||
</div>
|
||||
|
||||
<!-- Taille -->
|
||||
<div class="w-1/6 px-4 py-2 cursor-pointer">
|
||||
{{ file.type === 'directory' ? '-' : formatFileSize(file.size) }}
|
||||
<!-- Taille -->
|
||||
<div class="w-1/6 px-4 py-2 cursor-pointer">
|
||||
{{ file.type === 'directory' ? '-' : formatFileSize(file.size) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
104
src/output.css
104
src/output.css
@ -631,6 +631,14 @@ video {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.ml-6 {
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
|
||||
.mr-6 {
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
|
||||
.inline {
|
||||
display: inline;
|
||||
}
|
||||
@ -655,6 +663,14 @@ video {
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
.h-1\/3 {
|
||||
height: 33.333333%;
|
||||
}
|
||||
|
||||
.h-2\/3 {
|
||||
height: 66.666667%;
|
||||
}
|
||||
|
||||
.max-h-8 {
|
||||
max-height: 2rem;
|
||||
}
|
||||
@ -737,6 +753,16 @@ video {
|
||||
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
|
||||
}
|
||||
|
||||
.overflow-y-auto {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.truncate {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.rounded-lg {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
@ -804,6 +830,14 @@ video {
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.bg-NcBlack\/20 {
|
||||
background-color: rgb(23 23 23 / 0.2);
|
||||
}
|
||||
|
||||
.bg-NcBlack\/40 {
|
||||
background-color: rgb(23 23 23 / 0.4);
|
||||
}
|
||||
|
||||
.bg-opacity-50 {
|
||||
--tw-bg-opacity: 0.5;
|
||||
}
|
||||
@ -920,4 +954,74 @@ video {
|
||||
.focus\:ring-blue-500:focus {
|
||||
--tw-ring-opacity: 1;
|
||||
--tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
|
||||
}
|
||||
|
||||
@media not all and (min-width: 640px) {
|
||||
.max-sm\:h-1\/3 {
|
||||
height: 33.333333%;
|
||||
}
|
||||
|
||||
.max-sm\:h-2\/3 {
|
||||
height: 66.666667%;
|
||||
}
|
||||
|
||||
.max-sm\:h-2\/5 {
|
||||
height: 40%;
|
||||
}
|
||||
|
||||
.max-sm\:h-3\/5 {
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.max-sm\:w-1\/3 {
|
||||
width: 33.333333%;
|
||||
}
|
||||
|
||||
.max-sm\:w-2\/3 {
|
||||
width: 66.666667%;
|
||||
}
|
||||
|
||||
.max-sm\:max-w-32 {
|
||||
max-width: 8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.sm\:m-6 {
|
||||
margin: 1.5rem;
|
||||
}
|
||||
|
||||
.sm\:ml-2 {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.sm\:mr-2 {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.sm\:h-full {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sm\:w-1\/3 {
|
||||
width: 33.333333%;
|
||||
}
|
||||
|
||||
.sm\:w-2\/3 {
|
||||
width: 66.666667%;
|
||||
}
|
||||
|
||||
.sm\:flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
@media not all and (min-width: 640px) {
|
||||
.sm\:max-sm\:w-1\/3 {
|
||||
width: 33.333333%;
|
||||
}
|
||||
|
||||
.sm\:max-sm\:w-2\/3 {
|
||||
width: 66.666667%;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user