Mini pager need to be styled

Created on 13 June 2024, 5 months ago
Updated 27 August 2024, 3 months ago

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

The mini pager should be styled in the same style as the full pager.

Remaining tasks

none

User interface changes

Yes

API changes

none

Data model changes

none

🐛 Bug report
Status

Needs work

Version

3.0

Component

Code

Created by

🇮🇳India hamid.ali

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @hamid.ali
  • Assigned to hamid.ali
  • 🇮🇳India hamid.ali

    Working on the issue

  • Merge request !17Resolve #3454438 "Mini pager styling" → (Open) created by hamid.ali
  • Issue was unassigned.
  • Status changed to Needs review 3 months ago
  • 🇮🇳India hamid.ali

    Created the MR for the same. Attaching the post-fix screenshot below.

  • Assigned to cleavinjosh
  • 🇵🇭Philippines cleavinjosh

    I'll review this.

  • Issue was unassigned.
  • Status changed to Needs work 3 months ago
  • 🇵🇭Philippines cleavinjosh

    Hi @hamid.ali,

    Thank you for providing an MR. I applied MR!17, and it styled the pagination.

    I'll be attaching some screenshots before and after applying the MR for reference.

    Before:

    After:

    I then changed the pager to mini and I'll attach the screenshots of the changes for the first page, middle page, and last page.

    First page:

    Middle page(s):

    Last page:

    I think the mini pager can still be improved by:

    1. Making the "Current page" more visible than the "previous" or "next" buttons.

      In the current style, the buttons will tend to get more attention than the current page. If possible can you change that?

      Make the "current page" style stand out more than the "buttons".

    2. Making the color of the hover state effect of the buttons darker.
    3. Including the button's border in the hover state effect.
    4. Keeping the left and right space balanced. In mobile view, the space on the left is larger than the right

    Please check and advise.
    Thank you.

Production build 0.71.5 2024