Discourse Tab Bar for Mobile

I think I found a bug, and I can only produce it on the PWA version of my site on iOS (seems fine on Android and on iOS safari).

The tab bar is supposed to always be locked, right? This is what it looks like when correct:

And then I unlock my screen, go into landscape mode, and then go back to portrait mode, and then I scroll up a little, and then this happens:

1 Like

I had the same problem @haroldfy @littleviolette . You can fix it with :

html:not(.anon) #topic-progress-wrapper.docked{
margin-bottom:0!important;
}
6 Likes

The tab bar also conflicts with the posts filter core feature which puts a sticky footer (posts-filtered-notice) when filtering.

Anyway, thanks for this great TC :slight_smile:

4 Likes

Awesome theme component, thank you

I have an ask and would like to check if there is interest in a ‘scroll to hide’ feature?

Essentially, the bottom bar auto-hides when user scrolls down, the re-appears as user scrolls up

Example I found is here

This will thoughtfully free up precious screen estate in mobile, and make the consuming of content a better experience with more space

8 Likes

I love this idea! I’d be more than happy to review and merge a PR that implements this feature :smiley:

10 Likes

I really like this idea :heart_eyes: So just played with this a little bit. I believe there is a much better way to make it but for now it works on my site pretty good. :slight_smile:

I use the Big Header - Little Header component </head> code for template to do this.


Unfortunately on iPhone there is limitation because the footer-nav is completely hide the Discourse Tab Bar. So i hide that.

I updated this code!
Now i just share the code here (not sure this is merge able):

Place this on mobile </head> section

<script type="text/discourse-plugin" version="0.8.18">
   $(document).ready(function() {
        var lastScrollTop = 0;
        var body = $("body");
        var scrollMax = 30;
        $(window).scroll(function() {
            var scroll = $(this).scrollTop();
            if (lastScrollTop < scroll && scroll > scrollMax && !body.hasClass("tab-bar-hidden")) {
                body.addClass("tab-bar-hidden");
            } else if (lastScrollTop > scroll && body.hasClass("tab-bar-hidden")) {
                body.removeClass("tab-bar-hidden");
            }
            lastScrollTop = scroll;
        });
    });
</script>

Place this on mobile css section:

html:not(.anon) {
  #topic-progress-wrapper,
  #reply-control.draft {
	bottom: 49px;
  }
  #reply-control.draft {
	margin-bottom: env(safe-area-inset-bottom);
	padding-bottom: 0px;
	transition: all .1s ease-out;
  }
  .posts-filtered-notice {
	transition: all .1s ease-out;
	bottom: 49px;
  } 
}

body.tab-bar-hidden {
  .d-tab-bar {
	bottom: -49px;
	transition: all .2s ease-in;
  }
  #topic-progress-wrapper:not(.docked),
  #reply-control.draft {
	bottom: 0;
	transition: all .2s ease-in;
  }
  #reply-control.draft {
	margin-bottom: env(safe-area-inset-bottom);
	padding-bottom: 0px;
	transition: all .2s ease-in;
  }
  .posts-filtered-notice {
	transition: all .2s ease-in;
	bottom: 0;
  }
}

.d-tab-bar {
  transition: all .1s ease-out;
}

body:not(.footer-nav-ipad) .footer-nav {
  display: none;
}

Demo

14 Likes

:smiley: Pretty cool thing you made!

5 Likes

Handy little component - thanks!

Is there a way for individual users to either customise it, or hide it completely?

5 Likes

This is great @dodesz, thank you! I’ve just pushed your code (with minor modifications) to the component.

There isn’t a built-in option for individual users to customize or hide the component, but there is workaround in Discourse core that you could use to allow individual users to hide the component: you can create a variation of your main theme that doesn’t include this component, and then make that variation available to your users to select in Preferences → Interface.

This is how it would look like:

Users who don’t want this component can choose the Grey Amber (w/o Tab Bar) which is configured exactly like Grey Amber but the tab bar component is not included.

6 Likes

Great idea! Thanks for that!

4 Likes

Thank you @Osama this is awesome! :heart_eyes:

I notice one issue in css. Discourse Tab Bar can activate and push up the composer.
I believe it only should activate on #reply-control.draft instead of the whole #reply-control.

4 Likes

Ok, should be fixed now. Thanks for letting me know! :grinning_face_with_smiling_eyes:

6 Likes

Just wanted to say thanks so much for this, awesome addition to any Discourse site. @discoverearth did you manage to make this permanently show to all users ?

5 Likes

I’m trying to configure this to click tabs while the user is navigating the platform. In this usecase i’m trying to set up buttons which open the tabs for the Kanban, Calendar and Voting plugins.

Kanban:
If i’m in a category or subcategory and i add ‘?board=default’ to the url it navigates to the Kanban’s tab (Board), so it should be possible. The issue is that this plugin uses the relative path from root, rather than from the path users are currently on.
(i’ll also have to figure out a workaround for the homepage as the url logic there is different).

Calendar:
The Calendar tab needs ‘/l/calendar’ added to the end of the url

That looks possible, but it also needs to delete any text in the url which is above the category/subcategory the user is on. for example, if a user has navigated to ‘latest’ or ‘kanban’ that part of the url needs to be removed before adding /l/calendar’ to the end of it.

Does anyone have any ideas how to go about that, as it would be incredible to be able to use this with those plugins. The tabs selector is basically hidden on mobile now, which isn’t good for sites that use components like kanban or calendar heavily.

1 Like

This plugin is nice piece of work but can’t be used with DiscourseHub (with iPhone anyway) because it hides nav-tab at same position. And then one can’t change a forum.

So, this is useful only for forums, that doesn’t allow somehow DiscourseHub or breaks UX big time teaching to shut down app totally after a forum visit :wink:

Sure, someone who can coding can show this tab bar only when using a browser… but teaching a user to different UI in same device is really bad idea.

With this component:

And when pure DiscourseHub

3 Likes

Do you know which forum that is? I absolutely adore the user interface! :heart_eyes:

3 Likes

I’d love to be able to have the notifications button have the red notifications mentioned like in the top menu button in the default version, could you give me a hint on how to do it? I’m not really good at coding.

@nildarar, did you manage to have the notifications count appear on the button? Thanks.

1 Like

Hi! Loving this concept. Thanks.

One question: I’d prefer to use the outlined version of FontAwesome icons as opposed to the filled-in versions, in order to be more consistent with other areas of my website.

Is there any way to specify that? Typically, using an icon’s the full name — e.g. far fa-star (instead of just star) — would make that distinction. But whenever I try to put in the full name of an icon like that, the component doesn’t display anything at all in its place.

Is there any way to make that happen?

1 Like

This looks really cool. Is there way to make a tab to show the follow feed? This way a user can easily see a feed of all the people they follow.

Also is it possible for page specific

.user-main .about {
    margin-bottom: 0;
    color: var(--secondary);
    display: none;
}

Just for the feed page?

1 Like

Just to confirm, you’re referring to the follow feed of Follow Plugin 👨? If so, then set feed as the route (the third segment) in the setting of the tab that you want to redirect to the follow feed.

4 Likes