From 42f19fcef71aa1086c661d90a1a1a80c680cef16 Mon Sep 17 00:00:00 2001
From: Joxit <joxit972@gmail.com>
Date: Sun, 7 Jun 2020 22:52:30 +0200
Subject: [PATCH] feat(multi-arch): add tab for multi arch in history page

---
 src/style.css            | 27 +++++++++++++++++++++++++--
 src/tags/tag-history.tag |  2 ++
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/style.css b/src/style.css
index a5d224f..8c9e199 100644
--- a/src/style.css
+++ b/src/style.css
@@ -48,7 +48,7 @@ main {
   font-weight: inherit;
 }
 
-material-card, pagination .conatianer {
+material-card, material-tabs, pagination .conatianer {
   max-width: 95%;
   margin: auto;
   margin-top: 20px;
@@ -68,11 +68,34 @@ pagination .conatianer .pagination-centered {
 
 /* 1515px * 0.95 = 1440px */
 @media screen and (min-width: 1515px){
-  material-card, pagination .conatianer {
+  material-card, material-tabs, pagination .conatianer {
     max-width: 1440px;
   }
 }
 
+material-tabs {
+  display: block;
+  -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
+  -ms-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
+  -moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
+  -o-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
+  box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
+}
+
+material-tabs material-button,
+material-tabs material-button .content .text {
+  background-color: #fff;
+  color: #aaa;
+  text-transform: none;
+}
+
+material-tabs .line-wrapper .line {
+  background-color: #25313b;
+}
+material-tabs material-button.selected .content .text {
+  color: #25313b;
+}
+
 material-spinner {
   align-self: center;
 }
diff --git a/src/tags/tag-history.tag b/src/tags/tag-history.tag
index 53a1415..78c24a0 100644
--- a/src/tags/tag-history.tag
+++ b/src/tags/tag-history.tag
@@ -29,6 +29,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     <material-spinner/>
   </div>
 
+  <material-tabs useLine="true" tabs="{ [{title:'amd64'},{title:'armv7'}] }" color="#000"></material-tabs>
+
   <material-card each="{ guiElement in this.elements }" class="tag-history-element">
     <tag-history-element each="{ entry in guiElement }" if="{ entry.value && entry.value.length > 0}"/>
   </material-card>