File view (desktop/mobile)

[kurim]

Move design discussion from https://github.com/pierobot/mangapie/issues/177 to this issue.

How it is:

How it could be:

Desktop, FHD, Chromium

Mobile: How it is:

How it could be:

[donotos]

i believe that the preview link should not be just bellow the chapter link, after all we are on mobile view and the precision of the click with our finger is at best approximative.

[kurim]

I see your point. how about this: (icon is a example not sure what to use for preview)

[donotos]

i think the icon is a good idea. it doesn't take much more space and do the work.

[kurim]

In this case we need some CSS tweaking... "width:100%" > need to removed for mobile

like this:

@media (max-width:576px){.col,.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-auto,.col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-auto,.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-auto,.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-auto,.col-xl,.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-auto{position:relative;padding-right:15px;padding-left:15px}}
@media (min-width:577px){.col,.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-auto,.col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-auto,.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-auto,.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-auto,.col-xl,.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-auto{position:relative;width:100%;padding-right:15px;padding-left:15px}}

Also we need modify the col-3 like this:

@media (max-width:576px) {
    .col-3 {
        flex: 0 0 25%;
        max-width: 25%;
        width: 25%
    }
}

To force with of last read & add time

Result will be:

[pierobot]

I'm not too keen on overriding the css rules for just this.

What about just reducing some padding on the last read and added columns and shortening the text?

[kurim]

This looks fine to me

[pierobot]

https://github.com/pierobot/mangapie/commit/2a6a6dfb0936721bf06bdc5f3ff3609041142dc6

[kurim]

it is not working

Also desktop view looks pretty broken.

The .col- width: 100%; break it there is to many unused space on wider screen than mobil if i disable it in browser preview it looks fine, that's why I thought abount the css way.

[pierobot]

Yea it's borked on Chromium. >_> Guess I should have checked.

[kurim]

It’s also broken on iOS

What did you use for testing?

[pierobot]

Firefox ESR. Managed to find a solution. https://github.com/pierobot/mangapie/commit/6e03f6bba658e647f6c4fb1354fe90dd59f3ea4b

[kurim]

Way better now,

One thing is it intended that chapter name is centered?

[donotos]

seems to be a browser problem. it is not centered in vivaldi, brave and firefox, but it is on safari.

[kurim]

Since iOS restrictions every browser used the WebKit engine so for my mobile devices it’s like this

[pierobot]

https://github.com/pierobot/mangapie/commit/092aa73c251cb35a461f5d5783f05349f45fbf1b should fix it.

[donotos]

there is no issue anymore on my side with safari.

[kurim]

Yeah look good