From fe724c4d1fa69a527cb9f0e347965d37872491bf Mon Sep 17 00:00:00 2001
From: Joxit <joxit972@gmail.com>
Date: Mon, 5 Dec 2022 19:46:41 +0100
Subject: [PATCH] feat(riot-mui): upgrade tag history components

---
 src/components/catalog/catalog-element.riot |  2 +-
 src/components/tag-history/tag-history.riot | 16 ++++++++++++----
 src/scripts/router.js                       |  3 +++
 src/style.scss                              | 15 ---------------
 4 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/src/components/catalog/catalog-element.riot b/src/components/catalog/catalog-element.riot
index 01a1c0b..43a4823 100644
--- a/src/components/catalog/catalog-element.riot
+++ b/src/components/catalog/catalog-element.riot
@@ -77,7 +77,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       onClick() {
         const state = this.state;
         if (!state.repo) {
-          router.taglist(state.image);
+          router.goTaglist(state.image);
         } else {
           this.update({
             expanded: !this.state.expanded,
diff --git a/src/components/tag-history/tag-history.riot b/src/components/tag-history/tag-history.riot
index 52a9ddd..0a8c392 100644
--- a/src/components/tag-history/tag-history.riot
+++ b/src/components/tag-history/tag-history.riot
@@ -15,9 +15,17 @@ You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <tag-history>
-  <material-card ref="tag-history-tag" class="tag-history header">
+  <material-card>
     <div class="material-card-title-action">
-      <material-button waves-center="true" rounded="true" waves-color="#ddd" onClick="{ toTaglist }">
+      <material-button
+        color="rgba(0,0,0,0)"
+        text-color="#777"
+        waves-center="true"
+        rounded="true"
+        waves-color="#ddd"
+        href="{ toTaglist() }"
+        icon
+      >
         <i class="material-icons">arrow_back</i>
       </material-button>
       <h2>History of { props.image }:{ props.tag } <i class="material-icons">history</i></h2>
@@ -34,7 +42,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     onTabChanged="{ onTabChanged }"
   ></material-tabs>
 
-  <material-card each="{ element in state.elements }" class="tag-history-element">
+  <material-card each="{ element in state.elements }">
     <tag-history-element
       each="{ entry in element }"
       if="{ entry.value && entry.value.length > 0}"
@@ -128,7 +136,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         });
       },
       toTaglist() {
-        router.taglist(this.props.image);
+        return router.taglist(this.props.image);
       },
     };
     const eltIdx = function (e) {
diff --git a/src/scripts/router.js b/src/scripts/router.js
index 99534ee..3134f14 100644
--- a/src/scripts/router.js
+++ b/src/scripts/router.js
@@ -62,6 +62,9 @@ export default {
     return baseUrl({ page: null });
   },
   taglist(image) {
+    return `${baseUrl({ page: null })}#!/taglist/${image}`;
+  },
+  goTaglist(image) {
     router.push(`${baseUrl({ page: null })}#!/taglist/${image}`);
   },
   getTagListImage() {
diff --git a/src/style.scss b/src/style.scss
index 66d3dd7..0bed72a 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -392,21 +392,6 @@ taglist .image-size {
   width: 7em;
 }
 
-catalog material-card,
-tag-history material-card {
-  min-height: auto;
-}
-
-tag-history-button button {
-  background: none;
-  border: none;
-}
-
-material-card material-button {
-  max-height: 30px;
-  max-width: 30px;
-}
-
 material-button:hover material-waves {
   background: none;
 }