myheats

commit b1dc6bcad26e903cd64fb6770d62325ccca346be
parent 6691aff77eb95420e6b9dd650dd9fdbb10b5a6dc
Author: Andreas Gruhler <andreas.gruhler@adfinis.com>
Date:   Tue,  1 Oct 2024 19:08:10 +0200

feat(settings): add logo, hide version

Diffstat:
M
README.md
 | 
8
++++++++
M
src/frontend/App.jsx
 | 
21
++++++++++++++++++---
M
src/frontend/css/App.css
 | 
4
++++

3 files changed, 30 insertions(+), 3 deletions(-)
diff --git a/README.md b/README.md
@@ -102,6 +102,14 @@ To export data to local csv:
 \copy public.scores to 'scores_rows.csv' DELIMITER ',' CSV HEADER;
 ```
 
+## Settings
+The following settings can be applied in `/settings` as parameters to configure
+the them and appearance of the leaderboard:
+* `style`: The color of the navigation elements, one of `yellow`, `blue` or `red`
+* `logoUrl`: Add url to a logo to replace the default logo in the footer
+* `showLogo`: Set to "false" to hide the logo in the footer
+* `showVersion`: Set to "false" to hide the version in the footer
+
 ## Development & contributions
 * All source code is available in this repository. Contributions are always
   welcome! Pull requests at https://pr.in0rdr.ch/repos/myheats
diff --git a/src/frontend/App.jsx b/src/frontend/App.jsx
@@ -28,10 +28,22 @@ function Layout() {
   // load stylesheet based on settings
   const colors = ['red', 'blue', 'yellow'];
   let theme = ""
+  let showLogo = "true"
+  let logoUrl = "/logo192.png"
+  let showVersion = "true"
 
   if (settings.style && colors.includes(settings.style)) {
-    theme = `${settings.style}`
-    console.info(`I see ${settings.style}. Try one of "style=${colors}" in ${window.location.origin}/settings`)
+    theme = settings.style
+    //console.info(`I see ${settings.style}. Try one of "style=${colors}" in ${window.location.origin}/settings`)
+  }
+  if (settings.showLogo) {
+    showLogo = settings.showLogo
+  }
+  if (settings.logoUrl) {
+    logoUrl = settings.logoUrl
+  }
+  if (settings.showVersion) {
+    showVersion = settings.showVersion
   }
 
   useEffect(() => {
@@ -91,7 +103,10 @@ function Layout() {
       </main>
       <footer>
         <br />
-        <span>MyHeats <a href="https://code.in0rdr.ch/myheats/refs.html">v0.6-nightly</a></span>
+        {showVersion === 'true' ?
+          <span>MyHeats <a href="https://code.in0rdr.ch/myheats/refs.html">v0.6-nightly</a></span> : '' }
+        {showLogo === 'true' ?
+          <span className="logo"><img src={logoUrl} alt="Logo" /></span> : '' }
         <span>
           {session.auth ? <button
               onClick={() => location.href="/settings"}>
diff --git a/src/frontend/css/App.css b/src/frontend/css/App.css
@@ -12,6 +12,10 @@ main {
   padding: 30px 0;
 }
 
+span.logo img {
+  max-height: 33px;
+}
+
 nav {
   background: #f9f9fc;
   border-bottom: 1px solid white;