From 6ff7aa2ee035eb81e61b85b28ba2f7cbb55130f5 Mon Sep 17 00:00:00 2001
From: krateng <git.noreply@krateng.ch>
Date: Wed, 24 May 2023 17:44:50 +0200
Subject: [PATCH] Experimental start page redesign

---
 maloja/pkg_global/conf.py                     |   3 +-
 maloja/web/jinja/partials/info_album.jinja    |  45 +++++++
 maloja/web/jinja/partials/info_artist.jinja   |  59 +++++++++
 maloja/web/jinja/partials/info_track.jinja    |  48 +++++++
 maloja/web/jinja/snippets/links.jinja         |   2 +-
 maloja/web/jinja/start.jinja                  | 121 ++++--------------
 .../startpage_modules/charts_albums.jinja     |  19 +++
 .../startpage_modules/charts_artists.jinja    |  19 +++
 .../startpage_modules/charts_tracks.jinja     |  19 +++
 .../jinja/startpage_modules/featured.jinja    |  58 +++++++++
 .../startpage_modules/lastscrobbles.jinja     |  15 +++
 .../web/jinja/startpage_modules/pulse.jinja   |  17 +++
 maloja/web/static/css/maloja.css              |  38 +-----
 maloja/web/static/css/startpage.css           |  49 +++++++
 maloja/web/static/js/rangeselect.js           |  21 +--
 15 files changed, 386 insertions(+), 147 deletions(-)
 create mode 100644 maloja/web/jinja/partials/info_album.jinja
 create mode 100644 maloja/web/jinja/partials/info_artist.jinja
 create mode 100644 maloja/web/jinja/partials/info_track.jinja
 create mode 100644 maloja/web/jinja/startpage_modules/charts_albums.jinja
 create mode 100644 maloja/web/jinja/startpage_modules/charts_artists.jinja
 create mode 100644 maloja/web/jinja/startpage_modules/charts_tracks.jinja
 create mode 100644 maloja/web/jinja/startpage_modules/featured.jinja
 create mode 100644 maloja/web/jinja/startpage_modules/lastscrobbles.jinja
 create mode 100644 maloja/web/jinja/startpage_modules/pulse.jinja
 create mode 100644 maloja/web/static/css/startpage.css

