Please share your CSS! It would make a fix to the TC easier.
here is a rather hacky way to do it (in common/css, NOT /mobile/css)
@use "lib/viewport";
@include viewport.until(md) {
.d-header:not(:has(.extra-info-wrapper.topic-info-visible)):not(:has(.extra-info-wrapper .topic-link)):not(.header-topic-info-visible) .title {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: 0;
}
}
there is probably a more elegant way but the header bar is challenging to change things like placement and order of items, (thus i won’t do a PR). Also this component is still using the deprecated /mobile folder path and needs to be updated to viewport adjusted code.
2 Likes
apologies, I haven’t gotten around to keeping this component exactly up to date, but yes, the move away from mobile/desktop views definitely broke some of the assumptions the original theme component made.
@Lilly thanks for the nudge forward on this, position absolute would do the trick in the time being… the reordering of items on the component here is just doing a simple CSS grid solution instead
2 Likes
Hey everyone just following up, Lilly did a bunch of work in cleaning this up and getting this up to date - I just merged her changes so this should be good to go now
https://github.com/featheredtoast/discourse-left-menu-theme-component/pull/7
4 Likes
Hey @featheredtoast i have a PR here to fix the header issue with Horizon theme in viewport sizes for folding phones and some tablets.
will let you have a look and merge it:
4 Likes
looks good - lets try it out, thanks @Lilly !
2 Likes
When I scroll up within a topic, so that the header changes (to show the topic name and categories) that new header has no hamburger icon. With the hamburger icon on the left when present, it means that the forum icon changes position. I wonder whether it would be possible to have an option to have the hamburger icon to the right of the forum icon. This would meant the forum icon stays in the same place for both types of header. Thanks.
P.S. I’ve just noticed that on desktop without the theme component the hamburger icon stays there the whole time. Maybe that could be an option for mobile too.
personally, i am not in favor of this change (perhaps @featheredtoast might feel differently) because the whole idea is to be consistent with desktop view and have it before the logo. however, if you need it, then you can just add this css in another theme component on your forum to override the order of items.
.d-header {
display: grid;
grid-template-areas: 'logo left-menu custom-header-icon-link-1 custom-header-icon-link-2 custom-header-icon-link-3 custom-header-icon-link-4 custom-header-icon-link-5 extra-info chat header-buttons search right-menu'!important;
}
result:
the burger icon should not show in the scrolled header on mobile in order to maximize the header space for longer topic titles
3 Likes
I share the same opinion as @Lilly here, the aim was to get the hamburger on the left to feel like other apps… The jump isn’t something I optimized for, since the default experience did that already.
Once it is in grid like she showcased, it’s easy to update positions of all elements with minimal input from the base theme component here.
Open to prs if there’s enough demand but this is the first I’m hearing of a request like this currently.
3 Likes
Does it?
On desktop there’s no “jump” as (from memory now) the hamburger always remains to the left of the forum icon.
On mobile there’s no jump either, as everything but the forum icon gets replaced.