use focus to mark emissions with podcasts

diff --git a/panikweb_templates/static/css/_specifics.scss b/panikweb_templates/static/css/_specifics.scss
index bdcdb30133416268a3c0ad8db2b4e422545b7299..da2fb8ae7e10c8a10193a5ddceeff2e5d033559b 100644 (file)
--- a/panikweb_templates/static/css/_specifics.scss
+++ b/panikweb_templates/static/css/_specifics.scss
@@ -2052,6 +2052,15 @@ div.emission-tile {
                        padding: 5px 20px;
                }
        }
+       span.badge {
+               position: absolute;
+               top: 1rem;
+               left: calc(1rem + 10px);
+               background: $secondary;
+               color: white;
+               padding: 0.5ex 1ex;
+               border-bottom: 3px solid $yellow;
+       }
 }
 
 div.emission-detail {

diff --git a/panikweb_templates/templates/home.html b/panikweb_templates/templates/home.html
index 88e4c26fa87e107d8a9132885255798d8ef11f35..5e860dbd81070b778f05cf9a8ea26211d9b224e1 100644 (file)
--- a/panikweb_templates/templates/home.html
+++ b/panikweb_templates/templates/home.html
@@ -32,13 +32,14 @@
            {% spaceless %}
            {% for emission in emissions %}
            <a href="{% url 'emission-view' slug=emission.slug %}">
-           <div class="emission-tile">
+           <div class="emission-tile {% if emission.has_focus %}emission-focus{% endif %}">
                    <div class="image">
                        {% thumbnail emission.image "400x400" crop="50% 50%" as im %}
                        <img src="{{im.url}}">
                        {% endthumbnail %}
                    </div>
                    <div class="name"><span>{{emission.title}}</span></div>
+                    {% if emission.has_focus %}<span class="badge">Podcasts disponibles</span>{% endif %}
            </div>
            </a>
            {% endfor %}