Issues with Progress Bar on v3

[cagatay]

@phenomlab said in Issues with Progress Bar on v3:

@cagatay The reason this fails for you is because you have to auto-hide the bottom bar

I’ve made this change and it’s now working for the most part - but it should also float with the bottom bar depending on it’s position. Not sure why that’s not working but looking now.

i did disable mode auto hide now working normally on phones.

[phenomlab]

@cagatay Excellent.

[DownPW]

yop Mark

I see this on progress bar :

On small screen resolutions, the space between the arrows and the background div (progress bar) is not fixed.
It wouldn’t hurt to add fixed spaces no matter the resolution

[phenomlab]

@DownPW I already have that here?

EDIT - I see what you mean here

[phenomlab]

OMG. Why on earth did I use percentages???

.pageUp {
    font-size: 1.25rem !important;
    left: 6%;
    line-height: 1.5;
    position: absolute;
    z-index: 10;
}
.pageDown {
    font-size: 1.25rem !important;
    line-height: 1.5;
    position: absolute;
    right: 6%;
    z-index: 10;
}

Change the left and right values shown above to be 1rem (or whatever value you’d prefer) and not 6%

So

.pageUp {
    font-size: 1.25rem!important;
    left: 1rem;
    line-height: 1.5;
    position: absolute;
    z-index: 10;
}

.pageDown {
    font-size: 1.25rem!important;
    line-height: 1.5;
    position: absolute;
    right: 1rem;
    z-index: 10;
}

[DownPW]

@phenomlab said in Issues with Progress Bar on v3:

OMG. Why on earth did I use percentages???

[Panda]

I often use my mobile landscape, and then this progress bar takes up a lot of the screen.

Id rather remove it entirely.
How can I do that, another CSS fix?

[phenomlab]

@Panda Yes, that would be the only way as this is part of the core.

[Panda]

@phenomlab ok how could I do that please?

I have an old flarum forum I had given up with, but I have to say its looking nicer than nodebb on mobile now. I prefer minimalistic and uncluttered look.

[phenomlab]

@Panda You could use the below

.page-topic .pagination-block.ready {
    display: none;
}