mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-29 03:10:51 +00:00
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:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user