Cooler certification icons

maloja/web/jinja/icons/cert_album.jinja

@@ -0,0 +1,24 @@
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg height="15" weight="15" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 viewBox="0 0 511.996 511.996" xml:space="preserve">
+<g>
+	<g>
+		<g>
+			<path d="M0,42.667v426.667c0,11.776,9.536,21.333,21.333,21.333h64V21.333h-64C9.536,21.333,0,30.891,0,42.667z"/>
+			<path d="M234.667,363.855c0,11.115,9.557,20.139,21.333,20.139c11.563,0,21.333-9.771,21.333-21.333v-21.333H256
+				C244.843,341.327,234.667,352.058,234.667,363.855z"/>
+			<path d="M490.662,21.329H127.996v469.333h362.667c11.797,0,21.333-9.557,21.333-21.333V42.662
+				C511.996,30.886,502.46,21.329,490.662,21.329z M400.188,250.428l-6.379,20.16c-2.88,9.088-11.264,14.912-20.331,14.912
+				c-2.133,0-4.288-0.32-6.443-1.003c-11.221-3.541-17.451-15.531-13.888-26.773l6.485-20.48
+				c6.357-19.157,2.347-40.107-10.432-55.253l-29.205-26.816v164.821v42.667c0,35.307-28.693,64-64,64
+				c-35.285,0-64-28.181-64-62.805c0-35.328,29.312-65.195,64-65.195h21.333v-192c0-1.067,0.469-1.984,0.619-3.008
+				c0.213-1.6,0.341-3.179,0.939-4.693c0.576-1.493,1.536-2.709,2.411-4.011c0.597-0.875,0.896-1.899,1.643-2.709
+				c0.107-0.107,0.256-0.149,0.363-0.256c1.109-1.152,2.496-1.92,3.84-2.795c1.003-0.683,1.899-1.557,2.987-2.027
+				c0.896-0.384,1.92-0.427,2.88-0.683c1.728-0.491,3.456-1.024,5.248-1.067c0.149,0,0.256-0.085,0.405-0.085
+				c1.024,0,1.92,0.448,2.901,0.597c1.643,0.213,3.243,0.363,4.8,0.96c1.536,0.597,2.773,1.579,4.117,2.475
+				c0.853,0.597,1.813,0.875,2.603,1.579l65.899,60.459c0.576,0.512,1.131,1.088,1.643,1.664
+				C403.878,179.644,411.366,216.934,400.188,250.428z"/>
+		</g>
+	</g>
+</g>
+</svg>

maloja/web/jinja/icons/cert_track.jinja

@@ -0,0 +1,26 @@
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg height="15" weight="15" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 viewBox="0 0 512.002 512.002" xml:space="preserve">
+<g>
+	<g>
+		<g>
+			<path d="M255.997,0c-34.112,0-66.645,6.848-96.448,19.008l84.053,152.917c4.075-0.597,8.149-1.259,12.395-1.259
+				c47.083,0,85.333,38.293,85.333,85.333c0,5.632-0.597,11.136-1.664,16.469L480.103,379.52
+				c20.288-36.651,31.893-78.741,31.893-123.52C511.997,114.837,397.181,0,255.997,0z"/>
+			<path d="M316.383,316.307c-2.603,2.624-5.376,5.056-8.299,7.275l82.347,149.867c25.173-15.616,47.467-35.349,65.835-58.432
+				L320.714,311.678C319.327,313.257,317.876,314.814,316.383,316.307z"/>
+			<path d="M256.005,341.335c-47.061,0-85.333-38.272-85.333-85.333c0-5.291,0.64-10.432,1.557-15.467L26.565,143.191
+				C9.733,177.282,0.005,215.49,0.005,256.002c0,141.163,114.837,256,256,256c34.155,0,66.688-6.848,96.491-19.029l-84.011-152.896
+				C264.389,340.695,260.272,341.335,256.005,341.335z"/>
+			<path d="M271.602,295.62c2.432-0.939,4.672-2.155,6.848-3.477c0.363-0.235,0.768-0.384,1.131-0.619
+				c1.813-1.195,3.435-2.645,5.035-4.096c0.576-0.533,1.216-0.981,1.771-1.536c3.605-3.648,6.464-8.043,8.747-12.971
+				c2.261-5.184,3.541-10.901,3.541-16.917c0-23.531-19.136-42.667-42.667-42.667c-5.504,0-10.709,1.131-15.552,3.029
+				c-2.645,1.045-5.141,2.347-7.488,3.84c-0.107,0.064-0.256,0.107-0.363,0.192c-2.432,1.579-4.693,3.392-6.72,5.44
+				c-3.947,3.947-7.04,8.555-9.216,13.781c0,0.043-0.043,0.064-0.064,0.107c-2.091,5.013-3.264,10.496-3.264,16.277
+				c0,23.531,19.136,42.667,42.667,42.667C261.533,298.671,266.759,297.54,271.602,295.62z"/>
+			<path d="M195.581,195.834c0.085-0.107,0.192-0.192,0.277-0.277c2.56-2.56,5.269-4.949,8.128-7.147L121.597,38.543
+				c-28.565,17.728-53.376,40.853-73.024,68.032l141.888,94.827C192.082,199.482,193.789,197.626,195.581,195.834z"/>
+		</g>
+	</g>
+</g>
+</svg>

