Material Design for Discourse


#1

I want to first preface this with stating that this topic is not intended to suggest a best practice for Discourse design, or even recommend any changes with the current design. This is simply for informational purposes on how I ended up incorporating some Material Design elements in to my site.

I am not a professional, merely a hobbyist, so the code may be messy and sometimes bloated. It is simply what I ended up with to get the results I wanted. I would be happy to receive any input on how it can be optimized or improved upon in any way.

NOTE: I am not promising this code will work for the version your are on. I am currently on v1.3.0.beta7, so I had to manually remove the zebra stripes. In doing so I had to modify some code that you may or may not need to modify depending on your version.

#Categories View

My first order of business was to create more visual separation with my Categories. In order to do this, I entered the following CSS:

//add space between categories

.topic-list.categories{  
      border-spacing: 0 1em;
      border-collapse: separate;
}

.topic-list.categories th, .topic-list.categories td {
    padding: 0 15px 0 15px;
}

//remove zebra stripes

.topic-list.categories>tbody>tr:nth-child(odd), .topic-list.categories>tbody>tr:nth-child(even) {  
    background-color: white;
}

To add shadows to the Category boxes, I originally had this code:

.topic-list.categories>tbody>tr td.stats, td.category, td.latest{  
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 0 0 0 rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 0 0 0 rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 0 0 0 rgba(0, 0, 0, 0.12);
}

However, I found that added a shadow I didn’t like to the Topic List as well, so I changed it to this, which is very specific to my site since only Categories have logos:

tr.has-logo td.stats,tr.has-logo td.category,tr.has-logo td.latest{
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 0 0 0 rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 0 0 0 rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 0 0 0 rgba(0, 0, 0, 0.12);
}

For the final touch, I changed the Topic List selection to be underlined when active instead of boxed

.nav-pills>li.active>a, .nav-pills>li>a.active {
  color: black;
  font-weight: 500;
  background-color: #f6f6f6; //matches main bg color
  border-bottom: 3px solid #D32f2f;
}

#Topics List

This is the part where I manually removed the zebra stripes because I have not updated to the latest build yet:

// Remove Zebra Stripes
.topic-list>tbody>tr:nth-child(odd), .topic-list>tbody>tr:nth-child(even){
    background-color: white !important;
    border-bottom: 1px solid #e9e9e9;
}

.topic-list>tbody>tr:first-of-type {
  border-top: 3px solid #e9e9e9;
}

//add shadow behind the list of topics
.topic-list{
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  background-color: white;
  border-collapse: collapse;
}

And of course, you can’t have a Material Design site without a fab.

https://s3.amazonaws.com/f.cl.ly/items/1D3d1h0V2f1K0c2d143Q/Screen%20Recording%202015-05-15%20at%2009.01%20AM.gif

The transitions are smoother than how it appears in the gif, but it is far from perfect. It was more of just a fun experiment that I wanted to challenge myself with. I do believe it provides some utility, however, since it is fixed on the screen and you don’t have to scroll to the top to add a new topic, but it is mostly for cosmetic purposes.

I originally accomplished this with all CSS and a script in the header, but I eventually made a plugin so that the animation would occur more than on just the first page load.

The CSS is as follows, but I do warn you this is by far the most finicky CSS and in need of major refinement. It doesn’t look great in tablet portrait view, for example. It should be able to be resolved with a simple media query, but I just haven’t built it yet.

.list-controls #create-topic.btn-default .fa-plus:before {
  content: "\f067";
  position: relative;
  right: -12.85em;
}

.list-controls .btn-default[title="New Topic"] {
    padding: 22px 15px 22px 5px !important;
}
    

#create-topic.btn-default {
  border-radius: 40px;
  position: fixed;
  bottom: 30px;
  right: 50px;
  z-index: 999;
  padding: 22px 20px 22px 5px;
  background-color: #2196f3;
  color: white;
  text-indent: -157px;
    -webkit-box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
    -moz-box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
    box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
    overflow:hidden;
}

#create-topic.btn-default{
    width: 63px;
    height: 63px;
    color: #2196F3;
    -webkit-transition: right .5s, bottom .5s, border-radius .5s, text-indent .2s, visibility 1s, width .2s ease, height .5s ease .4s, color .5s, background-color 2s, -webkit-transform .5s;
    transition: right .5s, bottom .5s, border-radius .5s, text-indent .2s, visibility 1s, width .2s ease, height .5s ease .4s, color .5s, background-color 2s, transform .5s;
}

#create-topic.btn-default .fa-plus{
    color: white;
}

#create-topic.btn-default:hover{
  text-indent: 0px;
  width: 190px;
  color: white;
}

