]> git.0d.be Git - panikweb.git/commitdiff
style emissions and episodes
authorFrédéric Péters <fpeters@0d.be>
Sat, 15 Jul 2017 14:32:59 +0000 (16:32 +0200)
committerFrédéric Péters <fpeters@0d.be>
Sat, 15 Jul 2017 20:58:59 +0000 (22:58 +0200)
panikweb/views.py
panikweb_templates/static/css/_general.scss
panikweb_templates/static/css/_specifics.scss
panikweb_templates/static/css/img/news_delim1.png [new file with mode: 0644]
panikweb_templates/templates/emissions/detail.html
panikweb_templates/templates/emissions/emission_detail.html
panikweb_templates/templates/emissions/episode_detail.html
panikweb_templates/templates/episodes/detail.html

index 479136d56c206149de5cd93cdae3ade9f40b6c4d..83fe64cedc926293cf8a31f08a81319a3ea5a807 100644 (file)
@@ -75,6 +75,17 @@ class EmissionMixin:
                         tables=['emissions_diffusion'],
                     ).order_by('first_diffusion').distinct()
 
+        context['all_episodes'] = \
+                episodes_queryset.extra(select={
+                        'first_diffusion': 'emissions_diffusion.datetime',
+                        },
+                        select_params=(False, True),
+                        where=['''datetime = (SELECT MIN(datetime)
+                                                FROM emissions_diffusion
+                                               WHERE episode_id = emissions_episode.id
+                                             )'''],
+                        tables=['emissions_diffusion'],
+                    ).order_by('first_diffusion')
 
         # get all related soundfiles in a single query
         soundfiles = {}
index 391fc77a3347cfa7ee67d657c52f738ab5e7ba1d..22f1867a799b7b522b575e3343701deb1eb9b3e0 100644 (file)
@@ -40,7 +40,6 @@ button, .button{
        background:none;
 }
 img {max-width:100%; max-height: 100%;}
