Skip to content

Commit

Permalink
UX: User bookmark page style adjustments (#13869)
Browse files Browse the repository at this point in the history
  • Loading branch information
@awesomerobot
awesomerobot committed Jul 29, 2021
1 parent 1e66e46 commit a049b8f
Show file tree
Hide file tree
Showing 4 changed files with 45 additions and 45 deletions.
41 changes: 15 additions & 26 deletions app/assets/javascripts/discourse/app/templates/components/bookmark-list.hbs
View file
Expand Up @@ -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}}
{{#if bookmark.reminder_at}}
<span class="bookmark-metadata-item">
{{d-icon "info-circle"}}{{bookmark.name}}
{{d-icon "far-clock"}}{{bookmark.formattedReminder}}
</span>
{{/if}}
{{#if bookmark.reminder_at}}
{{#if bookmark.name}}
<span class="bookmark-metadata-item">
{{d-icon "far-clock"}}{{bookmark.formattedReminder}}
{{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}}
Expand Down
2 changes: 1 addition & 1 deletion app/assets/javascripts/discourse/app/templates/components/topic-status.hbs
View file
Expand Up @@ -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 change: 1 addition & 0 deletions app/assets/stylesheets/common/base/_topic-list.scss
View file
Expand Up @@ -160,6 +160,7 @@
margin-top: 0.5em;
margin-bottom: 0.5em;
font-size: $font-down-2;
word-break: break-word;
}
}

Expand Down
46 changes: 28 additions & 18 deletions app/assets/stylesheets/common/components/bookmark-list.scss
View file
Expand Up @@ -28,7 +28,6 @@ $mobile-breakpoint: 700px;
}
@media (max-width: $mobile-breakpoint) {
.main-link {
padding-left: 0.5em;
padding-right: 0.5em;
}
}
Expand All @@ -45,37 +44,48 @@ $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 {
display: flex;
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;
}
}
}

1 comment on commit a049b8f

@discoursebot
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This commit has been mentioned on Discourse Meta. There might be relevant details there:

https://meta.discourse.org/t/links-and-long-continuous-text-on-bookmarks-page-no-line-break/198339/3

Please sign in to comment.