[feat #56] Update catalog, use material-cards instead of list

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;
 }

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() {