Lazy loading (#41)

* lazy-loading and solved bugs * lazy-loading for pull request on master * Update vuefilemanager.php Co-authored-by: Peter Papp <peterpapp@makingcg.com>
2026-05-13 08:45:01 +00:00 · 2020-10-24 09:40:05 +02:00
parent 12d6b0bf57
commit fd6aa5c6b2
72 changed files with 166 additions and 131 deletions
@@ -2,8 +2,8 @@

 return [

-    'version'    => '1.7.10.3',
+    'version'    => '1.7.11',

    // Define size of chunk uploaded by MB. E.g. integer 128 means chunk size will be 128MB.
    'chunk_size' => env('CHUNK_SIZE', '128'),
-];
+];
@@ -5,7 +5,7 @@
 */

 /*!
- * vue-i18n v8.18.2 
+ * vue-i18n v8.21.0 
 * (c) 2020 kazuya kawaguchi
 * Released under the MIT License.
 */
@@ -17,7 +17,7 @@
 */

 /**
-  * vee-validate v3.3.7
+  * vee-validate v3.3.9
  * (c) 2020 Abdelrahman Awad
  * @license MIT
  */
@@ -1,66 +1,66 @@
 {
-    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.js?id=ae5044886b5c73e75ac4",
-    "/js/main.js": "/js/main.js?id=09d848fb2aa2c365bb47",
+    "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.js": "/chunks/files~chunks/shared-files~chunks/shared-page~chunks/trash.js?id=a70c94bfa43cc77da961",
+    "/js/main.js": "/js/main.js?id=8956d0fe09230075abb6",
    "/css/app.css": "/css/app.css?id=dbf49843b327d3936c06",
-    "/chunks/admin.js": "/chunks/admin.js?id=5bd95ece632ca142f035",
-    "/chunks/admin-account.js": "/chunks/admin-account.js?id=b181a9ba45f475b9e004",
-    "/chunks/app-appearance.js": "/chunks/app-appearance.js?id=f69d59d6794ea1499fe0",
-    "/chunks/app-billings.js": "/chunks/app-billings.js?id=eeaf973796e2dc560813",
-    "/chunks/app-email.js": "/chunks/app-email.js?id=471301be8d4dbb371fa0",
-    "/chunks/app-index.js": "/chunks/app-index.js?id=ded9a59aa4d4d8040637",
-    "/chunks/app-others.js": "/chunks/app-others.js?id=3ad2d0ac11ce6252321a",
-    "/chunks/app-payments.js": "/chunks/app-payments.js?id=819a1e3b30e7aa79c71d",
-    "/chunks/app-settings.js": "/chunks/app-settings.js?id=8499d3cb5a2c547d3d69",
-    "/chunks/app-setup.js": "/chunks/app-setup.js?id=f8769c14859175aad49b",
-    "/chunks/billings-detail.js": "/chunks/billings-detail.js?id=410da17c566b388cb0a5",
-    "/chunks/contact-us.js": "/chunks/contact-us.js?id=153e8ac7ba24a14f2e1a",
-    "/chunks/create-new-password.js": "/chunks/create-new-password.js?id=9e9d35c199787d991445",
-    "/chunks/dashboard.js": "/chunks/dashboard.js?id=4f379c21c8f1df14cda7",
-    "/chunks/database.js": "/chunks/database.js?id=99736b26537c8bb61a33",
-    "/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=2e3af103d13536c50757",
-    "/chunks/environment-setup.js": "/chunks/environment-setup.js?id=48fa8bb643132a82bdaa",
-    "/chunks/files.js": "/chunks/files.js?id=0a08eb40be8f2c511ded",
-    "/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=a84f7a6d4e4e05af0701",
-    "/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=54cf8dbd4d75fd0b2add",
-    "/chunks/invoices.js": "/chunks/invoices.js?id=c20b841c75005fdacde6",
-    "/chunks/landing-page.js": "/chunks/landing-page.js?id=b69d1af44673ddfb69d3",
-    "/chunks/not-found-shared.js": "/chunks/not-found-shared.js?id=286d18bed681c67e5330",
-    "/chunks/page-edit.js": "/chunks/page-edit.js?id=2ff6bfeb6d9c43014d69",
-    "/chunks/pages.js": "/chunks/pages.js?id=49a51fc783d155aa8132",
-    "/chunks/plan.js": "/chunks/plan.js?id=bbea8c9e9f807d9cedc5",
-    "/chunks/plan-create.js": "/chunks/plan-create.js?id=dc76283ccd5ec6481564",
-    "/chunks/plan-delete.js": "/chunks/plan-delete.js?id=e63e243dccb487fa18f5",
-    "/chunks/plan-settings.js": "/chunks/plan-settings.js?id=83517dd417b8641c60c8",
-    "/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=26e1aabafdc06d069fa3",
-    "/chunks/plans.js": "/chunks/plans.js?id=0b1d2058ba59c955947b",
-    "/chunks/profile.js": "/chunks/profile.js?id=9e3ff146e95d8a719add",
-    "/chunks/purchase-code.js": "/chunks/purchase-code.js?id=696427718c821f482c94",
-    "/chunks/settings.js": "/chunks/settings.js?id=51495831f7bbad060a00",
-    "/chunks/settings-create-payment-methods.js": "/chunks/settings-create-payment-methods.js?id=007277c68fce4a7ce5e9",
-    "/chunks/settings-invoices.js": "/chunks/settings-invoices.js?id=82cbe975767641ad178e",
-    "/chunks/settings-password.js": "/chunks/settings-password.js?id=6e9b879329675433551d",
-    "/chunks/settings-payment-methods.js": "/chunks/settings-payment-methods.js?id=9f6fdc546cfa5f98796e",
-    "/chunks/settings-storage.js": "/chunks/settings-storage.js?id=9716c15688051b9c9b20",
-    "/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=e4176c53674c2e6d440f",
+    "/chunks/admin.js": "/chunks/admin.js?id=65cdb5879b738d1bb7da",
+    "/chunks/admin-account.js": "/chunks/admin-account.js?id=d57f947c48eae9842bc6",
+    "/chunks/app-appearance.js": "/chunks/app-appearance.js?id=0e5aac05a973a1d9e76e",
+    "/chunks/app-billings.js": "/chunks/app-billings.js?id=17caa870f73bcafdeff1",
+    "/chunks/app-email.js": "/chunks/app-email.js?id=e50ebc47b24caa846aa3",
+    "/chunks/app-index.js": "/chunks/app-index.js?id=d3625f0e8803a8d5b12d",
+    "/chunks/app-others.js": "/chunks/app-others.js?id=8f204d97be6647862243",
+    "/chunks/app-payments.js": "/chunks/app-payments.js?id=99b253b06c57ae0e3cc7",
+    "/chunks/app-settings.js": "/chunks/app-settings.js?id=6068bd4129e09a4bf276",
+    "/chunks/app-setup.js": "/chunks/app-setup.js?id=363575cd65e91260409f",
+    "/chunks/billings-detail.js": "/chunks/billings-detail.js?id=fbda0f1bd41623537110",
+    "/chunks/contact-us.js": "/chunks/contact-us.js?id=7400115344a3863ea065",
+    "/chunks/create-new-password.js": "/chunks/create-new-password.js?id=41304a313b8a36da9522",
+    "/chunks/dashboard.js": "/chunks/dashboard.js?id=2f8a0dba4b14e418cbfd",
+    "/chunks/database.js": "/chunks/database.js?id=1710c57ab33413b2eb7e",
+    "/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=54e4a6f69884acbf5cc7",
+    "/chunks/environment-setup.js": "/chunks/environment-setup.js?id=258c62c452d7e88bc4bc",
+    "/chunks/files.js": "/chunks/files.js?id=105ea80c073dfc2ce20a",
+    "/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=807f27043bc0e14daa93",
+    "/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=f4f710ac0aa4333d599e",
+    "/chunks/invoices.js": "/chunks/invoices.js?id=e26d9ca0f28b23051bfe",
+    "/chunks/landing-page.js": "/chunks/landing-page.js?id=d874d98250a71f27aaa0",
+    "/chunks/not-found-shared.js": "/chunks/not-found-shared.js?id=2149c06d866b105b57ea",
+    "/chunks/page-edit.js": "/chunks/page-edit.js?id=e9251eff3d6147b7f5c2",
+    "/chunks/pages.js": "/chunks/pages.js?id=57a0ef8e53ed7c01c096",
+    "/chunks/plan.js": "/chunks/plan.js?id=2ea3bf59468d31d4d71c",
+    "/chunks/plan-create.js": "/chunks/plan-create.js?id=a4ff439de8e874bea565",
+    "/chunks/plan-delete.js": "/chunks/plan-delete.js?id=efb0f4f5275a5b3d110a",
+    "/chunks/plan-settings.js": "/chunks/plan-settings.js?id=969a56b1069e3cc048e8",
+    "/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=f5c201e2318f482dac36",
+    "/chunks/plans.js": "/chunks/plans.js?id=d9a5809e7c672fc553be",
+    "/chunks/profile.js": "/chunks/profile.js?id=e9b06617b0854135dd3a",
+    "/chunks/purchase-code.js": "/chunks/purchase-code.js?id=e32f460dcc70b3a3bb0a",
+    "/chunks/settings.js": "/chunks/settings.js?id=2278398f918ff5312e99",
+    "/chunks/settings-create-payment-methods.js": "/chunks/settings-create-payment-methods.js?id=0b075c965095f2764336",
+    "/chunks/settings-invoices.js": "/chunks/settings-invoices.js?id=9519f1b35ccf6f0db7df",
+    "/chunks/settings-password.js": "/chunks/settings-password.js?id=302cd462eb17b4a105be",
+    "/chunks/settings-payment-methods.js": "/chunks/settings-payment-methods.js?id=2e589d528ab2704dd129",
+    "/chunks/settings-storage.js": "/chunks/settings-storage.js?id=227c82f766029db0f6d3",
+    "/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=497dfceab2f01c6744ed",
    "/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=47090233afc7b0cdf855",
-    "/chunks/shared-files.js": "/chunks/shared-files.js?id=bc0b14705784b1ff6c82",
-    "/chunks/shared-page.js": "/chunks/shared-page.js?id=9d725367306c477e5f78",
-    "/chunks/sign-in.js": "/chunks/sign-in.js?id=0c9fe096135be58283b6",
-    "/chunks/sign-up.js": "/chunks/sign-up.js?id=eaa8bc2819a9cc19dbc7",
-    "/chunks/stripe-credentials.js": "/chunks/stripe-credentials.js?id=cf445ba69a83dc2b3b00",
-    "/chunks/subscription-plans.js": "/chunks/subscription-plans.js?id=3f57ef56cf8203a728f0",
-    "/chunks/subscription-service.js": "/chunks/subscription-service.js?id=175f558c3e09887846a5",
-    "/chunks/trash.js": "/chunks/trash.js?id=e00ce8bde9ea638f5049",
-    "/chunks/upgrade.js": "/chunks/upgrade.js?id=03eccfa25c668325efd0",
-    "/chunks/upgrade-billing.js": "/chunks/upgrade-billing.js?id=4921e1ce22bfdab9f014",
-    "/chunks/upgrade-plan.js": "/chunks/upgrade-plan.js?id=7b02fafcca0029762a66",
-    "/chunks/user.js": "/chunks/user.js?id=d842e0d6859c94caa23d",
-    "/chunks/user-create.js": "/chunks/user-create.js?id=4735bda3b876200f0511",
-    "/chunks/user-delete.js": "/chunks/user-delete.js?id=cea21a2d091f1f02e179",
-    "/chunks/user-detail.js": "/chunks/user-detail.js?id=b3f5d20c34a5b0bf9ff6",
-    "/chunks/user-invoices.js": "/chunks/user-invoices.js?id=b73fa5a127374d1de1de",
-    "/chunks/user-password.js": "/chunks/user-password.js?id=466b113e32397b2f2f33",
-    "/chunks/user-storage.js": "/chunks/user-storage.js?id=7e19cc06447c776ce504",
-    "/chunks/user-subscription.js": "/chunks/user-subscription.js?id=45c971c8c4912d44bc42",
-    "/chunks/users.js": "/chunks/users.js?id=362b167df913626d3d92"
+    "/chunks/shared-files.js": "/chunks/shared-files.js?id=35f1e385813ac63a64d2",
+    "/chunks/shared-page.js": "/chunks/shared-page.js?id=0f40befe046bacc5e9ca",
+    "/chunks/sign-in.js": "/chunks/sign-in.js?id=8056cba749857555dcf7",
+    "/chunks/sign-up.js": "/chunks/sign-up.js?id=a85bb0187ac4ed1bc3b1",
+    "/chunks/stripe-credentials.js": "/chunks/stripe-credentials.js?id=8fe21e4b3a8f0e466a7c",
+    "/chunks/subscription-plans.js": "/chunks/subscription-plans.js?id=c7ca4d69e00d8e7de25a",
+    "/chunks/subscription-service.js": "/chunks/subscription-service.js?id=c406373c1a536ffb8d0d",
+    "/chunks/trash.js": "/chunks/trash.js?id=6a370954c7dbcc4cccf4",
+    "/chunks/upgrade.js": "/chunks/upgrade.js?id=1c4a840e46610b06929e",
+    "/chunks/upgrade-billing.js": "/chunks/upgrade-billing.js?id=2b8f52b5e72fd2af2107",
+    "/chunks/upgrade-plan.js": "/chunks/upgrade-plan.js?id=ee1be6b23ae9873a5a84",
+    "/chunks/user.js": "/chunks/user.js?id=afb3323d832525a07f86",
+    "/chunks/user-create.js": "/chunks/user-create.js?id=fcd5d38e88588c65bb48",
+    "/chunks/user-delete.js": "/chunks/user-delete.js?id=efb09441e6ee702f9ff2",
+    "/chunks/user-detail.js": "/chunks/user-detail.js?id=f4e6f78f874c80c679d0",
+    "/chunks/user-invoices.js": "/chunks/user-invoices.js?id=8b0ab00e8c2e93d0d649",
+    "/chunks/user-password.js": "/chunks/user-password.js?id=0e6f613b6150f934e72b",
+    "/chunks/user-storage.js": "/chunks/user-storage.js?id=4b1e6945dfdbb9913d30",
+    "/chunks/user-subscription.js": "/chunks/user-subscription.js?id=26b1a5385afb20bdd82c",
+    "/chunks/users.js": "/chunks/users.js?id=92c97e045b9ac4bbb941"
 }
