💄 Improve footer HTML

foosel · May 24, 2024 · 75d2f5c · 75d2f5c
1 parent d259824
commit 75d2f5c
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 11 deletions.
diff --git a/src/assets/cardfoldr.css b/src/assets/cardfoldr.css
@@ -24,17 +24,14 @@ footer {
 
 footer span {
     flex: 1;
+    text-align: center;
 }
 
-footer span.left {
+footer span:first-child {
     text-align: left;
 }
 
-footer span.center {
-    text-align: center;
-}
-
-footer span.right {
+footer span:last-child {
     text-align: right;
 }
 

diff --git a/src/assets/cardfoldr.js b/src/assets/cardfoldr.js
@@ -1055,8 +1055,11 @@ window.onload = async () => {
         const versionInfo = await fetch("./version.json");
         const versionData = await versionInfo.json();
 
-        const versionElement = document.getElementById("version");
-        versionElement.innerHTML = versionData.commit && versionData.build && versionData.date ? `Build #${versionData.build} of commit ${versionData.commit}` : "Local build";
+        const versionElement = document.createElement("span");
+        versionElement.innerHTML = versionData.commit && versionData.build && versionData.date ? `Build #${versionData.build} of commit ${versionData.commit.substring(0, 8)}` : "Local build";
+
+        const footerElement = document.getElementsByTagName("footer")[0];
+        footerElement.appendChild(versionElement);
     } catch (e) {
         console.error("Error loading version information", e);
     }

diff --git a/src/index.html b/src/index.html
@@ -330,9 +330,8 @@ <h2>Result: Generated PDF</h2>
         </main>
 
         <footer>
-            <span id="author" class="left">Created with ❤️ by <a href="https://foosel.net">Gina "foosel" Häußge</a></span>
-            <span class="center"><a href="https://github.com/foosel/cardfoldr/issues/new/choose" target="_blank" rel="noopener noreferer">Problems? Suggestions?</a></span>
-            <span id="version" class="right"></span>
+            <span id="author">Created with ❤️ by <a href="https://foosel.net">Gina "foosel" Häußge</a></span>
+            <span><a href="https://github.com/foosel/cardfoldr/issues/new/choose" target="_blank" rel="noopener noreferer">Problems? Suggestions?</a></span>
         </footer>
     </body>
 </html>