ux series details page mobile redesign

[MrRobotjs]

Changed

• Changed: Changed the series detail page so the poster shows on mobile now.
• Changed: Changed Read/Continue button style to have a background-color instead of being transparent

Fixed

• Fixed: Fixed the nav-offset variable to match the navbar height so content wouldn't be pushed further down than needed to.

The most common phone size from smallest to largest is 360px to 450px at the most. Based on Apple, Samsung, Google and OnePlus phones starting from 2018-2025. Those are the widths that should be paid most attention to in the video.

firefox_8hp5DfCmWp.mp4

[majora2007]

From first glance, I do like this. I think on the smallest viewpoints, it should switch to the system we have now (background).

[MrRobotjs]

From first glance, I do like this. I think on the smallest viewpoints, it should switch to the system we have now (background).

I agree. Also I forgot (because I don’t have it) that Kavita+ adds a scrobble button so the breakpoint to bring all the buttons down under the continue button should probably happen sooner actually.

[MrRobotjs]

Here's the poster changing into the background at 350px and below.

firefox_KxU1r3N4na.mp4

[MrRobotjs]

This should be 100% complete now.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[majora2007]

I took a look, at the smallest viewport, can we ensure the buttons lay out like we have it existing?

I don't like the centering you have. Otherwise, I greatly appreciate this PR as not having the cover on smaller viewpoints has been a gripe of mine with the new UX since we launched it.

[majora2007]

Actually, on second thought, I think your design is better for mobile. This will allow for easier clicking on a phone.

[majora2007]

After testing, here are some issues:

• This breaks all the derived views that use the common series detail styles. (Volume detail, chapter detail, etc)
• Please revert the read/continue button. I don't like it, nor the solution you used (a global exclude).
• Please port the border radius on the read/continue button to the other detail pages (this may be a new request, but would fit well in this PR)

[majora2007]

@MrRobotjs are you still interested in finishing this off?