Upload page UI updates for mobile

client/mixins/uploadHelpers.js

@@ -28,10 +28,8 @@ export default {
       var validOtherFiles = []
       var ignoredFiles = []
       files.forEach((file) => {
-        // var filetype = this.checkFileType(file.name)
         if (!file.filetype) ignoredFiles.push(file)
         else {
-          // file.filetype = filetype
           if (file.filetype === 'audio' || (file.filetype === 'ebook' && mediaType === 'book')) validItemFiles.push(file)
           else validOtherFiles.push(file)
         }
@@ -165,7 +163,7 @@ export default {
 
       var firstBookPath = Path.dirname(firstBookFile.filepath)
 
-      var dirs = firstBookPath.split('/').filter(d => !!d && d !== '.')
+      var dirs = firstBookPath.split('/').filter((d) => !!d && d !== '.')
       if (dirs.length) {
         audiobook.title = dirs.pop()
         if (dirs.length > 1) {
@@ -189,7 +187,7 @@ export default {
       var firstAudioFile = podcast.itemFiles[0]
       if (!firstAudioFile.filepath) return podcast // No path
       var firstPath = Path.dirname(firstAudioFile.filepath)
-      var dirs = firstPath.split('/').filter(d => !!d && d !== '.')
+      var dirs = firstPath.split('/').filter((d) => !!d && d !== '.')
       if (dirs.length) {
         podcast.title = dirs.length > 1 ? dirs[1] : dirs[0]
       } else {
@@ -212,13 +210,15 @@ export default {
       }
       var ignoredFiles = itemData.ignoredFiles
       var index = 1
-      var items = itemData.items.filter((ab) => {
+      var items = itemData.items
+        .filter((ab) => {
           if (!ab.itemFiles.length) {
             if (ab.otherFiles.length) ignoredFiles = ignoredFiles.concat(ab.otherFiles)
             if (ab.ignoredFiles.length) ignoredFiles = ignoredFiles.concat(ab.ignoredFiles)
           }
           return ab.itemFiles.length
-      }).map(ab => this.cleanItem(ab, mediaType, index++))
+        })
+        .map((ab) => this.cleanItem(ab, mediaType, index++))
       return {
         items,
         ignoredFiles
@@ -259,7 +259,7 @@ export default {
 
       otherFiles.forEach((file) => {
         var dir = Path.dirname(file.filepath)
-        var findItem = Object.values(itemMap).find(b => dir.startsWith(b.path))
+        var findItem = Object.values(itemMap).find((b) => dir.startsWith(b.path))
         if (findItem) {
           findItem.otherFiles.push(file)
         } else {
@@ -270,18 +270,18 @@ export default {
       var items = []
       var index = 1
       // If book media type and all files are audio files then treat each one as an audiobook
-      if (itemMap[''] && !otherFiles.length && mediaType === 'book' && !itemMap[''].itemFiles.some(f => f.filetype !== 'audio')) {
+      if (itemMap[''] && !otherFiles.length && mediaType === 'book' && !itemMap[''].itemFiles.some((f) => f.filetype !== 'audio')) {
         items = itemMap[''].itemFiles.map((audioFile) => {
           return this.cleanItem({ itemFiles: [audioFile], otherFiles: [], ignoredFiles: [] }, mediaType, index++)
         })
       } else {
-        items = Object.values(itemMap).map(i => this.cleanItem(i, mediaType, index++))
+        items = Object.values(itemMap).map((i) => this.cleanItem(i, mediaType, index++))
       }
 
       return {
         items,
         ignoredFiles: ignoredFiles
       }
-    },
+    }
   }
 }

client/pages/upload/index.vue

@@ -1,20 +1,20 @@
 <template>
-  <div id="page-wrapper" class="page p-0 sm:p-6 overflow-y-auto" :class="streamLibraryItem ? 'streaming' : ''">
+  <div id="page-wrapper" class="page p-1 sm:p-6 overflow-y-auto" :class="streamLibraryItem ? 'streaming' : ''">
     <div class="w-full max-w-6xl mx-auto">
       <!-- Library & folder picker -->
-      <div class="flex my-6 -mx-2">
+      <div class="flex flex-wrap my-6 md:-mx-2">
-        <div class="w-1/5 px-2">
+        <div class="w-full md:w-1/5 px-2">
           <ui-dropdown v-model="selectedLibraryId" :items="libraryItems" :label="$strings.LabelLibrary" :disabled="!!items.length" @input="libraryChanged" />
         </div>
-        <div class="w-3/5 px-2">
+        <div class="w-full md:w-3/5 px-2">
           <ui-dropdown v-model="selectedFolderId" :items="folderItems" :disabled="!selectedLibraryId || !!items.length" :label="$strings.LabelFolder" />
         </div>
-        <div class="w-1/5 px-2">
+        <div class="w-full md:w-1/5 px-2">
           <ui-text-input-with-label :value="selectedLibraryMediaType" readonly :label="$strings.LabelMediaType" />
         </div>
       </div>
 
-      <div v-if="!selectedLibraryIsPodcast" class="flex items-center mb-6">
+      <div v-if="!selectedLibraryIsPodcast" class="flex items-center mb-6 px-2 md:px-0">
         <label class="flex cursor-pointer pt-4">
           <ui-toggle-switch v-model="fetchMetadata.enabled" class="inline-flex" />
           <span class="pl-2 text-base">{{ $strings.LabelAutoFetchMetadata }}</span>
@@ -33,8 +33,8 @@
       </widgets-alert>
 
       <!-- Picker display -->
-      <div v-if="!items.length && !ignoredFiles.length" class="w-full mx-auto border border-white border-opacity-20 px-12 pt-12 pb-4 my-12 relative" :class="isDragging ? 'bg-primary bg-opacity-40' : 'border-dashed'">
+      <div v-if="!items.length && !ignoredFiles.length" class="w-full mx-auto border border-white border-opacity-20 px-4 md:px-12 pt-12 pb-4 my-12 relative" :class="isDragging ? 'bg-primary bg-opacity-40' : 'border-dashed'">
-        <p class="text-2xl text-center">{{ isDragging ? $strings.LabelUploaderDropFiles : $strings.LabelUploaderDragAndDrop + (isIOS ? '' : ' ' + $strings.LabelUploaderDragAndDropOrFolders) }}</p>
+        <p class="text-2xl text-center">{{ isDragging ? $strings.LabelUploaderDropFiles : isIOS ? $strings.LabelUploaderDragAndDropFilesOnly : $strings.LabelUploaderDragAndDrop }}</p>
         <p class="text-center text-sm my-5">{{ $strings.MessageOr }}</p>
         <div class="w-full max-w-xl mx-auto">
           <div class="flex">

client/strings/en-us.json

@@ -662,8 +662,8 @@
   "LabelUpdateDetails": "Update Details",
   "LabelUpdateDetailsHelp": "Allow overwriting of existing details for the selected books when a match is located",
   "LabelUpdatedAt": "Updated At",
-  "LabelUploaderDragAndDrop": "Drag & drop files",
+  "LabelUploaderDragAndDrop": "Drag & drop files or folders",
-  "LabelUploaderDragAndDropOrFolders": "or folders",
+  "LabelUploaderDragAndDropFilesOnly": "Drag & drop files",
   "LabelUploaderDropFiles": "Drop files",
   "LabelUploaderItemFetchMetadataHelp": "Automatically fetch title, author, and series",
   "LabelUseAdvancedOptions": "Use Advanced Options",