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>
This commit is contained in:
Miloš Holba
2020-10-24 09:40:05 +02:00
committed by GitHub
parent 12d6b0bf57
commit fd6aa5c6b2
72 changed files with 166 additions and 131 deletions
@@ -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;