Discourse Tab Bar for Mobile

mobile
theme-component

#1

Original idea here:

Screenshots


Installation

Follow the instructions in this #howto topic:

And here is the GitHub repository for the theme, and the JSON file:

discourse-tab-bar.dcstyle.json (6.1 KB)

Customization

See the readme file in the theme’s GitHub repository.

Ideas to improve this theme are very welcome :slightly_smiling_face:


(Joe) #2

:grin: Hooray!! finally someone who knows what they’re doing decided to do this!

This looks amazing and is done right! :clap::heart:

Thank you!


(Anders Thengs Kristensen) #3

Nice to see this as a proper theme (nothing bad about the original topic, but it’s nice to have things in one place).

But there are a few things. First is that regardless of how you install it, it’ll be annoying if you choose to customise it and there later are updates to it. If you just use the .json file, you’ll have to update it manually and if you pull it from GitHub, updating it will override any customisation.
I have no trouble with it myself, I am mostly just pointing it out in case someone comes across this and doesn’t think about this (though at that point, would they scroll down to read this?).

The second is that the current implementation of the home button/link doesn’t work, at least not as far as I can tell.

But still nice to see this. I am going to have some fun toying with it.


#4

You’re bringing up really good points @nawthor. I’ll be sure to add note in the installation step to make it clear that updating the theme will override customization.

Proper implementation of this should be via a plugin with settings to let admins remove and reorder tabs etc, and that’s what I’m planning to do.
This theme is just the first step, and in the future when we have a plugin for this, this theme will act as a basic/demo version of the plugin to let forums owners quickly test this on their forums and decide if it’ll work for them or not without having to go through the whole process of installing and uninstalling plugins.

Do you see any errors in your browser JS console? It’s working fine for me.


(Sam Saffron) #5

I do want to add clean support for “theme settings” that is another alternative here and themes have far better reach than plugins cause they are way easier to install and disable.

If you feel like working on something like that I would be happy to guide you.


Add support for theme settings
(Anders Thengs Kristensen) #6

This is what I get in Edge (42.17046.1000.0) when viewing the mobile version of the page:

