kontakt
/
musicrate
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add kontakt-themed rating form

Browse Source
main
Luca 2 years ago
parent 7ff9cc5033
commit 3bcc507834
4 changed files with 145 additions and 0 deletions
Show Stats Download Patch File Download Diff File

24
musicrate/core/static/point-fill.svg
Unescape Escape View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

27
musicrate/core/static/point-stroke.svg
Unescape Escape View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

59
musicrate/core/static/style.css
Unescape Escape View File

@ -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;
}

35
musicrate/vote/templates/vote/artist.html
Unescape Escape View File

@ -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>

Write Preview
Loading…
Cancel
Save