#create-topic.create-clicked{
  width: 100% !important;
  height: 390px;
  visibility: hidden;
  background-color: #d8d8d8;
  position: fixed;
  right: 0px;
  bottom: 0px;
  border-radius: 0px;
  text-indent: -9999px;
}

.new-controls{
    top: 100px !important;
    bottom: 45px !important;
}

#reply-control.edit-title{
    -webkit-transition: width .2s ease, height .2s ease-in .4s, -webkit-transform .5s;
    transition: width .2s ease, height .2s ease-in .4s, transform .5s;
}

//Return Topic Edit button to original position
.list-controls .btn-default[title="Edit"] {
  border-radius: 0px;
  position: inherit;
  z-index: 999;
  padding: 6px 12px;
  background-color: #2196f3;
  color: white;
  text-indent: 0px;
  -webkti-box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
  -moz-box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
  box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
}

And the Javascript is as follows, but once again, I by no means claim this is the right way to do it. Just the way I did it.

Discourse.PageTracker.current().on('change', function () {

        $('.list-controls').on('click', '#create-topic', function(){
            $('#create-topic').addClass('create-clicked');
            setTimeout(function() {$('#reply-control').appEvents.trigger("composer:opened");},650);
        });
        
        $('#main').on('click', '.cancel', function(){
            $('#create-topic').removeClass('create-clicked');
            $('#reply-control').addClass('hidden');
            setTimeout(function() {$('#reply-control').removeClass('hidden');},650);
            $('#reply-control').appEvents.trigger("composer:closed");
        });
        
        $('#main').on('click', '.toggler', function(){
            $('#create-topic').removeClass('create-clicked');
            $('#reply-control').addClass('hidden');
            setTimeout(function() {$('#reply-control').removeClass('hidden');},650);
            $('#reply-control').appEvents.trigger("composer:closed");
        });

    });

#Topic Cards

The last major touch that was added was thanks to a topic about Showing Tiles for Topics. I used examples from @CleverPatrick and @smartwatchme to help me reach this result:

Once again, I can’t take credit for most of this work, as I was able to piece most of it together from existing topics and sites. I noticed smartwatch.me was using Owl Carousel, so after figuring out how that worked and how they implemented it, I ended up modifying the Owl CSS and example Javascript to fit my needs. You can get the base CSS from downloading it at their site. The CSS and the Javascript together is a little more specialized, however, with a mix of what @CleverPatrick started with and what @smartwatchme refined, so it’s not as easy as just a copy and paste. In order to not detract from the topic of Material Design, I will post what I know to Showing Tiles for Topics.

I am very happy with it, as I find that it helps promote recent content by bringing it front and center. It really works well for my use case because I have it only being populated by the Games category which is always guaranteed to have a nice image to show in the card.

#Posts View

All I really did was added a background color and shadow, rounded the edges, made them a little wider (75%) and played with some spacing.

.topic-body{
  -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
  -moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
  background-color: white;
  margin-top: 10px;
  padding-left: 20px;
  border-radius: 6px;
  padding-right: 20px;
  min-width: 75%;
}

.topic-avatar{
    border-top: 0;
    padding-right: 10px;
}

Please let me know if you have any questions. I am by no means an expert on CSS or Material Design, but I would be happy to help in any way possible.


The death of the grey: no more tiger striping rows by default
Dark Material Design
Edit existing source of the forum
Customizing the Home Screen to show Tiles for Topics
Looking to hire someone who can integrate SNS buttons
Increasing post width with CSS?
How to style the `/categories` page?
Category image gallery possible?
Dark Material Design
Avatar Flair (not Badges) for Groups
Tiles for topics
How do I get this design?
(Alessio Fattorini) #2

Really appreciated, wonderful work :wink:
I’ll work on it pretty soon


(Kris) #3

Very cool work, I love the new topic button!


(Dave McClure) #4

Is your site public? if so can you add a link to it in the original post?


#5

It is public and we would love to have new members. I have included the link in the OP. I didn’t want this to come off as a marketing ploy, so I didn’t originally include it, but you can at the very least see it in action at http://talk.polygonalweave.com/


(Chris Saenz) #6

Thanks @rewphus for your work on this so far. I’ve wanted a floating topic button on mobile for awhile now. I’ve isolated the button code from your animation, and tuned it up a little to work on my devices. This is what I’m using now on the mobile CSS:

  .list-controls #create-topic.btn-default .fa-plus:before {
  content: "+";
  position: relative;
  right:-202px;
  bottom:10px;
  font-size:32px;
  font-weight:800;
}

