From 898a9930bb76c7b24820ffdc606f98a3c82230d8 Mon Sep 17 00:00:00 2001
From: krateng <git.noreply@krateng.ch>
Date: Sat, 25 Dec 2021 03:12:03 +0100
Subject: [PATCH] Improved HTML semantics

---
 maloja/web/jinja/admin_issues.jinja   | 16 ++++++++---
 maloja/web/jinja/admin_manual.jinja   |  4 +--
 maloja/web/jinja/admin_overview.jinja |  6 ++--
 maloja/web/jinja/track.jinja          |  2 +-
 maloja/web/static/css/maloja.css      | 40 +++++++--------------------
 5 files changed, 28 insertions(+), 40 deletions(-)

diff --git a/maloja/web/jinja/admin_issues.jinja b/maloja/web/jinja/admin_issues.jinja
index 654263f..a6d7b1e 100644
--- a/maloja/web/jinja/admin_issues.jinja
+++ b/maloja/web/jinja/admin_issues.jinja
@@ -52,8 +52,12 @@
 {% for issue in issuedata.duplicates %}
 	<tr>
 		<td>{{ links.link(issue[0]) }} is a possible duplicate of {{ links.link(issue[1]) }}</td>
-		<td class='button' onclick="newrule(this,'replaceartist','{{ issue[0] }}','{{ issue[1] }}')"><div>{{ issue[1] }} is correct</div></td>
-		<td class='button' onclick="newrule(this,'replaceartist','{{ issue[1] }}','{{ issue[0] }}')"><div>{{ issue[0] }} is correct</div></td>
+		<td>
+			<button onclick="newrule(this,'replaceartist','{{ issue[0] }}','{{ issue[1] }}')">{{ issue[1] }} is correct</button>
+		</td>
+		<td>
+			<button onclick="newrule(this,'replaceartist','{{ issue[1] }}','{{ issue[0] }}')">{{ issue[0] }} is correct</button>
+		</td>
 	</tr>
 {% endfor %}
 
@@ -62,14 +66,18 @@
 		<td>{{ links.link(issue[0]) }} sounds like the combination of {{ issue[1].__len__() }} artists:
 			{{ issue[1]|join(", ") }}
 		</td>
-		<td class='button' onclick="newrule(this,'replaceartist','{{ issue[0] }}','{{ issue[1] | join('␟') }}')"><div>Fix it</div></td>
+		<td>
+			<button onclick="newrule(this,'replaceartist','{{ issue[0] }}','{{ issue[1] | join('␟') }}')">Fix it</button>
+		</td>
 	</tr>
 {% endfor %}
 
 {% for issue in issuedata.newartists %}
 	<tr>
 		<td>Is '{{ issue[0] }}' in '{{ links.link(issue[1]) }}' an artist?</td>
-		<td class='button' onclick="newrule(this,'replaceartist','{{ issue[1] }}','{{ (issue[2] + [issue[0]]) | join('␟') }}')"><div>Yes</div></td>
+		<td>
+			<button onclick="newrule(this,'replaceartist','{{ issue[1] }}','{{ (issue[2] + [issue[0]]) | join('␟') }}')">Yes</button>
+		</td>
 	</tr>
 {% endfor %}
 
diff --git a/maloja/web/jinja/admin_manual.jinja b/maloja/web/jinja/admin_manual.jinja
index 8e91a02..db3b973 100644
--- a/maloja/web/jinja/admin_manual.jinja
+++ b/maloja/web/jinja/admin_manual.jinja
@@ -30,8 +30,8 @@
 
 	<br/>
 
-	<span class="button" onclick="scrobbleNew(event)">Scrobble!</span>
-	<span class="button" onclick="repeatLast()">↻</span>
+	<button onclick="scrobbleNew(event)">Scrobble!</button>
+	<button onclick="repeatLast()">↻</button>
 
 	<br/>
 
diff --git a/maloja/web/jinja/admin_overview.jinja b/maloja/web/jinja/admin_overview.jinja
index 964ce97..9d6913d 100644
--- a/maloja/web/jinja/admin_overview.jinja
+++ b/maloja/web/jinja/admin_overview.jinja
@@ -70,9 +70,9 @@
 	</ul>
 
 	{% if adminmode %}
-	<span id="adminmodebutton" class="button" onclick="deactivate()">Deactivate</span>
+	<button id="adminmodebutton" onclick="deactivate()">Deactivate</button>
 	{% else %}
-	<span id="adminmodebutton" class="button" onclick="activate()">Activate</span>
+	<button id="adminmodebutton" onclick="activate()">Activate</button>
 	{% endif %}
 
 	<h2>Links</h2>
@@ -85,6 +85,6 @@
 
 	<input class="simpleinput" type="password" placeholder="New Password"></input><br/>
 	<input class="simpleinput" type="password" placeholder="Repeat"></input><br/><br/>
-	<span class="button" onclick="changepw()">Change</span>
+	<button onclick="changepw()">Change</button>
 	{% endif %}
 	{% endblock %}
diff --git a/maloja/web/jinja/track.jinja b/maloja/web/jinja/track.jinja
index 56b6561..632fd34 100644
--- a/maloja/web/jinja/track.jinja
+++ b/maloja/web/jinja/track.jinja
@@ -48,7 +48,7 @@
 				<br/>
 
 			<p class="stats">
-				{% if adminmode %}<span onclick="scrobble('{{ encodedtrack }}')" class="button">Scrobble now</span>{% endif %}
+				{% if adminmode %}<button onclick="scrobble('{{ encodedtrack }}')">Scrobble now</button>{% endif %}
 				<a href="{{ mlj_uri.create_uri("/scrobbles",filterkeys) }}">{{ info['scrobbles'] }} Scrobbles</a>
 			</p>
 
diff --git a/maloja/web/static/css/maloja.css b/maloja/web/static/css/maloja.css
index 4bbb2c8..b8712d0 100644
--- a/maloja/web/static/css/maloja.css
+++ b/maloja/web/static/css/maloja.css
@@ -419,19 +419,26 @@ img.star {
 
 
 
-.button {
+button {
 	padding:3px;
 	padding-right:6px;
 	padding-left:6px;
+	border: 0px;
+	font-family: inherit;
+	font-size: inherit;
 	background-color: var(--button-color-bg);
 	color: var(--button-color-fg);
 	cursor:pointer;
 }
-.button:hover {
+button.important {
+	background-color:red;
+	color:white;
+}
+button:hover {
 	background-color: var(--button-color-bg-focus);
 	color: var(--button-color-fg-focus);
 }
-.button.locked {
+button.locked {
 	background-color:grey;
 	color:black;
 	cursor:not-allowed;
@@ -650,33 +657,6 @@ table.list tr td.chart div.bronze {
 }
 
 
-
-table.list tr td.button {
-	width:200px;
-	cursor:pointer;
-	border-color:rgba(0,0,0,0)!important;
-}
-
-
-table.list td.button div {
-	background-color: var(--button-color-bg);
-	color: var(--button-color-fg);
-	padding:3px;
-	border-radius:4px;
-}
-table.list td.button div:hover {
-	background-color: var(--button-color-bg-focus);
-	color: var(--button-color-fg-focus);
-	padding:3px;
-	border-radius:4px;
-}
-
-td.button.important div {
-	background-color:red;
-	color:white;
-}
-
-
 table.misc {
 	margin-left:20px;
 }