Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: User bookmark page style adjustments (#13869)

This commit is contained in:
Kris 2021-07-29 12:11:15 -04:00 committed by GitHub
parent 1e66e4602f
commit a049b8f596
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 46 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
app/assets/javascripts/discourse/app/templates/components/bookmark-list.hbs
View File

@ -2,66 +2,55 @@
{{#load-more selector=".bookmark-list .bookmark-list-item" action=loadMore}}
<table class="topic-list bookmark-list">
<thead>
{{#if site.mobileView}}
<th>&nbsp;</th>
<th>{{i18n "topic.title"}}</th>
<th>&nbsp;</th>
{{else}}
{{#unless site.mobileView}}
<th>{{i18n "topic.title"}}</th>
<th>&nbsp;</th>
<th class="post-metadata">{{i18n "post.bookmarks.updated"}}</th>
<th class="post-metadata">{{i18n "activity"}}</th>
<th>&nbsp;</th>
{{/if}}
{{/unless}}
</thead>
<tbody>
{{#each content as |bookmark|}}
<tr class="topic-list-item bookmark-list-item">
{{#if site.mobileView}}
<td>
{{#if bookmark.post_user_avatar_template}}
<a href={{bookmark.postUser.path}} data-user-card={{bookmark.post_user_username}}>
{{avatar bookmark.postUser avatarTemplatePath="avatar_template" usernamePath="username" namePath="name" imageSize="small"}}
</a>
{{/if}}
</td>
{{/if}}
<td class="main-link" role="rowheader">
<span class="link-top-line">
<div class="bookmark-metadata">
{{#if bookmark.name}}
<span class="bookmark-metadata-item">
{{d-icon "info-circle"}}{{bookmark.name}}
</span>
{{/if}}
{{#if bookmark.reminder_at}}
<span class="bookmark-metadata-item">
{{d-icon "far-clock"}}{{bookmark.formattedReminder}}
</span>
{{/if}}
{{#if bookmark.name}}
<span class="bookmark-metadata-item">
{{d-icon "info-circle"}}<span>{{bookmark.name}}</span>
</span>
{{/if}}
</div>
<div class="bookmark-status-with-link">
{{#if bookmark.pinned}}
{{d-icon "thumbtack" class="bookmark-pinned"}}
{{/if}}
{{topic-status topic=bookmark.topicStatus}}
{{~topic-status topic=bookmark.topicStatus~}}
{{topic-link bookmark.topicLink}}
</div>
</span>
{{#if bookmark.excerpt}}
{{!-- template-lint-disable --}}
<p class="post-excerpt" {{on "click" this.screenExcerptForExternalLink}}>{{html-safe bookmark.excerpt}}</p>
{{/if}}
<div class="link-bottom-line">
{{category-link bookmark.category}}
{{discourse-tags bookmark mode="list" tagsForUser=tagsForUser}}
</div>
{{#if (and site.mobileView bookmark.excerpt bookmark.post_user_avatar_template)}}
<a href={{bookmark.postUser.path}} data-user-card={{bookmark.post_user_username}} class="avatar">
{{avatar bookmark.postUser avatarTemplatePath="avatar_template" usernamePath="username" namePath="name" imageSize="small"}}
</a>
{{!-- template-lint-disable --}}
<p class="post-excerpt" {{on "click" this.screenExcerptForExternalLink}}>{{html-safe bookmark.excerpt}}</p>
{{/if}}
</td>
{{#unless site.mobileView}}
<td>
{{#if bookmark.post_user_avatar_template}}
<a href={{bookmark.postUser.path}} data-user-card={{bookmark.post_user_username}}>
<a href={{bookmark.postUser.path}} data-user-card={{bookmark.post_user_username}} class="avatar">
{{avatar bookmark.postUser avatarTemplatePath="avatar_template" usernamePath="username" namePath="name" imageSize="small"}}
</a>
{{/if}}

2
app/assets/javascripts/discourse/app/templates/components/topic-status.hbs
View File

@ -30,4 +30,4 @@
{{~#if topicInvisible~}}
<span title={{invisibleTitle}} class="topic-status">{{invisibleIcon}}</span>
{{~/if~}}
{{plugin-outlet name="after-topic-status" tagName="" args=(hash topic=topic)}}
{{plugin-outlet name="after-topic-status" tagName="" args=(hash topic=topic)~}}

1
app/assets/stylesheets/common/base/_topic-list.scss
View File

@ -160,6 +160,7 @@
margin-top: 0.5em;
margin-bottom: 0.5em;
font-size: $font-down-2;
word-break: break-word;
}
}

46
app/assets/stylesheets/common/components/bookmark-list.scss
View File

@ -28,7 +28,6 @@ $mobile-breakpoint: 700px;
}
@media (max-width: $mobile-breakpoint) {
.main-link {
padding-left: 0.5em;
padding-right: 0.5em;
}
}
@ -45,28 +44,20 @@ $mobile-breakpoint: 700px;
}
.bookmark-metadata {
font-size: $font-down-2;
display: flex;
margin-bottom: 0.2em;
margin-bottom: 0.25em;
&-item {
margin-right: 0.5em;
display: flex;
align-items: center;
display: inline-block;
margin-right: 1em;
margin-bottom: 0.25em;
line-height: $line-height-medium;
span {
word-break: break-word;
}
}
.d-icon {
// not aligning center because of multi-line notes
align-self: flex-start;
margin-right: 0.2em;
padding-top: 0.12em;
}
@media (max-width: $mobile-breakpoint) {
flex-direction: column;
&-item {
display: block;
margin-bottom: 0.2em;
}
margin-right: 0.25em;
}
}
.bookmark-status-with-link {
@ -74,8 +65,27 @@ $mobile-breakpoint: 700px;
flex-direction: row;
align-items: center;
.mobile-view & {
margin-bottom: 0.15em;
}
.topic-statuses {
float: none;
&:empty {
// avoids extra margin
display: none;
}
}
}
.post-excerpt {
overflow: hidden;
padding-right: 1em;
}
.mobile-view & {
.avatar {
float: left;
margin: 0.27em 0.27em 0 0;
}
}
}