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

Responsiveness and grid alingments on new collections carousel block.

This commit is contained in:
Mateus Machado Luna 2019-08-23 12:00:49 -03:00
parent 9887ca884d
commit e6903d37fa
9 changed files with 109 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
src/assets/css/tainacan-gutenberg-block-carousel-collections-list.css
View File

@ -202,7 +202,7 @@
.wp-block-tainacan-carousel-collections-list .tainacan-carousel {
position: relative;
width: calc(100% + 50px);
left: -50px; }
left: -25px; }
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container {
margin: 0 50px; }
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container a > span,
@ -213,27 +213,29 @@
padding: 8px 16px;
display: block;
line-height: 1.2rem; }
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container a > img {
width: 100%;
height: auto; }
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container a:hover {
text-decoration: none; }
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid {
width: calc(20% - 32px);
min-width: calc(20% - 32px); }
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid a {
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid a {
width: 100%;
display: block; }
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid .collection-items-grid {
display: grid;
grid-template-columns: 33% 33% 33%;
grid-template-rows: 50% 50%;
width: 100%; }
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid .collection-items-grid img:first-of-type {
grid-column-start: 1;
grid-column-end: span 2;
grid-row-start: 1;
grid-row-end: span 2; }
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid .collection-items-grid img {
width: 100%;
display: block; }
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid .collection-items-grid {
display: grid;
grid-template-columns: 33% 33% 33%;
grid-template-rows: 50% 50%;
width: 100%; }
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid .collection-items-grid img:first-of-type {
grid-column-start: 1;
grid-column-end: span 2;
grid-row-start: 1;
grid-row-end: span 2; }
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid .collection-items-grid img {
padding: 2px;
margin-bottom: 0px; }
height: auto;
padding: 2px;
margin-bottom: 0px; }
.wp-block-tainacan-carousel-collections-list .preview-warning {
width: 100%;
font-size: 0.875rem;
@ -242,8 +244,8 @@
text-align: center;
margin: 4px auto; }
.wp-block-tainacan-carousel-collections-list .swiper-button-prev, .wp-block-tainacan-carousel-collections-list .swiper-button-next {
top: initial;
bottom: calc(50% + 10px);
top: calc(50% - 42px);
bottom: initial;
background: none;
border: none;
width: 42px;
@ -285,11 +287,11 @@
position: relative;
display: block;
margin: 16px;
width: calc(14.286% - 32px);
min-width: calc(14.286% - 32px); }
width: calc(16.666% - 32px);
min-width: calc(16.666% - 32px); }
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.collection-list-item-grid {
width: calc(20% - 32px);
min-width: calc(20% - 32px); }
width: calc(25% - 16px);
min-width: calc(25% - 16px); }
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item a {
color: #454647;
font-weight: bold;
@ -341,52 +343,22 @@
margin-bottom: 0px; }
@media only screen and (max-width: 1686px) {
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item {
width: calc(16.666% - 32px);
min-width: calc(16.666% - 32px); }
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.collection-list-item-grid {
width: calc(25% - 32px);
min-width: calc(25% - 32px); }
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid {
width: calc(25% - 32px);
min-width: calc(25% - 32px); } }
width: calc(20% - 32px);
min-width: calc(20% - 32px); } }
@media only screen and (max-width: 1452px) {
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item {
width: calc(20% - 32px);
min-width: calc(20% - 32px); }
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.collection-list-item-grid {
width: calc(33.333% - 32px);
min-width: calc(33.333% - 32px); }
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid {
width: calc(33.333% - 32px);
min-width: calc(33.333% - 32px); } }
width: calc(25% - 32px);
min-width: calc(25% - 32px); } }
@media only screen and (max-width: 1118px) {
.wp-block-tainacan-carousel-collections-list ul.collections-edit li.collection-list-item {
width: calc(25% - 32px);
min-width: calc(25% - 32px); }
.wp-block-tainacan-carousel-collections-list ul.collections-edit li.collection-list-item.collection-list-item-grid {
width: calc(50% - 32px);
min-width: calc(50% - 32px); }
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid {
width: calc(50% - 32px);
min-width: calc(50% - 32px); } }
width: calc(33.333% - 32px);
min-width: calc(33.333% - 32px); } }
@media only screen and (max-width: 854px) {
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item {
width: calc(33.333% - 32px);
min-width: calc(33.333% - 32px); }
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.collection-list-item-grid {
width: calc(100% - 32px);
min-width: calc(100% - 32px); }
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid {
width: calc(100% - 32px);
min-width: calc(100% - 32px); } }
width: calc(50% - 32px);
min-width: calc(50% - 32px); } }
@media only screen and (max-width: 584px) {
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item {
width: calc(50% - 32px);
min-width: calc(50% - 32px); }
.wp-block-tainacan-carousel-collections-list ul.collections-list-edit li.collection-list-item.collection-list-item-grid {
width: calc(100% - 32px);
min-width: calc(100% - 32px); }
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid {
width: calc(100% - 32px);
min-width: calc(100% - 32px); } }

