Group songs into blocks on home page

diff --git a/src/littlesongplace/__init__.py b/src/littlesongplace/__init__.py
index 5754392307871a35d5af0d0c446563cd3e243ec8..57b08c0e2446cc01634f69276a00d00e27ec94ca 100644 (file)
--- a/src/littlesongplace/__init__.py
+++ b/src/littlesongplace/__init__.py
@@ -74,11 +74,20 @@ def index():
         all_events.extend(j.events)
     ongoing_events, upcoming_events, _, _ = jams._sort_events(all_events)
 
-    page_songs = songs.get_latest(50)
+    # Group songs by userid
+    page_songs = songs.get_latest(100)
+    songs_by_user = []
+    prev_song_user = None
+    for song in page_songs:
+        if song.userid != prev_song_user:
+            songs_by_user.append([])
+            prev_song_user = song.userid
+        songs_by_user[-1].append(song)
+
     return render_template(
             "index.html",
             users=all_users,
-            songs=page_songs,
+            songs_by_user=songs_by_user,
             page_title=title,
             ongoing_events=ongoing_events,
             upcoming_events=upcoming_events)

diff --git a/src/littlesongplace/static/styles.css b/src/littlesongplace/static/styles.css
index 5ac1dfe2abbff5b38a42dae3e248cedd3d737890..082cdf9a892bba04c7073bf3ceae6c4a79ea2c94 100644 (file)
--- a/src/littlesongplace/static/styles.css
+++ b/src/littlesongplace/static/styles.css
@@ -116,6 +116,11 @@ input[type=text], input[type=password], input[type=url], input[type=datetime-loc
     padding: 8px;
 }
 
+.subtle {
+    padding: 2px 6px;
+    font-size: 0.8em;
+}
+
 select {
     border: none;
     background-color: var(--purple);
@@ -442,6 +447,15 @@ input[type=file] {
     font-size: 12px;
 }
 
+/* Upload block (w/ song list) on home page */
+.upload-block {
+    box-shadow: 2px 2px 0px 0px;
+    border: 1px solid var(--black);
+    border-radius: var(--radius);
+    padding: 10px;
+    margin: 8px 0px;
+}
+
 /* Song Entry in Song List */
 .song-list-controls {
     padding-bottom: 5px;

diff --git a/src/littlesongplace/templates/index.html b/src/littlesongplace/templates/index.html
index 1fc7d0c47bd49ffe26526c7181aaab9b1b5213ff..b53aeef5e3cf9ba17155694308073ce987fac359 100644 (file)
--- a/src/littlesongplace/templates/index.html
+++ b/src/littlesongplace/templates/index.html
@@ -34,6 +34,27 @@
 
 <h2>hot new tunes</h2>
 {%- from "song-macros.html" import song_list %}
-{{ song_list(songs, current_user_playlists) }}
 
+{%- for songs in songs_by_user %}
+<div class="upload-block">
+    <a class="profile-link" href="/users/{{ songs[0].username }}">{{ songs[0].username }}</a> uploaded
+    {% if songs|length == 1 -%}
+    a song
+    {% else %}
+    {{ songs|length }} songs
+    <button class="button subtle" onclick="showAllSongsInUploadBlock(event)">show all</button>
+    {%- endif %}
+    <div style="padding-top: 10px">
+        {{ song_list(songs, current_user_playlists, show_first_only=True) }}
+    </div>
+</div>
+{% endfor -%}
+
+<script>
+function showAllSongsInUploadBlock(event) {
+    const uploadBlock = event.target.closest(".upload-block");
+    uploadBlock.querySelectorAll(".song").forEach((s) => { s.hidden = false; });
+    event.target.hidden = true;  // Hide show all button
+}
+</script>
 {% endblock %}

diff --git a/src/littlesongplace/templates/song-macros.html b/src/littlesongplace/templates/song-macros.html
index 0b8ddf88ed86c6cff72e0e7deb5af7e4e82cbdb6..eaa037766539fc57b3fd290263d088e3d78d102f 100644 (file)
--- a/src/littlesongplace/templates/song-macros.html
+++ b/src/littlesongplace/templates/song-macros.html
@@ -76,9 +76,9 @@
 </div>
 {% endmacro %}
 
-{% macro song_list_entry(song, current_user_playlists) -%}
+{% macro song_list_entry(song, current_user_playlists, hidden=False) -%}
 {%- if not (song.hidden and session['userid'] != song.userid) -%}
-<div class="song" data-song="{{ song.json() }}">
+<div class="song" data-song="{{ song.json() }}" {% if hidden %}hidden{% endif %}>
     <div class="song-main">
         <div class="song-list-pfp-container">
             {%- if song.user_has_pfp %}
@@ -104,18 +104,21 @@
 {%- endif -%}
 {%- endmacro %}
 
-{% macro song_list(songs, current_user_playlists) -%}
+{% macro song_list(songs, current_user_playlists, show_first_only=False) -%}
 <div class="song-list">
-    {% if songs|length > 1 %}
+    {% if songs|length > 1 and not show_first_only %}
     <div class="song-list-controls">
         <label><input type="checkbox" name="shuffle" onchange="shuffleSongList(event)">Shuffle</label>
     </div>
     {% endif %}
 
     <div class="song-list-songs">
-        {% for song in songs -%}
+        {% for song in songs[:1] -%}
         {{ song_list_entry(song, current_user_playlists) | indent(8) }}
         {%- endfor %}
+        {% for song in songs[1:] -%}
+        {{ song_list_entry(song, current_user_playlists, hidden=True) | indent(8) }}
+        {%- endfor %}
     </div>
 </div>
 {%- endmacro %}