Problem/Motivation

While going through the theme for issues I found out that the mini pager is not styled. Attaching the screenshot for a better understanding and making the issue clearer.

Steps to reproduce

Install the theme
Add 10-20 articles and check for the pagination.
Go to the page view setting and change the pager to mini.

Proposed resolution

Mini pager should be styled

Remaining tasks

none

User interface changes

Yes

API changes

none

Data model changes

none

CommentFileSizeAuthor
#13 3447852-full-pager-after.png4.87 KBsilvi.addweb
#13 3447852-mini-pager-after.png1.74 KBsilvi.addweb
#12 3447852-full-pager-before.png5.55 KBsilvi.addweb
#12 3447852-mini-pager-before.png1.39 KBsilvi.addweb
#5 Screenshot from 2024-05-22 10-35-04.png61.8 KBkaaarrrtik
Screenshot 2024-05-17 at 6.02.53 PM.png622.36 KBhamid.ali

Issue fork flexi_style-3447852

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

Hamid.ali created an issue. See original summary.

kaaarrrtik’s picture

kaaarrrtik commented
Assigned: Unassigned » kaaarrrtik

kaaarrrtik opened merge request !3

anoopsingh92’s picture

anoopsingh92
Location Rajasthan, India
commented
Status: Active » Needs work

You can't remove that component library from the flexi_style.libraries.yml file.
Need to create a twig for the mini-pager then it will be resolved. instead of making any changes in the CSS file.

kaaarrrtik’s picture

kaaarrrtik commented
Status: Needs work » Needs review
StatusFileSize
new Screenshot from 2024-05-22 10-35-04.png61.8 KB

Mini Pager styled
Before
Before
After
After

hamid.ali’s picture

hamid.ali commented
Status: Needs review » Needs work

@anoopsingh92 add font weight 700. for the active pager item.

kaaarrrtik’s picture

kaaarrrtik commented

@anoopsingh92 got your point working the same by creating a seprate twig file

kaaarrrtik changed the visibility of the branch 3447852-mini-pager-need to hidden.

kaaarrrtik changed the visibility of the branch 3447852-mini-pager-need to active.

kaaarrrtik’s picture

kaaarrrtik commented

Mini pager designed by using twig and working as expected.

kaaarrrtik’s picture

kaaarrrtik commented
Status: Needs work » Needs review
silvi.addweb’s picture

silvi.addweb commented
Status: Needs review » Needs work
StatusFileSize
new 3447852-mini-pager-before.png1.39 KB
new 3447852-full-pager-before.png5.55 KB

Thanks @kaaarrrtik, We have to work on mini and full pager style.
Mini pager -->
mini-pager
Full pager -->
Full pager

silvi.addweb’s picture

silvi.addweb commented
Status: Needs work » Needs review
StatusFileSize
new 3447852-mini-pager-after.png1.74 KB
new 3447852-full-pager-after.png4.87 KB

Mini pager after -->
mini-pager

Full pager after -->
Full-pager after

anoopsingh92’s picture

anoopsingh92
Location Rajasthan, India
commented
Assigned: kaaarrrtik » Unassigned
Status: Needs review » Fixed

Thank you so much @all for the contribution.
Merged, Now pager and mini pager both are looking good.

Thank you

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.