add select field for mobile

This commit is contained in:
Salem Yaslem 2023-05-19 00:07:04 +03:00
parent 20baf40d5e
commit 1f1b99fc88

17
app.vue
View File

@ -3,12 +3,14 @@ import { Archive } from 'libarchive.js/main.js';
import { CompressedFile } from 'libarchive.js/src/compressed-file'; import { CompressedFile } from 'libarchive.js/src/compressed-file';
import { getElementInfo } from "moveable"; import { getElementInfo } from "moveable";
import { VueSelecto } from "vue3-selecto"; import { VueSelecto } from "vue3-selecto";
import { useDisplay } from 'vuetify/lib/framework.mjs';
Archive.init({ Archive.init({
workerUrl: '/worker-bundle.js', workerUrl: '/worker-bundle.js',
}); });
let drawer = ref(true); let display = useDisplay();
let drawer = ref(!display.xs.value);
let files = ref([]); let files = ref([]);
let filesList = ref<any>([]); let filesList = ref<any>([]);
@ -136,7 +138,7 @@ function onSelectEnd(e: any) {
<v-toolbar-title>Uncompressed File</v-toolbar-title> <v-toolbar-title>Uncompressed File</v-toolbar-title>
<v-spacer></v-spacer> <v-spacer></v-spacer>
</v-app-bar> </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"> <v-toolbar density="comfortable" title="Files">
<template v-slot:prepend> <template v-slot:prepend>
<v-btn icon="mdi-home" @click="selectedItem = '/'"></v-btn> <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 --> <!-- tutorial drag and drop zipped file here and review it securely -->
<v-container fill-height fluid> <v-container fill-height fluid>
<v-row align="center" justify="center"> <v-row align="center" justify="center">
<v-col cols="12" sm="6" md="4"> <v-col cols="12">
<v-card class="mx-auto" max-width="500"> <v-card variant="flat" class="mx-auto" max-width="768">
<!-- v-icon for file --> <!-- v-icon for file -->
<v-icon class="mx-auto" size="100">mdi-file</v-icon> <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> <v-card-text>
Drop your file here to review it securely. Review them securely.
</v-card-text> </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-card>
</v-col> </v-col>
</v-row> </v-row>