How difficult would it be to make the Discourse UI more like Flarum?

Yea the example you posted and the one I edited, it shows up on 2 of those locations (for category banner)

Off the top of your head is there a way to just show it on one of those pages (ie. Only on topic pages?[ The actual posts inside the category] ) vss CSS? If not do you think JavaScript could do it?

Well my edit I was gonna post is this: (For disabling the category description and logo only in the category page and nowhere else)

.category-heading {
clear: both;
display: none;
}

Then @awesomerobot comes along and totally 1ups me,lol. Yea dude that looks way better than the manual edits I was gonna do :open_mouth:

1 Like

I put together a rough theme component for this so you don’t have to create a bunch of redundant markup to show/hide… This will pull the appropriate category name, description, and background/text colors when you’re on a category list page.

My JS is hacked up from a few different posts on Meta, so definitely please improve it if you can.

Put this in common/header

<script type="text/discourse-plugin" version="0.8">
    const container = Discourse.__container__;    
    const { h } = require('virtual-dom');
   
    api.createWidget('category-header-widget', {
        tagName: 'span', 
        html(attrs, state) {
        
        const path = window.location.pathname;
        let category;
          
        const controller = container.lookup('controller:navigation/category');
        category = controller.get("category");
        
        if(/^\/c\//.test(path)) {
            $("body").addClass("category-header");            
            return h('div.category-title-header', {
                "attributes" : {
                    "style" : "background-color: #" + category.color + "; color: #" + category.text_color + ";"
                }

            }, h('div.category-title-contents', [
                    h('h1', category.name),   
                    h('p', category.description_text)          
                ])
            );
            } else {
                $("body").removeClass("category-header");
            }   
        }      
    }),

    api.decorateWidget('category-header-widget:after', helper => {
        helper.widget.appEvents.on('page:changed', () => {
            helper.widget.scheduleRerender();
        });
    });

</script> 
  
<script type='text/x-handlebars' data-template-name='/connectors/below-site-header/category-header-widget'>
    {{mount-widget widget="category-header-widget"}}
</script>

This is common/CSS

.category-title-header {
  padding-top: 60px;
  display: flex;
  text-align: center;
  width: 100%;
  justify-content: center;
  .category-title-contents {
    max-width: 500px;
    padding: 40px 0;
  }
}
.category-header {
 #main-outlet {
     padding-top: 20px;
 }
}

You can also target specific category headers with additional custom CSS by using this structure:

body.category-example {
    .category-title-header {
        background: url(example.jpg);
    }
}

With some time this could definitely be improved to support tags & topic titles!

Update: Made some refinements and put this in a repo as a theme component

28 Likes

This already works great @awesomerobot!
Could you please add an “All Categories” banner as well?

4 Likes

Nice work! Anyone having this live on their Discourse? I would like to check it out how looks like…

3 Likes

I add this in my forum and it’s perfect! A little thing is that it takes only the first lines of the description of the categories and don’t show links.

This is my text with links :

We only see the first two lines (and without links)

2 Likes

I wish there were more discussion here about some of the other potentially nice aspects of Flarum. Flarum just graduated to 1.0, finally. And although I continue to feel Discourse is superior in most respects, I also like some things about the Flarum design/UI. So I hope if others likewise miss some Flarum-like aesthetics, they will also chime-in here and maybe we can finally get a theme built (I, sadly, lack the skills, but may be able to contribute monetarily to a group effort on it if there is interest).

For now, to get started on addressing things besides the header, I believe the sidebar can be mostly replicated with:

Although it does not support Tags. Alternatively this:

Problem is that both appear to be in need of some update/maintenance or refactor.

One feature/design approach that seems entirely missing from Discourse, AFAIK, is a more obvious text box-like “reply” area, which I think is a nice alternative to the “Reply” button:


Notice how this is more than just a possibly “easier” or more “frictionless”-looking reply approach. The addition of the avatar image already there is actually an interesting detail that I personally think encourages interaction because it subtly makes you feel like you’re already involved.

In fact, I think this is probably a good enough idea to deserve a feature request of its own…

4 Likes

