feat(riot-mui): upgrade tag history components

Author: Joxit

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,

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

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

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