Merge pull request #536 from Rurusetto/fix/beatmap-background

Add fallback image for beatmap card
Rurusetto · Jul 25, 2023 · 2168e39 · 2168e39
2 parents c0be99c + 002514c
commit 2168e39
Show file tree

Hide file tree

Showing 5 changed files with 6 additions and 5 deletions.
diff --git a/.github/workflows/django.yml b/.github/workflows/django.yml
@@ -13,7 +13,7 @@ jobs:
     strategy:
       max-parallel: 4
       matrix:
-        python-version: [3.9]
+        python-version: [3.9, 3.11]
 
     steps:
     - uses: actions/checkout@v2

diff --git a/rurusetto/wiki/static/img/default-beatmap-background.png b/rurusetto/wiki/static/img/default-beatmap-background.png
diff --git a/rurusetto/wiki/templates/wiki/snippets/beatmap_approval_card.html b/rurusetto/wiki/templates/wiki/snippets/beatmap_approval_card.html
@@ -4,7 +4,7 @@
 
 <div class="col-sm-6" data-aos="fade-up" data-aos-duration="600" data-aos-once="true">
     <div class="card mb-3" style="max-width: 100%">
-      <div class="row g-0 rounded" style="background-image: url({{ beatmap.0.beatmap_cover.url }}); background-size: cover; background-position: center">
+      <div class="row g-0 rounded" style="background-image: url({{ beatmap.0.beatmap_cover.url }}, {% static 'img/default-beatmap-background.png' %}); background-size: cover; background-position: center">
         <div class="col-md-4 position-relative" style="min-height: 200px; background-image: url({{ beatmap.0.beatmap_list.url }}); background-size: cover; background-position: center;">
             <div class="mediPlayer position-absolute top-50 start-50 translate-middle">
                 <audio class="listen" preload="none" data-size="80" src="//b.ppy.sh/preview/{{ beatmap.0.beatmapset_id }}.mp3"></audio>

diff --git a/rurusetto/wiki/templates/wiki/snippets/beatmap_card.html b/rurusetto/wiki/templates/wiki/snippets/beatmap_card.html
@@ -4,13 +4,13 @@
 
 <div class="col-sm-6" data-aos="fade-up" data-aos-duration="600" data-aos-once="true">
     <div class="card mb-3" style="max-width: 100%;">
-      <div class="row g-0 rounded" style="background-image: url({{ beatmap.0.beatmap_card.url }}); background-size: cover; background-position: center">
-        <div class="col-md-4 position-relative" style="min-height: 200px; background-image: url({{ beatmap.0.beatmap_list.url }}); background-size: cover; background-position: center;">
+      <div class="row g-0 rounded" style="background-image: url({{ beatmap.0.beatmap_card.url }}),url({% static 'img/default-beatmap-background.png' %}); background-size: cover; background-position: center">
+        <div class="col-md-4 position-relative" style="min-height: 200px; background-image: url({{ beatmap.0.beatmap_list.url }}),url({% static 'img/default-beatmap-background.png' %}); background-size: cover; background-position: center;">
             <div class="mediPlayer position-absolute top-50 start-50 translate-middle">
                 <audio class="listen" preload="none" data-size="80" src="//b.ppy.sh/preview/{{ beatmap.0.beatmapset_id }}.mp3"></audio>
             </div>
         </div>
-        <div class="col-md-8 rounded-start" style="line-height: 0.3; background-image: url({{ beatmap.0.beatmap_card.url }}); background-size: cover; background-position: center;">
+        <div class="col-md-8 rounded-start" style="line-height: 0.3; background-image: url({{ beatmap.0.beatmap_card.url }}),url({% static 'img/default-beatmap-background.png' %}); background-size: cover; background-position: center;">
           <div class="card-body beatmap-card rounded-start rounded-3">
             <a href="{{ beatmap.0.url }}" class="text-decoration-none"><h4 class="card-title spacing-hover-short beatmap-title">{{ beatmap.0.title }}</h4></a>
             <p class="card-text">{% trans "by" %} {{ beatmap.0.artist }}</p>

diff --git a/rurusetto/wiki/templates/wiki/snippets/beatmap_info_modal.html b/rurusetto/wiki/templates/wiki/snippets/beatmap_info_modal.html
@@ -4,6 +4,7 @@
 {% load round_up %}
 {% load get_genre_name %}
 {% load get_language_name %}
+{% load static %}
 
 <div class="modal fade" id="modal{{ beatmap.0.beatmap_id }}" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
     <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">