Responsive Design
This commit is contained in:
parent
3ff323ae71
commit
8a34ab14d3
124
js/main.js
124
js/main.js
@ -1018,11 +1018,11 @@ var render = function render() {
|
|||||||
id: "app"
|
id: "app"
|
||||||
}
|
}
|
||||||
}, [_c("div", {
|
}, [_c("div", {
|
||||||
staticClass: "h-full w-full flex flex-row"
|
staticClass: "h-full w-full flex flex-col sm:flex-row"
|
||||||
}, [_c("div", {
|
}, [_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", {
|
}), _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)])]);
|
}, [_c("FileTable")], 1)])]);
|
||||||
};
|
};
|
||||||
var staticRenderFns = [];
|
var staticRenderFns = [];
|
||||||
@ -1066,7 +1066,7 @@ var render = function render() {
|
|||||||
attrs: {
|
attrs: {
|
||||||
size: 20
|
size: 20
|
||||||
}
|
}
|
||||||
}), _vm._v(" "), _c("span", [_vm._v("Add")])], 1)])];
|
}), _vm._v(" "), _c("span", [_vm._v("Nouveau")])], 1)])];
|
||||||
},
|
},
|
||||||
proxy: true
|
proxy: true
|
||||||
}])
|
}])
|
||||||
@ -1131,7 +1131,9 @@ var render = function render() {
|
|||||||
on: {
|
on: {
|
||||||
click: _vm.createNewFile
|
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", {
|
return _c("div", {
|
||||||
key: file.filename,
|
key: file.filename,
|
||||||
staticClass: "flex h-16 items-center hover:bg-NcGray rounded-lg border-b last:border-b-0 border-gray-300",
|
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)"
|
transform: "matrix(.7 0 0 .7 -.43 -.388)"
|
||||||
}
|
}
|
||||||
})])])]], 2), _vm._v(" "), _c("div", {
|
})])])]], 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", {
|
}, [_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"
|
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"
|
staticClass: "w-1/6 px-4 py-2 cursor-pointer"
|
||||||
}, [_vm._v("\n " + _vm._s(file.type === "directory" ? "-" : _vm.formatFileSize(file.size)) + "\n ")])]);
|
}, [_vm._v("\n " + _vm._s(file.type === "directory" ? "-" : _vm.formatFileSize(file.size)) + "\n ")])]);
|
||||||
})], 2);
|
}), 0)]);
|
||||||
};
|
};
|
||||||
var staticRenderFns = [function () {
|
var staticRenderFns = [function () {
|
||||||
var _vm = this,
|
var _vm = this,
|
||||||
@ -3191,6 +3193,14 @@ video {
|
|||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ml-6 {
|
||||||
|
margin-left: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mr-6 {
|
||||||
|
margin-right: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
.inline {
|
.inline {
|
||||||
display: inline;
|
display: inline;
|
||||||
}
|
}
|
||||||
@ -3215,6 +3225,14 @@ video {
|
|||||||
height: 2.5rem;
|
height: 2.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.h-1\\/3 {
|
||||||
|
height: 33.333333%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h-2\\/3 {
|
||||||
|
height: 66.666667%;
|
||||||
|
}
|
||||||
|
|
||||||
.max-h-8 {
|
.max-h-8 {
|
||||||
max-height: 2rem;
|
max-height: 2rem;
|
||||||
}
|
}
|
||||||
@ -3297,6 +3315,16 @@ video {
|
|||||||
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
|
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 {
|
.rounded-lg {
|
||||||
border-radius: 0.5rem;
|
border-radius: 0.5rem;
|
||||||
}
|
}
|
||||||
@ -3364,6 +3392,14 @@ video {
|
|||||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
|
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 {
|
.bg-opacity-50 {
|
||||||
--tw-bg-opacity: 0.5;
|
--tw-bg-opacity: 0.5;
|
||||||
}
|
}
|
||||||
@ -3480,6 +3516,76 @@ video {
|
|||||||
.focus\\:ring-blue-500:focus {
|
.focus\\:ring-blue-500:focus {
|
||||||
--tw-ring-opacity: 1;
|
--tw-ring-opacity: 1;
|
||||||
--tw-ring-color: rgb(59 130 246 / var(--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
|
// Exports
|
||||||
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
|
/* 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>
|
<template>
|
||||||
<div id="app" class="h-full w-full bg-black/80">
|
<div id="app" class="h-full w-full bg-black/80">
|
||||||
<div class="h-full w-full flex flex-row">
|
<!-- Conteneur principal, ajustement en flex-row à partir de sm -->
|
||||||
<div class="w-1/3 p-4 m-6 mr-2 rounded-xl">
|
<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>
|
||||||
<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/>
|
<FileTable/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</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"
|
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" />
|
<Plus :size="20" />
|
||||||
<span>Add</span>
|
<span>Nouveau</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -59,43 +59,45 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Contenu -->
|
<!-- Contenu -->
|
||||||
<div v-for="file in files" :key="file.filename"
|
<div class="overflow-y-auto">
|
||||||
class="flex h-16 items-center hover:bg-NcGray rounded-lg border-b last:border-b-0 border-gray-300"
|
<div v-for="file in files" :key="file.filename"
|
||||||
@click="handleClickElem(file)">
|
class="flex h-16 items-center hover:bg-NcGray rounded-lg border-b last:border-b-0 border-gray-300"
|
||||||
|
@click="handleClickElem(file)">
|
||||||
|
|
||||||
<!-- Nom -->
|
<!-- Nom -->
|
||||||
<div class="w-4/6 flex items-center px-4 py-2 border-r border-gray-300 cursor-pointer">
|
<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">
|
<div class="w-12 h-12 flex items-center justify-center cursor-pointer">
|
||||||
<template v-if="file.type === 'directory'">
|
<template v-if="file.type === 'directory'">
|
||||||
<svg fill="currentColor" viewBox="0 0 24 24" class="text-NcBlue w-10 h-10 ">
|
<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">
|
|
||||||
<path
|
<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"
|
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">
|
||||||
style="fill:#969696;fill-rule:nonzero" transform="matrix(.7 0 0 .7 -.43 -.388)" />
|
</path>
|
||||||
</svg>
|
</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>
|
||||||
<div class="ml-4 cursor-pointer">{{ file.basename }}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Type -->
|
<!-- Type -->
|
||||||
<div class="w-1/6 px-4 py-2 border-r border-gray-300 cursor-pointer">
|
<div class="w-1/6 px-4 py-2 border-r border-gray-300 cursor-pointer">
|
||||||
{{ file.type === 'directory' ? 'Dossier' : 'Fichier' }}
|
{{ file.type === 'directory' ? 'Dossier' : 'Fichier' }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Taille -->
|
<!-- Taille -->
|
||||||
<div class="w-1/6 px-4 py-2 cursor-pointer">
|
<div class="w-1/6 px-4 py-2 cursor-pointer">
|
||||||
{{ file.type === 'directory' ? '-' : formatFileSize(file.size) }}
|
{{ file.type === 'directory' ? '-' : formatFileSize(file.size) }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
104
src/output.css
104
src/output.css
@ -631,6 +631,14 @@ video {
|
|||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ml-6 {
|
||||||
|
margin-left: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mr-6 {
|
||||||
|
margin-right: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
.inline {
|
.inline {
|
||||||
display: inline;
|
display: inline;
|
||||||
}
|
}
|
||||||
@ -655,6 +663,14 @@ video {
|
|||||||
height: 2.5rem;
|
height: 2.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.h-1\/3 {
|
||||||
|
height: 33.333333%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h-2\/3 {
|
||||||
|
height: 66.666667%;
|
||||||
|
}
|
||||||
|
|
||||||
.max-h-8 {
|
.max-h-8 {
|
||||||
max-height: 2rem;
|
max-height: 2rem;
|
||||||
}
|
}
|
||||||
@ -737,6 +753,16 @@ video {
|
|||||||
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
|
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 {
|
.rounded-lg {
|
||||||
border-radius: 0.5rem;
|
border-radius: 0.5rem;
|
||||||
}
|
}
|
||||||
@ -804,6 +830,14 @@ video {
|
|||||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
|
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 {
|
.bg-opacity-50 {
|
||||||
--tw-bg-opacity: 0.5;
|
--tw-bg-opacity: 0.5;
|
||||||
}
|
}
|
||||||
@ -920,4 +954,74 @@ video {
|
|||||||
.focus\:ring-blue-500:focus {
|
.focus\:ring-blue-500:focus {
|
||||||
--tw-ring-opacity: 1;
|
--tw-ring-opacity: 1;
|
||||||
--tw-ring-color: rgb(59 130 246 / var(--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