Also consider: Custom Layouts Plugin

3 Likes

Oh yes, good point! I will try it out ASAP.

1 Like

Right; reply being a distinct action you have to trigger, rather than a prefilled input box is a highly intentional design element from the earliest days of Discourse. We want to encourage reading, not immediate replying because “someone is wrong on the internet”. I think a lot of current problems on the internet can be traced to too many people responding too quickly, with not enough thought.

The introduction of the chat feature should also take pressure off the “I must immediately respond with the first emotion that comes to mind” impulse as well, and direct it more appropriately.

If you want sidebar, that’s a Teams feature.

6 Likes

Hold on now Jeff, I get the feeling you may be misunderstanding the request (and/or the way Flarum works). You know I am quite familiar with the reasoning behind Discourse and many of its design decisions. :smiley: Anyway, probably better to continue this over on the topic I created for it:

1 Like

Hello,

Finally from Flarum I came to Discourse because of very many reasons (Which is Better? Discourse or Flarum? - #31 by GVG), but still more prefer Flarum’s more light-rounded-elegant design. Maybe someone already make a more elegant style for Discourse as clear CSS or plugin etc?

If not - can anyone help with it? I can write a detailed specs.

3 Likes

This theme is quite nice! ☁️ Discourse Air Theme, there are more options in #theme-full as well!

11 Likes

Thanks, dear! :slight_smile:

But when I post some suggestions about that Theme - author recommend me to post them contrary here… so here they are:

My portion of suggestions:

  1. At my opinion almost whole Discourse (all text and spaces and icons and top menu panel etc) are monstrously huge. Just try to open for example MS Word or web Outlook, take a closer look how effective and compact MS devs use each minimal space! How accurate and extremely functional each panel and icon! After that change back to Discourse - and it will shock you with it abnormally huge text, monstrous empty spaces, big icons, too simple design, etc. The default Discourse text&spaces size is not only unusual (I’ve never don’t see a such huge styles at thousand of web resources or many other forums as Invision/Xeno/Flarum/etc) but what is more pity - it’s just ineffective space wasting and force users to scroll more, than they must - it’s inconvenient. So at this point I would like to see the more compact for about 20-30% style.
  2. Categories list - I really don’t like the default Discourse Categories listing because of lack of useful information at Categories list at left and conversely overload with unneeded topics at right. For me it was always uncomfortable to read Discourse Categories page. Please, just look to Invision/XenForo forums categories pages - they present more useful info, they are more accurate, more compact, often can be visually extended with icons or even images. At aspect of Categories represent - Discourse Categories page are really out of date and looks messy! Is it possible to add icons to Discourse Categories? Can you display them like this: https://ipb.stylesfactory.pl or
    Forums - Codebite.dev - Theme IPS etc? Or not so elegant but still much more comfortable and useful: XenForo community
  3. I really like Flarum Tags-Categories menu at left - it helps for faster navigation and looks nice. Is it possible to always (at all categories main and nested) display all Categories at left not as dropdown menu, but as always visible menu?

I’m not familiar with Discourse core components separating so don’t know - those improvements must be made at Theme or as Plugin or by simple custom CSS?

3 Likes
  1. It’s surprising that you consider the text monstrous! it’s 15px by default, which I think is 1px larger than Flarum. We’re still on the small size in my opinion! If you look around at some news websites (which are optimized for easy reading), the standard is usually larger than 16px (which is the browser default). Many are closer to 20px for articles!

    The width of text is also a conscious decision on our part, shorter line lengths are generally considered easier to read Line length | Butterick’s Practical Typography (but of course this can be subjective, we try to land on defaults that work for most people).

  2. We have 6 different category page styles to choose from, they have varying amounts of information, and they can all be customized with category images. If you’re an admin you can visit a category page and add images by clicking the wrench

  3. It’s possible to build a sidebar nav in a theme, though a little trickier to make it always present. There’s a theme component that does this for topic list pages: Topic list sidebar navigation, though it reuses the dropdown menu so it’s not 100% what you’re after. We have to support sites with dozens of categories, which is why we tend to stick to the dropdown.

it varies… if you want things to be smaller and more compact, that can definitely be achieved with CSS! But sidebars and other additions will need more advanced theming, some of which is covered in the developers guide to themes.

12 Likes

Hi, Kris! Thanks for detailed answer!

Agree with you - the main Discourse messages text are pretty good enough, can be just a slightly smaller (as you say 15px-14px). I just start to explore your Discourse and not complete the full list of improvements which I need yet. At this paragraph by “monstrously huge” I mean an overall UI, please, look at screenshot:

Do you have any demonstration for all of them? (Your main Discourse Demo does not allow admin login, unfortuantely.)

At this aspect it’s truly the contradiction itself. The classic UI Dropdown list must be used to select 1 from many 1 time (date, country, etc). But at most forums-communities users prefer to communicate at MANY forums Categories. Thus when Discourse add this Dropdown Categories list as some kind of navigation improvement, Flarum make it better as easy&always accessible menu. What is a specially bad that Discourse Dropdown Categories does not support nor Ctrl+Click, nor RightClick+“Open in new window” in-browser’s actions. At classic using case when active user or admin/mods return to forum - they want to open 2-4 favorite Categories for monitoring when any new topic will appear at them - but with Discourse Dropdown Categories it’s impossible. With Discourse Dropdown Categories list user must choose and navigate Categories one-be-one and with a such method user can just forget to explore some Category, or will jump over Categories like the easter bunny, etc. Also always visible Categories can help for better topics separation on new topics creation according to the meaning - because user will see all of them thus will not be lazy to search the proper one. BTW I just invented the perfect solution for this point.

Dear Kris, I’m not the web dev and don’t really know CSS etc unfortunately, can we together step by step complete the job of this topic together with your professional skills? I’m sure it will be very popular! :slight_smile:

2 Likes

I’m 62 and wear glasses.
Larger fonts really help me with readability and eye strain.

Also smaller paragraphs with more whitespace helps me to not lose reading focus (where I’m up to), which I find happens with large blocks of small font text.

I can increase the font size in preferences whch is useful, you can also decrease it to test what it would look like <15px

6 Likes

I have to agree with this point, and I’ve always found the Discourse category switcher to be annoying and limiting. It hurts discoverability for new users, and annoys (some) power users (like me). Ironically a dropdown does seem to be a good idea on mobile for accessing categories quickly, and yet it’s not available on the front page on mobile (yet): Category Dropdown in Mobile View - #10 by renato

I honestly think the dropdown is the wrong solution for the understandable and real problem you (@awesomerobot ) raised: dealing with lots of categories. With the ever-increasing screen sizes and resolutions of desktop displays, why not seriously reconsider a persistent sidebar? It could have a simple, collapsible “tree” view, a classic UI paradigm that has been used for ages. Or accordion-style sections (like “panels” in many desktop apps, e.g. Lightroom), or probably a number of other possibilities. The dropdown is really the best idea the team had? Maybe I should open a separate topic about this… (please let me know if you think so)

1 Like

This already exists to a large degree with the Layouts plugin and the associated Category widget.

See our site for a demo: https://thepavilion.io

4 Likes

Oh I know, and it’s great! In fact I knew I had seen a good example recently, but couldn’t remember where, and it was your site. :wink: (although I’d like some clearer indication that those are expandable categories) However not everyone has easy/affordable access to plugins (e.g. I think Discourse official hosting would actually require the Enterprise plan to use your plugin!?), and perhaps more importantly I’m suggesting it is a fundamental usability/design issue of Discourse itself, which means it should (in my view) be addressed in the core. Or at least as an official plugin.

Not to take anything away from the great work you’ve done, but at a certain point if something is popular, useful, and liked enough, that should be a signal. And again I point to the increasing use of sidebars in many other community tools. There’s something to this, something that Discourse seems to be missing so far… (and without clearly addressing it with a compelling counter-argument, as far as I’ve seen)

3 Likes

If you are prepared to put in the time to learn the ropes and set aside a little time each month to maintain your site, self-hosting gives you complete discretion over plugin installation and is very affordable indeed. (It can also be a very rewarding experience)

3 Likes