From 9b120bb6d5b94f288cd1aeb30b599563ae8aaedc Mon Sep 17 00:00:00 2001
From: Joxit <joxit972@gmail.com>
Date: Tue, 1 Jan 2019 22:46:23 +0100
Subject: [PATCH] [feat #56] Update catalog, use material-cards instead of list

---
 src/style.css        | 11 ++++++++++-
 src/tags/catalog.tag | 15 ++++++---------
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/style.css b/src/style.css
index 64d9880..ff97e3f 100644
--- a/src/style.css
+++ b/src/style.css
@@ -99,11 +99,12 @@ h2 {
   list-style: none;
 }
 
-.list.highlight > li:hover {
+.list.highlight:hover {
   background-color: #eee;
   cursor: pointer;
 }
 
+.list > span,
 .list > li {
   box-sizing: border-box;
   line-height: 1;
@@ -112,6 +113,7 @@ h2 {
   overflow: hidden;
 }
 
+.list > span i.material-icons,
 .list > li i.material-icons {
   margin-right: 32px;
   height: 24px;
@@ -121,6 +123,7 @@ h2 {
   color: #757575;
 }
 
+.list > span,
 .list > li > span {
   height: 100%;
   text-decoration: none;
@@ -133,6 +136,11 @@ h2 {
   align-items: center;
 }
 
+material-card.list {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
 .material-card-title-action {
   -webkit-align-items: center;
   -ms-flex-align: center;
@@ -345,6 +353,7 @@ select {
   text-align: center;
 }
 
+catalog material-card,
 tag-history material-card {
   min-height: auto;
 }
diff --git a/src/tags/catalog.tag b/src/tags/catalog.tag
index d31e732..4e7a15d 100644
--- a/src/tags/catalog.tag
+++ b/src/tags/catalog.tag
@@ -26,16 +26,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     <div hide="{ registryUI.catalog.loadend }" class="spinner-wrapper">
       <material-spinner></material-spinner>
     </div>
-    <ul class="list highlight" show="{ registryUI.catalog.loadend }">
-      <li each="{ item in registryUI.catalog.repositories }" onclick="registryUI.taglist.go('{item}');">
-        <span>
-          <i class="material-icons">send</i>
-          { item }
-        </span>
-      </li>
-    </ul>
   </material-card>
-
+  <material-card each="{ item in registryUI.catalog.repositories }" class="list highlight" onclick="registryUI.taglist.go('{item}');">
+    <span>
+      <i class="material-icons">send</i>
+      { item }
+    </span>
+  </material-card>
   <script>
     registryUI.catalog.instance = this;
     registryUI.catalog.display = function() {