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

Disables animation when re-adjusting slide list after a reload. Temporally disables removal of items for long lists as it still need adjustments.

This commit is contained in:
Mateus Machado Luna 2018-09-26 17:46:35 -03:00
parent 04cd0a66a1
commit d72f39c074
2 changed files with 60 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -304,6 +304,7 @@
.tainacan-slides-list {
position: relative;
transition: opacity 0.3s, visibility 0.3s, display 0.3s;
min-height: 60px;
.loading-icon {
width: 100%;
@ -311,47 +312,49 @@
position: absolute;
z-index: 9;
}
}
#tainacan-slide-container {
background-color: rgba(0,0,0,0.5);
padding: 0 $page-side-padding;
display: flex;
flex-wrap: nowrap;
overflow: hidden;
flex-grow: 1;
flex-shrink: 1;
justify-content: space-evenly;
animation-name: item-appear;
animation-duration: 0.5s;
.selected-record {
background-color: $turquoise1;
.metadata-title {
background-color: $turquoise2;
}
.media {
#tainacan-slide-container {
background-color: rgba(0,0,0,0.5);
padding: 0 $page-side-padding;
display: flex;
flex-wrap: nowrap;
overflow: hidden;
flex-grow: 1;
flex-shrink: 1;
justify-content: space-evenly;
animation-name: item-appear;
animation-duration: 0.5s;
.selected-record {
background-color: $turquoise1;
}
}
.tainacan-slide-item {
cursor: pointer;
&.active-item img {
border-bottom: 4px solid $turquoise5 !important;
}
&:hover img{
border-bottom: 4px solid $gray2;
.metadata-title {
background-color: $turquoise2;
}
.media {
background-color: $turquoise1;
}
}
img {
color: white;
width: 100%;//85px;
height: auto;
border-radius: 0px;
padding: 0 0 6px 0;
border-bottom: 4px solid transparent;
transition: border-bottom 0.4s;
.tainacan-slide-item {
cursor: pointer;
&.active-item img {
border-bottom: 4px solid $turquoise5 !important;
}
&:hover img{
border-bottom: 4px solid $gray2;
}
img {
color: white;
width: 100%;//85px;
height: auto;
border-radius: 0px;
padding: 0 0 6px 0;
border-bottom: 4px solid transparent;
transition: border-bottom 0.4s;
}
}
}
}

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

@ -263,6 +263,8 @@ export default {
maxPage: 1,
preloadedItem: {},
swiperOption: {
mousewheel: true,
keyboard: true,
preventInteractionOnTransition: true,
allowClick: true,
allowTouchMove: true,
@ -312,7 +314,7 @@ export default {
handler () {
if (this.items.length > 0) {
let updatedSlideIndex = this.slideIndex != undefined ? JSON.parse(JSON.stringify(this.slideIndex)) : 0;
// Loops through new items list. Depending on direction, goes from start or end of list.
for (let newItem of (this.goingRight ? this.items : JSON.parse(JSON.stringify(this.items)).reverse())) {
let existingItemIndex = this.slideItems.findIndex(anItem => anItem.id == newItem.id);
@ -327,23 +329,23 @@ export default {
this.$set(this.slideItems, existingItemIndex, newItem);
}
}
// Checks if list got too big. In this case we remove items from a page that is far from index
if (
(this.getItemsPerPage() == 96 && this.slideItems.length > 192) ||
(this.getItemsPerPage() == 48 && this.slideItems.length > 96) ||
(this.getItemsPerPage() < 48 && this.slideItems.length > 48)
) {
if (this.goingRight) {
this.slideItems.splice(0, this.getItemsPerPage());
this.minPage++;
updatedSlideIndex = this.slideItems.length - 1 - this.getItemsPerPage();
} else {
this.slideItems.splice(-this.getItemsPerPage());
this.maxPage--;
updatedSlideIndex = this.getItemsPerPage();
}
}
// if (
// (this.getItemsPerPage() == 96 && this.slideItems.length > 192) ||
// (this.getItemsPerPage() == 48 && this.slideItems.length > 96) ||
// (this.getItemsPerPage() == 24 && this.slideItems.length > 48) ||
// (this.getItemsPerPage() == 12 && this.slideItems.length > 24)) {
// if (this.goingRight) {
// this.slideItems.splice(0, this.getItemsPerPage());
// this.minPage++;
// updatedSlideIndex = this.slideItems.length - 1 - this.getItemsPerPage();
// } else {
// this.slideItems.splice(-this.getItemsPerPage());
// this.maxPage--;
// updatedSlideIndex = this.getItemsPerPage();
// }
// }
if (this.$refs.mySwiper != undefined && this.$refs.mySwiper.swiper != undefined)
this.$refs.mySwiper.swiper.update();
@ -356,7 +358,7 @@ export default {
this.$refs.mySwiper.swiper.slides[this.slideIndex].click();
this.$refs.mySwiper.swiper.activeIndex == this.slideIndex;
this.$refs.mySwiper.swiper.slideTo(this.slideIndex);
this.$refs.mySwiper.swiper.slideTo(this.slideIndex, 0, false);
this.$refs.mySwiper.swiper.update();
});