Implemented tiled charts for jinja

maloja/jinja_filters.py

@@ -0,0 +1,4 @@
+def fixlength(real,target):
+	t = real[:target]
+	while len(t)<target: t.append(None)
+	return t

maloja/server.py

@@ -20,6 +20,7 @@ from .utilities import resolveImage
 from .urihandler import uri_to_internal, remove_identical
 from . import urihandler
 from . import globalconf
+from . import jinja_filters
 # doreah toolkit
 from doreah import settings
 from doreah.logging import log
@@ -155,7 +156,7 @@ def static_image(pth):
 @webserver.route("/style.css")
 def get_css():
 	response.content_type = 'text/css'
-	return css
+	return generate_css() if settings.get_settings("CSS_DEBUG") else css
 
 
 @webserver.route("/login")
@@ -224,6 +225,7 @@ jinjaenv = Environment(
 	autoescape=select_autoescape(['html', 'xml'])
 )
 jinjaenv.globals.update(JINJA_CONTEXT)
+jinjaenv.filters.update({k:jinja_filters.__dict__[k] for k in jinja_filters.__dict__ if not k.startswith("__")})
 
 
 @webserver.route("/<name:re:admin.*>")

maloja/static/less/maloja.less

@@ -679,12 +679,18 @@ table.tiles_top>tbody>tr>td {
 	width:300px;
 }
 
+
 table.tiles_sub {
 	height:100%;
 	width:100%;
 }
 
-table.tiles_top td {
+table.tiles_sub div {
+	height:100%;
+	width:100%;
+}
+
+table.tiles_top td div {
 	background-size:cover;
 	background-position:center;
 	vertical-align:bottom;
@@ -693,6 +699,9 @@ table.tiles_top td {
 table.tiles_top td span {
 	background-color:rgba(0,0,0,0.7);
 }
+table.tiles_top td a:hover {
+	text-decoration: none;
+}
 
 table.tiles_1x1 td {
 	height:100%;

maloja/web/jinja/charts_artists.jinja

@@ -33,6 +33,11 @@
 	</tr>
 </table>
 
+{% if settings('CHARTS_DISPLAY_TILES') %}
+	{% import 'partials/charts_artists_tiles.jinja' as charts_artists_tiles %}
+	{{ charts_artists_tiles.charts_artists_tiles(limitkeys,amountkeys,compare=true) }}
+	<br/><br/>
+{% endif %}
 
 {% import 'partials/charts_artists.jinja' as charts_artists %}
 {{ charts_artists.charts_artists(limitkeys,amountkeys,compare=true) }}

maloja/web/jinja/charts_tracks.jinja

@@ -33,6 +33,11 @@
 	</tr>
 </table>
 
+{% if settings('CHARTS_DISPLAY_TILES') %}
+	{% import 'partials/charts_tracks_tiles.jinja' as charts_tracks_tiles %}
+	{{ charts_tracks_tiles.charts_tracks_tiles(filterkeys,limitkeys,amountkeys,compare=true) }}
+	<br/><br/>
+{% endif %}
 
 {% import 'partials/charts_tracks.jinja' as charts_tracks %}
 {{ charts_tracks.charts_tracks(filterkeys,limitkeys,amountkeys,charts=charts,compare=true) }}

maloja/web/jinja/partials/charts_artists_tiles.jinja

@@ -0,0 +1,41 @@
+{% macro charts_artists_tiles(limitkeys,amountkeys,charts=None,compare=False) %}
+
+{% if charts is none %}
+	{% set charts = dbp.get_charts_artists(limitkeys) %}
+{% endif %}
+
+{% set charts = charts | fixlength(14) %}
+{% set charts_cycler = cycler(*charts) %}
+
+
+<table class="tiles_top"><tr>
+{% for segment in range(3) %}
+	<td>
+	{% set segmentsize = segment+1 %}
+	<table class="tiles_{{ segmentsize }}x{{ segmentsize }} tiles_sub">
+		{% for row in range(segmentsize) %}
+			<tr>
+				{% for col in range(segmentsize) %}
+					{% set entry = charts_cycler.next() %}
+					{% if entry is not none %}
+						{% set artist = entry.artist %}
+						{% set rank = entry.rank %}
+						<td>
+							<a href="{{ htmlgenerators.link_address(artist) }}">
+							<div style='cursor:pointer;background-image:url("{{ utilities.getArtistImage(artist,fast=True) }}")'>
+								<span class='stats'>#{{ rank }}</span> <span>{{ artist }}</span>
+							</div>
+							</a>
+						</td>
+					{% else %}
+						<td><span class='stats'></span> <span></span></td>
+					{% endif %}
+				{% endfor %}
+			</tr>
+		{% endfor %}
+	</table>
+</td>
+{% endfor %}
+</tr></table>
+
+{%- endmacro %}

maloja/web/jinja/partials/charts_tracks_tiles.jinja

@@ -0,0 +1,41 @@
+{% macro charts_tracks_tiles(filterkeys,limitkeys,amountkeys,charts=None,compare=False) %}
+
+{% if charts is none %}
+	{% set charts = dbp.get_charts_tracks(filterkeys,limitkeys) %}
+{% endif %}
+
+{% set charts = charts | fixlength(14) %}
+{% set charts_cycler = cycler(*charts) %}
+
+
+<table class="tiles_top"><tr>
+{% for segment in range(3) %}
+	<td>
+	{% set segmentsize = segment+1 %}
+	<table class="tiles_{{ segmentsize }}x{{ segmentsize }} tiles_sub">
+		{% for row in range(segmentsize) %}
+			<tr>
+				{% for col in range(segmentsize) %}
+					{% set entry = charts_cycler.next() %}
+					{% if entry is not none %}
+						{% set track = entry.track %}
+						{% set rank = entry.rank %}
+						<td>
+							<a href="{{ htmlgenerators.link_address(track) }}">
+							<div style='cursor:pointer;background-image:url("{{ utilities.getTrackImage(track.artists,track.title,fast=True) }}")'>
+								<span class='stats'>#{{ rank }}</span> <span>{{ track.title }}</span>
+							</div>
+							</a>
+						</td>
+					{% else %}
+						<td><span class='stats'></span> <span></span></td>
+					{% endif %}
+				{% endfor %}
+			</tr>
+		{% endfor %}
+	</table>
+</td>
+{% endfor %}
+</tr></table>
+
+{%- endmacro %}