From 8ab01b8d82795ef1b33ba6e95ba74eb6acedcd12 Mon Sep 17 00:00:00 2001
From: Alison <astanton+git@bankofknowledge.net>
Date: Sun, 9 Sep 2018 22:37:52 -0500
Subject: [PATCH 1/3] address tag display on query list page

---
 client/app/assets/less/redash/redash-newstyle.less | 2 ++
 client/app/assets/less/redash/redash-table.less    | 5 +++++
 client/app/pages/queries-list/queries-list.html    | 5 +++--
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/client/app/assets/less/redash/redash-newstyle.less b/client/app/assets/less/redash/redash-newstyle.less
index 8a7dfb1c98..76cf59c4d6 100644
--- a/client/app/assets/less/redash/redash-newstyle.less
+++ b/client/app/assets/less/redash/redash-newstyle.less
@@ -453,6 +453,8 @@ page-header, .page-header--new {
   background: fade(@redash-gray, 10%);
   color: fade(@redash-gray, 75%);
   margin-right: 3px;
+  display: inline-block;
+  margin-top: 2px;
 }
 
 .tab-nav > li > a {
diff --git a/client/app/assets/less/redash/redash-table.less b/client/app/assets/less/redash/redash-table.less
index 1c03c457c9..04bb239544 100644
--- a/client/app/assets/less/redash/redash-table.less
+++ b/client/app/assets/less/redash/redash-table.less
@@ -120,3 +120,8 @@
   border: 1px solid rgb(240, 240, 240);
 }
 
+.maxwidth300 {
+  float: left;
+  max-width: 300px;
+}
+
diff --git a/client/app/pages/queries-list/queries-list.html b/client/app/pages/queries-list/queries-list.html
index 966625bba5..29b343c44a 100644
--- a/client/app/pages/queries-list/queries-list.html
+++ b/client/app/pages/queries-list/queries-list.html
@@ -97,8 +97,9 @@
               <td class="table-main-title">
                 <a href="queries/{{query.id}}">{{query.name}}</a>
                 <br>
-                <span class="label label-default" ng-if="query.is_draft">Unpublished</span>
-                <tags-control item="query"></tags-control>
+                <span class="maxwidth300">
+                  <span class="label label-default" ng-if="query.is_draft">Unpublished</span> <tags-control item="query"></tags-control>
+                </span>
               </td>
               <td class="p-r-0">
                 <img ng-src="{{query.user.profile_image_url}}" class="profile__image_thumb" title="Created by {{query.user.name}}" />

From e09920a64a5c09bc6b2cfbc982aac4a785606488 Mon Sep 17 00:00:00 2001
From: Alison <astanton+git@bankofknowledge.net>
Date: Sun, 14 Oct 2018 17:27:12 -0500
Subject: [PATCH 2/3] character limit tags in css

---
 client/app/assets/less/inc/list-group.less         | 7 ++++++-
 client/app/assets/less/redash/redash-newstyle.less | 9 +++++++++
 client/app/assets/less/redash/redash-table.less    | 5 -----
 client/app/components/tags-list/tags-list.html     | 2 +-
 client/app/pages/queries-list/queries-list.html    | 4 ++--
 5 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/client/app/assets/less/inc/list-group.less b/client/app/assets/less/inc/list-group.less
index 7b32d033e4..e3264195e5 100755
--- a/client/app/assets/less/inc/list-group.less
+++ b/client/app/assets/less/inc/list-group.less
@@ -17,7 +17,12 @@
     }
 }
 
