Responsive Design

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", {
       staticClass: "w-1/6 px-4 py-2 cursor-pointer"
     }, [_vm._v("\n                " + _vm._s(file.type === "directory" ? "-" : _vm.formatFileSize(file.size)) + "\n            ")])]);
-  })], 2);
+  }), 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___);

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">
+		<!-- 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 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>
 

src/components/FileTable.vue

@@ -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,6 +59,7 @@
         </div>
 
         <!-- Contenu -->
+        <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)">
@@ -85,7 +86,7 @@
                             </div>
                         </template>
                     </div>
-                <div class="ml-4 cursor-pointer">{{ file.basename }}</div>
+                    <div class="ml-4 cursor-pointer max-sm:max-w-32 truncate">{{ file.basename }}</div>
                 </div>
 
                 <!-- Type -->
@@ -98,6 +99,7 @@
                     {{ file.type === 'directory' ? '-' : formatFileSize(file.size) }}
                 </div>
             </div>
+        </div>
 
     </div>
 </template>

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;
 }
@@ -921,3 +955,73 @@ video {
   --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%;
+    }
+  }
+}