Tags list view improved

No text ellipsis so we can see the whole tag, better responsiveness, bigger
touch height on links.

1 files changed, 42 insertions, 2 deletions

diff --git a/app/Resources/static/themes/material/css/cards.scss b/app/Resources/static/themes/material/css/cards.scss
index 0819f0dc..b93862d0 100644
--- a/app/Resources/static/themes/material/css/cards.scss
+++ b/app/Resources/static/themes/material/css/cards.scss
@@ -160,10 +160,17 @@ a.original:not(.waves-effect) {
   border-radius: 0 3px 3px 0;
   color: #fff;
   cursor: default;
-  max-height: 2em;
-  overflow: hidden;
+}
+
+.card-entry-labels li {
   text-overflow: ellipsis;
   white-space: nowrap;
+  overflow: hidden;
+}
+
+.card-tag-labels li {
+  display: flex;
+  justify-content: space-between;
 }
 
 .card-entry-tags a,
@@ -176,6 +183,33 @@ a.original:not(.waves-effect) {
   color: #fff;
 }
 
+.card-tag-labels a {
+  height: 100%;
+  align-items: center;
+}
+
+.card-tag-link {
+  display: flex;
+  min-width: 100px;
+  flex-grow: 1;
+}
+
+.card-tag-rss {
+  display: flex;
+}
+
+.card-tag-labels {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.card-tag-labels li {
+  margin: 10px;
+  flex-basis: 19%;
+  flex-grow: 1;
+  align-items: center;
+}
+
 .card-stacked {
   display: flex;
   flex-flow: row wrap;
@@ -245,3 +279,9 @@ a.original:not(.waves-effect) {
 .settings .div_tabs {
   padding-bottom: 15px;
 }
+
+@media only screen and (min-width: 992px) {
+  .card-tag-labels li {
+    max-width: 50%;
+  }
+}