Discussion name always visible

Wlork

I really like the suggestion 🙂

In PC, I think we could simply replace/hide the site name and links with the discussion title when we go to a discussion.
And the tags, put them just below the title. Also, we could put the logo to the left of the title. Our favicon, more precisely.

I hope I've made myself clear.

For mobile, I don't see any solution other than adding a little line that just puts the title. Without the tags, otherwise it would be too big.

huseyinfiliz

Wlork We can find a place for it on the web side as you mentioned, but I think we need to find a good solution for the mobile side.

I think we need to move the button in the mobile header that allows you to jump to a specific comment to another location. This will provide a good space for placing the title.

The idea I have in mind is to create an area that hides when moving to the next post and appears when returning to the previous post.

luceos

huseyinfiliz i've seen a famour dutch website do something similar; show the top bar when scrolling up and hide it when scrolling down.

huseyinfiliz

luceos Yes, I've quickly prepared a demo. Of course, this is not a final result, just a simple demo I put together in a few minutes. I thought this would allow us to have a better discussion about it.

Wlork

huseyinfiliz Yes, I've quickly prepared a demo. Of course, this is not a final result, just a simple demo I put together in a few minutes. I thought this would allow us to have a better discussion about it.

I quote myself :

Wlork For mobile, I don't see any solution other than adding a little line that just puts the title. Without the tags, otherwise it would be too big.

We need to know if the tags are important ? I ask because the author @Silvestrus doesn't mention it ?

If not, we can remove them and reduce the height considerably.... And put the title in full (size 12 px or 14px is sufficient)

huseyinfiliz

Wlork This was actually a demo I needed to prepare in just a few minutes. Yes, for this, I even set the discussion title to be a single line and reduced its width. I think we should add the icons of the tags or the primary tag next to it.

Fork this demo on CodePen and make adjustments to it. We can continue this way until we find the best version.

Silvestrus

Wlork I think that for my members, only the title is important. Tags are not priority in this case.

Subarist

huseyinfiliz
I think this demo is really cool.
Perhaps we could use an extension to decide which elements to display，title, tags, votes ex..

Wlork

huseyinfiliz This was actually a demo I needed to prepare in just a few minutes.

Yes, I understood 🙂

What I meant was that your demo with tags confirmed my first impressions. @Subarist 's suggestion of being able to choose whether or not to display tags in mobile format is a good idea.

I've made a few drawings to help explain my suggestions above.

In PC :

Barre Nav :

Barre Nav in discussion :

Hopefully it will be feasible, of course.

In Mobile :

Without tags :

(Sorry for title but I wanted more character 😃) I made it display in full, centred with a size of 12px. The text and background colour is the default tag colour

huseyinfiliz

Wlork How about fully mimicking Discourse? Because I can see that you're already doing it on the web. We can do the same on mobile as well.

What if the "1 of 7 posts" in the mobile navbar was moved entirely to the bottom right, and the discussion title was added there?

Or, as the opposite of what we're currently doing, the title could be in the top navbar, and the post count could be displayed in a bottom navbar that hides while scrolling down?

Wlork

huseyinfiliz How about fully mimicking Discourse? Because I can see that you're already doing it on the web.

I know it's a forum but I don't know Discourse. I didn't know they had chosen this solution. Well, I think it's a great solution! At least on the PC.

huseyinfiliz We can do the same on mobile as well.

What if the "1 of 7 posts" in the mobile navbar was moved entirely to the bottom right, and the discussion title was added there?

For mobile if it's possible to change the location of the menus then I like your idea ! Especially :

huseyinfiliz Or, as the opposite of what we're currently doing, the title could be in the top navbar, and the post count could be displayed in a bottom navbar that hides while scrolling down?

🙂

Silvestrus

For desktop, something like this perhaps....

I just inspected it with dev tools and added new <li> tag without any CSS. It would be nice to add some CSS to look a little bit better, but position is good for something like this on desktop, I think.

huseyinfiliz

Silvestrus I liked this idea more

Wlork

huseyinfiliz Silvestrus I liked this idea more

Yes, I think it's the best solution too, because there's plenty of room....

