UX: User bookmark page style adjustments (#13869)

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

@@ -2,66 +2,55 @@
   {{#load-more selector=".bookmark-list .bookmark-list-item" action=loadMore}}
     <table class="topic-list bookmark-list">
       <thead>
-        {{#if site.mobileView}}
+        {{#unless site.mobileView}}
-          <th>&nbsp;</th>
-          <th>{{i18n "topic.title"}}</th>
-          <th>&nbsp;</th>
-        {{else}}
           <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}}

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

@@ -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)~}}

app/assets/stylesheets/common/base/_topic-list.scss

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

app/assets/stylesheets/common/components/bookmark-list.scss

@@ -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.25em;
-    margin-bottom: 0.2em;
 
     &-item {
-      margin-right: 0.5em;
+      display: inline-block;
-      display: flex;
+      margin-right: 1em;
-      align-items: center;
+      margin-bottom: 0.25em;
+      line-height: $line-height-medium;
+      span {
+        word-break: break-word;
+      }
     }
 
     .d-icon {
-      // not aligning center because of multi-line notes
+      margin-right: 0.25em;
-      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;
-      }
     }
   }
   .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;
     }
   }
 }