Merge pull request #4090 from weseek/imprv/GW-6812-position-views-comments-tags

position views comments tags

src/client/js/components/Sidebar/RecentChanges.jsx

@@ -66,7 +66,7 @@ class RecentChanges extends React.Component {
     const tags = page.tags;
     const tagElements = tags.map((tag) => {
       return (
-        <a key={tag} href={`/_search?q=tag:${tag.name}`} className="grw-tag-label badge badge-secondary mr-2">
+        <a key={tag} href={`/_search?q=tag:${tag.name}`} className="grw-tag-label badge badge-secondary mr-2 small">
           {tag.name}
         </a>
       );
@@ -83,14 +83,15 @@ class RecentChanges extends React.Component {
               <PagePathHierarchicalLink linkedPagePath={linkedPagePathLatter} basePath={dPagePath.isRoot ? undefined : dPagePath.former} />
               {locked}
             </h5>
-            <div className="text-right small">
-              <span className="mr-1 footstamp-icon"><FootstampIcon /></span>
-              <span className="seen-user-count">{page.seenUsers.length}</span>
-              <i className="icon-bubble"></i>
-              <span>{page.commentCount}</span>
+            <div className="my-2">
+              <span className="footstamp-icon mr-1"><FootstampIcon /></span>
+              <span className="mr-2 grw-list-counts">{page.seenUsers.length}</span>
+              <i className="icon-bubble mr-1"></i>
+              <span className="mr-2 grw-list-counts">{page.commentCount}</span>
               { tagElements }
-              <br />
-              <FormattedDistanceDate id={page.id} date={page.updatedAt} />
+              <div className="pull-right small">
+                <FormattedDistanceDate id={page.id} date={page.updatedAt} />
+              </div>
             </div>
           </div>
         </div>

src/client/styles/scss/_recent-changes.scss

@@ -0,0 +1,15 @@
+.list-group {
+  .list-group-item {
+    .footstamp-icon {
+      svg {
+        width: 13.92px;
+        height: 13.95px;
+        viewbox: 0 0 13.9 13.9;
+      }
+    }
+
+    .grw-list-counts {
+      font-size: 12px;
+    }
+  }
+}

src/client/styles/scss/style-app.scss

@@ -56,6 +56,7 @@
 @import 'page';
 @import 'page-presentation';
 @import 'page-history';
+@import 'recent-changes';
 @import 'search';
 @import 'shortcuts';
 @import 'sidebar';