-img.logo{border:2px solid black;}
 
 header{
        padding:0 0 2em 0;
index f4e37d580e5596e34de5a66882cc8a6431978006..063c8f771be9b7232b24a47fdb2093abfda7d529 100644 (file)
@@ -2034,6 +2034,10 @@ div.programCell a.playlist {
        cursor: default;
 }
 
+a:hover div.emission-tile img {
+       display: none;
+}
+
 div.emission-tile {
        background: $primary;
        position: relative;
@@ -2045,9 +2049,6 @@ div.emission-tile {
                height: 50vw;
        }
        float: left;
-       &:hover img {
-               display: none;
-       }
        div.image {
                //filter: grayscale(100%);
                border: none;
@@ -2126,3 +2127,77 @@ div#actu {
                max-width: 50ex;
        }
 }
+
+div.emission-detail {
+       background: url(img/news_delim1.png) bottom center repeat-x;
+       padding-bottom: 14px;
+       display: flex;
+       flex-direction: row;
+       > a {
+               width: 25%;
+               div.emission-tile {
+                       width: 100%;
+               }
+       }
+       div.emission-info {
+               width: 25%;
+               box-sizing: border-box;
+               padding: 1ex;
+               div.emission-text {
+                       font-size: 110%;
+               }
+       }
+}
+
+div.emission-episodes {
+       width: 50%;
+       background: $yellow;
+       ul, li {
+               margin: 0;
+               padding: 0;
+               list-style: none;
+       }
+       a {
+               position: relative;
+               height: 12.5vw;
+               width: 25%;
+               display: inline-block;
+               float: left;
+               div.image {
+                       //filter: grayscale(100%);
+                       border: none;
+                       height: 100%;
+                       width: 100%;
+                       img {
+                               width: 100%;
+                               height: 100%;
+                       }
+               }
+               div.time {
+                       position: absolute;
+                       top: 0;
+                       left: 10px;
+                       font-size: 14px;
+                       display: inline-block;
+                       background: $yellow;
+                       color: $secondary;
+                       padding: 0 0.5ex;
+               }
+               div.name {
+                       position: absolute;
+                       text-transform: uppercase;
+                       top: 50%;
+                       margin-top: -10px;
+                       font-size: 20px;
+                       text-align: center;
+                       width: 100%;
+                       span {
+                               background: $primary;
+                               padding: 5px 5px;
+                       }
+               }
+       }
+       a:hover img {
+               display: none;
+       }
+}
diff --git a/panikweb_templates/static/css/img/news_delim1.png b/panikweb_templates/static/css/img/news_delim1.png
new file mode 100644 (file)
index 0000000..11975c2
Binary files /dev/null and b/panikweb_templates/static/css/img/news_delim1.png differ
index 393364e2812346d24561f8caaf997c01b37b4bdd..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644 (file)
@@ -1,47 +0,0 @@
-{% load i18n paniktags %}
-<div class="emission emission-detail cf">
-       <article class="text userContent">
-       <div class="metas marged">
-               {% if schedules %}
-                       <ul class="schedule custom">
-                               {% for schedule in schedules %}
-                               <li>
-                                       <span class="label">{{ schedule.datetime|date:"l G:i" }}</span>
-                                       {% if schedule.weeks_string %}
-                                       <span class="weekdiff">({{ schedule.weeks_string }})</span>
-                                       {% endif %}
-                                       {% if schedule.rerun %} <span class="smooth">(rediff)</span> {% endif %}
-                               </li>
-                               {% endfor %}
-                       </ul>
-               {% endif %}
-               {% if emission.subtitle %}
-               <h4 class="subtitle">{{ emission.subtitle }}</h4>
-               {% endif %}
-       </div>
-       {% if emission.image %}
-               <div class="emission-logo"><img class="logo" src="{{ emission.image.url }}"/></div>
-       {% endif %}
-
-       {% if emission.text %}
-               {{ emission.text|safe}}
-       {% endif %}
-       </article>
-       {% if emission.email or emission.website %}
-       <div class="contacts box">
-               {% if emission.email %}
-                       <div class="email ellipsis">
-                               <span class="icon-envelope"></span>
-                               <span>{{ emission.email|strreplace:"@, (AT) "|strreplace:"., (DOT) "}}</span>
-                       </div>
-               {% endif %}
-               {% if emission.website %}
-                       <div class="contact ellipsis">
-                               <span class="icon-globe"></span>
-                               <a href="{{ emission.website}}">{{ emission.website}}</a>
-                       </div>
-               {% endif %}
-       </div>
-       {% endif %}
-</div>
-
index 2650902ab64c0827a4d19802740a7fe111c7baa6..69a081fa3d31dce2181fe7a3d5efa7710c0f3f17 100644 (file)
@@ -1,4 +1,4 @@
-{% extends "emissions.html" %}
+{% extends "base.html" %}
 {% load paniktags staticfiles i18n thumbnail %}
 {% block bodyID %}Emissions{% endblock %}
 {% block title %}{{ emission.title }}{% endblock %}
 {% endblock %}
 
 {% block toptitle %}
-<h1 class="top"><a href="{% url 'grid' %}">{% trans 'Program' %}</a></h1>
 {% endblock %}
-{% block nav %}
-       {% emission_nav %}
-{% endblock %}
-{% block main %}
-<div class="wrapper navigation cf">
-       <div id="Emission-container" class="emission">
-               <div data-tabbed="true" id="Emission-tabs-default">
-                       <div id="Emission-tabs-detail" class="leftPart">
-                               {% if episode %}
-                                       {% episode_detail %} 
-                               {% else %}
-                                       {% emission_detail %}
-                               {% endif %}
-                       </div>
-
-               {% if episodes.exists or futurEpisodes.exists or news or nonstop %}
-                       <div id="Emission-tabs-menu" class="rightPart episodes">
-
-                               {% if news %}
-                                       <div class="sub emissions-newsitems">
-                                               <h5 class="sectionLabel">{% trans 'News' %}</h5>
-                                               <ul class="custom list">
-                                               {% for content in news %}
-                                                       <li>{% news_inline %}</li>
-                                               {% endfor %}
-                                               </ul>
-                                       </div>
-                               {% endif %}
 
-                       {% if episodes.exists or futurEpisodes.exists %}
-                        <h5 class="sectionLabel right"><a class="" href="{% url 'emissionEpisodes' slug=emission.slug %}">Tous ({{ episodes.count }})</a></h5>
-                                               <h5 class="sectionLabel">Épisodes&nbsp;<a title="Podcasts" class="button icon-rss inBlock" href="{% url 'emission-podcasts' slug=emission.slug%}"></a></h5>
-                    <form method="get" action="{% url 'emissionEpisodes' slug=emission.slug %}" class="" id="search-form">
-                                <input id="id_q" name="q" type="text" {% if search_query %}value="{{ search_query }}"{% endif %}>
-                                <button class="icon-search"></button>
-                        </form>
-
-                               {% if futurEpisodes %}
-                                       <div class="sub futur-episodes">
-                                               <h5 class="sectionLabel">{% trans 'Coming Soon' %}</h5>
-                                               {% for episode in futurEpisodes|slice:":3" %}
-                                                       {% episode_inline %}
-                                               {% endfor %}
-                                       </div>
-                               {% endif %}
-
-                               {% if episodes %}
-                                       <div class="sub recent-episodes">
-                                               <h5 class="sectionLabel">{% trans 'Previously' %}</h5>
-
-                                               {% with episodes|slice:"0:5" as episodes %}
-                                                       {% for episode in episodes %}
-                                                               {% episode_inline %}
-                                                       {% endfor %}
-                                               {% endwith %}
-                                       </div>
-                               {% endif %}
-                       {% endif %}
-
-                       {% if nonstop %}
-                               <div class="sub emissions-newsitems">
-                                       <h5 class="sectionLabel">{% trans 'Recently' %}</h5>
-                                       <ul class="custom list">
-                                       {% for date in nonstop_dates %}
-                                       <li><div class="content content-inline inline cf">
-                                       <a class="block cf" href="{% url 'nonstop-playlist' slug=emission.slug year=date.year month=date.month day=date.day %}">
-                                       {% if emission.image %}
-                                       {% thumbnail emission.image "60x60" crop="50% 25%" as im %}
-                                       <div class="logo">
-                                       <img class="left" height="60" width="60" src="{{im.url}}"/>
-                                       </div>
-                                       {% endthumbnail %}
+{% block main %}
+<div class="emission emission-detail">
+       <div class="emission-tile">
+               <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>
+       </div>
+       <div class="emission-info">
+               {% if schedules %}
+                       <ul class="schedule custom">
+                               {% for schedule in schedules %}
+                               <li>
+                                       <span class="label">{{ schedule.datetime|date:"l G:i" }}</span>
+                                       {% if schedule.weeks_string %}
+                                       <span class="weekdiff">({{ schedule.weeks_string }})</span>
                                        {% endif %}
-                                       <div class="content">
-                                               <h5 class="title">{{date|date:'D d M Y'|lower}}</h5>
-                                       </div>
-                                       <div class="smooth">Playlist</div>
-                                       </a></li>
-                                       {% endfor %}
-                                       </ul>
-                               </div>
-                       {% endif %}
-
-                       </div>
+                                       {% if schedule.rerun %} <span class="smooth">(rediff)</span> {% endif %}
+                               </li>
+                               {% endfor %}
+                       </ul>
                {% endif %}
+               <div class="emission-text">
+               {{ emission.text|safe}}
                </div>
        </div>
+       <div class="emission-episodes">
+               {% for episode in all_episodes %}
+               <a href="{% url 'episode-view' emission_slug=episode.emission.slug slug=episode.slug %}">
+                       <div class="image">
+                               {% thumbnail episode.image "400x400" crop="50% 50%" as im %}
+                               <img src="{{im.url}}">
+                               {% endthumbnail %}
+                       </div>
+                       <div class="time"><span>{{ episode.first_diffusion|date:"H:i" }}</span></div>
+                       <div class="name"><span>{{ episode.title }}</span></div>
+               </a>
+               {% endfor %}
+       </div>
 </div>
 {% endblock %}
-
-{% block links %}
-{% endblock %}
-
-{% block related %}
-{% related_objects object=emission %}
-{% endblock %}
index 7421b39bd9acd47cbae7d49eab417433ca7d571e..9a973a71ae60e81e2d57cb5310efd7bff953ee2d 100644 (file)
@@ -1,5 +1,5 @@
-{% extends "emissions/emission_detail.html" %}
-{% load paniktags staticfiles soundfiles %}
+{% extends "base.html" %}
+{% load paniktags staticfiles soundfiles thumbnail %}
 {% block title %}{{ episode.title }} - {{ episode.emission.title }} {% endblock %}
 
 {% block head %}
 {% endif %}
 {% endblock %}
 
-{% block related %}
-{% related_objects object=episode %}
+{% block main %}
+<div class="emission emission-detail">
+       <a href="{% url 'emission-view' slug=emission.slug %}">
+       <div class="emission-tile">
+               <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>
+       </div>
+       </a>
+
+       <div class="emission-tile">
+               <div class="image">
+                       {% thumbnail episode.image "400x400" crop="50% 50%" as im %}
+                       <img src="{{im.url}}">
+                       {% endthumbnail %}
+               </div>
+               <div class="name"><span>{{episode.title}}</span></div>
+       </div>
+
+       <div class="emission-info">
+
+               {% if episode.subtitle %}
+               <h3 class="episode-subtitle">{{ episode.subtitle }}</h3>
+               {% endif %}
+               <ul class="schedule custom">
+                       {% for schedule in diffusions %}
+                               <li><span class="date">{{ schedule.datetime|date:"l d F Y à H:i" }}</span></li>
+                       {% endfor %}
+               </ul>
+
+       {% if episode.main_sound %}
+               <div class="sound">
+                       {% audio sound=episode.main_sound %}
+               </div>
+       {% endif %}
+       <div class="emission-text">
+               {{ episode.text|safe}}
+        </div>
+
+       {% if soundfiles.count %}
+       <div class="wrapper extra-soundfiles">
+               <h3>Fragments sonores</h3>
+               <ul class="padded custom list">
+       {% for soundfile in soundfiles %}
+       <li><strong>{{ soundfile.title }}</strong> {% audio sound=soundfile %}
+       </li>
+       {% endfor %}
+               </ul>
+       </div>
+       {% endif %}
+       </div>
+
+</div>
 {% endblock %}
index 1309fe2ffa1abc526d8f9725366efff812de37b6..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644 (file)
@@ -1,93 +0,0 @@
-{% load thumbnail paniktags %}
-<div class="episode detail episode-detail cf">
-       {% if episode.first_diffusion %}
-       <div class="dateBloc">
-               <div class="date">
-                       <div class="day">
-                           {{ episode.first_diffusion|date:"D"|slice:":2"}}
-                       </div>
-                       <div class="number">
-                           {{ episode.first_diffusion|date:"d" }}
-                       </div>
-                       {% if date != "daytime" %}
-                       <div class="month">
-                           {{ episode.first_diffusion|date:"M y" }}
-                       </div>
-                       {% endif %}
-                       <div class="time">
-                           {{ episode.first_diffusion|date:"H:i" }}
-                       </div>
-               </div>
-       </div>
-       {% endif %}
-       {% if diffusions %}
-       <header class="">
-               <h3 class="">{{ episode.title }}</h3>
-               {% if episode.subtitle %}
-               <h3 class="episode-subtitle">{{ episode.subtitle }}</h3>
-               {% endif %}
-               {% if diffusions|length > 1 %}
-               <div class="label">Diffusions</div>
-               {% else %}
-               <div class="label">Diffusion</div>
-               {% endif %}
-               <ul class="diffusions custom">
-                       {% for schedule in diffusions %}
-                               <li><span class="date">{{ schedule.datetime|date:"l d M Y à H:i" }}</span></li>
-                       {% endfor %}
-               </ul>
-       </header>
-       {% endif %}
-       {% if episode.main_sound %}
-               <div class="sound">
-                       {% audio sound=episode.main_sound %}
-               </div>
-       {% endif %}
-       <div class="content userContent marged">
-               {% if episode.image %}
-               {% thumbnail episode.image "640x480" crop="50% 25%" as im %}
-               <img class="logo right button" data-toggle-img="/media/{{episode.image}}" src="{{im.url}}"/>
-               {% endthumbnail %}
-               {% endif %}
-               {% if episode.text %}
-               <article class="text">
-                       {{ episode.text|safe}}
-               </article>
-               {% endif %}
-        </div>
-{% block topik %}
-{% for topik in topiks %}
-  {% topik topik=topik %}
-{% endfor %}
-{% endblock %}
-
-               <div class="metas">
-                       {% if episode.serie  or episode.auteur or episode.redif %}
-                       <dl class="credits cf">
-                           {% if episode.serie %}<dt>Serie</dt><dd>{{ serie }}</dd>{% endif %}
-                           {% if episode.auteur %}<dt>Auteur</dt><dd>{{ auteur }}</dd>{% endif %}
-                           {% if episode.redif %}<dt>Redifusion</dt><dd>{{ redif }}</dd>{% endif %}
-                       </dl>
-                       {% endif %}
-                       {% if episode.tags.all %}
-                       <ul class="custom inline tags">
-                               {% for tag in episode.tags.all %}
-                               <li><a class="tag" href="{% url 'search' %}?&selected_facets=tags_exact:{{tag|facet_tag}}">{{ tag }}</a></li>
-                               {% endfor %}
-                       </ul>
-                       {% endif %}
-               </div>
-
-       {% if soundfiles.count %}
-       <div class="wrapper extra-soundfiles">
-               <h3>Fragments sonores</h3>
-               <ul class="padded custom list">
-       {% for soundfile in soundfiles %}
-       <li><strong>{{ soundfile.title }}</strong> {% audio sound=soundfile %}
-       </li>
-       {% endfor %}
-               </ul>
-       </div>
-       {% endif %}
-
-</div>