From 1f1b99fc8886e1c9f1dbcdc1399f11de3dac6d20 Mon Sep 17 00:00:00 2001
From: Salem Yaslem <s@sy.sa>
Date: Fri, 19 May 2023 00:07:04 +0300
Subject: [PATCH] add select field for mobile

---
 app.vue | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/app.vue b/app.vue
index 50ee2c6..fbb54bc 100644
--- a/app.vue
+++ b/app.vue
@@ -3,12 +3,14 @@ import { Archive } from 'libarchive.js/main.js';
 import { CompressedFile } from 'libarchive.js/src/compressed-file';
 import { getElementInfo } from "moveable";
 import { VueSelecto } from "vue3-selecto";
+import { useDisplay } from 'vuetify/lib/framework.mjs';
 
 Archive.init({
   workerUrl: '/worker-bundle.js',
 });
 
-let drawer = ref(true);
+let display = useDisplay();
+let drawer = ref(!display.xs.value);
 let files = ref([]);
 
 let filesList = ref<any>([]);
@@ -136,7 +138,7 @@ function onSelectEnd(e: any) {
       <v-toolbar-title>Uncompressed File</v-toolbar-title>
       <v-spacer></v-spacer>
     </v-app-bar>
-    <v-navigation-drawer v-model="drawer" :permanent="!$vuetify.display.xs">
+    <v-navigation-drawer v-model="drawer" :permanent="!display.xs">
       <v-toolbar density="comfortable" title="Files">
         <template v-slot:prepend>
           <v-btn icon="mdi-home" @click="selectedItem = '/'"></v-btn>
@@ -176,14 +178,17 @@ function onSelectEnd(e: any) {
         <!-- tutorial drag and drop zipped file here and review it securely -->
         <v-container fill-height fluid>
           <v-row align="center" justify="center">
-            <v-col cols="12" sm="6" md="4">
-              <v-card class="mx-auto" max-width="500">
+            <v-col cols="12">
+              <v-card variant="flat" class="mx-auto" max-width="768">
                 <!-- v-icon for file -->
                 <v-icon class="mx-auto" size="100">mdi-file</v-icon>
-                <v-card-title>Drag and Drop Archived Files</v-card-title>
+                <v-card-title>Drag and Drop Compressed Files</v-card-title>
                 <v-card-text>
-                  Drop your file here to review it securely.
+                  Review them securely.
                 </v-card-text>
+
+                <!-- file input -->
+                <v-file-input class="mx-5" v-model="files" accept=".zip,.7z,.rar,.tar.bz2,.tar.gz,.tar.xz" label="or select a file..." variant="outlined"></v-file-input>
               </v-card>
             </v-col>
           </v-row>