Layout improvements to topic summary / topic map


(Jeff Atwood) #1

I’ve never been super happy with the topic summary / topic map layout. What’s the topic summary?

When you arrive at Disneyland, they hand out maps at the entrance – since the first post is the entrance to the topic, this is the map we hand out to visitors arriving at the entrance to the topic!

It contains overview information about the topic, such as:

  • When was this topic created?
  • When was the last post in this topic?
  • How many posts are in this topic?
  • How many links were posted in this topic?
  • Which users are posting in this topic, and how much?

It does stuff too! Try clicking the parts of it.

  • Click the Last post to zap yourself to the bottom of the topic.

  • Click the big down chevron to expand the Topic Summary or Topic Map to see:

    • The complete Cast of Characters in this topic, along with how many times they’ve posted. Click on users to filter this topic to just posts by those particular user(s).

    • A list of “top” links posted in the topic, ordered by click count and thus popularity.

    • If the topic is long, a Summarize Topic button that filters the topic to just the “greatest hits” so it can be read more quickly without losing anything essential.

Looking at it with a designer friend of mine, we decided to add headers and make the numbers bigger.

Before:

After

While there is more we can and should do here, I think this helps keep the topic summary from getting too busy while we figure the rest out.


(Jeff Atwood) #2

My designer friend also suggested these tweaks:


(cpradio) #3

I like the last mockup with smaller headers, lighter background and the borders for separation. I’ve always felt the current one was “too dark”. It makes it feel gloomy.


(Sam Saffron) #4

I was looking at an ancient Discourse instance the other day and really missed that we used the lack of strong gray.

I find the current strong gray bg distracting, really like the “lightening” in your mockup


(Mittineague) #5

I like it too. I was wondering if the change might cause some squawking from the “dark theme” sites, but I don’t see that much of a difference against full black.


(Jeff Atwood) #6

If you look at the source it is calling

dark-light-diff($primary, $secondary, 97%, -45%);

so it is not using an absolute color there.


#7

Any gumption to consider adding my idea(s) from a while back besides what is discussed at the stats topic?


#8

For my purposes having the ability to show media in the topic summary would be very helpful. I’m not sure how beneficial it would be for most users, but for media heavy sites it could serve many purposes.


(Mittineague) #9

Unless someone knows better than I, I think that would take a lot of work. The topic JSON doesn’t have a “post_images” array, it would have to come from the "cooked"s then inserted into the topic map.

And for long topics with delayed post loading it would be even more troublesome.

That said, post images can be found. As a learning exercise I made a plugin that uses this

/* for some unknown reason, 
** regex with captures match func does not return array,
** requiring need for hacky regex replace func */
Handlebars.registerHelper('get_img', function(property, options) {
	var post = Ember.Handlebars.get(this, property, options),
    cooked = post.get('cooked');
	var output = "";
	if (cooked.indexOf("img") != -1) {
		var expr = /img src="[^"]*"/gm;
		var matches = cooked.match(expr);
		if (matches) {
			output += '<div class="get-img">Post Image Links ';
			for (var i = 0; i < matches.length; i++) {
				matches[i] = matches[i].replace(/img src="/, '');
				matches[i] = matches[i].replace(/"/, '');
				var domain = window.location.origin;
				var ext_expr = /http/;
				if (ext_expr.test(matches[i])) {
					domain = "";
				}
				var filename_expr = /[^\/]*$/gm;
				var filename_match = matches[i].match(filename_expr);
				var filename = "";
				if (filename_match[0]) { 
					filename_match[0] = filename_match[0].replace(/\//, '');
					filename_match[0] = filename_match[0].replace(/\?(.)*/, '');
					filename = filename_match[0];
				}
				output += '<br /><a href="'
				+ domain + matches[i] 
				+ '">' + filename + '</a>';	
			}
			output += '</div>';
		}
	}
	return output;
});

that results in


(Jeff Atwood) #10

OK, this is more or less done with the next deploy here, on desktop and mobile, per the last mockup.


(Erick Guan) #11

I would prefer a “lighter” header text which gives more contrast to the information.


(Jeff Atwood) #12

Err… What? That’s how it currently is. Can you mark up a live screenshot?


(Sam Saffron) #13

I think he is referring to lightening “created” / “last reply” by a few percent.


(Erick Guan) #14

Yes. As @sam said, .topic-map h4 { font-weight: lighter; }