Add image to search results (events and playlists), also add booking button to events

diff --git a/app/static/src/sass/modules/boxes/_search-box.scss b/app/static/src/sass/modules/boxes/_search-box.scss
index 2b99788149278f64d81acb53a93755ce501025e8..8cf605fcead2371f2f1f9b28ae40bcc52c46a24c 100644 (file)
--- a/app/static/src/sass/modules/boxes/_search-box.scss
+++ b/app/static/src/sass/modules/boxes/_search-box.scss
@@ -3,6 +3,7 @@ $module: ".search-box";
 #{$module} {
 
     position: relative;
+    @include clearfix;
     @include margin-bottom(2);
 
     &__title {
@@ -39,4 +40,99 @@ $module: ".search-box";
 
     }
 
+    &__image-wrapper {
+
+        float: left;
+        width: 20%;
+        display: block;
+
+        & + #{$module}__right {
+
+            width: 80%;
+            float: left;
+            @include padding-left(1);
+
+        }
+
+        @include mq($until: xs) {
+            display: none;
+
+            & + #{$module}__right {
+
+                width: 100%;
+                float: none;
+                @include padding-left(0);
+
+            }
+        }
+
+    }
+
+    &__image {
+
+        @include fluid-aspect(720 435);
+
+        &--playlist {
+
+            @include fluid-aspect(720 435);
+
+        }
+
+        &--video {
+
+            &:after {
+                font-family: FontAwesome;
+                display: block;
+                content: "\f04b";
+                background: white;
+                width: 50px;
+                height: 50px;
+                border-radius: 50px;
+
+                font-size: 25px;
+
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                margin-top: -25px;
+                margin-left: -25px;
+
+                line-height: 50px;
+                text-align: center;
+                text-indent: 3px;
+
+            }
+
+        }
+
+        &--audio {
+
+            &:after {
+                font-family: FontAwesome;
+                display: block;
+                content: "\f028";
+                text-indent: 0px;
+                background: white;
+                width: 50px;
+                height: 50px;
+                border-radius: 50px;
+
+                font-size: 25px;
+
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                margin-top: -25px;
+                margin-left: -25px;
+
+                line-height: 50px;
+                text-align: center;
+                text-indent: 3px;
+
+            }
+
+        }
+
+    }
+
 }

diff --git a/app/templates/agenda/includes/event_search.html b/app/templates/agenda/includes/event_search.html
index 0acf5357ecdfe4e2d7b37eb65106cbbdee83a1e8..a933ff7c2006a1000896659f1dabd3ce13c22de9 100644 (file)
--- a/app/templates/agenda/includes/event_search.html
+++ b/app/templates/agenda/includes/event_search.html
@@ -10,9 +10,36 @@
 {% block subtitle %}
     <div class="search-box__subtitle">
         {% include 'agenda/includes/event_date_line.html' %}
+        {% if event.prices.all.0|floatformat != '0' and event.prices.all|length > 0 and not is_archive %}
+            <a class="button button--small ml1" href="{% url 'event_booking' event.slug %}" class="event__meta__btn">
+                {% trans "Reserve" %}
+            </a>
+        {% endif %}
     </div>
 {% endblock %}
 
+{% block image %}
+    {% with event.images.all|get_type:'card' as images %}
+        {% if images %}
+        <a href="{{ event.get_absolute_url }}" class="search-box__image-wrapper">
+            <figure class="search-box__image">
+                <img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-original="{{ MEDIA_URL }}{% thumbnail images.0.file 720 435 %}">
+            </figure>
+        </a>
+        {% else %}
+            {% with event.parent.images.all|get_type:'card' as images %}
+                {% if images %}
+                <a href="{{ event.get_absolute_url }}" class="search-box__image-wrapper">
+                    <figure class="search-box__image">
+                        <img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-original="{{ MEDIA_URL }}{% thumbnail images.0.file 720 435 %}">
+                    </figure>
+                </a>
+                {% endif %}
+            {% endwith %}
+        {% endif %}
+    {% endwith %}
+{% endblock %}
+
 {% block tags %}
     {% keywords_for event as tags %}
     {% if event.departments.all.0 or tags %}

diff --git a/app/templates/core/inc/search_card.html b/app/templates/core/inc/search_card.html
index 4ff100a5b073b6d4283caa524507b6c6af451a40..6235e83de6aaa5046e0593b8ffe657ba2bf78b66 100644 (file)
--- a/app/templates/core/inc/search_card.html
+++ b/app/templates/core/inc/search_card.html
@@ -1,23 +1,28 @@
 <div class="search-box">
 
-    {% block tags %}
+    {% block image %}
     {% endblock %}
 
-    <a href="{% block url %}{% endblock %}">
-        <h2 class="search-box__title dotted">
-            {% block title %}
-            {% endblock %}
-            <i class="fa fa-{% block icon %}{% endblock %}"></i>
-        </h2>
-    </a>
-
-    {% block subtitle %}
-    {% endblock %}
+    <div class="search-box__right">
+        {% block tags %}
+        {% endblock %}
 
-    <div class="search-box__content">
+        <a href="{% block url %}{% endblock %}">
+            <h2 class="search-box__title dotted">
+                {% block title %}
+                {% endblock %}
+                <i class="fa fa-{% block icon %}{% endblock %}"></i>
+            </h2>
+        </a>
 
-        {% block content %}
+        {% block subtitle %}
         {% endblock %}
+
+        <div class="search-box__content">
+
+            {% block content %}
+            {% endblock %}
+        </div>
     </div>
 
 </div>

diff --git a/app/templates/media/inc/playlist_search.html b/app/templates/media/inc/playlist_search.html
index 5720973e912fbf3f50654566b7fab2a4aab52daf..d4e0fb862e71e8ea2a1a36e9895313c52fd35df4 100644 (file)
--- a/app/templates/media/inc/playlist_search.html
+++ b/app/templates/media/inc/playlist_search.html
@@ -50,3 +50,13 @@
     {% endif %}
     <br>
 {% endwith %}
+
+{% block image %}
+    {% if playlist.medias.all.0.media.poster_url %}
+        <a href="{{ playlist.get_absolute_url }}" class="search-box__image-wrapper">
+            <figure class="search-box__image search-box__image--playlist search-box__image--{{playlist.type}}">
+                <img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-original="{{ playlist.medias.all.0.media.poster_url }}">
+            </figure>
+        </a>
+    {% endif %}
+{% endblock %}