diff --git a/maloja/pkg_global/conf.py b/maloja/pkg_global/conf.py
index a9be47b..f8c61f4 100644
--- a/maloja/pkg_global/conf.py
+++ b/maloja/pkg_global/conf.py
@@ -189,8 +189,7 @@ malojaconfig = Configuration(
 			"parse_remix_artists":(tp.Boolean(),								"Parse Remix Artists",			False)
 		},
 		"Web Interface":{
-			"default_range_charts_artists":(tp.Choice({'alltime':'All Time','year':'Year','month':"Month",'week':'Week'}),	"Default Range Artist Charts",	"year"),
-			"default_range_charts_tracks":(tp.Choice({'alltime':'All Time','year':'Year','month':"Month",'week':'Week'}),	"Default Range Track Charts",	"year"),
+			"default_range_startpage":(tp.Choice({'alltime':'All Time','year':'Year','month':"Month",'week':'Week'}),	"Default Range for Startpage Stats",	"year"),
 			"default_step_pulse":(tp.Choice({'year':'Year','month':"Month",'week':'Week','day':'Day'}),						"Default Pulse Step",			"month"),
 			"charts_display_tiles":(tp.Boolean(),								"Display Chart Tiles",			False),
 			"album_showcase":(tp.Boolean(),										"Display Album Showcase",		True,		"Display a graphical album showcase for artist overview pages instead of a chart list"),
diff --git a/maloja/web/jinja/partials/info_album.jinja b/maloja/web/jinja/partials/info_album.jinja
new file mode 100644
index 0000000..95a9ca9
--- /dev/null
+++ b/maloja/web/jinja/partials/info_album.jinja
@@ -0,0 +1,45 @@
+{% import 'snippets/links.jinja' as links %}
+{% import 'partials/awards_album.jinja' as awards %}
+
+{% set album = filterkeys.album %}
+{% set info = dbc.album_info({'album':album}) %}
+
+{% set encodedalbum = mlj_uri.uriencode({'album':album}) %}
+
+
+<table class="top_info">
+	<tr>
+		<td class="image">
+			{% if adminmode %}
+			<div
+				class="changeable-image" data-uploader="b64=>upload('{{ encodedalbum }}',b64)"
+				style="background-image:url('{{ images.get_album_image(album) }}');"
+				title="Drag & Drop to upload new image"
+			></div>
+			{% else %}
+			<div style="background-image:url('{{ images.get_album_image(album) }}');">
+			</div>
+			{% endif %}
+		</td>
+		<td class="text">
+			<span>{{ links.links(album.artists) }}</span><br/>
+			<h1 id="main_entity_name" class="headerwithextra">{{ info.album.albumtitle | e }}</h1>
+				{# awards.certs(album) #}
+				<span class="rank"><a href="/charts_albums?max=100">#{{ info.position }}</a></span>
+				<br/>
+
+			<p class="stats">
+				<a href="{{ mlj_uri.create_uri("/scrobbles",filterkeys) }}">{{ info['scrobbles'] }} Scrobbles</a>
+			</p>
+
+
+
+
+
+			{{ awards.medals(info) }}
+			{{ awards.topweeks(info) }}
+
+
+		</td>
+	</tr>
+</table>
diff --git a/maloja/web/jinja/partials/info_artist.jinja b/maloja/web/jinja/partials/info_artist.jinja
new file mode 100644
index 0000000..f3308a9
--- /dev/null
+++ b/maloja/web/jinja/partials/info_artist.jinja
@@ -0,0 +1,59 @@
+{% import 'snippets/links.jinja' as links %}
+{% import 'partials/awards_artist.jinja' as awards %}
+
+
+{% set artist = filterkeys.artist %}
+{% set info = db.artist_info(artist=artist) %}
+
+{% set credited = info.get('replace') %}
+{% set included = info.get('associated') %}
+
+{% if credited is not none %}
+	{% set competes = false %}
+{% else %}
+	{% set credited = artist %}
+	{% set competes = true %}
+{% endif %}
+
+
+<table class="top_info">
+	<tr>
+		<td class="image">
+			{% if adminmode %}
+			<div
+				class="changeable-image" data-uploader="b64=>upload('{{ encodedartist }}',b64)"
+				style="background-image:url('{{ images.get_artist_image(artist) }}');"
+				title="Drag & Drop to upload new image"
+			></div>
+			{% else %}
+			<div style="background-image:url('{{ images.get_artist_image(artist) }}');">
+			</div>
+			{% endif %}
+		</td>
+		<td class="text">
+			<h1 id="main_entity_name" class="headerwithextra">{{ info.artist | e }}</h1>
+				{% if competes and info['scrobbles']>0 %}<span class="rank"><a href="/charts_artists?max=100">#{{ info.position }}</a></span>{% endif %}
+				<br/>
+				{% if competes and included %}
+					<span>associated: {{ links.links(included) }}</span>
+				{% elif not competes %}
+					<span>Competing under {{ links.link(credited) }} (#{{ info.position }})</span>
+				{% endif %}
+
+			<p class="stats">
+				<a href="{{ mlj_uri.create_uri("/scrobbles",filterkeys) }}">{{ info['scrobbles'] }} Scrobbles</a>
+			</p>
+
+
+
+
+			{% if competes %}
+				{{ awards.medals(info) }}
+				{{ awards.topweeks(info) }}
+			{% endif %}
+			{{ awards.certs(artist) }}
+
+
+		</td>
+	</tr>
+</table>
diff --git a/maloja/web/jinja/partials/info_track.jinja b/maloja/web/jinja/partials/info_track.jinja
new file mode 100644
index 0000000..f46e342
--- /dev/null
+++ b/maloja/web/jinja/partials/info_track.jinja
@@ -0,0 +1,48 @@
+{% import 'snippets/links.jinja' as links %}
+
+{% set track = filterkeys.track %}
+{% set info = dbc.track_info({'track':track}) %}
+
+{% import 'partials/awards_track.jinja' as awards %}
+
+
+<table class="top_info">
+	<tr>
+		<td class="image">
+			{% if adminmode %}
+			<div
+				class="changeable-image" data-uploader="b64=>upload('{{ encodedtrack }}',b64)"
+				style="background-image:url('{{ images.get_track_image(track) }}');"
+				title="Drag & Drop to upload new image"
+			></div>
+			{% else %}
+			<div style="background-image:url('{{ images.get_track_image(track) }}');">
+			</div>
+			{% endif %}
+		</td>
+		<td class="text">
+			<span>{{ links.links(track.artists) }}</span><br/>
+			<h1 id="main_entity_name" class="headerwithextra">{{ info.track.title | e }}</h1>
+				{{ awards.certs(track) }}
+				<span class="rank"><a href="/charts_tracks?max=100">#{{ info.position }}</a></span>
+				<br/>
+				{% if info.track.album %}
+				from {{ links.link(info.track.album) }}<br/>
+				{% endif %}
+
+			<p class="stats">
+				{% if adminmode %}<button type="button" onclick="scrobble('{{ encodedtrack }}')">Scrobble now</button>{% endif %}
+				<a href="{{ mlj_uri.create_uri("/scrobbles",filterkeys) }}">{{ info['scrobbles'] }} Scrobbles</a>
+			</p>
+
+
+
+
+
+			{{ awards.medals(info) }}
+			{{ awards.topweeks(info) }}
+
+
+		</td>
+	</tr>
+</table>
diff --git a/maloja/web/jinja/snippets/links.jinja b/maloja/web/jinja/snippets/links.jinja
index 3b5c29d..f90a535 100644
--- a/maloja/web/jinja/snippets/links.jinja
+++ b/maloja/web/jinja/snippets/links.jinja
@@ -1,5 +1,5 @@
 {% macro link(entity) -%}
-	{% if entity is mapping and 'title' in entity or 'albumtitle' in entity %}
+	{% if entity is mapping and ('title' in entity or 'albumtitle' in entity) %}
 		{% set name = entity.title or entity.albumtitle %}
 	{% else %}
 		{% set name = entity %}
diff --git a/maloja/web/jinja/start.jinja b/maloja/web/jinja/start.jinja
index f8240da..eb22b37 100644
--- a/maloja/web/jinja/start.jinja
+++ b/maloja/web/jinja/start.jinja
@@ -3,109 +3,44 @@
 
 {% block scripts %}
 
-	<script>document.addEventListener('DOMContentLoaded',function() {
-		showRange('topartists','{{ settings["DEFAULT_RANGE_CHARTS_ARTISTS"] }}');
-		showRange('toptracks','{{ settings["DEFAULT_RANGE_CHARTS_TRACKS"] }}');
-		showRange('pulse','{{ settings["DEFAULT_STEP_PULSE"] }}');
-	})</script>
-	<script src="/rangeselect.js"></script>
+<script src="/rangeselect.js"></script>
+<script>
+document.addEventListener('DOMContentLoaded',function() {
+	for (let type of ["topartists","toptracks","topalbums","pulse"]) {
+		var val = localStorage.getItem("rangeselect_" + type);
+		if (val != null) {
+			showRange(type,val);
+		}
+		else {
+			showRange(type,'{{ settings["DEFAULT_RANGE_STARTPAGE"] }}');
+		}
+
+
+	}
+})
+</script>
+
 	<script src="/cookies.js"></script>
+	<link rel="stylesheet" href="/static/css/startpage.css" />
 {% endblock %}
 
 {% block content -%}
 
-
-		<!-- ARTIST CHARTS -->
-		<h1><a class="stat_link_topartists" href="/charts_artists?in=alltime">Top Artists</a></h1>
-
-		{% for r in xcurrent -%}
-			<span onclick="showRangeManual('topartists','{{ r.identifier }}')" class="stat_selector_topartists selector_topartists_{{ r.identifier }}">
-				{{ r.localisation }}
-			</span>
-			{{ "|" if not loop.last }}
-		{%- endfor %}
-
-		<br/><br/>
+	<div id="startpage">
 
 
-		{% for r in xcurrent -%}
-			<span class="stat_module_topartists topartists_{{ r.identifier }}" style="display:none;">
-				{%- with limitkeys = {"timerange":r.range} -%}
-				{% include 'partials/charts_artists_tiles.jinja' %}
-				{%- endwith -%}
-			</span>
-		{%- endfor %}
+	{% for module in ['charts_artists','charts_tracks','charts_albums','pulse','lastscrobbles','featured'] %}
+	<section id="start_page_module_{{ module }}" style="grid-area: {{ module }}">
+	<!-- MODULE: {{ module }} -->
+
+	{% include 'startpage_modules/' + module + '.jinja' %}
 
 
+	<!-- END MODULE: {{ module }} -->
+	</section>
+	{% endfor %}
 
+	</div>
 
-		<!-- TRACK CHARTS -->
-		<h1><a class="stat_link_toptracks" href="/charts_tracks?in=alltime">Top Tracks</a></h1>
-
-		{% for r in xcurrent -%}
-			<span onclick="showRangeManual('toptracks','{{ r.identifier }}')" class="stat_selector_toptracks selector_toptracks_{{ r.identifier }}">
-				{{ r.localisation }}
-			</span>
-			{{ "|" if not loop.last }}
-		{%- endfor %}
-
-		<br/><br/>
-
-
-		{% for r in xcurrent -%}
-			<span class="stat_module_toptracks toptracks_{{ r.identifier }}" style="display:none;">
-				{%- with limitkeys = {"timerange":r.range} -%}
-				{% include 'partials/charts_tracks_tiles.jinja' %}
-				{%- endwith -%}
-			</span>
-		{%- endfor %}
-
-
-		<div class="sidelist">
-			<!-- SCROBBLES -->
-
-			<h1><a href="/scrobbles">Last Scrobbles</a></h1>
-
-			{% for range in xcurrent %}
-				<span class="stats">{{ range.localisation }}</span>
-				<a href='/scrobbles?in={{ range.identifier }}'>{{ dbc.get_scrobbles_num({'timerange':range.range}) }}</a>
-			{% endfor %}
-			<br/><br/>
-
-			<span class="stat_module">
-
-
-				{%- with amountkeys = {"perpage":12,"page":0}, shortTimeDesc=True -%}
-				{% include 'partials/scrobbles.jinja' %}
-				{%- endwith -%}
-			</span>
-
-
-			<br/>
-
-
-
-
-			<!-- PULSE -->
-			<h1><a class="stat_link_pulse" href="/pulse?trail=1&step=month">Pulse</a></h1>
-
-			{% for range in xranges -%}
-				<span onclick="showRangeManual('pulse','{{ range.identifier }}')" class="stat_selector_pulse selector_pulse_{{ range.identifier }}">
-					{{ range.localisation }}
-				</span>
-				{{ "|" if not loop.last }}
-			{%- endfor %}
-			<br/><br/>
-
-			{% for range in xranges -%}
-				<span class="stat_module_pulse pulse_{{ range.identifier }}" style="display:none;">
-					{%- with limitkeys={"since":range.firstrange},delimitkeys={"step":range.identifier} -%}
-					{% include 'partials/pulse.jinja' %}
-					{%- endwith -%}
-				</span>
-			{%- endfor %}
-
-
-		</div>
 
 {%- endblock %}
diff --git a/maloja/web/jinja/startpage_modules/charts_albums.jinja b/maloja/web/jinja/startpage_modules/charts_albums.jinja
new file mode 100644
index 0000000..671fe10
--- /dev/null
+++ b/maloja/web/jinja/startpage_modules/charts_albums.jinja
@@ -0,0 +1,19 @@
+<h1><a class="stat_link_topalbums" href="/charts_albums?in=alltime">Top Albums</a></h1>
+
+{% for r in xcurrent -%}
+	<span onclick="showRangeManual('topalbums','{{ r.identifier }}')" class="stat_selector_topalbums selector_topalbums_{{ r.identifier }}">
+		{{ r.localisation }}
+	</span>
+	{{ "|" if not loop.last }}
+{%- endfor %}
+
+<br/><br/>
+
+
+{% for r in xcurrent -%}
+	<section class="stat_module_topalbums topalbums_{{ r.identifier }}" style="display:none;">
+		{%- with limitkeys = {"timerange":r.range} -%}
+		{% include 'partials/charts_albums_tiles.jinja' %}
+		{%- endwith -%}
+	</section>
+{%- endfor %}
diff --git a/maloja/web/jinja/startpage_modules/charts_artists.jinja b/maloja/web/jinja/startpage_modules/charts_artists.jinja
new file mode 100644
index 0000000..0c78c89
--- /dev/null
+++ b/maloja/web/jinja/startpage_modules/charts_artists.jinja
@@ -0,0 +1,19 @@
+<h1><a class="stat_link_topartists" href="/charts_artists?in=alltime">Top Artists</a></h1>
+
+{% for r in xcurrent -%}
+	<span onclick="showRangeManual('topartists','{{ r.identifier }}')" class="stat_selector_topartists selector_topartists_{{ r.identifier }}">
+		{{ r.localisation }}
+	</span>
+	{{ "|" if not loop.last }}
+{%- endfor %}
+
+<br/><br/>
+
+
+{% for r in xcurrent -%}
+	<section class="stat_module_topartists topartists_{{ r.identifier }}" style="display:none;">
+		{%- with limitkeys = {"timerange":r.range} -%}
+		{% include 'partials/charts_artists_tiles.jinja' %}
+		{%- endwith -%}
+	</section>
+{%- endfor %}
diff --git a/maloja/web/jinja/startpage_modules/charts_tracks.jinja b/maloja/web/jinja/startpage_modules/charts_tracks.jinja
new file mode 100644
index 0000000..4ae6e4c
--- /dev/null
+++ b/maloja/web/jinja/startpage_modules/charts_tracks.jinja
@@ -0,0 +1,19 @@
+<h1><a class="stat_link_toptracks" href="/charts_tracks?in=alltime">Top Tracks</a></h1>
+
+{% for r in xcurrent -%}
+	<span onclick="showRangeManual('toptracks','{{ r.identifier }}')" class="stat_selector_toptracks selector_toptracks_{{ r.identifier }}">
+		{{ r.localisation }}
+	</span>
+	{{ "|" if not loop.last }}
+{%- endfor %}
+
+<br/><br/>
+
+
+{% for r in xcurrent -%}
+	<section class="stat_module_toptracks toptracks_{{ r.identifier }}" style="display:none;">
+		{%- with limitkeys = {"timerange":r.range} -%}
+		{% include 'partials/charts_tracks_tiles.jinja' %}
+		{%- endwith -%}
+	</section>
+{%- endfor %}
diff --git a/maloja/web/jinja/startpage_modules/featured.jinja b/maloja/web/jinja/startpage_modules/featured.jinja
new file mode 100644
index 0000000..1c96ea2
--- /dev/null
+++ b/maloja/web/jinja/startpage_modules/featured.jinja
@@ -0,0 +1,58 @@
+<h1>Featured</h1>
+
+
+{% set entitytypes = [
+	{'identifier':'artist','localisation':"Artist", 'template':"info_artist.jinja", 'filterkeys':{"artist":"Blackpink"} },
+	{'identifier':'track','localisation':"Track", 'template':"info_track.jinja", 'filterkeys':{"track": {"artists": ["Red Velvet"], "title": "Russian Roulette"}} },
+	{'identifier':'album','localisation':"Album", 'template':"info_album.jinja", 'filterkeys':{"album": {"artists": ["TWICE"], "albumtitle": "The Story Begins"}} }
+] %}
+
+
+{% for t in entitytypes -%}
+	<span onclick="showFeatured('{{ t.identifier }}')" class="stat_selector_featured stat_selector_featured_{{ t.identifier }}">
+		{{ t.localisation }}
+	</span>
+	{{ "|" if not loop.last }}
+{%- endfor %}
+
+<br/><br/><br/>
+
+
+{% for t in entitytypes -%}
+	<section class="stat_module_featured featured_{{ t.identifier }}" style="display:none;">
+		{%- with filterkeys = t.filterkeys -%}
+		{% include 'partials/' + t.template %}
+		{%- endwith -%}
+	</section>
+{%- endfor %}
+
+
+
+
+<script>
+function showFeatured(t) {
+	// Make all modules disappear
+	var modules = document.getElementsByClassName("stat_module_featured");
+	for (var i=0;i<modules.length;i++) {
+		modules[i].setAttribute("style","display:none;");
+	}
+
+	// Make requested module appear
+	var reactivate = document.getElementsByClassName("featured_" + t);
+	for (var i=0;i<reactivate.length;i++) {
+		reactivate[i].setAttribute("style","");
+	}
+
+	// Set all selectors to unselected
+	var selectors = document.getElementsByClassName("stat_selector_featured");
+	for (var i=0;i<selectors.length;i++) {
+		selectors[i].setAttribute("style","");
+	}
+
+	// Set the active selector to selected
+	var reactivate = document.getElementsByClassName("stat_selector_featured_" + t);
+	for (var i=0;i<reactivate.length;i++) {
+		reactivate[i].setAttribute("style","opacity:0.5;");
+	}
+}
+</script>
diff --git a/maloja/web/jinja/startpage_modules/lastscrobbles.jinja b/maloja/web/jinja/startpage_modules/lastscrobbles.jinja
new file mode 100644
index 0000000..ae0da70
--- /dev/null
+++ b/maloja/web/jinja/startpage_modules/lastscrobbles.jinja
@@ -0,0 +1,15 @@
+<h1><a href="/scrobbles">Last Scrobbles</a></h1>
+
+{% for range in xcurrent %}
+	<span class="stats">{{ range.localisation }}</span>
+	<a href='/scrobbles?in={{ range.identifier }}'>{{ dbc.get_scrobbles_num({'timerange':range.range}) }}</a>
+{% endfor %}
+<br/><br/>
+
+<span class="stat_module">
+
+
+	{%- with amountkeys = {"perpage":12,"page":0}, shortTimeDesc=True -%}
+	{% include 'partials/scrobbles.jinja' %}
+	{%- endwith -%}
+</span>
diff --git a/maloja/web/jinja/startpage_modules/pulse.jinja b/maloja/web/jinja/startpage_modules/pulse.jinja
new file mode 100644
index 0000000..5efdc00
--- /dev/null
+++ b/maloja/web/jinja/startpage_modules/pulse.jinja
@@ -0,0 +1,17 @@
+<h1><a class="stat_link_pulse" href="/pulse?trail=1&step=month">Pulse</a></h1>
+
+{% for range in xranges -%}
+	<span onclick="showRangeManual('pulse','{{ range.identifier }}')" class="stat_selector_pulse selector_pulse_{{ range.identifier }}">
+		{{ range.localisation }}
+	</span>
+	{{ "|" if not loop.last }}
+{%- endfor %}
+<br/><br/>
+
+{% for range in xranges -%}
+	<span class="stat_module_pulse pulse_{{ range.identifier }}" style="display:none;">
+		{%- with limitkeys={"since":range.firstrange},delimitkeys={"step":range.identifier} -%}
+		{% include 'partials/pulse.jinja' %}
+		{%- endwith -%}
+	</span>
+{%- endfor %}
diff --git a/maloja/web/static/css/maloja.css b/maloja/web/static/css/maloja.css
index 3c838db..95c17c1 100644
--- a/maloja/web/static/css/maloja.css
+++ b/maloja/web/static/css/maloja.css
@@ -802,10 +802,12 @@ table.misc td {
 
 div.tiles {
 	display: grid;
-	grid-template-columns: repeat(18, 50px);
-	grid-template-rows: repeat(6, 50px);
+	grid-template-columns: repeat(18, calc(100% / 18));
+	grid-template-rows: repeat(6, calc(100% / 6));
 	grid-auto-flow: row dense;
 
+	aspect-ratio: 3 / 1;
+
 }
 
 div.tiles div {
@@ -982,35 +984,3 @@ span.stat_module_pulse, span.stat_module_topartists, span.stat_module_toptracks
 	display: inline-block;
 	vertical-align: top;
 }
-
-/*
-**
-**
-** SIDE LIST ON START PAGE
-**
-**
-*/
-
-
-@media (min-width: 1600px) {
-div.sidelist {
-	position:absolute;
-	right:0px;
-	top:0px;
-	width:40%;
-	height:100%;
-	--current-bg-color: var(--base-color-light); /* drag this information through inheritances */
-	background-color: var(--current-bg-color);
-	padding-left:30px;
-	padding-right:30px;
-}
-}
-
-div.sidelist table {
-	width:100%;
-	table-layout:fixed;
-}
-
-div.sidelist table.list td.time {
-	width:17%;
-}
diff --git a/maloja/web/static/css/startpage.css b/maloja/web/static/css/startpage.css
new file mode 100644
index 0000000..2d3fe9b
--- /dev/null
+++ b/maloja/web/static/css/startpage.css
@@ -0,0 +1,49 @@
+div#startpage {
+	display: grid;
+	justify-content: center;
+
+	display: fixed;
+	grid-column-gap: 25px;
+	grid-row-gap: 25px;
+}
+
+
+@media (min-width: 2201px) {
+	div#startpage {
+		grid-template-columns: 30vw 30vw 30vw;
+		grid-template-rows: 45vh 45vh;
+
+		grid-template-areas:
+			"charts_artists charts_tracks charts_albums"
+			"lastscrobbles featured pulse";
+	}
+}
+
+@media (min-width: 1401px) and (max-width: 2200px) {
+	div#startpage {
+		grid-template-columns: 45vw 45vw;
+		grid-template-rows: 45vh 45vh 45vh;
+
+		grid-template-areas:
+			"charts_artists lastscrobbles"
+			"charts_tracks pulse"
+			"charts_albums featured";
+	}
+}
+
+@media (max-width: 1400px) {
+	div#startpage {
+		grid-template-columns: 90vw;
+
+		grid-template-areas:
+			"charts_artists"
+			"charts_tracks"
+			"charts_albums"
+			"lastscrobbles"
+			"pulse";
+	}
+
+	#start_page_module_featured {
+		display: none;
+	}
+}
diff --git a/maloja/web/static/js/rangeselect.js b/maloja/web/static/js/rangeselect.js
index f42d789..2561a69 100644
--- a/maloja/web/static/js/rangeselect.js
+++ b/maloja/web/static/js/rangeselect.js
@@ -2,7 +2,7 @@ localStorage = window.localStorage;
 
 function showRange(identifier,unit) {
 	// Make all modules disappear
-	modules = document.getElementsByClassName("stat_module_" + identifier);
+	var modules = document.getElementsByClassName("stat_module_" + identifier);
 	for (var i=0;i<modules.length;i++) {
 		//modules[i].setAttribute("style","width:0px;overflow:hidden;")
 		// cheesy trick to make the allocated space always whatever the biggest module needs
@@ -11,19 +11,19 @@ function showRange(identifier,unit) {
 	}
 
 	// Make requested module appear
-	reactivate = document.getElementsByClassName(identifier + "_" + unit);
+	var reactivate = document.getElementsByClassName(identifier + "_" + unit);
 	for (var i=0;i<reactivate.length;i++) {
 		reactivate[i].setAttribute("style","");
 	}
 
 	// Set all selectors to unselected
-	selectors = document.getElementsByClassName("stat_selector_" + identifier);
+	var selectors = document.getElementsByClassName("stat_selector_" + identifier);
 	for (var i=0;i<selectors.length;i++) {
 		selectors[i].setAttribute("style","");
 	}
 
 	// Set the active selector to selected
-	reactivate = document.getElementsByClassName("selector_" + identifier + "_" + unit);
+	var reactivate = document.getElementsByClassName("selector_" + identifier + "_" + unit);
 	for (var i=0;i<reactivate.length;i++) {
 		reactivate[i].setAttribute("style","opacity:0.5;");
 	}
@@ -43,16 +43,3 @@ function showRangeManual(identifier,unit) {
 	//neo.setCookie("rangeselect_" + identifier,unit);
 	localStorage.setItem("rangeselect_" + identifier,unit);
 }
-
-
-
-document.addEventListener('DOMContentLoaded',function() {
-	for (let type of ["topartists","toptracks","pulse"]) {
-		var val = localStorage.getItem("rangeselect_" + type);
-		if (val != null) {
-			showRange(type,val);
-		}
-
-
-	}
-})