- .list-group-item {
+.max-character {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.list-group-item {
    &.active {
      button {
        color: white;
diff --git a/client/app/assets/less/redash/redash-newstyle.less b/client/app/assets/less/redash/redash-newstyle.less
index 76cf59c4d6..a90d39efad 100644
--- a/client/app/assets/less/redash/redash-newstyle.less
+++ b/client/app/assets/less/redash/redash-newstyle.less
@@ -449,12 +449,21 @@ page-header, .page-header--new {
   background: fade(@redash-gray, 85%);
 }
 
+.label-default-unpublished {
+  background: fade(@redash-gray, 85%);
+  display: inline-block;
+  overflow: hidden;
+}
+
 .label-tag {
   background: fade(@redash-gray, 10%);
   color: fade(@redash-gray, 75%);
   margin-right: 3px;
   display: inline-block;
   margin-top: 2px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  max-width: 24ch;
 }
 
 .tab-nav > li > a {
diff --git a/client/app/assets/less/redash/redash-table.less b/client/app/assets/less/redash/redash-table.less
index 04bb239544..1c03c457c9 100644
--- a/client/app/assets/less/redash/redash-table.less
+++ b/client/app/assets/less/redash/redash-table.less
@@ -120,8 +120,3 @@
   border: 1px solid rgb(240, 240, 240);
 }
 
-.maxwidth300 {
-  float: left;
-  max-width: 300px;
-}
-
diff --git a/client/app/components/tags-list/tags-list.html b/client/app/components/tags-list/tags-list.html
index 9284d34973..2b0cf84ce2 100644
--- a/client/app/components/tags-list/tags-list.html
+++ b/client/app/components/tags-list/tags-list.html
@@ -1,5 +1,5 @@
 <div class="list-group m-t-10 tags-list tiled" ng-if="$ctrl.allTags.length > 0">
-    <a ng-repeat="tag in $ctrl.allTags" ng-class="{active: $ctrl.selectedTags.has(tag)}" class="list-group-item" ng-click="$ctrl.toggleTag($event, tag)">
+    <a ng-repeat="tag in $ctrl.allTags" ng-class="{active: $ctrl.selectedTags.has(tag)}" class="list-group-item max-character" ng-click="$ctrl.toggleTag($event, tag)">
         {{ tag }}
     </a>
 </div>
\ No newline at end of file
diff --git a/client/app/pages/queries-list/queries-list.html b/client/app/pages/queries-list/queries-list.html
index 29b343c44a..929ab0e2b2 100644
--- a/client/app/pages/queries-list/queries-list.html
+++ b/client/app/pages/queries-list/queries-list.html
@@ -97,8 +97,8 @@
               <td class="table-main-title">
                 <a href="queries/{{query.id}}">{{query.name}}</a>
                 <br>
-                <span class="maxwidth300">
-                  <span class="label label-default" ng-if="query.is_draft">Unpublished</span> <tags-control item="query"></tags-control>
+                <span>
+                  <span class="label label-default-unpublished" ng-if="query.is_draft">Unpublished</span> <tags-control item="query"></tags-control>
                 </span>
               </td>
               <td class="p-r-0">

From 26142aa9b93ed211ceef989d4a4a66df0f9dc824 Mon Sep 17 00:00:00 2001
From: Alison <astanton+git@bankofknowledge.net>
Date: Sun, 21 Oct 2018 12:51:04 -0500
Subject: [PATCH 3/3] updates to tags on levko's feedback

---
 client/app/assets/less/inc/list-group.less             |  3 +--
 client/app/assets/less/redash/redash-newstyle.less     |  3 +--
 .../app/components/tags-control/control-template.html  |  2 +-
 client/app/components/tags-list/tags-list.html         |  2 +-
 client/app/pages/queries-list/queries-list.html        | 10 +++++-----
 5 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/client/app/assets/less/inc/list-group.less b/client/app/assets/less/inc/list-group.less
index e3264195e5..c068fb8bc0 100755
--- a/client/app/assets/less/inc/list-group.less
+++ b/client/app/assets/less/inc/list-group.less
@@ -18,8 +18,7 @@
 }
 
 .max-character {
-  text-overflow: ellipsis;
-  overflow: hidden;
+  .text-overflow();
 }
 
 .list-group-item {
diff --git a/client/app/assets/less/redash/redash-newstyle.less b/client/app/assets/less/redash/redash-newstyle.less
index 4594c88289..2b54ffa2bd 100644
--- a/client/app/assets/less/redash/redash-newstyle.less
+++ b/client/app/assets/less/redash/redash-newstyle.less
@@ -461,9 +461,8 @@ page-header, .page-header--new {
   margin-right: 3px;
   display: inline-block;
   margin-top: 2px;
-  text-overflow: ellipsis;
-  overflow: hidden;
   max-width: 24ch;
+  .text-overflow();
 }
 
 .tab-nav > li > a {
diff --git a/client/app/components/tags-control/control-template.html b/client/app/components/tags-control/control-template.html
index 097f931d0c..65a1a09a1e 100644
--- a/client/app/components/tags-control/control-template.html
+++ b/client/app/components/tags-control/control-template.html
@@ -1,4 +1,4 @@
-<span class="label label-tag" ng-repeat="tag in $ctrl.item.tags">{{ tag }}</span
+<span class="label label-tag" ng-repeat="tag in $ctrl.item.tags" title="{{tag}}">{{ tag }}</span
 ><a ng-if="$ctrl.canEdit && $ctrl.item.tags.length == 0" class="label label-tag"
   ng-click="$ctrl.editTags()"><i class="zmdi zmdi-plus"></i> Add tag</a
 ><a ng-if="$ctrl.canEdit && $ctrl.item.tags.length > 0" class="label label-tag"
diff --git a/client/app/components/tags-list/tags-list.html b/client/app/components/tags-list/tags-list.html
index a148fb4a99..0aeb28ea5e 100644
--- a/client/app/components/tags-list/tags-list.html
+++ b/client/app/components/tags-list/tags-list.html
@@ -1,5 +1,5 @@
 <div class="list-group m-t-10 tags-list tiled" ng-if="$ctrl.allTags.length > 0">
-    <a ng-repeat="tag in $ctrl.allTags" ng-class="{active: $ctrl.selectedTags.has(tag.name)}" class="list-group-item max-character" ng-click="$ctrl.toggleTag($event, tag.name)">
+    <a ng-repeat="tag in $ctrl.allTags" ng-class="{active: $ctrl.selectedTags.has(tag.name)}" class="list-group-item max-character" ng-click="$ctrl.toggleTag($event, tag.name)" title="{{tag.name}}">
         {{ tag.name }} <span class="badge badge-light">{{ tag.count }}</span>
     </a>
 </div>
diff --git a/client/app/pages/queries-list/queries-list.html b/client/app/pages/queries-list/queries-list.html
index c403acee3d..5ba5349c88 100644
--- a/client/app/pages/queries-list/queries-list.html
+++ b/client/app/pages/queries-list/queries-list.html
@@ -100,13 +100,13 @@
                   <span class="label label-default-unpublished" ng-if="query.is_draft">Unpublished</span> <tags-control item="query"></tags-control>
                 </span>
               </td>
-              <td class="p-r-0">
+              <td class="p-r-0 text-nowrap">
                 <img ng-src="{{query.user.profile_image_url}}" class="profile__image_thumb" title="Created by {{query.user.name}}" />
               </td>
-              <td>{{query.created_at | dateTime}}</td>
-              <td>{{query.runtime | durationHumanize}}</td>
-              <td>{{query.retrieved_at | dateTime}}</td>
-              <td>{{query.schedule | scheduleHumanize}}</td>
+              <td class="text-nowrap">{{query.created_at | dateTime}}</td>
+              <td class="text-nowrap">{{query.runtime | durationHumanize}}</td>
+              <td class="text-nowrap">{{query.retrieved_at | dateTime}}</td>
+              <td class="text-nowrap">{{query.schedule | scheduleHumanize}}</td>
             </tr>
           </tbody>
         </table>