Remove fontawesome and jquery; use fontello and ES6 instead

src/static/script/artifacts.js

@@ -1,7 +1,15 @@
-$(() => {
-    $("div.artifact-item").on("click", "div.artifact-details", e => {
-        e.preventDefault();
-        let $artifact = $(e.delegateTarget);
-        $artifact.children("div.artifact-contents").toggle();
-    });
+window.addEventListener("load", () => {
+    let artifacts = document.querySelectorAll("div.artifact-item");
+    for(let artifact of artifacts) {
+        let contents = artifact.querySelector(".artifact-contents");
+        if(!contents || !(contents instanceof HTMLElement))
+            continue;
+        artifact.addEventListener("click", e => {
+            e.preventDefault();
+            if(contents.classList.contains("contents-visible"))
+                contents.classList.remove("contents-visible");
+            else
+                contents.classList.add("contents-visible");
+        });
+    }
 });

src/static/style/fontello/css/animation.css

@@ -0,0 +1,85 @@
+/*
+   Animation example, for spinners
+*/
+.animate-spin {
+  -moz-animation: spin 2s infinite linear;
+  -o-animation: spin 2s infinite linear;
+  -webkit-animation: spin 2s infinite linear;
+  animation: spin 2s infinite linear;
+  display: inline-block;
+}
+@-moz-keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@-webkit-keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@-o-keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@-ms-keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}

src/static/style/fontello/css/fontello-codes.css

@@ -0,0 +1,2 @@
+
+.icon-down-open:before { content: '\e800'; } /* '' */

src/static/style/fontello/css/fontello-ie7-codes.css

@@ -0,0 +1,2 @@
+
+.icon-down-open { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

src/static/style/fontello/css/fontello-ie7.css

@@ -0,0 +1,13 @@
+[class^="icon-"], [class*=" icon-"] {
+  font-family: 'fontello';
+  font-style: normal;
+  font-weight: normal;
+ 
+  /* fix buttons height */
+  line-height: 1em;
+ 
+  /* you can be more comfortable with increased icons size */
+  /* font-size: 120%; */
+}
+ 
+.icon-down-open { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

src/static/style/fontello/css/fontello.css

@@ -0,0 +1,58 @@
+@font-face {
+  font-family: 'fontello';
+  src: url('../font/fontello.eot?65643375');
+  src: url('../font/fontello.eot?65643375#iefix') format('embedded-opentype'),
+       url('../font/fontello.woff2?65643375') format('woff2'),
+       url('../font/fontello.woff?65643375') format('woff'),
+       url('../font/fontello.ttf?65643375') format('truetype'),
+       url('../font/fontello.svg?65643375#fontello') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
+/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
+/*
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+  @font-face {
+    font-family: 'fontello';
+    src: url('../font/fontello.svg?65643375#fontello') format('svg');
+  }
+}
+*/
+ 
+ [class^="icon-"]:before, [class*=" icon-"]:before {
+  font-family: "fontello";
+  font-style: normal;
+  font-weight: normal;
+  speak: none;
+ 
+  display: inline-block;
+  text-decoration: inherit;
+  width: 1em;
+  margin-right: .2em;
+  text-align: center;
+  /* opacity: .8; */
+ 
+  /* For safety - reset parent styles, that can break glyph codes*/
+  font-variant: normal;
+  text-transform: none;
+ 
+  /* fix buttons height, for twitter bootstrap */
+  line-height: 1em;
+ 
+  /* Animation center compensation - margins should be symmetric */
+  /* remove if not needed */
+  margin-left: .2em;
+ 
+  /* you can be more comfortable with increased icons size */
+  /* font-size: 120%; */
+ 
+  /* Font smoothing. That was taken from TWBS */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+ 
+  /* Uncomment for 3D effect */
+  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
+}
+ 
+.icon-down-open:before { content: '\e800'; } /* '' */

src/static/style/fontello/font/fontello.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Copyright (C) 2019 by original authors @ fontello.com</metadata>
+<defs>
+<font id="fontello" horiz-adv-x="1000" >
+<font-face font-family="fontello" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
+<missing-glyph horiz-adv-x="1000" />
+<glyph glyph-name="down-open" unicode="&#xe800;" d="M939 399l-414-413q-10-11-25-11t-25 11l-414 413q-11 11-11 26t11 25l93 92q10 11 25 11t25-11l296-296 296 296q11 11 25 11t26-11l92-92q11-11 11-25t-11-26z" horiz-adv-x="1000" />
+</font>
+</defs>
+</svg>

src/static/style/main.scss

@@ -106,5 +106,9 @@ div.artifact-item {
     & > div > h2 {
       @extend .is-size-4;
     }
+
+    &:not(.contents-visible) {
+      display: none;
+    }
   }
 }

src/templates/base.html

@@ -8,8 +8,6 @@
     {% assets "scss_all" %}
     <link rel="stylesheet" href="{{ ASSET_URL }}">
     {% endassets %}
-    <script src="{{ url_for('static', filename='script/jquery-3.4.1.min.js') }}"></script>
-    <script src="https://kit.fontawesome.com/9ba4c07aa0.js" crossorigin="anonymous"></script>
     {%block head%}{%endblock%}
     <title>BepisBuilds - {% block title %}{% endblock %}</title>
 </head>

src/templates/project_view.html

@@ -1,6 +1,7 @@
 {% extends "base.html" %}
 
 {%block head%}
+<link rel="stylesheet" href="{{ url_for('static', filename='style/fontello/css/fontello.css') }}"" />
 <script src="{{ url_for('static', filename='script/artifacts.js') }}"></script>
 {%endblock%}
 
@@ -34,12 +35,12 @@
             <div class="artifact-info-content" style="align-items: center">
                 <p>Build date: {{artifact.date}}</p>
                 <div class="dropdown-button">
-                    <i class="fas fa-chevron-down fa-lg"></i>
+                    <span class="icon-down-open"></span>
                 </div>
             </div>
         </div>
     </div>
-    <div class="artifact-contents" style="display: none">
+    <div class="artifact-contents">
         <div class="column content">
             <h2>Downloads</h2>