Commit 2c3e6d29 authored by fred's avatar fred
Browse files

use flex mode for "columns" rendering

parent 852fa743
......@@ -1086,7 +1086,7 @@ div.extra-soundfiles ul strong {
}
.soundfiles ul.custom li a,
.news ul.custom li a { max-width: 98%; }
.news ul.custom li a { max-width: 100%; }
.news li.item a {padding:1em;}
.logo img{
......@@ -1097,6 +1097,23 @@ div.extra-soundfiles ul strong {
ul.newsSpecial{
border-bottom:3px solid #ccc;
}
.main-flex {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
li {
width: 48%;
list-style: none;
@media only screen and (max-width: 970px) {
width: 100%;
}
.big.logo img {
box-sizing: border-box;
}
}
}
@media only screen and (max-width: 970px) {
.columns {column-count: 1; -webkit-column-count: 1; -moz-column-count: 1;}
}
......
{% load thumbnail %}
<div class="topikcellcontent topik-{{cell.link_page.slug}}">
<a class="block cf" href="{{url}}">
<span class="logo">
<span class="big logo">
{% thumbnail cell.link_page.picture "480x320" crop="50% 25%" as im %}
<div class="logo">
<img class="normal" src="{{im.url}}"/>
......
......@@ -27,7 +27,7 @@
{% else %}
<h3 class="sectionLabel">{% firstof title cell.title %}</h3>
<ul class="custom columns cf padded">
<ul class="custom padded main-flex">
{% for soundfile in soundfiles %}
<li class="soundfile frontpage">
<div class="content content-inline cf special">
......@@ -35,7 +35,7 @@
<div class="label labels absolute">
<span class="item inBlock">{{ soundfile.format.title }}</span>
</div>
<div class="logo">
<div class="big logo">
{% if soundfile.episode.image %}
{% thumbnail soundfile.episode.image "480x320" crop="50% 25%" as im %}
<img class="normal" src="{{im.url}}"/>
......@@ -55,7 +55,7 @@
<h5 class="title">{{ soundfile.episode.title }}</h5>
<h5 class="title">{{ soundfile.episode.emission.title }}</h5>
<div class="description">
{{ soundfile.episode.text|safe|striptags|truncatewords:75}}
{{ soundfile.episode.text|safe|striptags|truncatewords:20}}
</div>
{% if soundfile.first_diffusion %}
<div class="smooth">{{ soundfile.first_diffusion|date:"d/m/Y" }}</div>
......
......@@ -13,7 +13,7 @@
<div class="emissions">
<div class="wrapper">
<ul class="custom list columns padded">
<ul class="custom list main-flex padded">
{% for emission in emissions %}
<li class="item {% for category in emission.categories.all %} {{ category|slugify }}{% endfor %}{% if emission.archived %} archived{% endif %}"
>{% emission_resume %}</li>
......
......@@ -12,7 +12,7 @@
{% endif %}
{% if search_query and episodes or episodes.count <= 24 %}
<ul class="custom columns list">
<ul class="custom main-flex list">
{% for episode in episodes %}
<li class="item {% for category in episode.emission.categories.all %} {{ category|slugify }}{% endfor %}">
{% episode_resume model="inline"%}
......
......@@ -3,7 +3,7 @@
<div class="wrapper">
<h2>Suggestions</h2>
<ul id="search-results" class="list columns padded cf">
<ul id="search-results" class="list main-flex padded">
{% for result in more_like_this %}
{% if result.title %}
......
......@@ -69,7 +69,7 @@
</div>
{% endif %}
<ul class="padded custom columns list">
<ul class="padded custom main-flex list">
{% for result in page.object_list %}
<li>{% soundfile_resume soundfile=result.object date=result.date %}</li>
{% endfor %}
......
......@@ -23,7 +23,7 @@ vous fait savoir.
<h5 class="sectionLabel focus-title">{% trans 'Focus' %}</h5>
{% with focus as news %}
<ul class="custom columns cf padded">
<ul class="custom main-flex padded">
{% for content in news %}
<li class="newsitem">
{% news_inline klass="special"%}
......
......@@ -7,7 +7,7 @@
</div>
{% endif %}
<div class="logo">
<div class="big logo">
{% if class == "special" and content.image %}
{% thumbnail content.image "480x320" crop="50% 25%" as im %}
<img alt="" class="normal" src="{{im.url}}"/>
......
......@@ -2,10 +2,10 @@
{% if cell.topik %}
<div class="topikcellcontent topik-{{cell.slug}}">
<a class="block cf" href="{{cell.topik.page.get_online_url}}">
<span class="logo">
<span class="big logo">
{% if cell.slug == "large" %}
{% thumbnail cell.topik.image "800x450" crop="50% 25%" as im %}
<div class="logo">
<div class="big logo">
<img class="normal" src="{{im.url}}"/>
</div>
{% endthumbnail %}
......
......@@ -75,7 +75,7 @@
</div>
{% endif %}
<ul id="search-results" class="custom list columns cf padded">
<ul id="search-results" class="custom list main-flex padded">
{% for result in page.object_list %}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment