known issue Pages UI Polish

[Afrodude]

@Ehren has done a great job recently, but this is area has been missed. This is just to point at it as hopefully it gets polished in the future.

 

Edited March 12, 2023 by Afrodude

[SeNioR-]

By the way:

The "Login" button is not responsive and streams are better to put on one line with truncated text:

FIX:

.ipsDrawer_itemParent > .ipsDrawer_list > li > a:not( .ipsButton ) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

and for Button:

.ipsToolList > * {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

Pagination (larger font adds bottom scroll bar)

FIX:

@media screen and (max-width: 979px){
[dir] .ipsPagination:not(.ipsPagination_mini) > li {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
}
}

Edited March 12, 2023 by SeNioR-

[Marc Stridgen]

On 3/12/2023 at 2:52 AM, Afrodude said:

@Ehren has done a great job recently, but this is area has been missed. This is just to point at it as hopefully it gets polished in the future.

 

There are of course many things we would like to do with the main theme, so not every area will have been touched. If you have suggestions for changes, you would be better to post in the feedback area.
 

On 3/12/2023 at 9:30 AM, SeNioR- said:

By the way:

The "Login" button is not responsive and streams are better to put on one line with truncated text:

FIX:

.ipsDrawer_itemParent > .ipsDrawer_list > li > a:not( .ipsButton ) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

and for Button:

.ipsToolList > * {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

Pagination (larger font adds bottom scroll bar)

FIX:

@media screen and (max-width: 979px){
[dir] .ipsPagination:not(.ipsPagination_mini) > li {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
}
}

Thank you for bringing this issue to our attention! I can confirm this should be further reviewed and I have logged an internal bug report for our development team to investigate and address as necessary, in a future maintenance release.

 

[Ehren]

Hey @SeNioR-

Thanks for reporting those. Can I ask what device you're using? The UI is designed for all mobile devices and even works with the smallest resolution I was able to test which is an iPhone 3G (320px in width). Your screenshots seem to be of a device which is even smaller than that.

This is how they're displayed at 360px (the width of an iPhone Mini):

 

With this in mind, does the pagination also work correctly when viewed at 360px? My guess is that you're using the browser developer tools to resize your window, but the resized window is far smaller than a real life mobile device. If I'm mistaken though, please let me know so I can look into it further 🙂

[SeNioR-]

10 hours ago, Ehren said:

My guess is that you're using the browser developer tools to resize your window, but the resized window is far smaller than a real life mobile device.

That's right, but only to take a screenshot.

I'm using Nokia with Android but with forced enlarged font to 125%. When I reduce it to 100% everything fits, however I can imagine that many people can use larger text on their smartphones.

I believe that regardless of the font size, these things should fit on the screen even if I increase the font to 150%. I personally tweaked it for my theme.

Edited March 16, 2023 by SeNioR-

[SeNioR-]

They may be small things, but for a perfectionist who pays attention to detail, they are quite important 😛 

And speaking of small things, is this padding needed here (for non-logged in users)?

#elUserNav_mobile {
    padding: 15px 0;
}

https://forum.invisionize.pl/

From what I noticed the #elUserNav_mobile identifier is dynamically added if we have the Commerce module, and the padding is for the cart icon (correct me if I'm wrong), but I think you can use row-gap here and eliminate this unnecessary space.

.elMobileDrawer__user {
    row-gap: 15px;
}

Edited March 16, 2023 by SeNioR-