.list-controls .btn-default[title="New Topic"] {
    padding: 22px 15px 22px 5px !important;
}
    

#create-topic.btn-default {
  border-radius: 40px;
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 999;
  padding: 22px 20px 22px 5px;
  background-color: #2196f3;
  color: white;
  text-indent: -157px;
    -webkit-box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
    -moz-box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
    box-shadow: 0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);
    overflow:hidden;
}

#create-topic.btn-default{
    width: 56px;
    height: 56px;
    color: #2196F3;
}

#create-topic.btn-default .fa-plus {
    color: white;
}

#create-topic.btn-default:hover{
  text-indent: 0px;
  width: 190px;
  color: white;
}

.new-controls{
    top: 100px !important;
    bottom: 45px !important;
}

A couple points on the button. Since Google came up with Material Design, they’ve laid out pretty clear guidelines; one of them is sizing. If you want the button to look right, it needs to be 56px with a 24px icon, spaced 16px from the edge on mobile, 24px on tablet/desktop.

Also, there’s a CSS bug when shrinking the browser down below 850px width, the icon isn’t staying centered on the button. This is because you’re using em based spacing, and Discourse’s font size drops down at that point. I haven’t solved this yet because px spacing is breaking in the other direction. The other solution I’m still looking for is a slightly bigger plus icon.

I’m not a CSS whiz by any means, so I appreciate what you’ve done here. Thanks for taking a crack at this!


#7

You are absolutely right. I really just did the down and dirty method by using the existing icon and not focusing on the specifics as much as the overall feel. I think with a team effort we could really nail the specifics though, so I greatly appreciate your contribution.

I didn’t actually post my mobile css on here to save space, but I ended up with something similar. The largest issue I have with mobile right now is relying on the hover to show the title of the button, it can sometimes be wonky with touch controls, as most hover events are.

Hopefully you don’t dive in too much and notice my grotesque topic-progress button! It is definitely a WIP so I don’t dare to even share it here yet. I’m kind of waiting on that potential custom scroll bar before I spend too much time worrying about it for now.

I am also eagerly awaiting being able to create a Navigation Drawer from the guts of the storied slide-out hamburger menu


(Dogweather) #8

I’m really interested in how you implemented the images for the topic cards, because there’s no custom field for topic. Are the images determined on-the-fly by scanning the initial post, and then loading it in javascript?

I’m thinking that whatever you did could be a solution for this question: reddit style picture thumbnail.


#9

@dogweather I added a little blurb in the OP, but essentially I suggested that we continue that conversation in the original topic for tiles, so I posted this:

I’m a strong believer in working together to build a better product, so hopefully that doesn’t come back to burn me. Essentially, a loop was used to grab the topic.image_url for each post for the configured category. Since I am using a custom Onebox for that category that already grabs an image and posts it in the first post, this method works really well for me. I am sure this method could be used to help post images for thumbnails as well.


(Jeff Widman) #10

Big fan of the category display. Looks much better than anywhere else that I’ve seen.

The topic tiles are a nice touch, would work well on some sites, not so well on others.


(Dogweather) #11

Ah hah, actually, I didn’t realize that topic has an image_url attribute. That answers all of my questions. (I was going by the conversation here.)


(Pablo Macaluso) #12

Amazing work


(Abdul Munim Zahid) #13

Love what you did with posts.

Share that code if you can :smiley:


(Manthan Mallikarjun) #14

Hey!

I love the theme!

The only negative thing I see about your theme is that the floating button is a bit janky. When you press it, the animation isnt really smooth.

Other than that, great theme!

Thanks.


(Kane York) #15

I think that’s dependent on your browser - here, in Chrome/Linux it’s max-fps smooth.


(Manthan Mallikarjun) #16

Running the same thing. Ubuntu/Chrome. It looks fine up until the point where the edit bar comes up. There is a weird stall with it.


#17

I have found it can slow down when the browser, particularly Chrome, is running high on RAM. Not to say that’s what’s happening in your case, but I see that as being one of the more difficult factors in properly implementing Material Design in current browsers. Animations are such a key part to the experience, it can really hinder that experience when the animation stutters because of enabled extensions or open tabs that are sucking up a lot of memory.

I’m sure there is plenty of optimization that can still be done, however, in the way I implemented it. If anybody knows of a better way to initialize the animation, I would love some pointers.


(Pablo Macaluso) #18

Where goes pasted the Javascript?


(Pablo Macaluso) #19

Thank you! i used it :slight_smile:


(Zachary ) #20

Hey, this is absolutely great - would you mind posting the code you used for Beta 9? Certain features aren’t working on my Discourse.