Added download links, improved mobile usability

* Fixed width overflowing on mobile
* Disable search filter for multi-select on mobile.
  This avoids keyboard auto-popup when opening multi-selects.

client/src/app/components/metadata/metadata.component.html

@@ -20,6 +20,8 @@ <h4>Metadata</h4>
         </div>
 
         <div *ngIf="media.autoTags">May contain: {{ media.autoTags | formatArray }}</div>
+
+        <a [href]="'/api/images/' + media.hash + '/file?download=true'">Download</a>
       </div>
     </div>
   </div>

client/src/app/components/metadata/metadata.component.ts

@@ -7,6 +7,7 @@ import { Subscription } from 'rxjs';
 import { Media, UpdateMedia, Playlist, UpdateMetadata } from '@vimtur/common';
 import { ListItem, toListItems } from 'app/shared/types';
 import { PlaylistService } from 'services/playlist.service';
+import { isMobile } from 'is-mobile';
 
 interface MediaModel extends UpdateMedia {
   tags?: ListItem[];
@@ -21,6 +22,15 @@ interface MetadataField {
   text: string;
 }
 
+const BASE_MULTISELECT_CONFIG = {
+  // On mobile the auto-focus brings up a keyboard.
+  // This is mostly just very annoying.
+  enableSearchFilter: !isMobile(),
+  enableFilterSelectAll: !isMobile(),
+  enableCheckAll: false,
+  addNewItemOnFilter: true,
+};
+
 @Component({
   selector: 'app-metadata',
   templateUrl: './metadata.component.html',
@@ -46,27 +56,18 @@ export class MetadataComponent implements OnInit, OnDestroy, AfterViewChecked {
 
   // angular2 multiselect doesn't export types and they're not partial
   public readonly tagsSettings: any = {
+    ...BASE_MULTISELECT_CONFIG,
     text: '+ Tag',
-    enableCheckAll: false,
-    enableSearchFilter: true,
-    addNewItemOnFilter: true,
-    enableFilterSelectAll: false,
   };
 
   public readonly actorsSettings: any = {
+    ...BASE_MULTISELECT_CONFIG,
     text: '+ Actor',
-    enableCheckAll: false,
-    enableSearchFilter: true,
-    addNewItemOnFilter: true,
-    enableFilterSelectAll: false,
   };
 
   public readonly playlistsSettings: any = {
+    ...BASE_MULTISELECT_CONFIG,
     text: '+ Playlist',
-    enableCheckAll: false,
-    enableSearchFilter: true,
-    addNewItemOnFilter: true,
-    enableFilterSelectAll: false,
   };
 
   @ViewChild('ratingElement', { static: false }) private ratingElement: any;

client/src/app/components/search/search.component.ts

@@ -7,6 +7,7 @@ import { PlaylistService } from 'services/playlist.service';
 import { Subscription } from 'rxjs';
 import { Playlist } from '@vimtur/common';
 import { ListItem, toListItems } from 'app/shared/types';
+import { isMobile } from 'is-mobile';
 
 @Component({
   selector: 'app-search',
@@ -29,8 +30,10 @@ export class SearchComponent implements OnInit, OnDestroy {
 
   public readonly tagSettings: any = {
     enableCheckAll: true,
-    enableSearchFilter: true,
-    enableFilterSelectAll: true,
+    // On mobile the auto-focus brings up a keyboard.
+    // This is mostly just very annoying.
+    enableSearchFilter: !isMobile(),
+    enableFilterSelectAll: !isMobile(),
   };
 
   public constructor(

client/src/app/components/tag-panel/tag-panel.component.html

@@ -1,6 +1,9 @@
 <div class="main-panel">
   <div class="card tag-panel margin-bottom">
-    <div class="card-header card-small tag-header">Tags</div>
+    <div class="card-header card-small tag-header">
+      Tags
+      <a *ngIf="media" [href]="'/api/images/' + media.hash + '/file?download=true'">Download</a>
+    </div>
     <div
       *ngIf="tagsModel && media && columnIndexes && columnTags; else loading"
       class="card-body card-small tag-list"

client/src/app/components/tag-panel/tag-panel.component.scss

@@ -22,6 +22,10 @@
   flex-direction: row;
 }
 
+.card-header > a {
+  margin-left: auto;
+}
+
 .btn {
   padding: 0;
   margin-left: 0.25rem;

client/src/styles.scss

@@ -36,6 +36,7 @@ button:disabled {
 
 body {
   background-color: var(--vimtur-color-background-light) !important;
+  display: inline;
 }
 
 .small-response {