2
src/assets/css/tainacan-gutenberg-block-carousel-collections-list.css.map
View File

File diff suppressed because one or more lines are too long

27
src/assets/css/tainacan-gutenberg-block-carousel-items-list.css
View File

@ -274,7 +274,7 @@
.wp-block-tainacan-carousel-items-list .tainacan-carousel {
position: relative;
width: calc(100% + 50px);
left: -50px; }
left: -25px; }
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper-container {
margin: 0 50px; }
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper-container a > span,
@ -285,6 +285,9 @@
padding: 8px 16px;
display: block;
line-height: 1.2rem; }
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper-container a > img {
width: 100%;
height: auto; }
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper-container a:hover {
text-decoration: none; }
.wp-block-tainacan-carousel-items-list .preview-warning {
@ -295,8 +298,8 @@
text-align: center;
margin: 4px auto; }
.wp-block-tainacan-carousel-items-list .swiper-button-prev, .wp-block-tainacan-carousel-items-list .swiper-button-next {
top: initial;
bottom: calc(50% + 10px);
top: calc(50% - 42px);
bottom: initial;
background: none;
border: none;
width: 42px;
@ -338,8 +341,8 @@
position: relative;
display: block;
margin: 16px;
width: calc(14.286% - 32px);
min-width: calc(14.286% - 32px); }
width: calc(16.666% - 32px);
min-width: calc(16.666% - 32px); }
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item a {
color: #454647;
font-weight: bold;
@ -378,24 +381,24 @@
background-color: white !important;
border: 1px solid #cbcbcb !important; }
@media only screen and (max-width: 1686px) {
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item {
width: calc(16.666% - 32px);
min-width: calc(16.666% - 32px); } }
@media only screen and (max-width: 1452px) {
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item {
width: calc(20% - 32px);
min-width: calc(20% - 32px); } }
@media only screen and (max-width: 1118px) {
@media only screen and (max-width: 1452px) {
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item {
width: calc(25% - 32px);
min-width: calc(25% - 32px); } }
@media only screen and (max-width: 854px) {
@media only screen and (max-width: 1118px) {
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item {
width: calc(33.333% - 32px);
min-width: calc(33.333% - 32px); } }
@media only screen and (max-width: 584px) {
@media only screen and (max-width: 854px) {
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item {
width: calc(50% - 32px);
min-width: calc(50% - 32px); } }
@media only screen and (max-width: 584px) {
.wp-block-tainacan-carousel-items-list ul.items-list-edit li.item-list-item {
width: calc(100% - 32px);
min-width: calc(100% - 32px); } }
/*# sourceMappingURL=tainacan-gutenberg-block-carousel-items-list.css.map */

2
src/assets/css/tainacan-gutenberg-block-carousel-items-list.css.map
View File

File diff suppressed because one or more lines are too long

14
src/gutenberg-blocks/tainacan-collections/carousel-collections-list/carousel-collections-list-theme.vue
View File

@ -190,20 +190,20 @@ export default {
preventInteractionOnTransition: true,
allowClick: true,
allowTouchMove: true,
slidesPerView: 7,
slidesPerView: this.showCollectionThumbnail ? 6 : 5,
slidesPerGroup: 1,
spaceBetween: 32,
spaceBetween: this.showCollectionThumbnail ? 32 : 16,
slideToClickedSlide: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
breakpoints: {
498: { slidesPerView: 2 },
768: { slidesPerView: 3 },
1024: { slidesPerView: 4 },
1366: { slidesPerView: 5 },
1600: { slidesPerView: 6 },
498: { slidesPerView: this.showCollectionThumbnail ? 1 : 1 },
768: { slidesPerView: this.showCollectionThumbnail ? 2 : 1 },
1024: { slidesPerView: this.showCollectionThumbnail ? 3 : 2 },
1366: { slidesPerView: this.showCollectionThumbnail ? 4 : 3 },
1600: { slidesPerView: this.showCollectionThumbnail ? 5 : 4 },
},
autoplay: this.autoPlay ? { delay: this.autoPlaySpeed*1000 } : false,
loop: this.loopSlides

84
src/gutenberg-blocks/tainacan-collections/carousel-collections-list/carousel-collections-list.scss
View File

@ -48,7 +48,7 @@
.tainacan-carousel {
position: relative;
width: calc(100% + 50px);
left: -50px;
left: -25px;
.swiper-container {
margin: 0 50px;
@ -62,13 +62,16 @@
display: block;
line-height: 1.2rem;
}
a>img {
width: 100%;
height: auto;
}
a:hover {
text-decoration: none;
}
.swiper-slide.collection-list-item-grid {
width: calc(20% - 32px);
min-width: calc(20% - 32px);
a {
width: 100%;
display: block;
@ -87,6 +90,8 @@
}
img {
width: 100%;
height: auto;
padding: 2px;
margin-bottom: 0px;
}
@ -106,8 +111,8 @@
// Next and previous buttons
.swiper-button-prev, .swiper-button-next {
top: initial;
bottom: calc(50% + 10px);
top: calc(50% - 42px);
bottom: initial;
background: none;
border: none;
width: 42px;
@ -158,12 +163,12 @@
position: relative;
display: block;
margin: 16px;
width: calc(14.286% - 32px);
min-width: calc(14.286% - 32px);
width: calc(16.666% - 32px);
min-width: calc(16.666% - 32px);
&.collection-list-item-grid {
width: calc(20% - 32px);
min-width: calc(20% - 32px);
width: calc(25% - 16px);
min-width: calc(25% - 16px);
}
a {
@ -237,79 +242,34 @@
@media only screen and (max-width: 1686px) {
ul.collections-list-edit li.collection-list-item {
width: calc(16.666% - 32px);
min-width: calc(16.666% - 32px);
&.collection-list-item-grid {
width: calc(25% - 32px);
min-width: calc(25% - 32px);
}
}
.tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid {
width: calc(25% - 32px);
min-width: calc(25% - 32px);
width: calc(20% - 32px);
min-width: calc(20% - 32px);
}
}
@media only screen and (max-width: 1452px) {
ul.collections-list-edit li.collection-list-item {
width: calc(20% - 32px);
min-width: calc(20% - 32px);
&.collection-list-item-grid {
width: calc(33.333% - 32px);
min-width: calc(33.333% - 32px);
}
}
.tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid {
width: calc(33.333% - 32px);
min-width: calc(33.333% - 32px);
width: calc(25% - 32px);
min-width: calc(25% - 32px);
}
}
@media only screen and (max-width: 1118px) {
ul.collections-edit li.collection-list-item {
width: calc(25% - 32px);
min-width: calc(25% - 32px);
&.collection-list-item-grid {
width: calc(50% - 32px);
min-width: calc(50% - 32px);
}
}
.tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid {
width: calc(50% - 32px);
min-width: calc(50% - 32px);
width: calc(33.333% - 32px);
min-width: calc(33.333% - 32px);
}
}
@media only screen and (max-width: 854px) {
ul.collections-list-edit li.collection-list-item {
width: calc(33.333% - 32px);
min-width: calc(33.333% - 32px);
&.collection-list-item-grid {
width: calc(100% - 32px);
min-width: calc(100% - 32px);
}
}
.tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid {
width: calc(100% - 32px);
min-width: calc(100% - 32px);
width: calc(50% - 32px);
min-width: calc(50% - 32px);
}
}
@media only screen and (max-width: 584px) {
ul.collections-list-edit li.collection-list-item {
width: calc(50% - 32px);
min-width: calc(50% - 32px);
&.collection-list-item-grid {
width: calc(100% - 32px);
min-width: calc(100% - 32px);
}
}
.tainacan-carousel .swiper-container .swiper-slide.collection-list-item-grid {
width: calc(100% - 32px);
min-width: calc(100% - 32px);
}

2
src/gutenberg-blocks/tainacan-collections/carousel-collections-list/index.js
View File

@ -511,7 +511,7 @@ registerBlockType('tainacan/carousel-collections-list', {
max-collections-number={ maxCollectionsNumber }
tainacan-api-root={ tainacan_plugin.root }
tainacan-base-url={ tainacan_plugin.base_url }
showCollectionThumbnail={ '' + showCollectionThumbnail }
show-collection-thumbnail={ '' + showCollectionThumbnail }
id={ 'wp-block-tainacan-carousel-collections-list_' + blockId }>
{ content }
</div>

14
src/gutenberg-blocks/tainacan-items/carousel-items-list/carousel-items-list-theme.vue
View File

@ -192,20 +192,20 @@ export default {
preventInteractionOnTransition: true,
allowClick: true,
allowTouchMove: true,
slidesPerView: 7,
slidesPerView: 6,
slidesPerGroup: 1,
spaceBetween: 32,
slideToClickedSlide: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
},
breakpoints: {
498: { slidesPerView: 2 },
768: { slidesPerView: 3 },
1024: { slidesPerView: 4 },
1366: { slidesPerView: 5 },
1600: { slidesPerView: 6 },
498: { slidesPerView: 1 },
768: { slidesPerView: 2 },
1024: { slidesPerView: 3 },
1366: { slidesPerView: 4 },
1600: { slidesPerView: 5 },
},
autoplay: this.autoPlay ? { delay: this.autoPlaySpeed*1000 } : false,
loop: this.loopSlides

36
src/gutenberg-blocks/tainacan-items/carousel-items-list/carousel-items-list.scss
View File

@ -140,7 +140,7 @@
.tainacan-carousel {
position: relative;
width: calc(100% + 50px);
left: -50px;
left: -25px;
.swiper-container {
margin: 0 50px;
@ -154,6 +154,10 @@
display: block;
line-height: 1.2rem;
}
a>img {
width: 100%;
height: auto;
}
a:hover {
text-decoration: none;
}
@ -171,8 +175,8 @@
// Next and previous buttons
.swiper-button-prev, .swiper-button-next {
top: initial;
bottom: calc(50% + 10px);
top: calc(50% - 42px);
bottom: initial;
background: none;
border: none;
width: 42px;
@ -223,8 +227,8 @@
position: relative;
display: block;
margin: 16px;
width: calc(14.286% - 32px);
min-width: calc(14.286% - 32px);
width: calc(16.666% - 32px);
min-width: calc(16.666% - 32px);
a {
color: #454647;
@ -278,38 +282,38 @@
}
@media only screen and (max-width: 1686px) {
ul.items-list-edit li.item-list-item {
width: calc(16.666% - 32px);
min-width: calc(16.666% - 32px);
}
}
@media only screen and (max-width: 1452px) {
ul.items-list-edit li.item-list-item {
width: calc(20% - 32px);
min-width: calc(20% - 32px);
}
}
@media only screen and (max-width: 1118px) {
@media only screen and (max-width: 1452px) {
ul.items-list-edit li.item-list-item {
width: calc(25% - 32px);
min-width: calc(25% - 32px);
}
}
@media only screen and (max-width: 854px) {
@media only screen and (max-width: 1118px) {
ul.items-list-edit li.item-list-item {
width: calc(33.333% - 32px);
min-width: calc(33.333% - 32px);
min-width: calc(33.333% - 32px);
}
}
@media only screen and (max-width: 584px) {
@media only screen and (max-width: 854px) {
ul.items-list-edit li.item-list-item {
width: calc(50% - 32px);
min-width: calc(50% - 32px);
}
}
@media only screen and (max-width: 584px) {
ul.items-list-edit li.item-list-item {
width: calc(100% - 32px);
min-width: calc(100% - 32px);
}
}
}