b72a3c1e95
This is the second iteration on the topic card design, in which we bring
back the OP and change the layout.
**Changes**:
* Show OP avatar
* Remove activity avatar and replace by reply icon
* Remove activity icon background
* Move category tag to top left
* Replace long activity copy ("…replied at…") with dot separator
* Change date formatting to `tiny`
* Adjust bulk select styling to new layout + align checkbox to top on
mobile VS keep centred on desktop
* Why: On desktop, the avatar is taking 2 lines (usually) and aligning
the checkbox vertically looks nice. Exception for excerpts, but since
that's only available for pinned topics atm that's a low occurrence. On
mobile, the topic card is 3 lines, with a smaller avatar, which makes
the checkbox "float" around a bit when centred. Hence aligning it to the
top, which for solid avatars aligns nicely too.
* CSS refactor: grid, breakpoints
Messages/bookmarks have not been changed.
| Description | Visual |
|--------|--------|
| Large topic list | |
| Large bulk edit | 
|
| Medium topic list | 
|
| Medium bulk edit | 
|
| Small topic list | 
|
| Small bulk edit | 
|
| Messages page (remains unchanged) | 
|
| Bookmark page (remains unchanged) | 
|
20 lines
519 B
Plaintext
20 lines
519 B
Plaintext
import Component from "@glimmer/component";
|
|
import avatar from "discourse/helpers/avatar";
|
|
|
|
export default class TopicCreatorColumn extends Component {
|
|
get topicCreator() {
|
|
return {
|
|
user: this.args.topic.creator,
|
|
username: this.args.topic.creator.username,
|
|
class: "--topic-creator",
|
|
};
|
|
}
|
|
|
|
<template>
|
|
<div class={{this.topicUser.class}}>
|
|
{{avatar this.topicCreator.user}}
|
|
<span class="topic-creator__username">{{this.topicUser.username}}</span>
|
|
</div>
|
|
</template>
|
|
}
|