Commit 247aab0d authored by Simon Daron's avatar Simon Daron

News styling

parent 598657cb
......@@ -171,7 +171,9 @@ class News(TemplateView):
def get_context_data(self, **kwargs):
context = super(News, self).get_context_data(**kwargs)
context['news'] = NewsItem.objects.all().exclude(image__isnull=True).exclude(image__exact='').order_by('-datetime')[:5]
context['newsImaged'] = NewsItem.objects.all().exclude(image__isnull=True).exclude(image__exact='').order_by('-datetime')[:3]
context['news'] = NewsItem.objects.all().order_by('-datetime')[:60]
context['categories'] = NewsCategory.objects.all()
context['emissions'] = Emission.objects.filter(archived=False).order_by('?')
context['player'] = audioPlayer()
return context
......
......@@ -8,6 +8,9 @@ a {
a:hover {
text-decoration: underline;
}
a.bloc:hover{
text-decoration: none;
}
button:hover {
opacity:0.8;
}
......@@ -62,6 +65,14 @@ nav a.active,
nav a:hover{
text-decoration:underline;
}
hr {
height: 0;
margin:0;
padding:0;
border-style:solid;
border-width:1px 0;
border-color:black;
}
table{
width:95%;
margin:auto;
......@@ -218,7 +229,6 @@ ul.inline li{
to {transform: rotate(359deg);}
}
.vertical {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
......@@ -226,15 +236,16 @@ ul.inline li{
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.columns{column-gap: 0; -webkit-column-gap: 0; -moz-column-gap: 0;}
.columns.padded{column-gap: 2em; -webkit-column-gap: 2em; -moz-column-gap: 2em;}
.columns li{
display:inline-block;
width:100%;
column-break-inside: avoid;
-moz-column-break-inside: avoid;
-webkit-column-break-inside: avoid;
break-inside: avoid-column;
-webkit-break-inside: avoid-column;
-moz-break-inside: avoid-column;
column-break-inside: avoid;
-moz-column-break-inside: avoid;
-webkit-column-break-inside: avoid;
break-inside: avoid-column;
-webkit-break-inside: avoid-column;
-moz-break-inside: avoid-column;
}
@media only screen and (min-width: 640px) { .columns{column-count: 2; -webkit-column-count: 2; -moz-column-count: 2;} }
@media only screen and (min-width: 1160px) { .columns{column-count: 3; -webkit-column-count: 3; -moz-column-count: 3;} }
......@@ -248,12 +259,12 @@ ul.inline li{
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before, .cf:after {
.wrapper:before, .wrapper:after, .cf:before, .cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
.wrapper:after, .cf:after {
clear: both;
}
......@@ -261,6 +272,6 @@ ul.inline li{
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
.wrapper, .cf {
*zoom: 1;
}
......@@ -13,24 +13,24 @@
.mainLegend{
text-align:right;
padding:1em;
background:#222;
color:white !important;
}
#News, #news {
background-color:#1663d5;
border-color:#fff !important;
color:white !important;
}
.news, .news *{border-color:#1663d5 !important;color:#1663d5;}
.news, .news *{border-color:#1663d5 !important;color:white !important;border-color:#fff !important;}
.mainLegend.news {
background-color:#1663d5;
}
.mainLegend.news *{color:white !important;}
.list.news {
.news {
border-style:solid;
border-width:0 1px 0 1px;
background-color:#1663d5;
color:white !important;
}
#player .metas, #player img{border-color:#fff;}
#Player, #player{
......@@ -162,16 +162,16 @@ button.tag {
-moz-border-radius: 7px;
}
.list > li{
/*padding:0.5em;*/
/*padding:0.5em;
min-height: 2.5em;
border-width:0 0 1px 0;
border-style:solid;
border-color:#ccc;
border-color:#ccc;*/
}
.list.columns{
border-width:0 1px 0 1px;
border-style:solid;
border-color:#ccc;
/*border-width:0 1px 0 1px;
/*border-style:solid;
/*border-color:#ccc;
column-rule:1px solid #ccc;
-moz-column-rule:1px solid #ccc; /* Firefox */
-webkit-column-rule:1px solid #ccc; /* Safari and Chrome */
......
......@@ -13,7 +13,7 @@
<button class="control symbol add">B</button>
</div>
{% endif %}
<a class="link" href="{% url 'emission-view' slug=emission.slug %}">
<a class="link" href="#">
<h5 class="title ellipsis">{{ emission.title }}</h5>
{% if emission.description %}
......
......@@ -6,20 +6,22 @@
<h1 class="squashed">News</h1>
</div>
</div>
<div class="wrapper">
<ul class="custom list news">
{% for NewsItem in news %}
<li class="item num-{{forloop.counter}}">
{% if NewsItem.slug == news.0.slug %}
{% include "news/inline.html" with content=NewsItem class="special" logo="large"%}
{% elif NewsItem.slug == news.1.slug or NewsItem.slug == news.2.slug%}
{% include "news/inline.html" with content=NewsItem class="special" logo="medium"%}
{% else %}
{% include "news/inline.html" with content=NewsItem%}
{% endif %}
</li>
{% endfor %}
</ul>
<div class="news">
<div class="wrapper">
<ul class="custom list news">
{% for NewsItem in news %}
<li class="item num-{{forloop.counter}}">
{% if NewsItem.slug == news.0.slug %}
{% include "news/inline.html" with content=NewsItem class="special" logo="large"%}
{% elif NewsItem.slug == news.1.slug or NewsItem.slug == news.2.slug%}
{% include "news/inline.html" with content=NewsItem class="special" logo="medium"%}
{% else %}
{% include "news/inline.html" with content=NewsItem%}
{% endif %}
</li>
{% endfor %}
</ul>
</div>
</div>
<div class="mainLegend">
<div class="wrapper">
......
......@@ -8,9 +8,13 @@
<span class="iconLabel">Home</span>
</a></li>
<li><a href="{% url 'player' %}">
<span class="icon-bullhorn" ></span>
<span class="icon-headphones" ></span>
<span class="iconLabel">Listen</span>
</a></li>
<li><a href="{% url 'news' %}">
<span class="icon-bullhorn" ></span>
<span class="iconLabel">News</span>
</a></li>
<li><a href="{% url 'program' %}">
<span class="icon-calendar" ></span>
<span class="iconLabel">Program</span>
......
{% extends "base.html" %}
{% block listen %}{% endblock %}
{% block bodyID %}News{% endblock %}
{% block main %}
<div id="Program">
<h1>Programme</h1>
<div class="program tabs">
<ul class="custom">
{% for day in days %}
<li><a href="#Program-tabs-{{ day.datetime|date:"w" }}">{{ day.datetime|date:"D d" }}</a></li>
<div class="news">
<div class="wrapper">
<nav>
<ul class="padded custom columns left">
{% for category in categories %}
<li class="item num-{{forloop.counter}}">
<a href="#">{{ category.title }}</a>
</li>
{% endfor %}
</ul>
{% for day in days %}
<div id="Program-tabs-{{ day.datetime|date:"w" }}">
<ul class="custom emission-list list">
{% if day.schedules %}
{% for schedule in day.schedules %}
<li >
<div class="date dateBloc">
<div class="time">{{ schedule.datetime|date:"H:i" }}</div>
</div>
{% include "emissions/inline.html" with emission=schedule.emission %}
</li>
{% endfor %}
</ul>
</nav>
<div class="mainLegend"><h1 class="squashed">News</h1></div>
</div>
<hr />
<div class="wrapper">
<ul class="custom list news cf">
{% for NewsItem in newsImaged %}
<li class="item num-{{forloop.counter}}">
{% if NewsItem.slug == newsImaged.0.slug %}
{% include "news/inline.html" with content=NewsItem class="special" logo="large"%}
{% elif NewsItem.slug == newsImaged.1.slug or NewsItem.slug == newsImaged.2.slug%}
{% include "news/inline.html" with content=NewsItem class="special" logo="medium"%}
{% else %}
<li>Non stop</li>
{% include "news/inline.html" with content=NewsItem%}
{% endif %}
</ul>
</div>
</li>
{% endfor %}
</ul>
</div>
<hr />
<div class="wrapper">
<ul class="small news columns padded">
{% for NewsItem in news %}
<li class="item ellipsis">{% include "news/link.html" with content=NewsItem %}</li>
{% endfor %}
</ul>
</div>
</div>
{% endblock %}
{% load thumbnails %}
<div class="content content-inline inline cf {{ class }}">
<div>
{% if content.date %}
<div class="date cf">
<span class="day">XX</span>
<span class="day-number">00</span>
<span class="year">0000</span>
</div>
{% if content.datetime %}
<div class="date cf">{{ content.datetime|date:"D m/M" }}</div>
{% endif %}
{% if content.image %}
{% if logo == "large" %}
......@@ -17,12 +13,12 @@
<img class="logo right" src="{{ content.image|thumbnail:'60x60' }}"/>
{% endif %}
{% endif %}
<a class="link" href="{% url 'emission-view' slug=content.slug %}">
<a class="link bloc" href="{% url 'emission-view' slug=content.slug %}">
<h5 class="title {% if not class %}ellipsis{% endif %}">{{ content.title }}</h5>
<div class="description {% if not class %}ellipsis{% endif %}">
{% if logo == "large" %}
{{ content.text|safe|striptags}}
{{ content.text|safe|striptags|truncatewords:100}}
{% elif logo == "medium" %}
{{ content.text|safe|striptags|truncatewords:50}}
{% else %}
......
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