From eec736d4e807185fa18d81a505f28ea8244e4629 Mon Sep 17 00:00:00 2001
From: Joxit <joxit972@gmail.com>
Date: Wed, 17 Jul 2019 23:59:59 +0200
Subject: [PATCH] feat: Indent aggregated entries after expansion

closes: #90
---
 src/style.css                | 4 ++++
 src/tags/catalog-element.tag | 4 ++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/style.css b/src/style.css
index ca3b8ac..284d7a8 100644
--- a/src/style.css
+++ b/src/style.css
@@ -490,6 +490,10 @@ catalog-element catalog-element.hide material-card {
   opacity: 0;
 }
 
+catalog-element catalog-element .list > span i.material-icons {
+  margin-right: 48px;
+}
+
 remove-image {
   width: 30px;
 }
diff --git a/src/tags/catalog-element.tag b/src/tags/catalog-element.tag
index 3d06713..a727e02 100644
--- a/src/tags/catalog-element.tag
+++ b/src/tags/catalog-element.tag
@@ -21,13 +21,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     <span>
       <i class="material-icons">send</i>
       { typeof opts.item === "string" ? opts.item : opts.item.repo }
-      <div hide="{typeof opts.item === "string"}" class="item-count right">
+      <div if="{typeof opts.item !== "string"}" class="item-count right">
         { opts.item.images && opts.item.images.length } images
         <i class="material-icons animated {expanded: opts.expanded}">expand_more</i>
       </div>
     </span>
   </material-card>
-  <catalog-element hide="{typeof opts.item === "string"}" class="animated {hide: !expanded, expanding: expanding}" each="{item in item.images}" />
+  <catalog-element if="{typeof opts.item !== "string"}" class="animated {hide: !expanded, expanding: expanding}" each="{item in item.images}" />
   <script>
     this.on('mount', function() {
       const self = this;