From 6255e7c03b7981ccd686ca317de432052fc34a7b Mon Sep 17 00:00:00 2001
From: Toby Zerner <toby.zerner@gmail.com>
Date: Thu, 13 Aug 2015 12:53:23 +0930
Subject: [PATCH] New look for Tags page

---
 .../tags/js/forum/src/components/TagsPage.js  | 20 ++++------
 extensions/tags/less/forum/TagCloud.less      | 27 ++------------
 extensions/tags/less/forum/TagTiles.less      | 37 +++++++++++++++----
 extensions/tags/less/forum/extension.less     | 17 +++++++++
 extensions/tags/locale/en.yml                 |  1 -
 .../tags/src/Listeners/AddClientAssets.php    |  1 -
 6 files changed, 58 insertions(+), 45 deletions(-)

diff --git a/extensions/tags/js/forum/src/components/TagsPage.js b/extensions/tags/js/forum/src/components/TagsPage.js
index 5df181309..362af6c0a 100644
--- a/extensions/tags/js/forum/src/components/TagsPage.js
+++ b/extensions/tags/js/forum/src/components/TagsPage.js
@@ -3,6 +3,7 @@ import IndexPage from 'flarum/components/IndexPage';
 import listItems from 'flarum/helpers/listItems';
 import humanTime from 'flarum/helpers/humanTime';
 
+import tagLabel from 'tags/helpers/tagLabel';
 import sortTags from 'tags/utils/sortTags';
 
 export default class TagsPage extends Component {
@@ -74,19 +75,14 @@ export default class TagsPage extends Component {
 
             {cloud.length ? (
               <div className="TagCloud">
-                <h4 className="TagCloud-title">{app.trans('tags.tag_cloud_title')}</h4>
-                <div className="TagCloud-content">
-                  {cloud.map(tag => {
-                    const color = tag.color();
+                {cloud.map(tag => {
+                  const color = tag.color();
 
-                    return [
-                      <a href={app.route.tag(tag)} config={m.route} style={color ? {color} : ''}>
-                        {tag.name()}
-                      </a>,
-                      ' '
-                    ];
-                  })}
-                </div>
+                  return [
+                    tagLabel(tag, {link: true}),
+                    ' '
+                  ];
+                })}
               </div>
             ) : ''}
           </div>
diff --git a/extensions/tags/less/forum/TagCloud.less b/extensions/tags/less/forum/TagCloud.less
index d9e3c2477..03dbfcd33 100644
--- a/extensions/tags/less/forum/TagCloud.less
+++ b/extensions/tags/less/forum/TagCloud.less
@@ -1,29 +1,10 @@
 .TagCloud {
-  margin-top: 50px;
+  margin-top: 30px;
   text-align: center;
-}
-.TagCloud-title {
-  font-size: 12px;
-  font-weight: bold;
-  color: @muted-color;
-  text-transform: uppercase;
-  margin-bottom: 15px;
+  font-size: 16px;
+  line-height: 1.6;
 
-  &:before {
-    .fa();
-    content: @fa-var-tags;
-    margin-right: 5px;
-    font-size: 14px;
-  }
-}
-.TagCloud-content {
-  font-size: 14px;
-  line-height: 1.7;
-
-  &, a {
-    color: @muted-color;
-  }
   a {
-    margin: 0 6px;
+    margin-bottom: 5px;
   }
 }
diff --git a/extensions/tags/less/forum/TagTiles.less b/extensions/tags/less/forum/TagTiles.less
index d3c86bbf2..d712215e9 100644
--- a/extensions/tags/less/forum/TagTiles.less
+++ b/extensions/tags/less/forum/TagTiles.less
@@ -12,7 +12,7 @@
     height: 200px;
     overflow: hidden;
 
-    @media @tablet-up {
+    @media @tablet {
       float: left;
       width: 50%;
 
@@ -29,6 +29,29 @@
         border-bottom-left-radius: @border-radius;
       }
     }
+    @media @desktop-up {
+      float: left;
+      width: 33.333%;
+
+      &:first-child {
+        border-top-left-radius: @border-radius;
+      }
+      &:nth-child(3),
+      &:nth-child(2):last-child,
+      &:first-child:last-child {
+        border-top-right-radius: @border-radius;
+      }
+      &:nth-child(3n):nth-last-child(2),
+      &:nth-child(3n):nth-last-child(3),
+      &:last-child {
+        border-bottom-right-radius: @border-radius;
+      }
+      &:nth-child(3n+1):last-child,
+      &:nth-child(3n+1):nth-last-child(2),
+      &:nth-child(3n+1):nth-last-child(3) {
+        border-bottom-left-radius: @border-radius;
+      }
+    }
   }
 }
 
@@ -55,7 +78,7 @@
 }
 .TagTile-info {
   top: 0;
-  bottom: 45px;
+  bottom: 42px;
   padding-right: 20px;
   transition: background 0.2s;
 
@@ -83,18 +106,16 @@
 }
 .TagTile-lastDiscussion {
   bottom: 0;
-  height: 45px;
-  padding-top: 12px;
+  height: 42px;
+  padding: 7px 0;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
   line-height: 21px;
   opacity: 0.7;
   font-size: 12px;
-
-  &, &:hover {
-    background: fade(#000, 10%);
-  }
+  border-top: 1px solid rgba(0, 0, 0, 0.15);
+  margin: 0 20px;
 
   &:hover .TagTile-lastDiscussion-title {
     text-decoration: underline;
diff --git a/extensions/tags/less/forum/extension.less b/extensions/tags/less/forum/extension.less
index d69036eab..11a350604 100644
--- a/extensions/tags/less/forum/extension.less
+++ b/extensions/tags/less/forum/extension.less
@@ -38,3 +38,20 @@
     }
   }
 }
+@media @desktop-up {
+  .TagsPage {
+    .sideNav {
+      .sideNav--horizontal();
+      float: none;
+      width: auto;
+      padding-top: 0;
+
+      &:after {
+        display: none;
+      }
+    }
+    .sideNavOffset {
+      margin: 15px 0 0;
+    }
+  }
+}
diff --git a/extensions/tags/locale/en.yml b/extensions/tags/locale/en.yml
index 66846de51..9b2593bfd 100644
--- a/extensions/tags/locale/en.yml
+++ b/extensions/tags/locale/en.yml
@@ -15,5 +15,4 @@ tags:
     other: "Choose {count} more tags"
   confirm: Confirm
   more: More...
-  tag_cloud_title: Tags
   deleted: Deleted
diff --git a/extensions/tags/src/Listeners/AddClientAssets.php b/extensions/tags/src/Listeners/AddClientAssets.php
index 9d311ad82..cb59ed134 100755
--- a/extensions/tags/src/Listeners/AddClientAssets.php
+++ b/extensions/tags/src/Listeners/AddClientAssets.php
@@ -39,7 +39,6 @@ class AddClientAssets
             'tags.choose_secondary_tags',
             'tags.confirm',
             'tags.more',
-            'tags.tag_cloud_title',
             'tags.deleted'
         ]);