tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Adds loading control to lateral loading.

This commit is contained in:
Mateus Machado Luna 2018-09-26 10:45:51 -03:00
parent 273aece2fd
commit 12acb6be39
2 changed files with 24 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/admin/scss/_view-mode-slide.scss
View File

@ -253,7 +253,7 @@
background-color: transparent; background-color: transparent;
border: none !important; border: none !important;
height: 3.5rem; height: 3.5rem;
width: 2.8rem; width: 3.5rem;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
position: absolute; position: absolute;
@ -272,6 +272,7 @@
line-height: 5rem; line-height: 5rem;
font-size: 5rem; font-size: 5rem;
color: $turquoise5; color: $turquoise5;
text-shadow: 0px 0px 2px $gray5;
} }
} }
&.arrow-left { &.arrow-left {
@ -295,6 +296,7 @@
line-height: 3rem; line-height: 3rem;
font-size: 3rem; font-size: 3rem;
color: white; color: white;
text-shadow: 0px 0px 2px $gray5;
} }
} }
} }
@ -302,6 +304,13 @@
.tainacan-slides-list { .tainacan-slides-list {
position: relative; position: relative;
transition: opacity 0.3s, visibility 0.3s, display 0.3s; transition: opacity 0.3s, visibility 0.3s, display 0.3s;
.loading-icon {
width: 100%;
top: calc(50% - 33px);
position: absolute;
z-index: 9;
}
} }
#tainacan-slide-container { #tainacan-slide-container {
background-color: rgba(0,0,0,0.5); background-color: rgba(0,0,0,0.5);
@ -326,6 +335,7 @@
} }
.tainacan-slide-item { .tainacan-slide-item {
cursor: pointer;
&.active-item img { &.active-item img {
border-bottom: 4px solid $turquoise5 !important; border-bottom: 4px solid $turquoise5 !important;
@ -335,6 +345,7 @@
} }
img { img {
color: white;
width: 100%;//85px; width: 100%;//85px;
height: auto; height: auto;
border-radius: 0px; border-radius: 0px;

16
src/theme-helper/view-mode-slide.vue
View File

@ -180,6 +180,7 @@
class="tainacan-slide-item" class="tainacan-slide-item"
:class="{'active-item': slideIndex == index}"> :class="{'active-item': slideIndex == index}">
<img <img
:alt="item.title"
class="thumnail" class="thumnail"
:src="item['thumbnail']['tainacan_small'] ? item['thumbnail']['tainacan_small'] : (item['thumbnail'].thumb ? item['thumbnail'].thumb : thumbPlaceholderPath)"> :src="item['thumbnail']['tainacan_small'] ? item['thumbnail']['tainacan_small'] : (item['thumbnail'].thumb ? item['thumbnail'].thumb : thumbPlaceholderPath)">
@ -194,6 +195,13 @@
class="swiper-button-next" class="swiper-button-next"
slot="button-next"/> slot="button-next"/>
</swiper> </swiper>
<!-- List loading -->
<span
v-if="isLoading"
:style="{ left: !goingRight ? '' : '25%', right: !goingRight ? '25%' : '' }"
class="icon loading-icon">
<div class="control has-icons-right is-loading is-clearfix" />
</span>
<!-- Extra buttons for sliding groups of slides --> <!-- Extra buttons for sliding groups of slides -->
<button <button
@click.prevent="prevGroupOfSlides()" @click.prevent="prevGroupOfSlides()"
@ -221,7 +229,7 @@
import {mapActions, mapGetters} from 'vuex'; import {mapActions, mapGetters} from 'vuex';
import 'swiper/dist/css/swiper.css'; import 'swiper/dist/css/swiper.css';
import { swiper, swiperSlide } from 'vue-awesome-swiper'; import { swiper, swiperSlide } from 'vue-awesome-swiper';
import CircularCounter from '../admin/components/other/circular-counter.vue' import CircularCounter from '../admin/components/other/circular-counter.vue';
export default { export default {
name: 'ViewModeSlide', name: 'ViewModeSlide',
@ -229,6 +237,7 @@ export default {
collectionId: Number, collectionId: Number,
displayedMetadata: Array, displayedMetadata: Array,
items: Array, items: Array,
isLoading: Boolean,
totalItems: Number, totalItems: Number,
hideControls: true, hideControls: true,
isSwiping: false isSwiping: false
@ -241,24 +250,21 @@ export default {
data () { data () {
return { return {
slideItems: [], slideItems: [],
isLoading: false,
goingRight: true, goingRight: true,
isPlaying: false, isPlaying: false,
slideTimeout: 5000, slideTimeout: 5000,
intervalId: 0, intervalId: 0,
collapseAll: false, collapseAll: false,
isLoadingItem: false, isLoadingItem: true,
isMetadataCompressed: true, isMetadataCompressed: true,
slideIndex: 0, slideIndex: 0,
swiperOption: { swiperOption: {
preventInteractionOnTransition: true, preventInteractionOnTransition: true,
normalizeSlideIndex: true,
allowClick: true, allowClick: true,
allowTouchMove: true, allowTouchMove: true,
slidesPerView: 18, slidesPerView: 18,
slidesPerGroup: 1, slidesPerGroup: 1,
centeredSlides: true, centeredSlides: true,
watchSlidesVisibility: true,
spaceBetween: 12, spaceBetween: 12,
slideToClickedSlide: true, slideToClickedSlide: true,
navigation: { navigation: {