maloja/web/jinja/partials/awards_album.jinja

@@ -34,31 +34,16 @@
 
 <!-- TOPWEEKS -->
 <span>
-	{% if info.topweeks > 0 %}
+	{% if info.topweeks > 0 -%}
 	<a title="{{ info.topweeks }} weeks on #1" href="/performance?{{ encodedalbum }}&step=week">
-		<img class="star" src="/media/star.png" />{{ info.topweeks }}
+		<img class="star" src="/media/star.png" />{{ info.topweeks }}</a>
-	</a>
+	{%- endif %}
-	{% endif %}
 </span>
 
 {%- endmacro %}
 
 
 
-
-{% macro certs(album) %}
-
-<!-- CERTS -->
-
-{% set info = db.album_info(album=album) %}
-{% if info.certification is not none %}
-	<img class="certrecord"
-				src="/media/record_{{ info.certification }}.png"
-				title="This album has reached {{ info.certification.capitalize() }} status" />
-{% endif %}
-
-{%- endmacro %}
-
 {% macro subcerts(album) %}
 
 <!-- SUBCERTS -->
@@ -70,9 +55,9 @@
 	{%- if e.scrobbles >= settings.scrobbles_diamond -%}{% set cert = 'diamond' %}{%- endif -%}
 
 	{%- if cert -%}
-	<a href='{{ links.url(e.track) }}'><img class="certrecord_small"
+	<a href='{{ links.url(e.track) }}' class="hidelink certified certified_{{ cert }} smallcerticon" title="{{ e.track.title }} has reached {{ cert.capitalize() }} status">
-					src="/media/record_{{ cert }}.png"
+	    {% include 'icons/cert_track.jinja' %}
-					title="{{ e.track.title }} has reached {{ cert.capitalize() }} status" /></a>
+	</a>
 	{%- endif %}
 
 {%- endfor %}

maloja/web/jinja/partials/awards_artist.jinja

@@ -56,6 +56,22 @@
 
 <!-- SUBCERTS -->
 
+
+{% set albumcharts = db.get_charts_albums(artist=artist,timerange=malojatime.alltime()) %}
+{% for e in albumcharts -%}
+	{%- if e.scrobbles >= settings.scrobbles_gold_album -%}{% set cert = 'gold' %}{%- endif -%}
+	{%- if e.scrobbles >= settings.scrobbles_platinum_album -%}{% set cert = 'platinum' %}{%- endif -%}
+	{%- if e.scrobbles >= settings.scrobbles_diamond_album -%}{% set cert = 'diamond' %}{%- endif -%}
+
+	{%- if cert -%}
+	<a href='{{ links.url(e.album) }}' class="hidelink certified certified_{{ cert }} smallcerticon" title="{{ e.album.albumtitle }} has reached {{ cert.capitalize() }} status">
+    	    {% include 'icons/cert_album.jinja' %}
+    	</a>
+	{%- endif %}
+
+{%- endfor %}
+
+
 {% set charts = db.get_charts_tracks(artist=artist,timerange=malojatime.alltime()) %}
 {% for e in charts -%}
 	{%- if e.scrobbles >= settings.scrobbles_gold -%}{% set cert = 'gold' %}{%- endif -%}
@@ -63,11 +79,13 @@
 	{%- if e.scrobbles >= settings.scrobbles_diamond -%}{% set cert = 'diamond' %}{%- endif -%}
 
 	{%- if cert -%}
-	<a href='{{ links.url(e.track) }}'><img class="certrecord_small"
+	<a href='{{ links.url(e.track) }}' class="hidelink certified certified_{{ cert }} smallcerticon" title="{{ e.track.title }} has reached {{ cert.capitalize() }} status">
-					src="/media/record_{{ cert }}.png"
+    	    {% include 'icons/cert_track.jinja' %}
-					title="{{ e.track.title }} has reached {{ cert.capitalize() }} status" /></a>
+    	</a>
 	{%- endif %}
 
 {%- endfor %}
 
+
+
 {%- endmacro %}

maloja/web/jinja/partials/awards_track.jinja

@@ -42,22 +42,3 @@
 {%- endmacro %}
 
 
-
-
-
-
-
-
-
-{% macro certs(track) %}
-
-<!-- CERTS -->
-
-{% set info = db.track_info(track=track) %}
-{% if info.certification is not none %}
-	<img class="certrecord"
-				src="/media/record_{{ info.certification }}.png"
-				title="This track has reached {{ info.certification.capitalize() }} status" />
-{% endif %}
-
-{%- endmacro %}

maloja/web/static/css/maloja.css

@@ -42,6 +42,12 @@ body.certified {
     --shine_color: var(--color-certified-gold);
 }
 
+.certified.smallcerticon svg {
+    /* we just use shine color as the color variable that represents the respective color of the currently applicable
+     certification - even when no shine is involved */
+    fill: rgba(var(--shine_color),1);
+}
+
 body.certified .top_info .image div {
     position: relative;
 }