Community Update - Design!

NOTE: We’ll be updating the community starting at 5:00pm EST on Aug 12th – sorry if anything breaks temporarily!


Hey all – you may have noticed some changes to the community – @Frank_jr_Inovelli has been working hard on making this community look amazing and we’ve created it to look more like our website (hamburger at the top left, logo at the top right).

In addition, you’ll notice a sun and moon – this will allow you to toggle between light and dark mode easily.

Anyway, just wanted to let everyone know in case you were wondering what’s going on!

2 Likes

Looking good! I do think the dark mode needs a little love. It’s a little too dark personally, and you actually lose detail as a result.

The transition between the menu and body gets totally lost, and it looks like a few more styling tweaks are needed.

image

Here’s a quick hack of the background color to #222222. You can actually see the transition, and the color is a little easier on the eyes. Naturally, you would want to leverage a color from your branding if possible instead of my random test.

TLDR: I think dark mode needs a little bit more contrast / variation in “color” shade.

1 Like

@Eric_Inovelli @Frank_jr_Inovelli - Looks good so far. One issue on mobile is the comments icon follows the scroll and gets in the way.

2 Likes

Really sharp guys! Thank you for making the ability to change from night to day modes so much easier… Less menu clicks is better! :slight_smile:

Edit: Did you guys make some efficiency adjustments? Site does seem a little snappier…

1 Like

Thanks for pointing that out. It looks like a collision with the burger menu script. I can’t fix it right now, but I’ll look at it soon!

Update: resolved

1 Like

Thanks, glad you like it! I really like the theme selector too. I did streamline some older bloated code which may have increased performance some :slightly_smiling_face:

1 Like

I definitely agree here, thanks for the feedback. Will have to see what the boss @Eric_Inovelli says about it

I was dreading the contents of this post after I read the headline, only to realize I was already using the new design (this was the first post I read) and didn’t even notice it yet. Nicely done! (Thanks for not doing a SmartThings and messing up the Community forum for no good reason.) I not only don’t use dark modes but actively dislike them, so I’ll leave it to others to comment on that now that it’s easier to get to. :slight_smile:

Ran into another issue trying to cancel an edit to a post in firefox. The dialog box was not visible. It worked in Edge. Same problem when trying to upload an image.

1 Like

Thanks for bringing this to my attention. I’ll check it out.
Update: resolved

:+1: both issues fixed.

1 Like

Yeah, good points – we emulated the main website, which has dark mode for the front page (no clue why they didn’t build it out everywhere else…)

We can look into the grey possibly when we are able to update the main site.

I did notice this part has changed and I’m not sure why – @Frank_jr_Inovelli, is this something that can revert back (problem is I don’t remember what it used to look like – I think it was just a solid line that was maybe 1-2px)

@Frank_jr_Inovelli – Last thing I noticed was that the sun/moon disappears when you click on a topic.

But man, I’m in love with the new layout – so much easier and streamlined than before. Little did I know there was 30k lines of code to sort through and these, “little” changes made to the navbar actually required Frank to break Discourses code and re-hack it to make it work. Amazing.

Forgot what that bar used to look like, but now I fixed the collision and it is back to the old style. In regards to the icons disappearing, they show up at the top but disappear to ensure that there is room for the extra info wrapper, but on desktop there still should be room. I’ll definitely look into that.

Glad you’re happy with it. When I first made the theme selector live I clicked back and forth for a while because I love the new way to switch themes.

Update: resolved. Theme toggle icons remain visible while scrolling on desktop.

1 Like

Can you make the category images smaller and/or side by side on mobile devices? I generally read on my Android, but when I go to see the latest, I have to scroll a long way just to get past the list of categories before seeing any content.

2 Likes

We got you - what do you think of the new design?

2 Likes

@Eric_Inovelli that’s perfect. Thank you. :slightly_smiling_face:

1 Like