bisheng/blablablocks-slider-block
1
0
Fork 0
mirror of https://ghproxy.net/https://github.com/lubusIN/blablablocks-slider-block.git synced 2025-10-04 02:25:48 +08:00
Code Issues Projects Packages Wiki Activity Actions

fix (slider): update navigation styles and positions for better responsiveness

Browse source
This commit is contained in:
punitverma123 2025-05-24 15:49:01 +05:30
parent fbd722689e
commit 16b3cc1212
11 changed files with 108 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

2
build/slider/index.asset.php
View file

@ -1 +1 @@
<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n', 'wp-media-utils', 'wp-notices', 'wp-primitives'), 'version' => '0c1249425331d31c85f2');
<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n', 'wp-media-utils', 'wp-notices', 'wp-primitives'), 'version' => 'ca963a3d4c20ec6a9494');

2
build/slider/index.js
View file

File diff suppressed because one or more lines are too long

2
build/slider/index.js.map
View file

File diff suppressed because one or more lines are too long

44
build/slider/style-index-rtl.css
View file

@ -869,42 +869,73 @@ button.swiper-pagination-bullet {

.bbb-slider-nav-position-top-left .bbb-slider-nav-container {
top: 0;
right: 0;
justify-content: flex-start;
}

.bbb-slider-nav-position-bottom-left .bbb-slider-nav-container {
top: auto;
bottom: 0;
right: 0;
justify-content: flex-start;
}

.bbb-slider-nav-position-top-right .bbb-slider-nav-container {
top: 0;
left: 0;
justify-content: flex-end;
}

.bbb-slider-nav-position-bottom-right .bbb-slider-nav-container {
top: auto;
bottom: 0;
left: 0;
justify-content: flex-end;
}

.bbb-slider-nav-position-top-center .bbb-slider-nav-container {
top: 0;
right: 50%;
transform: translateX(50%);
justify-content: center;
}

.bbb-slider-nav-position-bottom-center .bbb-slider-nav-container {
top: auto;
bottom: 0;
right: 50%;
transform: translateX(50%);
justify-content: center;
}

.bbb-slider-nav-position-center .bbb-slider-nav-container,
.bbb-slider-nav-position-center-center .bbb-slider-nav-container {
transform: translateY(-50%);
width: 100% !important;
top: 50%;
right: 50%;
transform: translate(50%, -50%) !important;
justify-content: space-between;
margin-right: 0 !important;
margin-left: 0 !important;
}

.bbb-slider-nav-position-center .bbb-slider-nav-container .swiper-button-prev,
.bbb-slider-nav-position-center-center .bbb-slider-nav-container .swiper-button-prev {
margin-right: var(--navigation-offset-left) !important;
position: absolute !important;
right: 0 !important;
top: 50% !important;
transform: translateY(-50%);
}

.bbb-slider-nav-position-center .bbb-slider-nav-container .swiper-button-next,
.bbb-slider-nav-position-center-center .bbb-slider-nav-container .swiper-button-next {
margin-left: var(--navigation-offset-right) !important;
position: absolute !important;
left: 0 !important;
right: auto !important;
top: 50% !important;
transform: translateY(-50%);
}

.bbb-slider-pag-position-top-left .swiper-pagination {
@ -945,26 +976,28 @@ button.swiper-pagination-bullet {
}
.wp-block-blablablocks-slider .swiper .swiper-wrapper {
gap: 0;
z-index: 100;
}
.wp-block-blablablocks-slider .swiper .bbb-slider-nav-container {
display: flex;
align-items: center;
width: 100%;
transform: translateX(50%);
right: 50%;
width: -moz-max-content;
width: max-content;
gap: var(--navigation-spacing);
position: absolute;
margin-top: var(--navigation-offset-top);
margin-bottom: var(--navigation-offset-bottom);
margin-right: var(--navigation-offset-left);
margin-left: var(--navigation-offset-right);
z-index: 1000;
z-index: 10000;
}
.wp-block-blablablocks-slider .swiper .swiper-button-prev,
.wp-block-blablablocks-slider .swiper .swiper-button-next {
position: relative;
right: 0;
left: 0;
margin: 0;
top: 0;
color: var(--navigation-arrow-color, var(--swiper-theme-color));
background-color: var(--navigation-background-color);
border-radius: var(--navigation-border-radius);
@ -981,6 +1014,7 @@ button.swiper-pagination-bullet {
margin-bottom: var(--pagination-offset-bottom);
margin-right: var(--pagination-offset-left);
display: flex;
z-index: 10000;
}
.wp-block-blablablocks-slider .swiper .swiper-pagination-bullet {
width: var(--pagination-size);

44
build/slider/style-index.css
View file

@ -869,42 +869,73 @@ button.swiper-pagination-bullet {

.bbb-slider-nav-position-top-left .bbb-slider-nav-container {
top: 0;
left: 0;
justify-content: flex-start;
}

.bbb-slider-nav-position-bottom-left .bbb-slider-nav-container {
top: auto;
bottom: 0;
left: 0;
justify-content: flex-start;
}

.bbb-slider-nav-position-top-right .bbb-slider-nav-container {
top: 0;
right: 0;
justify-content: flex-end;
}

.bbb-slider-nav-position-bottom-right .bbb-slider-nav-container {
top: auto;
bottom: 0;
right: 0;
justify-content: flex-end;
}

.bbb-slider-nav-position-top-center .bbb-slider-nav-container {
top: 0;
left: 50%;
transform: translateX(-50%);
justify-content: center;
}

.bbb-slider-nav-position-bottom-center .bbb-slider-nav-container {
top: auto;
bottom: 0;
left: 50%;
transform: translateX(-50%);
justify-content: center;
}

.bbb-slider-nav-position-center .bbb-slider-nav-container,
.bbb-slider-nav-position-center-center .bbb-slider-nav-container {
transform: translateY(-50%);
width: 100% !important;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) !important;
justify-content: space-between;
margin-left: 0 !important;
margin-right: 0 !important;
}

.bbb-slider-nav-position-center .bbb-slider-nav-container .swiper-button-prev,
.bbb-slider-nav-position-center-center .bbb-slider-nav-container .swiper-button-prev {
margin-left: var(--navigation-offset-left) !important;
position: absolute !important;
left: 0 !important;
top: 50% !important;
transform: translateY(-50%);
}

.bbb-slider-nav-position-center .bbb-slider-nav-container .swiper-button-next,
.bbb-slider-nav-position-center-center .bbb-slider-nav-container .swiper-button-next {
margin-right: var(--navigation-offset-right) !important;
position: absolute !important;
right: 0 !important;
left: auto !important;
top: 50% !important;
transform: translateY(-50%);
}

.bbb-slider-pag-position-top-left .swiper-pagination {
@ -945,26 +976,28 @@ button.swiper-pagination-bullet {
}
.wp-block-blablablocks-slider .swiper .swiper-wrapper {
gap: 0;
z-index: 100;
}
.wp-block-blablablocks-slider .swiper .bbb-slider-nav-container {
display: flex;
align-items: center;
width: 100%;
transform: translateX(-50%);
left: 50%;
width: -moz-max-content;
width: max-content;
gap: var(--navigation-spacing);
position: absolute;
margin-top: var(--navigation-offset-top);
margin-bottom: var(--navigation-offset-bottom);
margin-left: var(--navigation-offset-left);
margin-right: var(--navigation-offset-right);
z-index: 1000;
z-index: 10000;
}
.wp-block-blablablocks-slider .swiper .swiper-button-prev,
.wp-block-blablablocks-slider .swiper .swiper-button-next {
position: relative;
left: 0;
right: 0;
margin: 0;
top: 0;
color: var(--navigation-arrow-color, var(--swiper-theme-color));
background-color: var(--navigation-background-color);
border-radius: var(--navigation-border-radius);
@ -981,6 +1014,7 @@ button.swiper-pagination-bullet {
margin-bottom: var(--pagination-offset-bottom);
margin-left: var(--pagination-offset-left);
display: flex;
z-index: 10000;
}
.wp-block-blablablocks-slider .swiper .swiper-pagination-bullet {
width: var(--pagination-size);

2
build/slider/style-index.css.map
View file

File diff suppressed because one or more lines are too long

2
build/slider/view.asset.php
View file

@ -1 +1 @@
<?php return array('dependencies' => array(), 'version' => 'd368515aec099ce7483d');
<?php return array('dependencies' => array(), 'version' => 'c97a2f83d6b014b9b985');

2
build/slider/view.js
View file

File diff suppressed because one or more lines are too long

2
build/slider/view.js.map
View file

File diff suppressed because one or more lines are too long

25
src/slider/style.scss
View file

@ -14,41 +14,51 @@
// Navigation Position
.bbb-slider-nav-position-top-left .bbb-slider-nav-container {
top: 0;
left: 0;
justify-content: flex-start;
}

.bbb-slider-nav-position-bottom-left .bbb-slider-nav-container {
top: auto;
bottom: 0;
left: 0;
justify-content: flex-start;
}

.bbb-slider-nav-position-top-right .bbb-slider-nav-container {
top: 0;
right: 0;
justify-content: flex-end;
}

.bbb-slider-nav-position-bottom-right .bbb-slider-nav-container {
top: auto;
bottom: 0;
right: 0;
justify-content: flex-end;
}

.bbb-slider-nav-position-top-center .bbb-slider-nav-container {
top: 0;
left: 50%;
transform: translateX(-50%);
justify-content: center;
}

.bbb-slider-nav-position-bottom-center .bbb-slider-nav-container {
top: auto;
bottom: 0;
left: 50%;
transform: translateX(-50%);
justify-content: center;
}

.bbb-slider-nav-position-center .bbb-slider-nav-container,
.bbb-slider-nav-position-center-center .bbb-slider-nav-container {
transform: translateY(-50%);
width: 100% !important;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) !important;
justify-content: space-between;
margin-left: 0 !important;
margin-right: 0 !important;
@ -58,11 +68,20 @@
.bbb-slider-nav-position-center .bbb-slider-nav-container .swiper-button-prev,
.bbb-slider-nav-position-center-center .bbb-slider-nav-container .swiper-button-prev {
margin-left: var(--navigation-offset-left) !important;
position: absolute !important;
left: 0 !important;
top: 50% !important;
transform: translateY(-50%);
}

.bbb-slider-nav-position-center .bbb-slider-nav-container .swiper-button-next,
.bbb-slider-nav-position-center-center .bbb-slider-nav-container .swiper-button-next {
margin-right: var(--navigation-offset-right) !important;
position: absolute !important;
right: 0 !important;
left: auto !important;
top: 50% !important;
transform: translateY(-50%);
}

// Pagination Position
@ -110,9 +129,7 @@
.bbb-slider-nav-container {
display: flex;
align-items: center;
width: 100%;
transform: translateX(-50%);
left: 50%;
width: max-content;
gap: var(--navigation-spacing);
position: absolute;
margin-top: var(--navigation-offset-top);

4
src/templates/about-us.js
View file

@ -7,8 +7,8 @@ const AboutUs = {
name: 'about-us',
title: __('About Us', 'blablablocks-slider-block'),
content: `
<!-- wp:group {"metadata":{"name":"About Us"},"align":"full","style":{"spacing":{"blockGap":"0px","padding":{"left":"2vw","right":"2vw","top":"8vw","bottom":"8vw"}}},"backgroundColor":"contrast","layout":{"type":"constrained","contentSize":"1000px"}} -->
<div class="wp-block-group alignfull has-contrast-background-color has-background" style="padding-top:8vw;padding-right:2vw;padding-bottom:8vw;padding-left:2vw"><!-- wp:blablablocks/slider {"pagination":{"desktop":false,"tablet":true,"mobile":false,"activeDevice":"desktop"},"loop":true,"navigationColor":{"arrowColor":{"default":"#ffffff","hover":"#ffffff"},"backgroundColor":{"default":"#000000","hover":"#000000"}},"navigationPadding":{"top":"8px","right":"12px","bottom":"8px","left":"12px"},"navigationSize":"20px","navigationSpacing":{"right":"24px","left":"24px"},"navigationOffset":{"left":"-30px","bottom":"30px"},"navigationPosition":"bottom right","navigationBorderRadius":"50%","style":{"spacing":{"padding":{"top":"40px","bottom":"80px","right":"5vw","left":"5vw"}}},"backgroundColor":"base"} -->
<!-- wp:group {"metadata":{"name":"About Us"},"align":"full","style":{"spacing":{"blockGap":"0px","padding":{"left":"2vw","right":"2vw","top":"8vw","bottom":"8vw"}}},"backgroundColor":"contrast","layout":{"type":"constrained","contentSize":"1000px"}} -->
<div class="wp-block-group alignfull has-contrast-background-color has-background" style="padding-top:8vw;padding-right:2vw;padding-bottom:8vw;padding-left:2vw"><!-- wp:blablablocks/slider {"pagination":{"desktop":false,"tablet":true,"mobile":false,"activeDevice":"desktop"},"loop":true,"navigationColor":{"arrowColor":{"default":"#ffffff","hover":"#ffffff"},"backgroundColor":{"default":"#000000","hover":"#000000"}},"navigationPadding":{"top":"8px","right":"12px","bottom":"8px","left":"12px"},"navigationSize":"20px","navigationSpacing":{"right":"24px","left":"24px"},"navigationOffset":{"left":"-30px","bottom":"30px","right":"30px"},"navigationPosition":"bottom right","navigationBorderRadius":"50%","style":{"spacing":{"padding":{"top":"40px","bottom":"80px","right":"5vw","left":"5vw"}}},"backgroundColor":"base"} -->
<!-- wp:blablablocks/slide {"className":"wp-block-lubus-slide"} -->
<div class="wp-block-blablablocks-slide swiper-slide wp-block-lubus-slide"><!-- wp:media-text {"mediaPosition":"right","mediaId":29,"mediaLink":"https://slidertemplates.instawp.xyz/templates/wordpress-log/","mediaType":"image","mediaWidth":30,"style":{"spacing":{"blockGap":"15px"}}} -->
<div class="wp-block-media-text has-media-on-the-right is-stacked-on-mobile" style="grid-template-columns:auto 30%"><div class="wp-block-media-text__content"><!-- wp:paragraph -->