From 0c48a20cd834e4c6c4a93f4491bd9461e1c24e15 Mon Sep 17 00:00:00 2001
From: Muah <muah003@gmail.com>
Date: Mon, 4 Dec 2017 18:50:51 +0200
Subject: [PATCH] v2.3.0
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# we are now jQuery free :scream::metal::boom::muscle::dancers:

## image
- animate navigation
- clicking the preview will open the image in a new tab
- preview is now a card with basic info and main functionality “mostly for mobile users”

## new options
- added hide folder option
- add random names option for uploaded files “will also be saved in local-storage”
- save visited folder to local-storage so you can continue from where you left.
- auto select folder after creation
- set “max-height” to the manager if opened inside a modal

## fixs
- fix hide ext
- disallow folder creation with single character name
- disallow folder rename to single character
- fix list update after remove items with same name but diff type
- fix preview modal image align

## styling
- better responsive
- some styling & animation
- added some patterns for upload panel bg so image change on each toggle
- change lock/unlock notification msg
- add notification for single file download

- update assets
- update readme
- update wiki
---
 README.md                                     |   7 +-
 logs/v2.2.1.txt                               |  14 -
 logs/v2.3.0.txt                               |  31 +
 src/MediaManagerServiceProvider.php           |   2 +-
 src/resources/assets/js/components/media.vue  | 274 ++++-----
 .../assets/js/components/mixins/form.js       |   2 +-
 .../assets/js/components/mixins/selected.js   |   4 +
 .../assets/js/components/mixins/utils.js      |  17 +-
 .../assets/js/components/mixins/watch.js      |   7 +-
 src/resources/assets/js/manager.js            |   3 +
 src/resources/assets/sass/manager.scss        |  96 ++-
 src/resources/assets/sass/media.scss          |  80 +--
 src/resources/lang/en/messages.php            |   4 +-
 src/resources/lang/fr/messages.php            |   4 +-
 src/resources/views/_manager.blade.php        | 576 +++++++++---------
 src/resources/views/cards/vertical.blade.php  |  78 +++
 src/resources/views/media.blade.php           |   1 -
 17 files changed, 710 insertions(+), 490 deletions(-)
 delete mode 100644 logs/v2.2.1.txt
 create mode 100644 logs/v2.3.0.txt
 create mode 100644 src/resources/views/cards/vertical.blade.php

diff --git a/README.md b/README.md
index e1e8e60..9fc7a72 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,6 @@
 <p align="center">
-    <img src="https://user-images.githubusercontent.com/7388088/33029294-e11b7f60-ce20-11e7-91a9-95fb652d3fcd.png">
+    <img src="https://user-images.githubusercontent.com/7388088/33564620-9e584826-d923-11e7-9ce3-8d4a306734f3.jpg">
+    <img src="https://user-images.githubusercontent.com/7388088/33564621-9e8837d4-d923-11e7-9117-f63db660c463.jpg">
 </p>
 
 # Media Manager
@@ -176,9 +177,9 @@ return [
 - install dependencies
 
 ```bash
-yarn add vue axios dropzone keycode vue-ls vue-tippy vue2-filters vuemit vue-notif vue-clipboard2 vue-touch@next babel-preset-es2015-node6 babel-preset-stage-2
+yarn add vue axios dropzone keycode vue-ls vue-multi-ref vue-tippy vue2-filters vuemit vue-notif vue-clipboard2 vue-touch@next babel-preset-es2015-node6 babel-preset-stage-2
 # or
-npm install vue axios dropzone keycode vue-ls vue-tippy vue2-filters vuemit vue-notif vue-clipboard2 vue-touch@next babel-preset-es2015-node6 babel-preset-stage-2 --save
+npm install vue axios dropzone keycode vue-ls vue-multi-ref vue-tippy vue2-filters vuemit vue-notif vue-clipboard2 vue-touch@next babel-preset-es2015-node6 babel-preset-stage-2 --save
 ```
 
 - for styling we use ***bulma***
diff --git a/logs/v2.2.1.txt b/logs/v2.2.1.txt
deleted file mode 100644
index 7085c1e..0000000
--- a/logs/v2.2.1.txt
+++ /dev/null
@@ -1,14 +0,0 @@
-- change config `hide_ext` to `hide_files_ext`
-- fix the damn move btn disable/enable for good
-- fixed enabling directory even if its inside the locked list
-- fixed going to prev folder in restricted path
-- fixed refresh issue in restricted path
-- use plain html for form instead of laravel-collection
-- use axios instead of jquery ajax
-- jquery is now only handling “keydown & player events” (if anyone can convert those to plain js i would deeply appreciate it)
-- optimize fileSelected event to fire only when using the manager from a modal.
-- updated https://github.com/ctf0/Laravel-Media-Manager/wiki/Folder-Restriction
-- updated https://github.com/ctf0/Laravel-Media-Manager/wiki/Lock-Files-&-Folder
-- update assets
-- update view
-- update readme
\ No newline at end of file
diff --git a/logs/v2.3.0.txt b/logs/v2.3.0.txt
new file mode 100644
index 0000000..604db5d
--- /dev/null
+++ b/logs/v2.3.0.txt
@@ -0,0 +1,31 @@
+# we are now jQuery free :scream::metal::boom::muscle::dancers:
+
+## image
+- animate navigation
+- clicking the preview will open the image in a new tab
+- preview is now a card with basic info and main functionality “mostly for mobile users”
+
+## new options
+- added hide folder option
+- add random names option for uploaded files “will also be saved in local-storage”
+- save visited folder to local-storage so you can continue from where you left.
+- auto select folder after creation
+- set “max-height” to the manager if opened inside a modal
+
+## fixs
+- fix hide ext
+- disallow folder creation with single character name
+- disallow folder rename to single character
+- fix list update after remove items with same name but diff type
+- fix preview modal image align
+
+## styling
+- better responsive
+- some styling & animation
+- added some patterns for upload panel bg so image change on each toggle
+- change lock/unlock notification msg
+- add notification for single file download
+
+- update assets “make sure to republish the assets”
+- update readme
+- update wiki
\ No newline at end of file
diff --git a/src/MediaManagerServiceProvider.php b/src/MediaManagerServiceProvider.php
index a71422e..0279984 100644
--- a/src/MediaManagerServiceProvider.php
+++ b/src/MediaManagerServiceProvider.php
@@ -75,7 +75,7 @@ protected function viewComp()
             ->url('/');
 
         $patterns = collect(
-                app('files')->allFiles(public_path('assets/vendor/MediaManager/patterns'))
+                    app('files')->allFiles(public_path('assets/vendor/MediaManager/patterns'))
                 )->map(function ($item) {
                     return "/assets/vendor/MediaManager/patterns/{$item->getFileName()}";
                 });
diff --git a/src/resources/assets/js/components/media.vue b/src/resources/assets/js/components/media.vue
index 69e343a..254867a 100644
--- a/src/resources/assets/js/components/media.vue
+++ b/src/resources/assets/js/components/media.vue
@@ -1,24 +1,3 @@
-<style>
-    .count-enter-active,
-    .count-leave-active,
-    .list-enter-active,
-    .list-leave-active {
-        transition: all 0.3s;
-    }
-
-    .count-enter,
-    .count-leave-to {
-        transform: translateX(30px);
-        opacity: 0;
-    }
-
-    .list-enter,
-    .list-leave-to {
-        transform: translateY(30px);
-        opacity: 0;
-    }
-</style>
-
 <script>
 import Form from './mixins/form'
 import FileFiltration from './mixins/filtration'
@@ -90,17 +69,20 @@ export default {
             searchFor: null,
             new_folder_name: null,
             new_filename: null,
-            active_modal: null
+            active_modal: null,
+            navDirection: ''
         }
     },
     created() {
-        this.randomNames = this.$ls.get('mm-uploadRndNames', false)
+        this.preSaved()
 
         if (this.checkForRestrictedPath()) {
             return this.restrictAccess()
         }
 
-        this.getFiles()
+        this.getFiles(this.folders)
+
+        document.addEventListener('keydown', this.shortCuts)
     },
     mounted() {
         this.fileUpload()
@@ -115,9 +97,18 @@ export default {
         })
     },
     beforeDestroy() {
-        $(document).unbind()
+        document.removeEventListener('keydown', this.shortCuts)
     },
     methods: {
+        preSaved() {
+            let ls = this.$ls.get('mediamanager')
+
+            if (ls) {
+                this.randomNames = ls.randomNames
+                this.folders = ls.folders || '/'
+            }
+        },
+
         fileUpload() {
             let manager = this
 
@@ -154,136 +145,135 @@ export default {
             })
         },
 