@@ -30,7 +30,7 @@
                <FontAwesomeIcon v-if="isFile" class="file-icon" icon="file"/>

                <!--Image thumbnail-->
-                <img v-if="isImage" class="image" :src="data.thumbnail" :alt="data.name"/>
+                <img loading="lazy" v-if="isImage" class="image" :src="data.thumbnail" :alt="data.name"/>

                <!--Else show only folder icon-->
                <FontAwesomeIcon v-if="isFolder" :class="{'is-deleted': isDeleted}" class="folder-icon" icon="folder"/>
@@ -24,7 +24,7 @@
 				<FontAwesomeIcon v-if="isFile" class="file-icon" icon="file" />

 				<!--Image thumbnail-->
-				<img v-if="isImage" class="image" :src="data.thumbnail" :alt="data.name" />
+				<img loading="lazy" v-if="isImage" class="image" :src="data.thumbnail" :alt="data.name" />

 				<!--Else show only folder icon-->
 				<FontAwesomeIcon v-if="isFolder" :class="{ 'is-deleted': isDeleted }" class="folder-icon" icon="folder" />
@@ -34,4 +34,10 @@
            right: 0;
        }
    }
+
+    @media only screen and (max-width: 320px) {
+        .actions {
+            position: unset;
+        }
+    }
 </style>
