From: Simounet Date: Tue, 5 Dec 2017 21:44:48 +0000 (+0100) Subject: Tags list view improved X-Git-Tag: 2.3.0~7^2~2 X-Git-Url: https://git.immae.eu/?p=github%2Fwallabag%2Fwallabag.git;a=commitdiff_plain;h=3e7d86b2c503a390560fd16c4f8c8c103bd09069 Tags list view improved No text ellipsis so we can see the whole tag, better responsiveness, bigger touch height on links. --- 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%; + } +} diff --git a/src/Wallabag/CoreBundle/Resources/views/themes/material/Tag/tags.html.twig b/src/Wallabag/CoreBundle/Resources/views/themes/material/Tag/tags.html.twig index 97ddedc9..c15b5146 100644 --- a/src/Wallabag/CoreBundle/Resources/views/themes/material/Tag/tags.html.twig +++ b/src/Wallabag/CoreBundle/Resources/views/themes/material/Tag/tags.html.twig @@ -12,10 +12,10 @@