feat: pagination shared between facetwp and elasticsearch#119
Conversation
WybeBosch
requested review from
Rovasch,
ShunLuk,
SimonvanWijhe,
dtakken,
ictbeheer,
mvdhoek1 and
rivanuff
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code review is billed via overage credits. To resume reviews, an organization admin can raise the monthly limit at claude.ai/admin-settings/claude-code.
Once credits are available, reopen this pull request to trigger a review.
WybeBosch
requested review from
FreakyWizard,
JasperS20,
Yannicvanveen,
YvetteNikolov and
laravdiemen
There was a problem hiding this comment.
Pull request overview
Introduces a shared set of CSS custom properties for pagination styling and updates FacetWP pagination styles to consume those variables, aiming to align pagination visuals across different pagination implementations (FacetWP and Elasticsearch).
Changes:
- Added global
--pagination-*CSS custom properties in base variables. - Updated FacetWP pagination layout and item styles to use the shared custom properties.
- Added distinct styling for current/prev/next states (including an underline indicator for the current page).
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| web/app/themes/sage/resources/styles/components/facetwp.css | Refactors FacetWP pagination to use shared --pagination-* variables and adds state-specific styling. |
| web/app/themes/sage/resources/styles/base/variables.css | Defines global shared pagination CSS custom properties used by pagination components. |
| --pagination-item-color-hover: var( --color-white ); | ||
| --pagination-item-gap-x: 0.5rem; | ||
| --pagination-item-gap-y: 1rem; | ||
| --pagination-item-margin: 2rem 0 0 0; |
WybeBosch
force-pushed
the
feat/improve-pagination-styling
branch
from
5ccc7c2 to
ab6fc73
Compare
| --pagination-next-border-color: var( --color-primary ); | ||
| --pagination-next-border-color-hocus: var( --color-primary ); | ||
| --pagination-next-color: var( --color-white ); | ||
| --pagination-next-color-hocus: var( --color-primary ); |
There was a problem hiding this comment.
Lekker bezig! Enige waar ik nog over twijfel, is moet hier niet -item- tussen?
--pagination-item-next-color-hocus
There was a problem hiding this comment.
Hmm ik vond de css selectors nogal lang worden.. en pagination next is al duidelijk genoeg dacht ik.. wat is uw opinie?
| --spacing-size-6: calc( var( --spacing-size-5 ) * var( --spacing-ratio ) ); | ||
| --spacing-size-7: calc( var( --spacing-size-6 ) * var( --spacing-ratio ) ); | ||
|
|
||
| /* Pagination */ |
There was a problem hiding this comment.
Ik zou eigenlijk al deze variables in het facetwp bestand verwachten, daar staan ook de andere variables die gedeeld zijn met reactive-search
Paginatie-stijlen maken nu gebruik van gedeelde CSS custom properties, zodat FacetWP en Elasticsearch paginatie visueel op elkaar aansluiten.
Zie ook: yardinternet/brave-scaffold#30
before:
After:
Dingen zijn nu css vars, maar ook komt de styling meer overeen met wat ik vaak zie. (Met name de prev en next knop, dat vaak eentje een "outline" button is, en de ander een gevulde button.