Skip to content

GitLab

Commit f31f699b authored by Simon Daron's avatar Simon Daron
Browse files
Options

News styling & link back to emissions

parent 0bf8b540
Hide whitespace changes
Inline Side-by-side
Showing with 170 additions and 115 deletions
panikweb/views.py
View file @ f31f699b
......@@ -375,8 +375,7 @@ class Home(TemplateView):
def get_context_data(self, **kwargs):
context = super(Home, self).get_context_data(**kwargs)
context['sectionName'] = "Home"
context['focus'] = list(NewsItem.objects.all().exclude(image__isnull=True).exclude(image__exact='').order_by('-datetime')[0:3])
context['news'] = list(NewsItem.objects.all().exclude(image__isnull=True).exclude(image__exact='').order_by('-datetime')[3:10])
context['focus'] = list(NewsItem.objects.all().exclude(image__isnull=True).exclude(image__exact='').order_by('-datetime')[0:6])
context['emissions'] = list(Emission.objects.filter(archived=False).order_by('title'))
schedules = Schedule.objects.select_related().order_by('datetime')
days = []
......@@ -415,8 +414,7 @@ class NewsItemView(DetailView):
def get_context_data(self, **kwargs):
context = super(NewsItemView, self).get_context_data(**kwargs)
context['sectionName'] = "News"
context['focus'] = list(NewsItem.objects.all().exclude(image__isnull=True).exclude(image__exact='').order_by('-datetime')[0:3])
context['news'] = list(NewsItem.objects.all().exclude(image__isnull=True).exclude(image__exact='').order_by('-datetime')[3:10])
context['focus'] = list(NewsItem.objects.all().exclude(image__isnull=True).exclude(image__exact='').order_by('-datetime')[0:6])
context['newsAll'] = list(NewsItem.objects.all().order_by('-datetime')[:60])
context['categories'] = list(NewsCategory.objects.all())
return context
......@@ -427,8 +425,8 @@ class News(TemplateView):
def get_context_data(self, **kwargs):
context = super(News, self).get_context_data(**kwargs)
context['sectionName'] = "News"
context['focus'] = list(NewsItem.objects.all().exclude(image__isnull=True).exclude(image__exact='').order_by('-datetime')[0:3])
context['news'] = list(NewsItem.objects.all().exclude(image__isnull=True).exclude(image__exact='').order_by('-datetime')[3:10])
context['focus'] = list(NewsItem.objects.all().exclude(image__isnull=True).exclude(image__exact='').order_by('-datetime')[0:6])
context['news'] = list(NewsItem.objects.all().exclude(image__isnull=True).exclude(image__exact='').order_by('-datetime')[3:45])
context['newsAll'] = list(NewsItem.objects.all().order_by('-datetime')[:60])
context['categories'] = list(NewsCategory.objects.all())
return context
......
panikweb_templates/static/css/general.css
View file @ f31f699b
......@@ -332,8 +332,11 @@ img.right, img.left{max-width:50%;}
-webkit-break-inside: avoid-column;
-moz-break-inside: avoid-column;
}
@media only screen and (min-width: 600px) { .columns{column-count: 2; -webkit-column-count: 2; -moz-column-count: 2;} }
@media only screen and (min-width: 600px) {
.columns{column-count: 2; -webkit-column-count: 2; -moz-column-count: 2;}
}
@media only screen and (min-width: 900px) { .columns{column-count: 3; -webkit-column-count: 3; -moz-column-count: 3;} }
.columns.by3{column-count: 3; -webkit-column-count: 3; -moz-column-count: 3;}
/* And the rest is Eric & Seb, AGPLv3*/
......
panikweb_templates/static/css/specifics.css
View file @ f31f699b
......@@ -117,7 +117,18 @@ button.check:before, a.check:before {
background:#222;
color:#fff;
}
.ui-tooltip {
border:2px solid white;
position:absolute;
margin:0;
padding: 0.5em;
background:#222;
color: white;
border-radius:0.2em;
box-shadow: 0 0 1em black;
z-index: 9999;
max-width: 50%;
}
/**** TABS ****/
/****************************************************/
......@@ -246,8 +257,13 @@ body{
#Panik img{display:block;margin:auto;max-height:200px;}
#Links{min-height:15em;}
#Links{
min-height:15em;
}
#Related{
background:#2F4F4F;
color:#fff;
}
/****************************************************/
/**** SCREEN NAV ****/
#Nav{
......@@ -503,34 +519,6 @@ body{
#Emission-tabs-menu .sub{
margin-bottom:1em;
}
@media screen and (min-width: 600px) {
#Emissions #Changing .wrapper.sided{
max-width:1000px;
}
#Emissions #Changing .wrapper.sided #Emission-tabs-detail,
#Emissions #Changing .wrapper.sided #Emission-tabs-menu{
width:45%;
}
#Emissions #Changing .wrapper.sided #Emission-tabs-detail{
float:left;
}
#Emissions #Changing .wrapper.sided #Emission-tabs-menu{
float:right;
}
/*
#Emissions #Changing .wrapper.sided .monthGroup{
width:45%;
}
#Emissions #Changing .wrapper.sided .monthGroup.even{
float:right;
clear:left;
}
#Emissions #Changing .wrapper.sided .monthGroup.odd{
float:left;
clear:right;
}
*/
}
/**** Detail ****/
.emission-detail .metas{
line-height:1.5em;
......@@ -654,53 +642,21 @@ body{
.list.news li {
}
.news a .content{padding:1em;}
.news li a{padding:1em;}
.news .date{padding:1em;}
.news .inline .title{
margin-bottom:1em;
}
.news .logo{
display:block;
border-style:solid;
border-width:2px;
}
@media (max-width: 600px) {
.list.news .logo{
max-width:50%;
}
.list.news .num-1 .title{
}
}
@media (max-width: 800px) {
.list.news .special .logo {
@media only screen and (max-width: 600px) {
.news .columns.by3{column-count: 1; -webkit-column-count: 1; -moz-column-count: 1;}
.news .columns.by3 .logo {
float:right;
max-width:50%;
margin:0 0 1em 1em;
}
}
@media (min-width: 800px) {
.list.news .logo{
max-width:50% !important;
}
.list.news .special .logo{
max-width:98% !important;
}
.list.news .num-1{
max-width:50%;
border:none;
float:left;
}
.list.news .num-2, .list.news .num-3{
border:none;
max-width:24%;
float:left;
}
.list.news .special.content{
padding : 1em;
}
}
.news.detail .description{
margin-top:1em;
......@@ -737,7 +693,6 @@ body{
opacity:0.8;
}
.newsRoll h5{
font-size:0.8em;
color:white;
padding:1em;
}
......@@ -888,6 +843,21 @@ body { font-size: 16px;}
body #All{ font-size: 100%; }
}
@media screen and (min-width: 600px) {
.wrapper.sided{
max-width:1000px;
}
.wrapper.sided .leftPart,
.wrapper.sided .rightPart{
width:45%;
}
.wrapper.sided .leftPart{
float:left;
}
.wrapper.sided .rightPart{
float:right;
}
}
div.program span.nonstop {
font-size: 80%;
color:#CCC;
......@@ -907,3 +877,5 @@ div.program span.nonstop {
list-style: none;
color: #800;
}
panikweb_templates/static/js/specifics.js
View file @ f31f699b
......@@ -9,7 +9,20 @@ $(function() {
var $main = $("#Changing");
var $metaNav = $("#metaNav");
var $log = $("#userLog");
$( document ).tooltip({
position: {
my: "center bottom-5",
at: "center top",
using: function( position, feedback ) {
$( this ).css( position );
$( "<div>" )
.addClass( "arrow" )
.addClass( feedback.vertical )
.addClass( feedback.horizontal )
.appendTo( this );
}
}
});
/****************************************************/
/**** AJAX UTILITIES FOR REQUESTS ****/
/****************************************************/
......
panikweb_templates/templates/base.html
View file @ f31f699b
......@@ -43,6 +43,9 @@
<div id="Main" class="cf">
{% block main %}{% endblock %}
</div>
<div id="Related" class="cf">
{% block related %}{% endblock %}
</div>
<div id="Links">
{% block links %}{% endblock %}
</div>
......
panikweb_templates/templates/emissions/emission_detail.html
View file @ f31f699b
......@@ -11,7 +11,7 @@
<div class="wrapper {% if episodes %}sided{% endif %} cf">
<div id="Emission-container" class="emission padded">
<div data-tabbed="true" id="Emission-tabs-default">
<div id="Emission-tabs-detail">
<div id="Emission-tabs-detail" class="leftPart">
{% if episode %}
{% episode_detail %}
{% else %}
......@@ -20,7 +20,7 @@
{% endif %}
</div>
<div id="Emission-tabs-menu" class="episodes">
<div id="Emission-tabs-menu" class="rightPart episodes">
{% if episode %}
<div class="sub">
<h5 class="sectionLabel">À propos</h5>
......@@ -66,5 +66,21 @@
</div>
</div>
{% endblock %}
{% block related %}
{% if related %}
<div class="padded">
<div class="wrapper">
<h2>Related</h2>
<ul class="custom columns list">
{% for result in related %}
<li class="item {% if episode.emission.categories.all.count = 0 %}nocat{% endif %} {% for category in episode.emission.categories.all %} {{ category|slugify }}{% endfor %}">
{% search_result_template result %}
</li>
{% endfor %}
</ul>
</div>
</div>
{% endif %}
{% endblock %}
{% block links %}
{% endblock %}
panikweb_templates/templates/emissions/newsitem_detail.html
View file @ f31f699b
......@@ -2,26 +2,51 @@
{% load thumbnails %}
{% load paniktags %}
{% block title %}{{ newsitem.title }}{% endblock %}
{% block nav %}
{% news_nav %}
{% endblock %}
{% block main %}
<div class="detail padded news cf">
<div class="wrapper text">
<header>
{% if newsitem.datetime %}
<div class="date cf center">{{ newsitem.datetime|date:"D m/M" }}</div>
<div class="wrapper text {% if newsitem.emission %}sided{% else %}half{% endif %}">
<div class="leftPart">
<header>
{% if newsitem.datetime %}
<div class="date cf center">{{ newsitem.datetime|date:"D m/M" }}</div>
{% endif %}
<h3 class="squashed title">
{{ newsitem.title }}
</h3>
</header>
{% if newsitem.image %}
<img class="logo right" src="{{ newsitem.image.url }}"/>
{% endif %}
<h3 class="squashed title">
{{ newsitem.title }}
</h3>
</header>
{% if newsitem.image %}
<img class="logo right" src="{{ newsitem.image.url }}"/>
{% endif %}
<div class="userContent description">
{{ newsitem.text|safe}}
<div class="userContent description">
{{ newsitem.text|safe}}
</div>
</div>
{% if newsitem.emission %}
<div class="rightPart">
<div class="sub">
<h5 class="sectionLabel">proposé par</h5>
{% with newsitem.emission as emission %}
<div class="">{% emission_resume %}</div>
{% endwith %}
</div>
</div>
{% endif %}
</div>
</div>
{% endblock %}
{% block related %}
{% if related %}
<div class="padded">
<div class="wrapper">
<h2>Related</h2>
<ul class="custom columns list">
{% for result in related %}
<li class="item {% if episode.emission.categories.all.count = 0 %}nocat{% endif %} {% for category in episode.emission.categories.all %} {{ category|slugify }}{% endfor %}">
{% search_result_template result %}
</li>
{% endfor %}
</ul>
</div>
</div>
{% endif %}
{% endblock %}
panikweb_templates/templates/home.html
View file @ f31f699b
......@@ -5,13 +5,21 @@
{% block bodyID %}Home{% endblock %}
{% block title %}Home{% endblock %}
{% block nav %}
{% newsroll %}
{% with focus as news %}
{% newsroll %}
{% endwith %}
{% endblock %}
{% block main %}
<div class="padded">
<div class="wrapper">
<h2>Cette semaine sur Panik</h2>
{% weekview %}
</div>
</div>
{% endblock %}
{% block related %}
<div class="padded">
<div class="wrapper">
<h2>Ecouter</h2>
<ul class="custom columns list">
{% for episode in episodes %}
......
panikweb_templates/templates/includes/metaNav.html
View file @ f31f699b
......@@ -6,19 +6,19 @@
<span class="icon-home"></span>
<span class="iconLabel">{% trans 'Home' %}</span>
</a></li>
<li class="{% if sectionName = "News" %}active{% endif %}"><a href="{% url 'news' %}">
<li class="{% if sectionName = "News" %}active{% endif %}"><a title="Actualité des émissions et programmes" href="{% url 'news' %}">
<span class="icon-bullhorn" ></span>
<span class="iconLabel">{% trans 'News' %}</span>
</a></li>
<li class="{% if sectionName = "Listen" %}active{% endif %}"><a href="{% url 'listen' %}">
<li class="{% if sectionName = "Listen" %}active{% endif %}"><a title="Derniers contenus écoutables publiés" href="{% url 'listen' %}">
<span class="icon-headphones" ></span>
<span class="iconLabel">{% trans 'Listen' %}</span>
</a></li>
<li class="{% if sectionName = "Emissions" %}active{% endif %}"><a href="{% url 'emissions' %}">
<li class="{% if sectionName = "Emissions" %}active{% endif %}"><a title="Les émissions, le programme de la semaine, la grille" href="{% url 'emissions' %}">
<span class="icon-calendar" ></span>
<span class="iconLabel">{% trans 'Program' %}</span>
</a></li>
<li class="{% if sectionName = "About" %}active{% endif %}"><a href="/la-radio/">
<li class="{% if sectionName = "About" %}active{% endif %}"><a title="Qui sommes nous, la charte,..." href="/la-radio/">
<span class="icon-info-sign" ></span>
<span class="iconLabel">{% trans 'About' %}</span>
</a></li>
......
panikweb_templates/templates/news.html
View file @ f31f699b
......@@ -2,19 +2,34 @@
{% load paniktags %}
{% block title %}News{% endblock %}
{% block nav %}
{% with focus as news %}
{% news_nav %}
{% endwith %}
{% endblock %}
{% block main %}
<div class="news">
{% with news|slice:"0:3" as news %}
<div class="wrapper">
<ul class="custom columns news cf by3">
{% for content in news %}
<li class="item">
{% news_inline klass="special"%}
</li>
{% endfor %}
</ul>
</div>
{% endwith %}
{% with news|slice:"3:" as news %}
<div class="wrapper">
<ul class="custom columns list news cf">
{% for content in news %}
<li class="item">
{% news_inline klass="special inBlock padded" logo="medium"%}
{% news_inline%}
</li>
{% endfor %}
</ul>
</div>
{% endwith %}
</div>
{% endblock %}
{% block links %}
......
panikweb_templates/templates/news/inline.html
View file @ f31f699b
{% load thumbnails %}
<div class="content content-inline inline cf {{ class }}">
<a class="block cf" href="{% url 'news-view' slug=content.slug %}">
{% if content.image %}
<img class="logo left" src="{{ content.image|thumbnail:'60x60' }}"/>
{% endif %}
{% if content.datetime %}
<strong>{{ content.datetime|date:"D m/M" }}</strong>
{% endif %}
{% if content.image %}
{% if class == "special" %}
<img class="logo" src="{{ content.image|thumbnail:'320x240' }}"/>
{% else %}
<img class="logo left" src="{{ content.image|thumbnail:'60x60' }}"/>
{% endif %}
{% endif %}
{% if content.datetime %}
<div class="label smooth {% if class == "special" %}center marged {% endif %}">{{ content.datetime|date:"D m/M" }}</div>
{% endif %}
<div class="content">
<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|truncatewords:100}}
{% elif logo == "medium" %}
{{ content.text|safe|striptags|truncatewords:50}}
<div class="description {% if not class %}ellipsis{% endif %}">
{% if class == "special" %}
{{ content.text|safe|striptags|truncatewords:75}}
{% else %}
{{ content.text|safe|striptags|truncatewords:20}}
{% endif %}
......
panikweb_templates/templates/news/nav.html
View file @ f31f699b
......@@ -2,7 +2,7 @@
{% newsroll %}
<div class="wrapper">
{% if categories %}
<nav id="gridNav" class="checkable">
<nav id="newsNav" class="checkable">
<ul class="by{{ categories.count }}">
{% for category in categories %}
<li><button class="check icon-check" data-about="#Main" data-toggle=".{{ category|slugify }}">{{ category }}</button></li>
......
panikweb_templates/templates/news/roll.html
View file @ f31f699b
......@@ -6,10 +6,10 @@
</li>
{% for content in news %}
<li class="{% if forloop.counter > 3 %}largeScreens{% endif %}">
<a class="block news relative" href="{% url 'news-view' slug=content.slug %}">
<a title="{{content.title|striptags|addslashes}}" class="block news relative" href="{% url 'news-view' slug=content.slug %}">
{% if content.image %}
<div class="absolute">
<h5 class="title ellipsis">{{content.title}}</h5>
<h5 class="title ellipsis">{{ content.datetime|date:"D m/M" }}</h5>
</div>
<img class="logo" src="{{ content.image|thumbnail:'240x320' }}"/>
{% endif %}
......
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