Sam's personal "minimal" topic list design

theme-full
(Kris) #196

ah, yes! I forgot that the header has its own primary/secondary variables :dizzy_face:

https://github.com/discourse/discourse/pull/3256

1 Like

(Kris) #197

I made some more changes and resubmitted the whole thing, some customizations using the box style of category will have to edit a few lines of CSS, but the structure/organization of category styles is much better.

1 Like

(David García-Navas) #198

Thanks to @chapel for sharing his customizations :sunny:

Is there a way to isolate the code that make the category bars coloured?

The css part would be something like this:

$color1: #30A92A;
$category-opacity: 0.3;

.category-bar {
    margin: 0 !important;
    padding: 0 !important;
    width: 2px;
    
    .category-meta & {
        background-color: rgba($color1, $category-opacity);
    }
}

…but i tried different combinations on the header part and i can’t get this to work…

0 Likes

(Jacob Chapel) #199

Not sure what you mean?

0 Likes

(Sam Saffron) #201

I just updated my theme to allow for the structure changes made when we added the bullet category style, it also made CSS smaller.

0 Likes

(Jacob Chapel) #202

Cool. I’ll take a look and see if any of it will fit with my work.

I had already done quite a bit of changes, so I’m thinking we need to figure out the future of custom themes and how they can be consumed/managed.

How much interest is there in supporting something in core for this, including a way to keep them up to date? It could work as a plugin now that most of the plugin hooks exist to create it.

1 Like

(Matt Terry) #203

I’ve been working on styling a client’s discourse site this week and Sam’s minimal UI is working out so well for it. Thanks @sam it’s rally awesome, I think you’d really like what we’ve managed to with the look of the site… I’ll see if I can post screen shots

5 Likes

#205

Hello kind people,

Question; is it possible to bring back in minimal theme heatmap colors for posts and add column views?

To look like this Views | Replies | Last Post (Columns image preview below) with activated heatmap (Post colors). Thanks for help

This is the header code;

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

  <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}}

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

    <div class='creator'>
        {{#if showCategory}}
            {{category-link topic.category showParent="true" onlyStripe="true"}}
        {{/if}}

        {{~#if topic.creator ~}}
            <a href="/users/{{topic.creator.username}}" data-auto-route="true" data-user-card="{{topic.creator.username}}">{{topic.creator.username}}</a>
            &nbsp;
            {{format-date topic.createdAt format="medium-with-ago"}}
        {{~/if ~}}
        
        {{raw "list/action-list" topic=topic postNumbers=topic.bookmarked_post_numbers className="bookmarks" icon="bookmark"}}
        {{raw "list/action-list" topic=topic postNumbers=topic.liked_post_numbers className="likes" icon="heart"}}
    </div>
  </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}}

  <td class="num replies">
    {{topic.replyCount}}
  </td>

  <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="medium-with-ago"}}
      </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'>
  {{raw "topic-list-header-column" order='posts' name='topic.title'}}

  {{#if showLikes}}
    {{raw "topic-list-header-column" sortable='true' order='likes' number='true' forceName='Likes'}}
  {{/if}}

  {{#if showOpLikes}}
    {{raw "topic-list-header-column" sortable='true' order='op_likes' number='true' forceName='Likes'}}
  {{/if}}

  {{raw "topic-list-header-column" sortable='true' number='true' order='views' forceName='Replies'}}
  {{raw "topic-list-header-column" sortable='true' order='activity' forceName='Last Post'}}
</script>

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

  Discourse.Topic.reopen({
    creator: function(){
      var poster = this.get('posters.firstObject');
      if(poster){
        return poster.user;
      }
    }.property(),
    lastPoster: function() {
      var poster = this.get('posters.lastObject');
      if(poster){
        if (this.last_poster_username === poster.user.username){
          return poster.user;
        } else {
          return this.get('creator');
        }
      }
    }.property('posters'),
    replyCount: function(){
      return this.get('posts_count') - 1;
    }.property(),
    hasReplies: function(){
      return this.get('posts_count') > 1;
    }.property()

  });
</script>

Anyone? :stuck_out_tongue:

0 Likes

(Matt Terry) #206

If you have a look in Discourse and find the templates that are being overridden, eg data-template-name=‘list/ topic_list_item.raw’ then you can see what the original templates look like.

Then you can find any parts that are missing and merge them back into the Sam’s UI template overrides.

Sorry I can’t be more specific, but that should help

0 Likes

(Denis Safronenkov) #207

It looks perfect, but a lil bug overthere:

When username ‘too long’, it becomes like on the picture. Any workaround for this?

0 Likes

(Joe Kelly) #208

@d3zorg You can solve that with CSS. Depending on what you want to achieve, you can use:

.topic-list td.posters {
white-space: nowrap;
}

This will force no line-breaks, so the long name will simply overflow past the container’s right edge.

Or you could also play around with this setting:

  text-wrap: ellipsis

which will apend “…” to any overflowing text instead of wrapping it to the next line. See here.

0 Likes

(Sam Saffron) #209

I just added partial heatmapping (only hot)

I find that too many colors distract me in the theme, but highlighting the hottest conversations does have some benefit.

5 Likes

(Jacob Chapel) #210

Have you updated your code with this? I was looking into this the other day but got side tracked since it wasn’t working as expected.

0 Likes

(Sam Saffron) #211

Just updated it now … sorry for the delay

0 Likes

(Sam Saffron) #212

@eviltrout my theme is pretty broken now, I think the list item template override is not longer taking, how do I fix?

3 Likes

(Robin Ward) #213

Ah that could be because I changed it to the preferred ember style of using dashes instead of underscores. So topic-list-item should fix it.

3 Likes

(Jacob Chapel) #214

Interestingly, I just upgraded to latest and my override didn’t break. Though I am having issues with the suggested topics showing user info sometimes and I am not sure why.

I think it might have to do with the model/data store changes?

2 Likes

(Chris Saenz) #215

@sam, can you please update the original post (header code, first line):

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

to

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

Thanks!

3 Likes

(Jacob Chapel) #216

@sam affects yours as well

0 Likes

(Maya Lesh) #217

this would be a great addition! did anyone try to do something like adding excerpts?

0 Likes