Sam's personal "minimal" topic list design

@Joshua_Kogan Sorry for the late reply. I think there was a misunderstanding as this is just a draft design. No actual code behind it. If there is interest I can continue designing and open source the Figma file to a possible developer(s).

That said there is lots of work left:

  1. Style guides
  2. Components
  3. Topic view
  4. Profile pages
  5. Category view
  6. and more

Even thou it looks minimal Discourse is a complex beast :slight_smile:

Sorry @sam I should have opened my own personal minimal theme topic :blush:

2 Likes

Thanks for the great theme :slight_smile:

Is there any way to add ability to translate “Replies”/“Last Post”? For now I just changed it in the code, but as I understand it’s not recommended because the changes will be lost if the theme updates.

4 Likes

@sam really like this theme, but wondering if there’s something I can change on my end to make it work well with the dark colour palette?

1 Like

Yeah, I am also interested in this, just asked a similar question here:

4 Likes

There is now, I just made it localizable and pushed a fix.

10 Likes

I have a similar issue where by default the theme looks like this in Dark Mode (via this switcher):

1 Like

the avatar of the last user replied, is not shown in this theme anymore:

I wonder if it’s by intention or it’s a simple bug. either case, in my opinion, the theme was more beautiful with the avatars.

1 Like

It’s a little bug, it will be fixed soon.

If you want to fix it until then, you just need to edit the theme and in the Desktop > Header part, change the code with this

((edited, upgrade the component now))

You’ll still be able to upgrade the theme after this change

5 Likes

Thanks bookmarked and set a reminder for Monday

EDIT: fix is merged thanks @Steven!

1 Like

Hey guys

what change do I have to make in the header to get the excerpt for featured topics back?

Also my avatars are gone from topic list after I updated the theme component:

1 Like

My guess is that you are running a fork, latest has the avatars.

1 Like

Just checked, my theme’s source link points to https://github.com/discourse/discourse-simple-theme.git
Also just re-installed it from the source link again, same issue on theme preview

1 Like

Maybe update discourse to latest ?

1 Like

I am on 2.4.1. Are you referring to 2.5 beta?

2 Likes

Yes the change in the avatar was in the version 2.5.0 beta 2.

2 Likes

Ah I see. Just scrolled up and found your temporary fix.

@Steven can you tell me what part in that header code to adjust to bring back the excerpt of pinned topics again?

1 Like

There already is a excerpt reference, so you might want to delete line 16 first

  {{raw "list/topic-excerpt" topic=model}}

Then, I would add this

  {{#if expandPinned}}
    {{raw "list/topic-excerpt" topic=topic}}
  {{/if}}

Right after this

{{raw "list/action-list" topic=topic postNumbers=topic.liked_post_numbers className="likes" icon="heart"}}
   </div>

So just before the </td>

If you use the old header code, that should look like this

<script type='text/x-handlebars' data-template-name='list/topic-list-item.raw'>

{{#if bulkSelectEnabled}}
<td class='star'>
  <input type='checkbox' class='bulk-select'>
</td>
{{/if}}

<td class='main-link clearfix'>
  {{raw "topic-status" topic=topic}}
  {{topic-link topic}}
  {{#if controller.showTopicPostBadges}}
    {{raw "topic-post-badges" unread=topic.unread newPosts=topic.displayNewPosts unseen=topic.unseen url=topic.lastUnreadUrl}}
  {{/if}}
  {{discourse-tags topic mode="list"}}
  <div class='creator'>
  {{#if showCategory}}
     {{category-link topic.category}}
   {{/if}}
  {{~#if topic.creator ~}}
  <a href="/users/{{topic.creator.username}}" data-auto-route="true" data-user-card="{{topic.creator.username}}">{{topic.creator.username}}</a> <a href={{topic.url}}>{{format-date topic.createdAt format="tiny"}}</a>
  {{~/if ~}}
   {{raw "list/action-list" topic=topic postNumbers=topic.liked_post_numbers className="likes" icon="heart"}}
   </div>
  {{#if expandPinned}}
    {{raw "list/topic-excerpt" topic=topic}}
  {{/if}}
</td>

{{#if controller.showLikes}}
<td class="num likes">
  {{number topic.like_count}} <i class='fa fa-heart'></i>
</td>
{{/if}}

{{#if controller.showOpLikes}}
<td class="num likes">
  {{number topic.op_like_count}} <i class='fa fa-heart'></i>
</td>
{{/if}}

{{raw "list/posts-count-column" topic=topic}}

<td class="last-post">
<div class='poster-avatar'>
<a href="{{topic.lastPostUr}}" data-user-card="{{topic.last_poster_username}}">{{avatar topic.lastPoster usernamePath="username" imageSize="medium"}}</a>
</div>
<div class='poster-info'>
<a href="{{topic.lastPostUrl}}">
{{format-date topic.bumpedAt format="tiny"}}
</a>
<span class='editor'><a href="/users/{{topic.last_poster_username}}" data-auto-route="true" data-user-card="{{topic.last_poster_username}}">{{topic.last_poster_username}}</a></span>
</div>
</td>
</script>

<script type='text/x-handlebars' data-template-name='topic-list-header.raw'>
  {{#if bulkSelectEnabled}}
  <th class='star'>
    {{#if canBulkSelect}}
        <button class='btn bulk-select' title='{{i18n "topics.bulk.toggle"}}'><i class='fa fa-list'></i></button>
    {{/if}}
  </th>
  {{/if}}
  {{raw "topic-list-header-column" order='default' name='topic.title' bulkSelectEnabled=bulkSelectEnabled showBulkToggle=toggleInTitle canBulkSelect=canBulkSelect}}

  {{#if showLikes}}
     {{raw "topic-list-header-column" sortable='true' order='likes' number='true' forceName=(theme-i18n 'likes')}}
  {{/if}}
  {{#if showOpLikes}}
     {{raw "topic-list-header-column" sortable='true' order='op_likes' number='true' forceName=(theme-i18n 'likes')}}
  {{/if}}
  {{raw "topic-list-header-column" sortable='true' number='true' order='posts' forceName=(theme-i18n 'replies') }}
  {{raw "topic-list-header-column" sortable='true' order='activity' forceName=(theme-i18n 'last_post')}}
</script>

<script>

(function(){

var TopicListItemView = require('discourse/components/topic-list-item').default;


TopicListItemView.reopen({
    showCategory: function(){
        return !this.get('controller.hideCategory') &&
                this.get('topic.creator') &&
                this.get('topic.category.name') !== 'uncategorized';
    }.property()
});

})();

</script>
1 Like

I just added this code to the theme’s Header part, yet avatars still don’t show up. Am I missing something?

Tried this code as well, avatars not showing up. Even tried safe mode and disabled all plugins

FYI: the conflict with Topic List Previews prevented the excerpts to be displayed even with the code provided

1 Like

I edited my previous post, I got confused with all the different versions.

The code you added was for the newest version of Discourse. If I understand correctly, you need a to edit the header for a old version of Discourse, so I changed my last post with a version for a version previous than 2.5.0 b2

It would be easier to upgrade Discourse tho, lots of cool new features :grin:

1 Like

Which I am looking forward to :wink:

yet I prefer to stay on stable :wink:

Thx for the update!

2 Likes