From 5434577883041ea1640b9b9e5221d6edb52779ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicolas=20L=C5=93uillet?= <nicolas@loeuillet.org>
Date: Tue, 1 Oct 2019 15:40:04 +0200
Subject: Improved tags list for material view

---
 .../static/themes/material/css/cards.scss          | 24 ++++++++--------------
 .../static/themes/material/css/media_queries.scss  |  4 ----
 2 files changed, 9 insertions(+), 19 deletions(-)

(limited to 'app/Resources/static')

diff --git a/app/Resources/static/themes/material/css/cards.scss b/app/Resources/static/themes/material/css/cards.scss
index 9ae1be82..80c9f253 100644
--- a/app/Resources/static/themes/material/css/cards.scss
+++ b/app/Resources/static/themes/material/css/cards.scss
@@ -173,7 +173,6 @@ a.original:not(.waves-effect) {
 
 .card-tag-labels li {
   display: flex;
-  justify-content: space-between;
 }
 
 .card-entry-tags a,
@@ -186,15 +185,12 @@ 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;
+  width: calc(100% - 48px);
+  line-height: 1.3;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 
 .card-tag-form {
@@ -205,22 +201,20 @@ a.original:not(.waves-effect) {
 
 .card-tag-form input {
   margin-bottom: 0;
-  height: 2rem;
+  height: 1.8rem;
 }
 
-.card-tag-rss {
+.card-tag-icon {
   display: flex;
 }
 
 .card-tag-labels {
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 }
 
 .card-tag-labels li {
   margin: 10px;
-  flex-basis: 19%;
-  flex-grow: 1;
   align-items: center;
 }
 
diff --git a/app/Resources/static/themes/material/css/media_queries.scss b/app/Resources/static/themes/material/css/media_queries.scss
index 4242ead2..b50dd559 100644
--- a/app/Resources/static/themes/material/css/media_queries.scss
+++ b/app/Resources/static/themes/material/css/media_queries.scss
@@ -12,10 +12,6 @@
   .pagination {
     margin-left: auto;
   }
-
-  .card-tag-labels li {
-    max-width: 50%;
-  }
 }
 
 @media screen and (min-width: 993px) {
-- 
cgit v1.2.3