malhuda/fictioneer
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 112 Wiki Activity

Fix Splide CSS and account for arrow placeholders

Browse Source
This commit is contained in:
Tetrakern 2024-10-07 15:23:10 +02:00
parent 0cbecd5e71
commit 527b2bf7dc
3 changed files with 22 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/splide.css
View File

File diff suppressed because one or more lines are too long

17
includes/functions/_helpers-templates.php
View File

@ -2512,6 +2512,11 @@ function fictioneer_get_splide_breakpoint_style( $json_string, $uid ) {
$style .= ".{$uid}._splide-placeholder {--this-arrow-horizontal-padding: var(--this-arrow-size); overflow: hidden;}";
}
if ( ! ( $base['arrows'] ?? 0 ) ) {
$style .= ".{$uid}._splide-placeholder {--this-arrow-padding-multiplier: 0;}";
$style .= ".{$uid}._splide-placeholder .splide__arrows {display: none;}";
}
if ( $base['pagination'] ?? 1 ) {
if ( $ttb ) {
$style .= ".{$uid}._splide-placeholder {--this-pagination-side-padding: 24px;}";
@ -2546,6 +2551,18 @@ function fictioneer_get_splide_breakpoint_style( $json_string, $uid ) {
.{$uid}._splide-placeholder {--this-arrow-horizontal-padding: 0px;}
}";
}
if ( $settings['arrows'] ) {
$style .= "@media only screen and (max-width: {$break}px) {
.{$uid}._splide-placeholder {--this-arrow-padding-multiplier: 1;}
.{$uid}._splide-placeholder .splide__arrows {display: block;}
}";
} else {
$style .= "@media only screen and (max-width: {$break}px) {
.{$uid}._splide-placeholder {--this-arrow-padding-multiplier: 0;}
.{$uid}._splide-placeholder .splide__arrows {display: none;}
}";
}
}
// Pagination...

19
src/scss/splide.scss
View File

@ -7,6 +7,7 @@
.splide {
--this-arrow-size: #{get_clamp(20, 40, 320, 640)};
--this-arrow-padding-multiplier: 1;
--this-outset: 6px;
width: calc(100% + 2 * var(--this-outset));
max-width: 100vw;
@ -23,18 +24,6 @@
&:not(.showcase) .splide__slide:first-child {
width: 100%;
}
// Emergency fallback
&.showcase {
.splide__list {
gap: 1.5rem;
}
.splide__slide {
flex: 1 1 auto;
min-width: 22%;
}
}
}
&.splide--ttb {
@ -53,14 +42,14 @@
--this-arrow-offset: 9px; // Offset bottom pagination
}
&:has(.splide__arrows) {
--this-arrow-horizontal-padding: var(--this-arrow-size);
&:has(.splide__arrows:where(:not([style*="display: none"], [style*="display:none"]))) {
--this-arrow-horizontal-padding: calc(var(--this-arrow-size) * var(--this-arrow-padding-multiplier, 1));
}
&:has(.splide__arrows--ttb) {
--this-arrow-offset: 0px; // No bottom pagination
--this-arrow-horizontal-padding: 0px;
--this-arrow-vertical-padding: var(--this-arrow-size);
--this-arrow-vertical-padding: calc(var(--this-arrow-size) * var(--this-arrow-padding-multiplier, 1));
}
&:has(.splide__pagination--ttb) {