ReferenceError: 'DiscourseURL' is not defined
at navigate (https://eve.community/?mobile_view=1:72:11)
at navigate (https://eve.community/?mobile_view=1:103:17)
at send (https://discourse-cdn-sjc1.com/business2/brotli_asset/ember_jquery-a8dcbd325e04410f036f2a791d66d8316c48c5387acdd914de99a5dd6afb3cd3.js:16:16633)
at n (https://discourse-cdn-sjc1.com/business2/brotli_asset/ember_jquery-a8dcbd325e04410f036f2a791d66d8316c48c5387acdd914de99a5dd6afb3cd3.js:16:12550)
at i.send (https://discourse-cdn-sjc1.com/business2/brotli_asset/application-ff3136d5d70e23d34f9f3814dd9e87f2cdc7e3bae8fef3fc51a35d96535fc554.js:24:27081)
at n (https://discourse-cdn-sjc1.com/business2/brotli_asset/ember_jquery-a8dcbd325e04410f036f2a791d66d8316c48c5387acdd914de99a5dd6afb3cd3.js:16:12550)
at Anonymous function (https://discourse-cdn-sjc1.com/business2/brotli_asset/ember_jquery-a8dcbd325e04410f036f2a791d66d8316c48c5387acdd914de99a5dd6afb3cd3.js:10:2773)
at d (https://discourse-cdn-sjc1.com/business2/brotli_asset/ember_jquery-a8dcbd325e04410f036f2a791d66d8316c48c5387acdd914de99a5dd6afb3cd3.js:12:6317)
at Anonymous function (https://discourse-cdn-sjc1.com/business2/brotli_asset/ember_jquery-a8dcbd325e04410f036f2a791d66d8316c48c5387acdd914de99a5dd6afb3cd3.js:10:2463)
at p.prototype.run (https://discourse-cdn-sjc1.com/business2/brotli_asset/ember_jquery-a8dcbd325e04410f036f2a791d66d8316c48c5387acdd914de99a5dd6afb3cd3.js:7:20487)

And this is what I get on Vivaldi (1.14.1036.3), still viewing the mobile page:

ember_jquery-a8dcbd325e04410f036f2a791d66d8316c48c5387acdd914de99a5dd6afb3cd3.js:11 ReferenceError: DiscourseURL is not defined
at Object.navigate (?mobile_view=1:75)
at s.navigate (?mobile_view=1:106)
at send (ember_jquery-a8dcbd325e04410f036f2a791d66d8316c48c5387acdd914de99a5dd6afb3cd3.js:16)
at s.n [as send] (ember_jquery-a8dcbd325e04410f036f2a791d66d8316c48c5387acdd914de99a5dd6afb3cd3.js:16)
at send (application-ff3136d5d70e23d34f9f3814dd9e87f2cdc7e3bae8fef3fc51a35d96535fc554.js:24)
at s.n [as send] (ember_jquery-a8dcbd325e04410f036f2a791d66d8316c48c5387acdd914de99a5dd6afb3cd3.js:16)
at ember_jquery-a8dcbd325e04410f036f2a791d66d8316c48c5387acdd914de99a5dd6afb3cd3.js:10
at Object.d [as flaggedInstrument] (ember_jquery-a8dcbd325e04410f036f2a791d66d8316c48c5387acdd914de99a5dd6afb3cd3.js:12)
at ember_jquery-a8dcbd325e04410f036f2a791d66d8316c48c5387acdd914de99a5dd6afb3cd3.js:10
at p.run (ember_jquery-a8dcbd325e04410f036f2a791d66d8316c48c5387acdd914de99a5dd6afb3cd3.js:7)

Hope it’s helpful.
(This is from two different users trying the link from bookmarks, in case that’s relevant.)


(Daniela) #7

Why?
The best (and easiest) thing is to write:
If you want to change this theme do it in a separate stylesheet, this way your changes will not be overwritten if the theme will be updated”.


#8

@nawthor I see where the problem is. Will fix asap. EDIT: Should be fixed now. Thanks for reporting and the error log :smile:

@Dax Customization isn’t limited to CSS, if someone wants to reorder the tabs or remove a tab they’ll have to change JS code which I believe can’t be changed via a separate theme?


#9

@sam I really like this and definitely wouldn’t mind working on it but it might require someone with much deeper knowledge than me so I can’t say for sure.

How do you see it working?

This really deserves its own separate topic, can we have these posts split into a new topic?


(Sam Saffron) #10

It actually can cause the js runs in a consistent order

Let’s do a topic brainstorming theme vars perhaps make the op wiki and @angus and I can help edit


(Adrianbblk) #11

I’m trying to import this theme but it doesn’t work.

Admin -> Cussom -> Import -> From Web -> paste this link: GitHub - OsamaSayegh/discourse-tab-bar-theme -> Nothing happens.

Any ideea ?


#12

There was a syntax error in the about.json file. You should be able to import the theme now. Sorry about that and thanks for reporting. :slight_smile:


(Adrianbblk) #13

Hi,

Yes, I was able to import the theme but the tabs do not appear on mobile even I set it as default theme.


#14

It’s showing up for me on mobile. Here is what I did:

  1. Imported the theme
  2. Made it a theme component of the default theme
  3. Went to my preferences > Interface and selected the default theme
  4. Reloaded the page and the tab bar showed up perfectly fine.

If you try the exact same steps does it show up for you? Remember the tab bar shows up only for logged-in users.


(Adrianbblk) #15

Yeah, it works now but just for other users not for the admin account too. It’s gine anyway. Thanks :+1:


#16

It’s certainly working for my admin account - not sure why it’s not working for yours :sweat_smile: I’m happy to help you figure out why it’s not working for your account if you can link me to your forum.

Here is a screenshot of it working for my admin account incorporated with Vincent theme:

And here is screenshot from Admin > Customize > Themes


(Adrianbblk) #17

Hi,

Finally, it works for the admin account too. I simply log out delete the browser cache and log in back.

Thank You :wink:


(Pradeep Kumar) #18

Hi, this is such a wonderful additional, I implemented it on our HBB Forum.

And I’m just curious since most of the users know what the icon stands for, maybe we can remove the text and keep the icons alone? Like, a little bit bigger than the current one? Just my thoughts, wonderful work. :slight_smile:


#19

I’m glad you liked this theme component, and thanks for the suggestion! :slightly_smiling_face: I’ll look into adding theme settings to hide text and display icons only, but for now you can achieve that with this bit of CSS, just drop the code in a new theme component and make it a child for the tab bar theme:

#discourse-tab-bar .tab {
    .title {
        display: none;
    }
    i.fa {
        font-size: 1.4em; /* bigger number here for bigger icons */
    }
}

(Pradeep Kumar) #20

Thank you so much @Osama, it looks minimal and lovely now! :smiley: