Remove jquery-ui accordions

core/static/core/accordion.scss

@@ -0,0 +1,39 @@
+details.accordion summary {
+  margin: 2px 0 0 0;
+  padding: .5em .5em .5em .7em;
+  cursor: pointer;
+  user-select: none;
+
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+
+}
+
+details[open].accordion summary {
+  border: 1px solid #003eff;
+  background: #007fff;
+  color: #ffffff;
+}
+
+
+details:not([open]).accordion summary {
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+
+  border: 1px solid #c5c5c5;
+  background: #f6f6f6;
+  color: #454545;
+}
+
+
+// ::details-content isn't available on firefox yet
+// we use .accordion-content as a workaround
+details.accordion>.accordion-content {
+  background: #ffffff;
+  color: #333333;
+  padding: 1em 2.2em;
+  overflow: auto;
+  border: 1px solid #dddddd;
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}

core/templates/core/base.jinja

@@ -12,6 +12,7 @@
       <link rel="stylesheet" href="{{ static('core/header.scss') }}">
       <link rel="stylesheet" href="{{ static('core/navbar.scss') }}">
       <link rel="stylesheet" href="{{ static('core/pagination.scss') }}">
+      <link rel="stylesheet" href="{{ static('core/accordion.scss') }}">
 
       {% block jquery_css %}
         {# Thile file is quite heavy (around 250kb), so declaring it in a block allows easy removal #}

core/templates/core/user_account.jinja

@@ -1,7 +1,7 @@
 {% extends "core/base.jinja" %}
 
 {% macro monthly(objects) %}
-  <div>
+  <div class="accordion-content">
     <table>
       <thead>
         <tr>
@@ -37,22 +37,28 @@
   {% if customer %}
     <h3>{% trans %}User account{% endtrans %}</h3>
     <p>{% trans %}Amount: {% endtrans %}{{ customer.amount }} €</p>
-    <div id="drop">
-      {% if buyings_month %}
-        <h5>{% trans %}Account purchases{% endtrans %}</h5>
+    {% if buyings_month %}
+      <details class="accordion" name="account" open>
+        <summary>{% trans %}Account purchases{% endtrans %}</summary>
         {{ monthly(buyings_month) }}
-      {% endif %}
-      {% if refilling_month %}
-        <h5>{% trans %}Reloads{% endtrans %}</h5>
+      </details>
+    {% endif %}
+    {% if refilling_month %}
+      <details class="accordion" name="account">
+        <summary>{% trans %}Reloads{% endtrans %}</summary>
         {{ monthly(refilling_month) }}
-      {% endif %}
-      {% if invoices_month %}
-        <h5>{% trans %}Eboutic invoices{% endtrans %}</h5>
+      </details>
+    {% endif %}
+    {% if invoices_month %}
+      <details class="accordion" name="account">
+        <summary>{% trans %}Eboutic invoices{% endtrans %}</summary>
         {{ monthly(invoices_month) }}
-      {% endif %}
-      {% if etickets %}
-        <h4>{% trans %}Etickets{% endtrans %}</h4>
-        <div>
+      </details>
+    {% endif %}
+    {% if etickets %}
+      <details class="accordion" name="account">
+        <summary>{% trans %}Etickets{% endtrans %}</summary>
+        <div class="accordion-content">
           <ul>
             {% for s in etickets %}
               <li>
@@ -63,22 +69,9 @@
             {% endfor %}
           </ul>
         </div>
-      {% endif %}
-    </div>
+      </details>
+    {% endif %}
   {% else %}
     <p>{% trans %}User has no account{% endtrans %}</p>
   {% endif %}
 {% endblock %}
-
-{% block script %}
-  {{ super() }}
-  <script>
-    $(function(){
-      $("#drop").accordion({
-        heightStyle: "content"
-      });
-    });
-  </script>
-{% endblock %}
-
-

core/templates/core/user_detail.jinja

@@ -254,13 +254,5 @@
         keys.shift();
       }
     });
-
-    $(function () {
-      $("#drop_gifts").accordion({
-        heightStyle: "content",
-        collapsible: true,
-        active: false
-      });
-    });
   </script>
 {% endblock %}