There's almost no limit for number of characters and you can put tags below the title, easily.

Silvestrus

I tried to play with JavaScript in HTML footer, but it seems that it doesn't find DiscussionHero class since the portion of custom JavaScript executes before rendering of content (JSON payload), I guess. So, there is no quick hack to do this but it has to be extension, I'm afraid.

Edit: actually, I found a way how to delay execution and I might come up with somehing.... To be continued.

huseyinfiliz

Silvestrus Are you working on mobile or web? If it's for mobile, I believe even CSS alone would be sufficient. On the web side, however, instead of moving the heading with JavaScript, it would be better to add it again.

Silvestrus

huseyinfiliz mobile has priority, but if I manage to do mobile section, it would be easy to apply to desktop as well. Currently, stuck since I managed to use delay "on DOM load", but it works only on first refresh as intended. I don't know how to catch event "route change", unfortunately...

huseyinfiliz

Silvestrus On mobile, there's no need to generate a new heading block — it's enough to make the existing block with the discussion title fixed via CSS when the page is scrolled down. This way, you won't need to deal with route changes. Check out the CSS code in my CodePen demo.

To detect route changes, I had written a simple piece of code: https://discuss.flarum.org/d/37386-route-name-to-console-for-debugging

Silvestrus

Custom CSS

@media screen and (max-width: 767px) {
  .DiscussionHero {
    position: fixed;
    top: 40px; /* Stays below the header */
    width: 100%;
    max-width: 100%;
    z-index: 99;
    margin: 0 auto;
    transition: transform 0.3s ease-in-out;
    transform: translateY(0);
  }

  .DiscussionHero.hidden {
    transform: translateY(-100%);
  }

  /* Add padding to the next element so content is not hidden under the fixed .DiscussionHero */
  .DiscussionHero + * {
    padding-top: 90px; /* Adjust this value to match the height of .DiscussionHero */
  }
}

JavaScript that goes into custom footer:

<script>
document.addEventListener("DOMContentLoaded", function () {
  // Wait for Mithril to finish rendering
  setTimeout(function () {
    let lastScrollTop = window.pageYOffset || document.documentElement.scrollTop;
    let scrollHandlerAttached = false;
    let discussionHeader = null;

    function onScroll() {
      discussionHeader = document.querySelector(".DiscussionHero");
      if (!discussionHeader) return;
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      if (scrollTop > lastScrollTop && scrollTop > 0) {
        discussionHeader.classList.add("hidden");
      } else if (scrollTop < lastScrollTop) {
        discussionHeader.classList.remove("hidden");
      }
      lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
    }

    // Observe DOM changes for .DiscussionHero appearance/disappearance
    const observer = new MutationObserver(() => {
      const found = document.querySelector(".DiscussionHero");
      if (found && !scrollHandlerAttached) {
        discussionHeader = found;
        // Always show when (re)appearing
        discussionHeader.classList.remove("hidden");
        lastScrollTop = window.pageYOffset || document.documentElement.scrollTop;
        window.addEventListener("scroll", onScroll);
        scrollHandlerAttached = true;
      } else if (!found && scrollHandlerAttached) {
        window.removeEventListener("scroll", onScroll);
        scrollHandlerAttached = false;
      }
    });

    observer.observe(document.body, { childList: true, subtree: true });

    // Initial check in case .DiscussionHero is already present
    discussionHeader = document.querySelector(".DiscussionHero");
    if (discussionHeader) {
      discussionHeader.classList.remove("hidden"); // Ensure visible on first load
      lastScrollTop = window.pageYOffset || document.documentElement.scrollTop;
      window.addEventListener("scroll", onScroll);
      scrollHandlerAttached = true;
    }
  }, 100);
});
</script>

It works for mobile version only. The logic is to show .DiscussionHero on first load every time. It gets hidden on scroll down, and it becomes visible on scroll up.

In production already: https://audiofil.org/

Edit: Not good. Requires more work... Removing it from LIVE forum until I find proper solution for this. Or somebody else...

m4v3rick

Silvestrus

Please let me know, if you find a solution. 🙂