@@ -35,6 +35,12 @@
        }
    }

+    @media only screen and (max-width: 320px) {
+        .popup-content {
+            position: unset;
+        }
+    }
+
    @keyframes popup-in {
        0% {
            opacity: 0;
@@ -134,6 +134,12 @@
        }
    }

+    @media only screen and (max-width: 320px){
+        .popup-wrapper {
+            overflow-y: auto;
+        }
+    }
+
    @media (prefers-color-scheme: dark) {
        .popup-wrapper {
            background: $dark_mode_background;
@@ -81,7 +81,7 @@
                    </ValidationProvider>
                </div>

-                <InfoBox v-if="isError" type="error" style="margin-bottom: -20px">
+                <InfoBox v-if="isError" type="error" >
                    <p>{{ errorMessage }}</p>
                </InfoBox>

@@ -226,6 +226,19 @@
    @import '@assets/vue-file-manager/_auth-form';
    @import '@assets/vue-file-manager/_auth';

+     #files-view {
+        font-family: 'Nunito', sans-serif;
+        font-size: 16px;
+        width: 100%;
+        height: 100%;
+        position: relative;
+        min-width: 320px;
+        overflow-x: hidden;
+        padding-left: 15px;
+        padding-right: 15px;
+        overflow-y: hidden;
+    }
+
    #shared {
        height: 100%;
    }