-        shortCuts() {
-            $(document).keydown((e) => {
-
-                // when modal isnt visible
-                if (!this.active_modal) {
-                    // when search is not focused
-                    if (document.activeElement.dataset.search == undefined) {
-                        // when no bulk selecting
-                        if (!this.isBulkSelecting()) {
-
-                            // open folder
-                            if (keycode(e) == 'enter' && this.selectedFile) {
-                                this.openFolder(this.selectedFile)
-                            }
+        shortCuts(e) {
+            // when modal isnt visible
+            if (!this.active_modal) {
+                // when search is not focused
+                if (document.activeElement.dataset.search == undefined) {
+                    // when no bulk selecting
+                    if (!this.isBulkSelecting()) {
+
+                        // open folder
+                        if (keycode(e) == 'enter' && this.selectedFile) {
+                            this.openFolder(this.selectedFile)
+                        }
 
-                            // go up a dir
-                            if (keycode(e) == 'backspace' && this.folders.length) {
-                                this.goToPrevFolder()
-                            }
+                        // go up a dir
+                        if (keycode(e) == 'backspace' && this.folders.length) {
+                            this.goToPrevFolder()
+                        }
 
-                            // when there are files
-                            if (this.allItemsCount) {
-                                this.navigation(e)
-
-                                if (
-                                    keycode(e) == 'space' &&
-                                    e.target == document.body &&
-                                    (this.selectedFileIs('video') || this.selectedFileIs('audio') || this.selectedFileIs('image'))
-                                ) {
-                                    e.preventDefault()
-
-                                    // play-pause media
-                                    if (this.selectedFileIs('video') || this.selectedFileIs('audio')) {
-                                        return $('.player')[0].paused
-                                            ? $('.player')[0].play()
-                                            : $('.player')[0].pause()
-                                    }
-
-                                    // "show" image quick view
-                                    if (this.selectedFileIs('image')) {
-                                        this.noScroll('add')
-                                        this.toggleModal('preview_modal')
-                                    }
+                        // when there are files
+                        if (this.allItemsCount) {
+                            this.navigation(e)
+
+                            if (
+                                keycode(e) == 'space' &&
+                                e.target == document.body &&
+                                (this.selectedFileIs('video') || this.selectedFileIs('audio') || this.selectedFileIs('image'))
+                            ) {
+                                e.preventDefault()
+
+                                // play-pause media
+                                if (this.selectedFileIs('video') || this.selectedFileIs('audio')) {
+                                    let player = this.$refs.player
+
+                                    return player.paused
+                                        ? player.play()
+                                        : player.pause()
                                 }
-                            }
-                            // end of when there are files
-
-                            // refresh
-                            if (keycode(e) == 'r') {
-                                this.getFiles(this.folders)
-                            }
 
-                            // file upload
-                            if (keycode(e) == 'u') {
-                                this.toggleUploadPanel()
+                                // "show" image quick view
+                                if (this.selectedFileIs('image')) {
+                                    this.noScroll('add')
+                                    this.toggleModal('preview_modal')
+                                }
                             }
                         }
-                        /* end of no bulk selection */
+                        // end of when there are files
 
-                        // with or without bulk selection
-                        if (this.allItemsCount) {
-                            // bulk select
-                            if (keycode(e) == 'b') {
-                                if (this.searchFor && this.searchItemsCount == 0) {
-                                    return
-                                }
+                        // refresh
+                        if (keycode(e) == 'r') {
+                            this.getFiles(this.folders)
+                        }
 
-                                if (this.$refs.bulkSelect) {
-                                    this.$refs.bulkSelect.click()
-                                }
+                        // file upload
+                        if (keycode(e) == 'u') {
+                            this.toggleUploadPanel()
+                        }
+                    }
+                    /* end of no bulk selection */
+
+                    // with or without bulk selection
+                    if (this.allItemsCount) {
+                        // bulk select
+                        if (keycode(e) == 'b') {
+                            if (this.searchFor && this.searchItemsCount == 0) {
+                                return
                             }
 
-                            // add all to bulk list
-                            if (this.isBulkSelecting() && keycode(e) == 'a') {
-                                if (this.$refs.bulkSelectAll) {
-                                    this.$refs.bulkSelectAll.click()
-                                }
+                            if (this.$refs.bulkSelect) {
+                                this.$refs.bulkSelect.click()
                             }
+                        }
 
-                            // delete file
-                            if (keycode(e) == 'delete' || keycode(e) == 'd') {
-                                if (this.$refs.delete) {
-                                    this.$refs.delete.click()
-                                }
+                        // add all to bulk list
+                        if (this.isBulkSelecting() && keycode(e) == 'a') {
+                            if (this.$refs.bulkSelectAll) {
+                                this.$refs.bulkSelectAll.click()
                             }
+                        }
 
-                            // move file
-                            if (this.checkForFolders && keycode(e) == 'm') {
-                                if (this.$refs.move) {
-                                    this.$refs.move.click()
-                                }
+                        // delete file
+                        if (keycode(e) == 'delete' || keycode(e) == 'd') {
+                            if (!this.$refs.delete[0].disabled) {
+                                this.$refs.delete[0].click()
                             }
+                        }
 
-                            // lock files
-                            if (keycode(e) == 'l') {
-                                if (this.$refs.lock) {
-                                    this.$refs.lock.click()
-                                }
+                        // move file
+                        if (this.checkForFolders && keycode(e) == 'm') {
+                            if (!this.$refs.move[0].disabled) {
+                                this.$refs.move[0].click()
                             }
                         }
-                        /* end of with or without bulk selection */
 
-                        // toggle file details sidebar
-                        if (keycode(e) == 't') {
-                            this.toggleInfoPanel()
+                        // lock files
+                        if (keycode(e) == 'l') {
+                            if (this.$refs.lock) {
+                                this.$refs.lock.click()
+                            }
                         }
                     }
-                    /* end of search is not focused */
-                }
-                /* end of modal isnt visible */
-
-                // when modal is visible
-                else {
-                    if (this.isActiveModal('preview_modal')) {
-                        // hide lb
-                        if (keycode(e) == 'space') {
-                            e.preventDefault()
-                            this.toggleModal()
-                        }
+                    /* end of with or without bulk selection */
 
-                        this.navigation(e)
+                    // toggle file details sidebar
+                    if (keycode(e) == 't') {
+                        this.toggleInfoPanel()
                     }
+                }
+                /* end of search is not focused */
+            }
+            /* end of modal isnt visible */
 
+            // when modal is visible
+            else {
+                if (this.isActiveModal('preview_modal')) {
                     // hide lb
-                    if (keycode(e) == 'esc') {
+                    if (keycode(e) == 'space') {
+                        e.preventDefault()
                         this.toggleModal()
                     }
+
+                    this.navigation(e)
                 }
-                /* end of modal is visible */
-            })
+
+                // hide lb
+                if (keycode(e) == 'esc') {
+                    this.toggleModal()
+                }
+            }
+            /* end of modal is visible */
         },
         deleteItem() {
             if (!this.isBulkSelecting() && this.selectedFile) {
@@ -385,26 +375,24 @@ export default {
 
         /**
          * autoplay media
-         *
-         * last item will keep repeating
-         * unless we added the constrain "!last"
-         * but now it wont play
          */
         autoPlay() {
             if (this.filterNameIs('audio') || this.filterNameIs('video')) {
-                $('.player').bind('ended', () => {
-                    // nav to next
-                    this.goToNext()
-
-                    let last = $('#files li:last-of-type').find('div.selected').length
-
-                    // play navigated to
-                    if (!last) {
-                        this.$nextTick(() => {
-                            $('.player')[0].play()
-                        })
+                let player = this.$refs.player
+                if (player) {
+                    player.onended = () => {
+                        // stop at the end of list
+                        if (this.currentFileIndex < this.allItemsCount - 1) {
+                            // nav to next
+                            this.goToNext()
+
+                            // play navigated to
+                            this.$nextTick(() => {
+                                this.$refs.player.play()
+                            })
+                        }
                     }
-                })
+                }
             }
         },
 
diff --git a/src/resources/assets/js/components/mixins/form.js b/src/resources/assets/js/components/mixins/form.js
index f6296ec..8d5db6f 100644
--- a/src/resources/assets/js/components/mixins/form.js
+++ b/src/resources/assets/js/components/mixins/form.js
@@ -56,7 +56,7 @@ export default {
                 // check for prev opened folder
                 if (select_prev) {
                     this.$nextTick(() => {
-                        this.files.items.map((e, i) => {
+                        this.files.items.some((e, i) => {
                             if (e.name == select_prev) {
                                 return this.setSelected(e, i)
                             }
diff --git a/src/resources/assets/js/components/mixins/selected.js b/src/resources/assets/js/components/mixins/selected.js
index dbfde41..df255ce 100644
--- a/src/resources/assets/js/components/mixins/selected.js
+++ b/src/resources/assets/js/components/mixins/selected.js
@@ -68,18 +68,21 @@ export default {
             // go to prev item
             if (keycode(e) == 'left' || keycode(e) == 'up') {
                 e.preventDefault()
+                this.navDirection = 'prev'
                 this.goToPrev()
             }
 
             // go to next item
             if (keycode(e) == 'right' || keycode(e) == 'down') {
                 e.preventDefault()
+                this.navDirection = 'next'
                 this.goToNext()
             }
 
             // go to last item
             if (keycode(e) == 'end') {
                 e.preventDefault()
+                this.navDirection = 'next'
 
                 let last = this.filesList.length - 1
                 this.scrollToFile(this.$refs[`file_${last}`])
@@ -88,6 +91,7 @@ export default {
             // go to first item
             if (keycode(e) == 'home') {
                 e.preventDefault()
+                this.navDirection = 'prev'
                 this.scrollToFile(this.$refs.file_0)
             }
 
diff --git a/src/resources/assets/js/components/mixins/utils.js b/src/resources/assets/js/components/mixins/utils.js
index e32848f..43e8941 100644
--- a/src/resources/assets/js/components/mixins/utils.js
+++ b/src/resources/assets/js/components/mixins/utils.js
@@ -145,22 +145,31 @@ export default {
 
         /*                Ops                */
         // download
-        saveFile(path) {
+        saveFile(item) {
             if (this.isBulkSelecting()) {
-                this.bulkList.forEach((item) => {
-                    downloadFile(item.path)
+                this.bulkList.forEach((e) => {
+                    downloadFile(e.path)
                 })
 
                 return this.showNotif('All Done')
             }
 
-            downloadFile(path)
+            downloadFile(item.path)
+            return this.showNotif(`"${item.name}" ${this.trans('downloaded')}`)
         },
 
         // copy to clipboard
         copyLink(path) {
             this.linkCopied = true
             this.$copyText(path)
+        },
+
+        // ls
+        updateLs(obj) {
+            let oldLs = this.$ls.get('mediamanager', {})
+
+            Object.assign(oldLs, obj)
+            this.$ls.set('mediamanager', oldLs)
         }
     }
 }
diff --git a/src/resources/assets/js/components/mixins/watch.js b/src/resources/assets/js/components/mixins/watch.js
index 12331f7..f996823 100644
--- a/src/resources/assets/js/components/mixins/watch.js
+++ b/src/resources/assets/js/components/mixins/watch.js
@@ -56,8 +56,13 @@ export default {
                 })
             }
         },
+
+        // ls
         randomNames(val) {
-            return this.$ls.set('mm-uploadRndNames', val)
+            this.updateLs({'randomNames': val})
+        },
+        folders(val) {
+            this.updateLs({'folders': val})
         },
 
         // filter
diff --git a/src/resources/assets/js/manager.js b/src/resources/assets/js/manager.js
index cdeb885..171bf6e 100644
--- a/src/resources/assets/js/manager.js
+++ b/src/resources/assets/js/manager.js
@@ -16,6 +16,9 @@ VueTouch.registerCustomEvent('dbltap', {
 })
 Vue.use(VueTouch, {name: 'v-touch'})
 
+// directive
+require('vue-multi-ref')
+
 // axios
 window.axios = require('axios')
 axios.defaults.headers.common = {
diff --git a/src/resources/assets/sass/manager.scss b/src/resources/assets/sass/manager.scss
index 1554e99..836e7be 100644
--- a/src/resources/assets/sass/manager.scss
+++ b/src/resources/assets/sass/manager.scss
@@ -16,6 +16,8 @@
 // upload
 .dz {
     margin: 15px 0;
+    border: 2px dashed rgba($gray_7, 0.5);
+    border-radius: 5px;
 }
 
 #new-upload {
@@ -23,7 +25,6 @@
     overflow: hidden;
     cursor: pointer;
     transition: all 0.3s ease-in-out;
-    border: 2px dashed rgba($gray_7, 0.5);
     border-radius: 5px;
     background-repeat: repeat;
 
@@ -42,11 +43,10 @@
     }
 
     &:hover {
-        box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.3);
+        box-shadow: 0 5px 20px 0 rgba(black, 0.3);
 
         &::before {
-            background-color: transparent;
-            box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.3);
+            box-shadow: 0 5px 20px 0 rgba(black, 0.3);
         }
     }
 
@@ -57,7 +57,13 @@
         padding: 3em;
         text-align: center;
         color: white;
-        mix-blend-mode: difference;
+    }
+
+    .form-switcher {
+        position: absolute;
+        z-index: 1;
+        bottom: 0.5rem;
+        left: 0.5rem;
     }
 }
 
@@ -76,7 +82,7 @@
 }
 
 #uploadProgress {
-    margin-top: 10px;
+    margin-bottom: 15px;
     border-radius: 100vw;
 }
 
@@ -149,7 +155,10 @@
     position: relative;
     overflow: scroll;
     min-height: 400px;
-    // max-height: 584px;
+}
+
+.inModal {
+    max-height: 584px;
 }
 
 #left {
@@ -202,7 +211,7 @@
     }
 
     &:hover {
-        box-shadow: 0 10px 45px 0 rgba(0, 0, 0, 0.2);
+        box-shadow: 0 10px 45px 0 rgba(black, 0.2);
     }
 
     .copy_link {
@@ -262,6 +271,15 @@
     }
 }
 
+.image-preview-content {
+    .title {
+        overflow: hidden;
+        max-width: 300px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+}
+
 #right {
     position: relative;
     flex: 1;
@@ -477,7 +495,7 @@
     overflow: hidden;
 }
 
-.pointer {
+.link {
     cursor: pointer;
 }
 
@@ -513,7 +531,7 @@
     margin-left: 50px !important;
 }
 
-.is--link {
+.btn-plain {
     padding: 0;
     cursor: pointer;
     border: none;
@@ -524,3 +542,61 @@
 [target="_blank"] {
     cursor: alias;
 }
+
+// animation
+$list: (img-nxt, img-prv, info-in, info-out, slide, list);
+
+@each $class in $list {
+    .#{$class}-enter-active,
+    .#{$class}-leave-active {
+        transition: all 0.3s;
+    }
+}
+
+/* files */
+.list-enter,
+.list-leave-to {
+    transform: translateY(30px);
+    opacity: 0;
+}
+
+/* image */
+.img-prv-enter {
+    transform: translateX(-10px);
+    opacity: 0;
+}
+
+.img-prv-leave-to {
+    transform: translateX(90px);
+    opacity: 0;
+}
+
+.img-nxt-enter {
+    transform: translateX(10px);
+    opacity: 0;
+}
+
+.img-nxt-leave-to {
+    transform: translateX(-90px);
+    opacity: 0;
+}
+
+/* info toggle btn */
+.info-in-enter,
+.info-in-leave-to {
+    transform: translateX(10px);
+    opacity: 0;
+}
+
+.info-out-enter,
+.info-out-leave-to {
+    transform: translateX(-10px);
+    opacity: 0;
+}
+
+/* count & info panel */
+.slide-enter,
+.slide-leave-to {
+    transform: translateX(10px);
+    opacity: 0;
+}
diff --git a/src/resources/assets/sass/media.scss b/src/resources/assets/sass/media.scss
index dfd2d9c..bdfda00 100644
--- a/src/resources/assets/sass/media.scss
+++ b/src/resources/assets/sass/media.scss
@@ -25,6 +25,30 @@ $blue_2: #276cda;
 @import "./manager";
 
 // bulma
+.input {
+    border-color: $gray_7;
+    box-shadow: none;
+}
+
+table,
+.table {
+    margin-bottom: 0;
+
+    td {
+        padding: 0;
+    }
+
+    td,
+    th {
+        vertical-align: middle;
+        border: none !important;
+    }
+
+    tr:hover {
+        background-color: transparent;
+    }
+}
+
 .modal-card-head,
 .progress-bar,
 .icon {
@@ -58,56 +82,40 @@ $blue_2: #276cda;
     }
 }
 
+.modal {
+    align-items: flex-start;
+
+    &.is-active {
+        padding-top: 4%;
+    }
+}
+
 .modal-card {
     margin: 0;
-    padding: 1rem 1rem 0;
+    padding: 1rem;
+}
+
+.modal-content {
+    box-shadow: 0 5px 25px 0 rgba(black, 0.2);
+}
+
+.modal-card-foot {
+    justify-content: flex-end;
+    background-color: white;
 }
 
 #preview_modal {
     .modal-content,
     .modal-card {
         width: auto;
-        max-width: 640px;
+        max-width: 480px;
         margin: 0;
     }
 }
 
-.modal.is-active {
-    align-items: start;
-    padding-top: 3%;
-}
-
-.modal-card-foot {
-    justify-content: flex-end;
-    background-color: white;
-}
-
 .image {
     display: inline-block;
-}
-
-.input {
-    border-color: $gray_7;
-    box-shadow: none;
-}
-
-table,
-.table {
-    margin-bottom: 0;
-
-    td {
-        padding: 0;
-    }
-
-    td,
-    th {
-        vertical-align: middle;
-        border: none !important;
-    }
-
-    tr:hover {
-        background-color: transparent;
-    }
+    min-width: 100%;
 }
 
 @media screen and (max-width: 1299px) {
diff --git a/src/resources/lang/en/messages.php b/src/resources/lang/en/messages.php
index 1573e63..85bd2f2 100644
--- a/src/resources/lang/en/messages.php
+++ b/src/resources/lang/en/messages.php
@@ -58,6 +58,8 @@
   'upload' => 'Upload',
   'upload_text' => 'Drag & Drop Files<br>Or<br>Click To Upload',
   'url' => 'URL',
-  'video_support' => 'Your browser does not support the video tag.',
   'use_random_names' => 'Use Random Names ?!!',
+  'video_support' => 'Your browser does not support the video tag.',
+  'lock' => 'Lock Item',
+  'unlock' => 'UnLock Item',
 );
\ No newline at end of file
diff --git a/src/resources/lang/fr/messages.php b/src/resources/lang/fr/messages.php
index 97c4656..02254b3 100644
--- a/src/resources/lang/fr/messages.php
+++ b/src/resources/lang/fr/messages.php
@@ -58,6 +58,8 @@
   'upload' => 'Téléverser',
   'upload_text' => 'Faites glisser & déposez des fichiers<br>ou<br>cliquez pour télécharger',
   'url' => NULL,
-  'video_support' => NULL,
   'use_random_names' => NULL,
+  'video_support' => NULL,
+  'lock' => NULL,
+  'unlock' => NULL,
 );
\ No newline at end of file
diff --git a/src/resources/views/_manager.blade.php b/src/resources/views/_manager.blade.php
index 186e11e..6aab819 100644
--- a/src/resources/views/_manager.blade.php
+++ b/src/resources/views/_manager.blade.php
@@ -10,7 +10,8 @@
     :hide-path="{{ isset($hidePath) ? json_encode($hidePath) : '[]' }}"
     :media-trans="{{ json_encode([
         'no_val' => trans('MediaManager::messages.no_val'),
-        'single_char_folder'=> trans('MediaManager::messages.single_char_folder')
+        'single_char_folder' => trans('MediaManager::messages.single_char_folder'),
+        'downloaded' => trans('MediaManager::messages.downloaded')
     ]) }}"
     :upload-panel-img-list="{{ $patterns }}"
     files-route="{{ route('media.files') }}"
@@ -67,7 +68,7 @@
                         {{-- move --}}
                         <div class="control">
                             <button class="button is-link"
-                                ref="move"
+                                v-multi-ref="'move'"
                                 :disabled="mv_dl() || !checkForFolders"
                                 v-tippy="{arrow: true}" title="m"
                                 @click="moveItem()">
@@ -90,7 +91,7 @@
                         {{-- delete --}}
                         <div class="control">
                             <button class="button is-link"
-                                ref="delete"
+                                v-multi-ref="'delete'"
                                 :disabled="mv_dl()"
                                 v-tippy="{arrow: true}" title="d / del"
                                 @click="deleteItem()">
@@ -269,20 +270,22 @@ class="button"
         {{-- ====================================================================== --}}
 
         {{-- dropzone --}}
-        <transition name="list" mode="in-out">
-            <div class="field dz" v-show="uploadToggle">
-                <form id="new-upload" action="{{ route('media.upload') }}" :style="uploadPanelImg">
-                    <div class="dz-message title is-4">{!! trans('MediaManager::messages.upload_text') !!}</div>
-                    {{ csrf_field() }}
-                    <input type="hidden" name="upload_path" :value="files.path ? files.path : '/'">
-
-                    <div class="form-switcher" title="{{ trans('MediaManager::messages.use_random_names') }}" v-tippy="{arrow: true}">
-                        <input type="checkbox" name="random_names" id="random_names" v-model="randomNames">
-                        <label class="switcher" for="random_names"></label>
-                    </div>
-                </form>
+        <transition name="list">
+            <div v-show="uploadToggle">
+                <div class="dz">
+                    <form id="new-upload" action="{{ route('media.upload') }}" :style="uploadPanelImg">
+                        <div class="dz-message title is-4">{!! trans('MediaManager::messages.upload_text') !!}</div>
+                        {{ csrf_field() }}
+                        <input type="hidden" name="upload_path" :value="files.path ? files.path : '/'">
+
+                        <div class="form-switcher" title="{{ trans('MediaManager::messages.use_random_names') }}" v-tippy="{arrow: true}">
+                            <input type="checkbox" name="random_names" id="random_names" v-model="randomNames">
+                            <label class="switcher" for="random_names"></label>
+                        </div>
+                    </form>
 
-                <div id="uploadPreview"></div>
+                    <div id="uploadPreview"></div>
+                </div>
 
                 <transition name="list">
                     <div id="uploadProgress" class="progress" v-show="uploadStart">
@@ -295,224 +298,234 @@ class="button"
         {{-- ====================================================================== --}}
 
         {{-- files area --}}
-        <div id="content">
-            <div class="breadcrumb-container level is-mobile">
+        <div class="level is-mobile breadcrumb-container">
+            <div class="level-left">
                 {{-- directories breadCrumb --}}
-                <div class="level-left">
-                    <ol class="breadcrumb">
-                        <li v-if="!checkForRestrictedPath()">
-                            <a v-if="folders.length > 0 && !isBulkSelecting()" class="p-l-0" @click="goToFolder(0)">
-                                {{ trans('MediaManager::messages.library') }}
-                            </a>
-                            <p v-else class="p-l-0">{{ trans('MediaManager::messages.library') }}</p>
+                <ol class="breadcrumb">
+                    <li v-if="!checkForRestrictedPath()">
+                        <a v-if="folders.length > 0 && !isBulkSelecting()" class="p-l-0" @click="goToFolder(0)">
+                            {{ trans('MediaManager::messages.library') }}
+                        </a>
+                        <p v-else class="p-l-0">{{ trans('MediaManager::messages.library') }}</p>
+                    </li>
+
+                    <template v-for="(folder,index) in folders">
+                        <li @click="folders.length > 1 ? goToFolder(index+1) : false">
+                            <p v-if="isLastItem(folder, folders)">@{{ folder }}</p>
+                            <a v-else v-tippy="{arrow: true}" title="backspace">@{{ folder }}</a>
                         </li>
+                    </template>
+                </ol>
+            </div>
 
-                        <template v-for="(folder,index) in folders">
-                            <li @click="folders.length > 1 ? goToFolder(index+1) : false">
-                                <p v-if="isLastItem(folder, folders)">@{{ folder }}</p>
-                                <a v-else v-tippy="{arrow: true}" title="backspace">@{{ folder }}</a>
-                            </li>
-                        </template>
-                    </ol>
+            {{-- toggle info --}}
+            <div class="level-right is-hidden-touch">
+                <div class="toggle" @click="toggleInfoPanel()" v-tippy="{arrow: true}" title="t">
+                    <transition :name="toggleInfo ? 'info-out' : 'info-in'" mode="out-in">
+                        <div key="1" v-if="toggleInfo">
+                            <span>{{ trans('MediaManager::messages.close') }}</span>
+                            <span class="icon"><i class="fa fa-angle-double-right"></i></span>
+                        </div>
+                        <div key="2" v-else>
+                            <span>{{ trans('MediaManager::messages.open') }}</span>
+                            <span class="icon"><i class="fa fa-angle-double-left"></i></span>
+                        </div>
+                    </transition>
                 </div>
+            </div>
+        </div>
 
-                {{-- toggle info --}}
-                <div class="level-right is-hidden-touch">
-                    <div class="toggle" @click="toggleInfoPanel()" v-tippy="{arrow: true}" title="t">
-                        <transition name="count" mode="out-in">
-                            <div key="1" v-if="toggleInfo">
-                                <span>{{ trans('MediaManager::messages.close') }}</span>
-                                <span class="icon"><i class="fa fa-angle-double-right"></i></span>
-                            </div>
-                            <div key="2" v-else>
-                                <span>{{ trans('MediaManager::messages.open') }}</span>
-                                <span class="icon"><i class="fa fa-angle-double-left"></i></span>
-                            </div>
-                        </transition>
-                    </div>
+        {{-- ====================================================================== --}}
+
+        <div class="manager-container">
+            {{-- loadings --}}
+            <section>
+                {{-- loading data from server --}}
+                <div id="file_loader" v-show="file_loader">
+                    <div id="file_loader_anim" data-json="{{ asset('assets/vendor/MediaManager/BM/octopus.json') }}"></div>
+                    <h3>{{ trans('MediaManager::messages.loading') }}</h3>
                 </div>
-            </div>
 
-            {{-- ====================================================================== --}}
+                {{-- no files --}}
+                <div id="no_files" v-show="no_files">
+                    <div id="no_files_anim" data-json="{{ asset('assets/vendor/MediaManager/BM/zero.json') }}"></div>
+                    <h3>{{ trans('MediaManager::messages.no_files_in_folder') }}</h3>
+                </div>
 
-            <div class="manager-container">
-                {{-- loadings --}}
-                <section>
-                    {{-- loading data from server --}}
-                    <div id="file_loader" v-show="file_loader">
-                        <div id="file_loader_anim" data-json="{{ asset('assets/vendor/MediaManager/BM/octopus.json') }}"></div>
-                        <h3>{{ trans('MediaManager::messages.loading') }}</h3>
-                    </div>
+                {{-- error --}}
+                <div id="ajax_error" v-show="ajax_error">
+                    <div id="ajax_error_anim" data-json="{{ asset('assets/vendor/MediaManager/BM/avalanche.json') }}"></div>
+                    <h3>{{ trans('MediaManager::messages.ajax_error') }}</h3>
+                </div>
+            </section>
 
-                    {{-- no files --}}
-                    <div id="no_files" v-show="no_files">
-                        <div id="no_files_anim" data-json="{{ asset('assets/vendor/MediaManager/BM/zero.json') }}"></div>
-                        <h3>{{ trans('MediaManager::messages.no_files_in_folder') }}</h3>
-                    </div>
+            {{-- ====================================================================== --}}
 
-                    {{-- error --}}
-                    <div id="ajax_error" v-show="ajax_error">
-                        <div id="ajax_error_anim" data-json="{{ asset('assets/vendor/MediaManager/BM/avalanche.json') }}"></div>
-                        <h3>{{ trans('MediaManager::messages.ajax_error') }}</h3>
-                    </div>
-                </section>
-
-                {{-- ====================================================================== --}}
-
-                {{-- files box --}}
-                <v-touch id="left"
-                    ref="left"
-                    @dbltap="selectedFileIs('image') ? toggleModal('preview_modal') : openFolder(selectedFile)"
-                    @swiperight="goToPrevFolder()"
-                    @swipeup="moveItem()"
-                    @swipedown="deleteItem()">
-
-                    <transition-group id="files" class="tile"
-                        tag="ul" name="list" mode="out-in"
-                        ref="filesList"
-                        v-on:after-enter="afterEnter"
-                        v-on:after-leave="afterLeave">
-                        <li v-for="(file,index) in orderBy(filterBy(allFiles, searchFor, 'name'), sortBy, -1)"
-                            :key="index"
-                            @click="setSelected(file, index)">
-                            <div class="file_link" :class="{'bulk-selected': IsInBulkList(file), 'selected' : selectedFile == file}"
-                                :data-item="file.name"
-                                :ref="'file_' + index">
-
-                                {{-- lock file --}}
-                                <div class="icon lock_icon" :class="IsInLockedList(file) ? 'is-danger' : 'is-success'"
-                                    @click="toggleLock(file)">
-                                </div>
+            {{-- files box --}}
+            <v-touch id="left"
+                ref="left"
+                :class="{inModal: inModal}"
+                @dbltap="selectedFileIs('image') ? toggleModal('preview_modal') : openFolder(selectedFile)"
+                @swiperight="goToPrevFolder()"
+                @swipeup="moveItem()"
+                @swipedown="deleteItem()">
+
+                <transition-group id="files" class="tile"
+                    tag="ul" name="list" mode="out-in"
+                    ref="filesList"
+                    v-on:after-enter="afterEnter"
+                    v-on:after-leave="afterLeave">
+                    <li v-for="(file,index) in orderBy(filterBy(allFiles, searchFor, 'name'), sortBy, -1)"
+                        :key="index"
+                        @click="setSelected(file, index)">
+                        <div class="file_link" :class="{'bulk-selected': IsInBulkList(file), 'selected' : selectedFile == file}"
+                            :data-item="file.name"
+                            :ref="'file_' + index">
+
+                            {{-- lock file --}}
+                            <div class="icon lock_icon"
+                                :class="IsInLockedList(file) ? 'is-danger' : 'is-success'"
+                                :title="IsInLockedList(file) ? '{{ trans('MediaManager::messages.unlock') }}': '{{ trans('MediaManager::messages.lock') }}'"
+                                v-tippy="{arrow: true, hideOnClick: false}"
+                                @click="toggleLock(file)">
+                            </div>
 
-                                {{-- copy file link --}}
-                                <div v-if="!fileTypeIs(file, 'folder')"
-                                    class="icon copy_link"
-                                    @click="copyLink(file.path)"
-                                    :title="linkCopied ? '{{ trans('MediaManager::messages.copied') }}' : '{{ trans('MediaManager::messages.copy_to_cp') }}'"
-                                    v-tippy="{arrow: true, hideOnClick: false}"
-                                    @hidden="linkCopied = false">
-                                    <i class="fa fa-clone" aria-hidden="true"></i>
-                                </div>
+                            {{-- copy file link --}}
+                            <div v-if="!fileTypeIs(file, 'folder')"
+                                class="icon copy_link"
+                                @click="copyLink(file.path)"
+                                :title="linkCopied ? '{{ trans('MediaManager::messages.copied') }}' : '{{ trans('MediaManager::messages.copy_to_cp') }}'"
+                                v-tippy="{arrow: true, hideOnClick: false}"
+                                @hidden="linkCopied = false">
+                                <i class="fa fa-clone" aria-hidden="true"></i>
+                            </div>
 
-                                <div class="link_icon">
-                                    <template v-if="fileTypeIs(file, 'image')">
-                                        <div class="img" :style="{ 'background-image': 'url(' + file.path + ')' }"></div>
-                                    </template>
+                            <div class="link_icon">
+                                <template v-if="fileTypeIs(file, 'image')">
+                                    <div class="img" :style="{ 'background-image': 'url(' + file.path + ')' }"></div>
+                                </template>
 
-                                    <span class="icon is-large" v-else>
-                                        <i v-if="fileTypeIs(file, 'folder')" class="fa fa-folder fa-3x"></i>
-                                        <i v-if="fileTypeIs(file, 'video')" class="fa fa-video-camera fa-3x"></i>
-                                        <i v-if="fileTypeIs(file, 'audio')" class="fa fa-music fa-3x"></i>
-                                        <i v-if="fileTypeIs(file, 'pdf')" class="fa fa-file-pdf-o fa-3x"></i>
-                                        <i v-if="fileTypeIs(file, 'text')" class="fa fa-file-text fa-3x"></i>
-                                    </span>
-                                </div>
-                                <div class="details">
-                                    <template v-if="fileTypeIs(file, 'folder')">
-                                        <h4>@{{ file.name }}</h4>
-                                        <small>
-                                            <span>@{{ file.items }} {{ trans('MediaManager::messages.items') }}</span>
-                                            <span v-if="file.size > 0" class="file_size">, @{{ getFileSize(file.size) }}</span>
-                                        </small>
-                                    </template>
+                                <span class="icon is-large" v-else>
+                                    <i v-if="fileTypeIs(file, 'folder')" class="fa fa-folder fa-3x"></i>
+                                    <i v-if="fileTypeIs(file, 'video')" class="fa fa-video-camera fa-3x"></i>
+                                    <i v-if="fileTypeIs(file, 'audio')" class="fa fa-music fa-3x"></i>
+                                    <i v-if="fileTypeIs(file, 'pdf')" class="fa fa-file-pdf-o fa-3x"></i>
+                                    <i v-if="fileTypeIs(file, 'text')" class="fa fa-file-text fa-3x"></i>
+                                </span>
+                            </div>
+                            <div class="details">
+                                <template v-if="fileTypeIs(file, 'folder')">
+                                    <h4>@{{ file.name }}</h4>
+                                    <small>
+                                        <span>@{{ file.items }} {{ trans('MediaManager::messages.items') }}</span>
+                                        <span v-if="file.size > 0" class="file_size">, @{{ getFileSize(file.size) }}</span>
+                                    </small>
+                                </template>
 
-                                    <template v-else>
-                                        <h4>@{{ getFileName(file.name) }}</h4>
-                                        <small>
-                                            <span class="file_size">@{{ getFileSize(file.size) }}</span>
-                                        </small>
-                                    </template>
-                                </div>
+                                <template v-else>
+                                    <h4>@{{ getFileName(file.name) }}</h4>
+                                    <small>
+                                        <span class="file_size">@{{ getFileSize(file.size) }}</span>
+                                    </small>
+                                </template>
                             </div>
-                        </li>
-                    </transition-group>
-                </v-touch>
+                        </div>
+                    </li>
+                </transition-group>
+            </v-touch>
 
-                {{-- ====================================================================== --}}
+            {{-- ====================================================================== --}}
 
-                {{-- info box --}}
-                <transition name="count">
-                    <div id="right" class="is-hidden-touch" v-if="toggleInfo">
-                        <div class="right_none_selected" v-if="!selectedFile">
-                            <i class="fa fa-mouse-pointer"></i>
-                            <p>{{ trans('MediaManager::messages.nothing_selected') }}</p>
-                        </div>
+            {{-- info box --}}
+            <transition name="slide">
+                <div id="right"
+                    class="is-hidden-touch"
+                    :class="{inModal: inModal}"
+                    v-if="toggleInfo">
+                    <div class="right_none_selected" v-if="!selectedFile">
+                        <i class="fa fa-mouse-pointer"></i>
+                        <p>{{ trans('MediaManager::messages.nothing_selected') }}</p>
+                    </div>
 
-                        <div class="right_details">
-                            {{-- img / icon --}}
-                            <template v-if="selectedFile">
-                                <div class="detail_img">
-                                    <template v-if="selectedFileIs('image')">
-                                        <img :src="selectedFile.path"
-                                            v-tippy="{position: 'left', arrow: true}"
-                                            title="space" class="pointer"
-                                            @click="toggleModal('preview_modal')"/>
-                                    </template>
+                    <div class="right_details">
+                        {{-- img / icon --}}
+                        <template v-if="selectedFile">
+                            <div class="detail_img">
+                                <template v-if="selectedFileIs('image')">
+                                    <img :src="selectedFile.path"
+                                        v-tippy="{position: 'left', arrow: true}"
+                                        title="space" class="link"
+                                        @click="toggleModal('preview_modal')"/>
+                                </template>
 
-                                    <template v-if="selectedFileIs('video')">
-                                        <video controls class="video player" :key="selectedFile.name"
-                                            v-tippy="{position: 'left', arrow: true}" title="space">
-                                            <source :src="selectedFile.path" type="video/mp4">
-                                            <source :src="selectedFile.path" type="video/ogg">
-                                            <source :src="selectedFile.path" type="video/webm">
-                                            {{ trans('MediaManager::messages.video_support') }}
-                                        </video>
-                                    </template>
+                                <template v-if="selectedFileIs('video')">
+                                    <video controls class="video"
+                                        ref="player"
+                                        :key="selectedFile.name"
+                                        v-tippy="{position: 'left', arrow: true}" title="space">
+                                        <source :src="selectedFile.path" type="video/mp4">
+                                        <source :src="selectedFile.path" type="video/ogg">
+                                        <source :src="selectedFile.path" type="video/webm">
+                                        {{ trans('MediaManager::messages.video_support') }}
+                                    </video>
+                                </template>
 
-                                    <template v-if="selectedFileIs('audio')">
-                                        <audio controls class="audio player" :key="selectedFile.name"
-                                            v-tippy="{position: 'left', arrow: true}" title="space">
-                                            <source :src="selectedFile.path" type="audio/ogg">
-                                            <source :src="selectedFile.path" type="audio/mpeg">
-                                            {{ trans('MediaManager::messages.audio_support') }}
-                                        </audio>
-                                    </template>
+                                <template v-if="selectedFileIs('audio')">
+                                    <audio controls class="audio"
+                                        ref="player"
+                                        :key="selectedFile.name"
+                                        v-tippy="{position: 'left', arrow: true}" title="space">
+                                        <source :src="selectedFile.path" type="audio/ogg">
+                                        <source :src="selectedFile.path" type="audio/mpeg">
+                                        {{ trans('MediaManager::messages.audio_support') }}
+                                    </audio>
+                                </template>
 
-                                    <i v-if="selectedFileIs('folder')" class="fa fa-folder"></i>
-                                    <i v-if="selectedFileIs('pdf')" class="fa fa-file-pdf-o"></i>
-                                    <i v-if="selectedFileIs('text')" class="fa fa-file-text-o"></i>
-                                </div>
+                                <i v-if="selectedFileIs('folder')" class="fa fa-folder"></i>
+                                <i v-if="selectedFileIs('pdf')" class="fa fa-file-pdf-o"></i>
+                                <i v-if="selectedFileIs('text')" class="fa fa-file-text-o"></i>
+                            </div>
 
-                                {{-- data --}}
-                                <div class="detail_info">
-                                    <div>
-                                        <h4>{{ trans('MediaManager::messages.title') }}: <span>@{{ selectedFile.name }}</span></h4>
-                                        <h4>{{ trans('MediaManager::messages.type') }}: <span>@{{ selectedFile.type }}</span></h4>
-                                        <h4>{{ trans('MediaManager::messages.size') }}: <span>@{{ getFileSize(selectedFile.size) }}</span></h4>
-                                        <template v-if="selectedFileIs('folder')">
-                                            <h4>{{ trans('MediaManager::messages.items') }}: <span>@{{ selectedFile.items }} {{ trans('MediaManager::messages.items') }}</span></h4>
-                                        </template>
-                                        <template v-else>
-                                            <h4>
-                                                <a :href="selectedFile.path" class="has-text-link" target="_blank">{{ trans('MediaManager::messages.public_url') }}</a>
-                                                <button class="is--link"
-                                                    @click.prevent="saveFile(selectedFile.path)"
-                                                    v-tippy="{arrow: true}" title="{{ trans('MediaManager::messages.download_file') }}">
-                                                    <span class="icon has-text-black"><i class="fa fa-download fa-lg"></i></span>
-                                                </button>
-                                            </h4>
-                                        </template>
-                                        <h4>{{ trans('MediaManager::messages.last_modified') }}: <span>@{{ selectedFile.last_modified_formated }}</span></h4>
-                                    </div>
+                            {{-- data --}}
+                            <div class="detail_info">
+                                <div>
+                                    <h4>{{ trans('MediaManager::messages.title') }}: <span>@{{ selectedFile.name }}</span></h4>
+                                    <h4>{{ trans('MediaManager::messages.type') }}: <span>@{{ selectedFile.type }}</span></h4>
+                                    <h4>{{ trans('MediaManager::messages.size') }}: <span>@{{ getFileSize(selectedFile.size) }}</span></h4>
+                                    <template v-if="selectedFileIs('folder')">
+                                        <h4>{{ trans('MediaManager::messages.items') }}: <span>@{{ selectedFile.items }} {{ trans('MediaManager::messages.items') }}</span></h4>
+                                    </template>
+                                    <template v-else>
+                                        <h4>
+                                            <a :href="selectedFile.path" class="has-text-link" target="_blank">{{ trans('MediaManager::messages.public_url') }}</a>
+                                            <button class="btn-plain"
+                                                @click.prevent="saveFile(selectedFile)"
+                                                title="{{ trans('MediaManager::messages.download_file') }}"
+                                                v-tippy="{arrow: true}">
+                                                <span class="icon has-text-black"><i class="fa fa-download fa-lg"></i></span>
+                                            </button>
+                                        </h4>
+                                    </template>
+                                    <h4>{{ trans('MediaManager::messages.last_modified') }}: <span>@{{ selectedFile.last_modified_formated }}</span></h4>
                                 </div>
-                            </template>
-                        </div>
-
-                        {{-- items count --}}
-                        <transition-group class="count" tag="ul" name="count" mode="out-in">
-                            <li key="1" class="title is-marginless" v-if="bulkItemsCount">
-                                @{{ bulkItemsCount }} {{ trans('MediaManager::messages.selected') }}
-                            </li>
-                            <li key="2" class="title is-marginless" v-if="searchItemsCount !== null && searchItemsCount >= 0">
-                                @{{ searchItemsCount }} {{ trans('MediaManager::messages.found') }}
-                            </li>
-                            <li key="3" class="title is-marginless" v-if="allItemsCount">
-                                @{{ allItemsCount }} {{ trans('MediaManager::messages.total') }}
-                            </li>
-                        </transition-group>
+                            </div>
+                        </template>
                     </div>
-                </transition>
-            </div>
+
+                    {{-- items count --}}
+                    <transition-group class="count" tag="ul" name="slide" mode="out-in">
+                        <li key="1" class="title is-marginless" v-if="bulkItemsCount">
+                            @{{ bulkItemsCount }} {{ trans('MediaManager::messages.selected') }}
+                        </li>
+                        <li key="2" class="title is-marginless" v-if="searchItemsCount !== null && searchItemsCount >= 0">
+                            @{{ searchItemsCount }} {{ trans('MediaManager::messages.found') }}
+                        </li>
+                        <li key="3" class="title is-marginless" v-if="allItemsCount">
+                            @{{ allItemsCount }} {{ trans('MediaManager::messages.total') }}
+                        </li>
+                    </transition-group>
+                </div>
+            </transition>
         </div>
 
         {{-- ====================================================================== --}}
@@ -520,28 +533,34 @@ class="icon copy_link"
         {{-- modals --}}
         <section>
             {{-- preview_modal --}}
-            <div class="modal is-active mm-animated fadeIn" id="preview_modal" v-if="isActiveModal('preview_modal')">
-                <div class="modal-background pointer" @click="toggleModal()"></div>
-                <div class="modal-content mm-animated fadeInDown">
-                    <p class="image">
-                        <img :src="selectedFile.path">
-                    </p>
+            <div class="modal mm-animated fadeIn is-active" id="preview_modal" v-if="isActiveModal('preview_modal')">
+                <div class="modal-background link" @click="toggleModal()"></div>
+                <div class="mm-animated fadeInDown">
+                    <transition mode="out-in" :name="navDirection == 'next' ? 'img-nxt' : 'img-prv'">
+                        <div class="modal-content" :key="selectedFile.path">
+                            {{-- card v --}}
+                            @include('MediaManager::cards.vertical')
+                        </div>
+                    </transition>
                 </div>
                 <button class="modal-close is-large" @click="toggleModal()"></button>
             </div>
 
             {{-- new_folder_modal --}}
-            <div class="modal is-active mm-animated fadeIn" v-show="isActiveModal('new_folder_modal')">
-                <form action="{{ route('media.new_folder') }}" @submit.prevent="NewFolderForm($event)">
-                    <div class="modal-background pointer" @click="toggleModal()"></div>
-                    <div class="modal-card mm-animated fadeInDown">
-                        <header class="modal-card-head is-link">
-                            <p class="modal-card-title">
-                                <span class="icon"><i class="fa fa-folder"></i></span>
-                                <span>{{ trans('MediaManager::messages.add_new_folder') }}</span>
-                            </p>
-                            <button type="button" class="delete" @click="toggleModal()"></button>
-                        </header>
+            <div class="modal mm-animated fadeIn"
+                :class="{'is-active': isActiveModal('new_folder_modal')}"
+                v-show="isActiveModal('new_folder_modal')">
+                <div class="modal-background link" @click="toggleModal()"></div>
+                <div class="modal-card mm-animated fadeInDown">
+                    <header class="modal-card-head is-link">
+                        <p class="modal-card-title">
+                            <span class="icon"><i class="fa fa-folder"></i></span>
+                            <span>{{ trans('MediaManager::messages.add_new_folder') }}</span>
+                        </p>
+                        <button type="button" class="delete" @click="toggleModal()"></button>
+                    </header>
+
+                    <form action="{{ route('media.new_folder') }}" @submit.prevent="NewFolderForm($event)">
                         <section class="modal-card-body">
                             <input class="input" type="text"
                                 v-model="new_folder_name"
@@ -559,22 +578,25 @@ class="button is-link"
                                 {{ trans('MediaManager::messages.create_new_folder') }}
                             </button>
                         </footer>
-                    </div>
-                </form>
+                    </form>
+                </div>
             </div>
 
             {{-- rename_file_modal --}}
-            <div class="modal is-active mm-animated fadeIn" v-show="isActiveModal('rename_file_modal')">
-                <form action="{{ route('media.rename_file') }}" @submit.prevent="RenameFileForm($event)">
-                    <div class="modal-background pointer" @click="toggleModal()"></div>
-                    <div class="modal-card mm-animated fadeInDown">
-                        <header class="modal-card-head is-warning">
-                            <p class="modal-card-title">
-                                <span class="icon"><i class="fa fa-i-cursor"></i></span>
-                                <span>{{ trans('MediaManager::messages.rename_file_folder') }}</span>
-                            </p>
-                            <button type="button" class="delete" @click="toggleModal()"></button>
-                        </header>
+            <div class="modal mm-animated fadeIn"
+                :class="{'is-active': isActiveModal('rename_file_modal')}"
+                v-show="isActiveModal('rename_file_modal')">
+                <div class="modal-background link" @click="toggleModal()"></div>
+                <div class="modal-card mm-animated fadeInDown">
+                    <header class="modal-card-head is-warning">
+                        <p class="modal-card-title">
+                            <span class="icon"><i class="fa fa-i-cursor"></i></span>
+                            <span>{{ trans('MediaManager::messages.rename_file_folder') }}</span>
+                        </p>
+                        <button type="button" class="delete" @click="toggleModal()"></button>
+                    </header>
+
+                    <form action="{{ route('media.rename_file') }}" @submit.prevent="RenameFileForm($event)">
                         <section class="modal-card-body">
                             <h3 class="title">{{ trans('MediaManager::messages.new_file_folder') }}</h3>
                             <input class="input" type="text"
@@ -594,22 +616,25 @@ class="button is-warning"
                                 {{ trans('MediaManager::messages.rename') }}
                             </button>
                         </footer>
-                    </div>
-                </form>
+                    </form>
+                </div>
             </div>
 
             {{-- move_file_modal --}}
-            <div class="modal is-active mm-animated fadeIn" v-show="isActiveModal('move_file_modal')">
-                <form action="{{ route('media.move_file') }}" @submit.prevent="MoveFileForm($event)">
-                    <div class="modal-background pointer" @click="toggleModal()"></div>
-                    <div class="modal-card mm-animated fadeInDown">
-                        <header class="modal-card-head is-warning">
-                            <p class="modal-card-title">
-                                <span class="icon"><i class="fa fa-share"></i></span>
-                                <span>{{ trans('MediaManager::messages.move_file_folder') }}</span>
-                            </p>
-                            <button type="button" class="delete" @click="toggleModal()"></button>
-                        </header>
+            <div class="modal mm-animated fadeIn"
+                :class="{'is-active': isActiveModal('move_file_modal')}"
+                v-show="isActiveModal('move_file_modal')">
+                <div class="modal-background link" @click="toggleModal()"></div>
+                <div class="modal-card mm-animated fadeInDown">
+                    <header class="modal-card-head is-warning">
+                        <p class="modal-card-title">
+                            <span class="icon"><i class="fa fa-share"></i></span>
+                            <span>{{ trans('MediaManager::messages.move_file_folder') }}</span>
+                        </p>
+                        <button type="button" class="delete" @click="toggleModal()"></button>
+                    </header>
+
+                    <form action="{{ route('media.move_file') }}" @submit.prevent="MoveFileForm($event)">
                         <section class="modal-card-body">
                             <h3 class="title">{{ trans('MediaManager::messages.destination_folder') }}</h3>
                             <div class="control has-icons-left">
@@ -639,22 +664,25 @@ class="button is-warning"
                                 {{ trans('MediaManager::messages.move') }}
                             </button>
                         </footer>
-                    </div>
-                </form>
+                    </form>
+                </div>
             </div>
 
             {{-- confirm_delete_modal --}}
-            <div class="modal is-active mm-animated fadeIn" v-show="isActiveModal('confirm_delete_modal')">
-                <form action="{{ route('media.delete_file') }}" @submit.prevent="DeleteFileForm($event)">
-                    <div class="modal-background pointer" @click="toggleModal()"></div>
-                    <div class="modal-card mm-animated fadeInDown">
-                        <header class="modal-card-head is-danger">
-                            <p class="modal-card-title">
-                                <span class="icon"><i class="fa fa-warning"></i></span>
-                                <span>{{ trans('MediaManager::messages.are_you_sure_delete') }}</span>
-                            </p>
-                            <button type="button" class="delete" @click="toggleModal()"></button>
-                        </header>
+            <div class="modal mm-animated fadeIn"
+                :class="{'is-active': isActiveModal('confirm_delete_modal')}"
+                v-show="isActiveModal('confirm_delete_modal')">
+                <div class="modal-background link" @click="toggleModal()"></div>
+                <div class="modal-card mm-animated fadeInDown">
+                    <header class="modal-card-head is-danger">
+                        <p class="modal-card-title">
+                            <span class="icon"><i class="fa fa-warning"></i></span>
+                            <span>{{ trans('MediaManager::messages.are_you_sure_delete') }}</span>
+                        </p>
+                        <button type="button" class="delete" @click="toggleModal()"></button>
+                    </header>
+
+                    <form action="{{ route('media.delete_file') }}" @submit.prevent="DeleteFileForm($event)">
                         <section class="modal-card-body">
                             <template v-if="bulkListFilter.length">
                                 <table class="table" v-if="bulkListFilter.length <= 8">
@@ -673,12 +701,11 @@ class="button is-warning"
                                         <td v-else class="title is-5">@{{ item.name }}</td>
                                     </tr>
                                 </table>
-                                <template v-else>
-                                    <p class="m-l-50 confirm_delete_text">
-                                        <span class="icon is-large"><i class="fa fa-archive fa-lg"></i></span>
-                                        <span class="title is-5">{{ trans('MediaManager::messages.too_many_files') }}</span>
-                                    </p>
-                                </template>
+
+                                <p class="m-l-50 confirm_delete_text" v-else>
+                                    <span class="icon is-large"><i class="fa fa-archive fa-lg"></i></span>
+                                    <span class="title is-5">{{ trans('MediaManager::messages.too_many_files') }}</span>
+                                </p>
                             </template>
 
                             <template v-else>
@@ -698,6 +725,7 @@ class="button is-warning"
                                     </tr>
                                 </table>
                             </template>
+
                             <h5 class="folder_warning" v-if="folderWarning">
                                 <span class="icon"><i class="fa fa-warning"></i></span>
                                 <span>{{ trans('MediaManager::messages.delete_folder') }}</span>
@@ -715,8 +743,8 @@ class="button is-danger"
                                 {{ trans('MediaManager::messages.delete_confirm') }}
                             </button>
                         </footer>
-                    </div>
-                </form>
+                    </form>
+                </div>
             </div>
         </section>
 
diff --git a/src/resources/views/cards/vertical.blade.php b/src/resources/views/cards/vertical.blade.php
new file mode 100644
index 0000000..d2b6dde
--- /dev/null
+++ b/src/resources/views/cards/vertical.blade.php
@@ -0,0 +1,78 @@
+<div class="card image-preview-content">
+    <div class="card-image">
+        <a :href="selectedFile.path" target="_blank" class="image"><img :src="selectedFile.path"></a>
+    </div>
+
+    <div class="card-content">
+        <div class="level">
+            {{-- lock / name / date --}}
+            <div class="level-left">
+                <div class="level-item">
+                    <div class="media">
+                        <div class="media-left link">
+                            <span class="icon is-large"
+                                :class="IsInLockedList(selectedFile) ? 'is-danger' : 'is-success'"
+                                :title="IsInLockedList(selectedFile) ? '{{ trans('MediaManager::messages.unlock') }}': '{{ trans('MediaManager::messages.lock') }}'"
+                                v-tippy="{arrow: true, hideOnClick: false}"
+                                @click="toggleLock(selectedFile)">
+                                <span class="icon is-small">
+                                    <i class="fa fa-lg" :class="IsInLockedList(selectedFile) ? 'fa-unlock' : 'fa-lock'"></i>
+                                </span>
+                            </span>
+                        </div>
+                        <div class="media-content">
+                            <p class="title">@{{ selectedFile.name }}</p>
+                            <p class="heading">@{{ selectedFile.last_modified_formated }}</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {{-- download / size --}}
+            <div class="level-right">
+                <div class="level-item has-text-centered">
+                    <div>
+                        <button class="btn-plain" @click.prevent="saveFile(selectedFile)"
+                            v-tippy="{arrow: true}" title="{{ trans('MediaManager::messages.download_file') }}">
+                            <span class="icon has-text-black"><i class="fa fa-download fa-3x"></i></span>
+                        </button>
+                        <p>@{{ getFileSize(selectedFile.size) }}</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <footer class="card-footer">
+        <div class="card-footer-item">
+            <button class="button btn-plain is-fullwidth"
+                v-multi-ref="'move'"
+                :disabled="mv_dl() || !checkForFolders"
+                @click="moveItem()">
+                <span class="icon is-small"><i class="fa fa-share"></i></span>
+                <span>{{ trans('MediaManager::messages.move') }}</span>
+            </button>
+        </div>
+
+        <div class="card-footer-item">
+            <button class="button btn-plain is-fullwidth"
+                :disabled="!selectedFile || IsInLockedList(selectedFile)"
+                v-if="!isBulkSelecting()"
+                @click="renameItem()">
+                <span class="icon is-small"><i class="fa fa-i-cursor"></i></span>
+                <span>{{ trans('MediaManager::messages.rename') }}</span>
+            </button>
+        </div>
+
+        <div class="card-footer-item">
+            <button class="button btn-plain is-fullwidth"
+                v-multi-ref="'delete'"
+                :disabled="mv_dl()"
+                @click="deleteItem()">
+                <span class="icon is-small"><i class="fa fa-trash"></i></span>
+                <span>{{ trans('MediaManager::messages.delete') }}</span>
+            </button>
+        </div>
+
+      </footer>
+</div>
diff --git a/src/resources/views/media.blade.php b/src/resources/views/media.blade.php
index 38b23d4..b27018c 100755
--- a/src/resources/views/media.blade.php
+++ b/src/resources/views/media.blade.php
@@ -29,7 +29,6 @@
 
     {{-- footer --}}
     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
-    <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
     <script src="{{ asset("path/to/app.js") }}"></script>
 </body>
 </html>