display graphs for exchange rates

2021-01-24 21:56:14 +01:00
parent d0f3c18eec
commit 6cfffd99c5
8 changed files with 215 additions and 1 deletions
@@ -0,0 +1,29 @@
+/* https://github.com/nathancahill/skeleton-tabs */
+ul.tab-nav {
+    list-style: none;
+    border-bottom: 1px solid #bbb;
+    padding-left: 5px;
+}
+
+ul.tab-nav li {
+    display: inline;
+}
+
+ul.tab-nav li a.button {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    margin-bottom: -1px;
+    border-bottom: none;
+}
+
+ul.tab-nav li a.active.button {
+    border-bottom: 0.175em solid #fff;
+}
+
+.tab-content .tab-pane {
+    display: none;
+}
+
+.tab-content .tab-pane.active {
+    display: block;
+}
@@ -0,0 +1,22 @@
+/* https://github.com/nathancahill/skeleton-tabs */
+(function() {
+    function main() {
+        var tabButtons = [].slice.call(document.querySelectorAll('ul.tab-nav li a.button'));
+
+        tabButtons.map(function(button) {
+            button.addEventListener('click', function() {
+                document.querySelector('li a.active.button').classList.remove('active');
+                button.classList.add('active');
+
+                document.querySelector('.tab-pane.active').classList.remove('active');
+                document.querySelector(button.getAttribute('href')).classList.add('active');
+            })
+        })
+    }
+
+    if (document.readyState !== 'loading') {
+        main();
+    } else {
+        document.addEventListener('DOMContentLoaded', main);
+    }
+})();
@@ -8,6 +8,8 @@
        <link rel="stylesheet" href="{% static 'css/style.css' %}">
        <link rel="stylesheet" href="{% static 'css/topnav.css' %}">
        <link rel="stylesheet" href="{% static 'css/accordion.css' %}">
+        <link rel="stylesheet" href="{% static 'css/skeleton-tabs.css' %}">
+        <script src="{% static 'js/skeleton-tabs.js' %}"></script>
    </head>
    <body>
        {% if user.is_authenticated %}