Add kontakt-themed rating form

musicrate/core/static/point-fill.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 10 10.000002"
+   height="10.000002mm"
+   width="10mm"
+   xml:space="preserve"
+   version="1.1"
+   id="svg2"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"><metadata
+     id="metadata8"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+     id="defs6"><clipPath
+       id="clipPath18"
+       clipPathUnits="userSpaceOnUse"><path
+         id="path20"
+         d="M 0,1114.8 V 0 h 1741.01 v 1114.8 z" /></clipPath></defs><path
+     style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.193771"
+     d="M 5.0054876,0 C 2.2542107,0 0,2.2541389 0,5.0054876 0,7.7567643 2.2542107,10.000002 5.0054876,10.000002 7.7567876,10.000002 10,7.7567643 10,5.0054876 10,2.2541389 7.7567876,0 5.0054876,0 Z M 3.4712178,1.5024796 H 4.6667669 L 8.1693968,5.0054876 4.6773643,8.4971423 H 3.4602426 L 6.9628727,5.0054876 Z"
+     id="path22" /></svg>

musicrate/core/static/point-stroke.svg

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 10 10.000002"
+   height="10.000002mm"
+   width="10mm"
+   xml:space="preserve"
+   version="1.1"
+   id="svg2"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"><metadata
+     id="metadata8"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
+     id="defs6"><clipPath
+       id="clipPath18"
+       clipPathUnits="userSpaceOnUse"><path
+         id="path20"
+         d="M 0,1114.8 V 0 h 1741.01 v 1114.8 z" /></clipPath></defs><path
+     style="color:#000000;fill:none;stroke:#231f20;stroke-opacity:1;stroke-width:0.1;stroke-dasharray:none"
+     d="M 3.5917969,1.552734 H 4.6464844 L 8.0996094,5.0058594 4.65625,8.4472656 H 3.5820313 L 7.0332031,5.0058594 Z"
+     id="path1699" /><path
+     style="color:#000000;fill:none;stroke:#231f20;stroke-opacity:1;stroke-width:0.1;stroke-dasharray:none"
+     d="m 5.0058594,0.05078125 c 2.7239873,0 4.9433594,2.23090925 4.9433594,4.95507815 0,2.7240961 -2.2192401,4.9433594 -4.9433594,4.9433594 -2.7240961,0 -4.95507815,-2.2193965 -4.95507815,-4.9433594 0,-2.7240356 2.23111415,-4.95507815 4.95507815,-4.95507815 z"
+     id="path1695" /></svg>

musicrate/core/static/style.css

@@ -136,3 +136,62 @@ svg {
 .pagination > a:last-child {
 	text-align: right;
 }
+
+.rating-container {
+	display: flex;
+	flex-direction: column;
+	margin: 1em 0;
+	padding: 0 1em;
+}
+
+.rating-container > .buttons {
+	display: flex;
+	justify-content: center;
+	margin-top: 1em;
+}
+
+.rating-container > .buttons > button {
+	margin: 0 0.5em;
+}
+
+.rating-container > .legend {
+	display: flex;
+	font-size: 0.8em;
+}
+
+.rating-container > .legend > span {
+	flex: 1 0;
+	text-align: center;
+}
+
+.rating-container > .legend > :first-child {
+	text-align: left;
+}
+
+.rating-container > .legend > :last-child {
+	text-align: right;
+}
+
+.rating-container > .rating {
+	align-items: center;
+	display: flex;
+	flex-direction: row-reverse;
+}
+
+.rating-container > .rating > input[type=radio] {
+	display: none;
+}
+
+.rating-container > .rating > input[type=radio]:checked ~ .rating-point {
+	background-image: url(point-fill.svg);
+}
+
+.rating-container > .rating > .rating-point {
+	--max-size: calc((100vw - 2em - 2 * 0.1em * var(--num-choices)) / var(--num-choices));
+	background: url(point-stroke.svg) no-repeat center/100%;
+	height: 3em;
+	margin: 0 0.1em;
+	max-height: var(--max-size);
+	max-width: var(--max-size);
+	width: 3em;
+}

musicrate/vote/templates/vote/artist.html

@@ -6,6 +6,41 @@
 <h1>{{ artist.name }}</h1>
 <p>{{ artist.genre }} &middot; {{ artist.origin }}<br>{{ artist.comment }}</p>
 
+<form action="" method="post">
+	<div class="rating-container">
+		<div class="rating" style="--num-choices: 10">
+			<input id="rating10" name="rating" type="radio" value="10">
+			<label class="rating-point" for="rating10"></label>
+			<input id="rating09" name="rating" type="radio" value="9">
+			<label class="rating-point" for="rating09"></label>
+			<input id="rating08" name="rating" type="radio" value="8">
+			<label class="rating-point" for="rating08"></label>
+			<input id="rating07" name="rating" type="radio" value="7">
+			<label class="rating-point" for="rating07"></label>
+			<input id="rating06" name="rating" type="radio" value="6">
+			<label class="rating-point" for="rating06"></label>
+			<input id="rating05" name="rating" type="radio" value="5">
+			<label class="rating-point" for="rating05"></label>
+			<input id="rating04" name="rating" type="radio" value="4">
+			<label class="rating-point" for="rating04"></label>
+			<input id="rating03" name="rating" type="radio" value="3">
+			<label class="rating-point" for="rating03"></label>
+			<input id="rating02" name="rating" type="radio" value="2">
+			<label class="rating-point" for="rating02"></label>
+			<input id="rating01" name="rating" type="radio" value="1">
+			<label class="rating-point" for="rating01"></label>
+		</div>
+		<div class="legend">
+			<span>sehr schlecht</span>
+			<span>sehr neutral</span>
+			<span>sehr gut</span>
+		</div>
+		<div class="buttons">
+			<button type="reset">Zurücksetzen</button>
+		</div>
+	</div>
+</form>
+
 <div class="pagination">
 {% if offset > 0 %}
 	<a href="{% url 'artist' playlist offset|add:-1 %}">&lt; Zurück</a>