diff --git a/assets/components/entities/entity.vue b/assets/components/entities/entity.vue index c23d1fc8..a52da49c 100644 --- a/assets/components/entities/entity.vue +++ b/assets/components/entities/entity.vue @@ -51,7 +51,7 @@ >{{ tag.name }} - {{ entity.parent.name }} - +
- + class="name" + >{{ entity.name }} +
{{ entity.name }} + class="count" + > + {{ entity.sceneTotal }} scenes + {{ entity.childrenTotal }} channels + @@ -59,15 +68,27 @@ export default { height: 100%; background: var(--tile); display: flex; + flex-direction: column; flex-shrink: 0; justify-content: center; align-items: center; box-sizing: border-box; - padding: .5rem 1rem; border-radius: .25rem; + position: relative; box-shadow: 0 0 3px rgba(0, 0, 0, .25); text-align: center; text-decoration: none; + + &:hover .count { + color: var(--lighten); + } +} + +.tile-logo { + display: flex; + flex-grow: 1; + padding: .5rem 1rem; + overflow: hidden; } .logo { @@ -75,6 +96,7 @@ export default { max-height: 100%; display: flex; align-items: center; + align-self: center; } .name { @@ -82,4 +104,16 @@ export default { font-size: 1.25rem; font-weight: bold; } + +.count { + display: flex; + justify-content: space-between; + width: 100%; + box-sizing: border-box; + padding: .25rem .5rem; + border-top: solid 1px var(--lighten-hint); + color: var(--lighten-weak); + text-align: center; + font-size: .8rem; +} diff --git a/assets/components/filters/filter-bar.vue b/assets/components/filters/filter-bar.vue index 75bf103b..944862d1 100644 --- a/assets/components/filters/filter-bar.vue +++ b/assets/components/filters/filter-bar.vue @@ -1,15 +1,20 @@