Paginations
Table of contents
@roginaldosemog and @lucasqmc)
Evaluation (authored byMain Website
Pagination
- Text Color:
#555
- Background Color:
transparent
- Border:
border: 1px solid #e9e9e9
- Border Width:
border-width: 2px
- Border Radius:
border-radius: 2px
- Element Margin:
margin: 0 8px 0 0
Hover
- Text Color:
#333
- Background Color:
#f8f8f8
Selected (Current class)
- Text Color:
#333
- Background Color:
#f8f8f8
Extensions
Pagination
- Div Background Color:
#555
- Font Family:
Cantarell, 'Droid Sans', Ubuntu, 'DejaVu Sans', Arial
- Text Color:
#204a87
- Padding:
padding: 3px
Selected (Current class)
- Text Color:
#222
- Background Color:
#fff
- Border:
border: 1px solid rgb(200, 200, 200)
- Border Radius:
border-radius: 4px
Events Portal
No pagination component found
Planet
No pagination component found
Discourse
No pagination component found
Developer Center
The pagination printed below can be found in a google enhanced search inside the website.
Pagination
- Font Family:
Arial
- Text Color:
#222
Selected
- Font Weight: bold
Surveys
No pagination component found
Wiki
Pagination
- Text Color:
#3465a4
- Border:
border-bottom: 1px dotted #888
Selected
- Text Color:
black
- Border: none
@pooja724patel)
Mockups (authored byAn updated design for the Paginations has been created keeping in mind the existing design language as seen in the Evaluation above. Care has been taken to ensure consistency and harmony between all GNOME elements designed until now, for enhancing usability and aesthetic appeal.
Pagination
The Pagination incorporates arrows and displays the first and last page.
This is done to ensure that the user has an idea of the total number of pages and can navigate them using both arrows and clicking on their desired page number.
Global Specifics
- Dimensions:
- Box:
- height: 42px
- width: 42px
- border-radius: 0.25
- Typography:
- height: 22px
- width: 11px
- left: 15px
- top: 11px
- Arrow:
- height: 14px
- width: 25px
- left: 13px
- top: 11px
- Dotted element:
- height: 26px
- width: 63px
- top: 15px
- Box:
- Typography:
- font-family: Source Sans Pro;
- font-size: 19px;
- font-style: normal;
- font-weight: 400;
- line-height: 28px;
- letter-spacing: 0.015em;
- text-align: left;
States
Base
- Colors:
- Box:
- Fill Type: Solid
- Background Color:
#d9d9d9
gray-200
- Typography Color:
#262626
gray-900
- Box [selected]:
- Fill Type: Solid
- Background Color:
#4295db
gnome-blue-500
- Typography Color:
#f2f2f2
gray-100
- Arrows:
- Fill Type: Solid
- Background Color:
#d9d9d9
gray-200
- Vector Color:
#4295db
gnome-blue-500
- Dotted Element:
- Fill Type: Solid
- Element Color:
#d9d9d9
gray-200
- Box:
On Hover: Page Number
- Dimensions:
- Box:
- height: 42px
- width: 42px
- border-radius: 0.25
- border-width: 3px
- Box:
- Colors:
- Box [hover]:
- Fill Type: Solid
- Background Color:
#d9d9d9
gray-200
- Typography Color:
#262626
gray-900
- Border:
#4295db
gnome-blue-500
- Opacity: 50%
- Box [hover]:
On Hover: Arrow
- Colors:
- Box [hover]:
- Fill Type: Solid
- Background Color:
#4295db
gnome-blue-500
- Vector Color:
#f2f2f2
gray-100
- Box [hover]:
Prototypes
Based on the above Pagination mockup I have created prototypes of:
- Pagination + Go-to-Page selector
- Navigation Bar
These will enable a complete view of how paginations can be displayed on a webpage. The added elements incorporate existing changes (if made) in other issues.
1. Pagination + Go-to-Page selector
Websites such as GNOME Extensions have a huge number of pages. Adding a Go-to-Page selector will enable quick and easy navigation while keeping a clean and minimalist design.
2. Navigation Bar
In addition to a Go-to-Page selector, a search bar and sort-by dropdown can be provided to enhance convenience and flexibility. All the elements are grouped in a coherent navigation pane.