From 3e7d86b2c503a390560fd16c4f8c8c103bd09069 Mon Sep 17 00:00:00 2001 From: Simounet Date: Tue, 5 Dec 2017 22:44:48 +0100 Subject: Tags list view improved No text ellipsis so we can see the whole tag, better responsiveness, bigger touch height on links. --- .../static/themes/material/css/cards.scss | 44 +++++++++++++++++++++- 1 file changed, 42 insertions(+), 2 deletions(-) (limited to 'app/Resources/static/themes') 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%; + } +} -- cgit v1.2.3 From c235cb75cdc003e4bbca2732647f029277da594b Mon Sep 17 00:00:00 2001 From: Simounet Date: Tue, 5 Dec 2017 22:50:59 +0100 Subject: Fix duplicated code removed --- app/Resources/static/themes/material/css/cards.scss | 14 -------------- 1 file changed, 14 deletions(-) (limited to 'app/Resources/static/themes') diff --git a/app/Resources/static/themes/material/css/cards.scss b/app/Resources/static/themes/material/css/cards.scss index b93862d0..e244ad3f 100644 --- a/app/Resources/static/themes/material/css/cards.scss +++ b/app/Resources/static/themes/material/css/cards.scss @@ -73,20 +73,6 @@ main { white-space: nowrap; } - .card-entry-labels-hidden li { - display: inline-block; - background-color: $blueAccentColor; - margin: 0 5px; - padding: 5px 12px; - border-radius: 3px; - color: #fff; - max-height: 2em; - max-width: calc(100% - 15px); - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - .card-content .estimatedTime { margin-bottom: 10px; } -- cgit v1.2.3 From 7475924eac4ac825a19a4cc992545fa7dd93332b Mon Sep 17 00:00:00 2001 From: Simounet Date: Tue, 5 Dec 2017 22:57:29 +0100 Subject: Border radius on every corner of tag's list --- app/Resources/static/themes/material/css/cards.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'app/Resources/static/themes') diff --git a/app/Resources/static/themes/material/css/cards.scss b/app/Resources/static/themes/material/css/cards.scss index e244ad3f..8ef864d6 100644 --- a/app/Resources/static/themes/material/css/cards.scss +++ b/app/Resources/static/themes/material/css/cards.scss @@ -143,7 +143,7 @@ a.original:not(.waves-effect) { margin: 10px 10px 10px auto; padding: 5px 12px 5px 16px !important; background-color: $blueAccentColor; - border-radius: 0 3px 3px 0; + border-radius: 3px; color: #fff; cursor: default; } @@ -151,6 +151,7 @@ a.original:not(.waves-effect) { .card-entry-labels li { text-overflow: ellipsis; white-space: nowrap; + border-radius: 0 3px 3px 0; overflow: hidden; } -- cgit v1.2.3