feat: add animation for disable multiple selection and break word for filename in info panel (#922)

frontend/src/components/Header.vue

@@ -47,7 +47,7 @@
           <upload-button v-show="showUpload"></upload-button>
           <info-button v-show="isFiles"></info-button>
 
-          <button v-show="isListing" @click="openSelect" :aria-label="$t('buttons.selectMultiple')" :title="$t('buttons.selectMultiple')" class="action">
+          <button v-show="isListing" @click="toggleMultipleSelection" :aria-label="$t('buttons.selectMultiple')" :title="$t('buttons.selectMultiple')" class="action" >
             <i class="material-icons">check_circle</i>
             <span>{{ $t('buttons.select') }}</span>
           </button>
@@ -177,8 +177,8 @@ export default {
     openSearch () {
       this.$store.commit('showHover', 'search')
     },
-    openSelect () {
-      this.$store.commit('multiple', true)
+    toggleMultipleSelection () {
+      this.$store.commit('multiple', !this.multiple)
       this.resetPrompts()
     },
     resetPrompts () {

frontend/src/components/prompts/Info.vue

@@ -7,7 +7,7 @@
     <div class="card-content">
       <p v-if="selected.length > 1">{{ $t('prompts.filesSelected', { count: selected.length }) }}</p>
 
-      <p v-if="selected.length < 2"><strong>{{ $t('prompts.displayName') }}</strong> {{ name }}</p>
+      <p class="break-word" v-if="selected.length < 2"><strong>{{ $t('prompts.displayName') }}</strong> {{ name }}</p>
       <p v-if="!dir || selected.length > 1"><strong>{{ $t('prompts.size') }}:</strong> <span id="content_length"></span> {{ humanSize }}</p>
       <p v-if="selected.length < 2"><strong>{{ $t('prompts.lastModified') }}:</strong> {{ humanTime }}</p>
 

frontend/src/css/base.css

@@ -124,3 +124,7 @@ main {
   width: 0;
   transition: .2s ease width;
 }
+
+.break-word {
+  word-break: break-all;
+}

frontend/src/css/listing.css

@@ -12,10 +12,8 @@
 
 #listing>div {
   display: flex;
-  padding: 0;
   flex-wrap: wrap;
   justify-content: flex-start;
-  position: relative;
 }
 
 #listing .item {
@@ -207,16 +205,6 @@
   font-weight: bold;
 }
 
-@keyframes slidein {
-  from {
-    bottom: -4em;
-  }
-
-  to {
-    bottom: 0;
-  }
-}
-
 #listing #multiple-selection {
   position: fixed;
   bottom: -4em;
@@ -225,16 +213,13 @@
   width: 100%;
   background-color: var(--blue);
   height: 4em;
-  display: none;
   padding: 0.5em 0.5em 0.5em 1em;
   justify-content: space-between;
-  align-items: center;
   transition: .2s ease bottom;
 }
 
 #listing #multiple-selection.active {
-  animation: slidein 0.2s forwards;
-  display: flex;
+  bottom: 0;
 }
 
 #listing #multiple-selection p,