Commit 18303d05 authored by Simon Daron's avatar Simon Daron
Browse files

Styling grid & nav for categories

parent 5c240d2f
......@@ -7,7 +7,7 @@ from django.views.decorators.csrf import csrf_exempt
from jsonresponse import to_json
from emissions.models import Emission, Episode, Diffusion, SoundFile, Schedule, NewsItem, NewsCategory
from emissions.models import Category, Emission, Episode, Diffusion, SoundFile, Schedule, NewsItem, NewsCategory
from emissions.utils import whatsonair
......@@ -145,6 +145,7 @@ class Grid(TemplateView):
grid = grid[:42]
times = times[:42]
context['categories'] = Category.objects.all()
context['grid'] = grid
context['times'] = times
context['weekdays'] = ['Lundi', 'Mardi', 'Mercredi', 'Jeudi',
......
......@@ -63,10 +63,6 @@ nav{
font-family: "RegloBold";
text-transform: uppercase;
}
nav a.active,
nav a:hover{
text-decoration:underline;
}
hr {
height: 0;
margin:0;
......@@ -76,21 +72,18 @@ hr {
border-color:black;
}
table{
width:95%;
margin:auto;
table-layout:fixed
}
table,td,th,tr {
word-wrap: break-word;
text-overflow: ellipsis;
overflow: hidden;
table,td,tr {
word-wrap: break-word;
text-overflow: ellipsis;
overflow: hidden;
text-align: center;
vertical-align: middle;
border: 5px solid #D0D0D0;
border: 1px solid #D0D0D0;
border-collapse:collapse;
}
table {
}
th {
white-space: nowrap;
text-transform: uppercase;
......@@ -231,6 +224,9 @@ nav a.active, nav button.active{
-o-animation: rotation 10s infinite linear;
animation: rotation 10s infinite linear;
}
.nowrap {
white-space: nowrap;
}
.center{
text-align:center;
margin:auto;
......
......@@ -49,3 +49,11 @@ h1, h2, h3, h5, h6 {
font-weight: normal;
}
button{background:none;border:none;}
button:focus::-moz-focus-inner,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
border: 0px dotted transparent;
}
......@@ -58,7 +58,6 @@ text-transform: uppercase;
body {
background-color: white;
color: #000305;
font-family: "RegloNormal";
line-height: normal;
text-align: left;
......@@ -81,7 +80,14 @@ body {
border-style:solid;
}
#Nav nav ul{
margin:2em 0 2em 0;
margin:1em 0 1em 0;
}
#Nav nav a.active,
#Nav nav a:hover,
#Nav nav button:focus{
color:#FF0096;
border-bottom:2px solid #FF0096;
}
.wrapper {max-width: 1024px; margin:auto;}
.wrapper.half{max-width:600px;margin:auto;}
......@@ -437,8 +443,12 @@ button.tag {
}
/**** GRILLE ****/
#Grid #Main {margin:1em;min-width:760px;}
#Grid #Main {}
#Grid .heure {
width:300px !important;
padding:0.5em 0 0.5em 0;
}
#Grid .heure.vertical {
padding:1.5em 0;
}
#Grid .day {
......@@ -449,7 +459,11 @@ button.tag {
background-color: #D0D0D0;
}
#Grid .item {
margin-bottom:1em;
padding:0.5em;
}
#Grid .highlighted,#Grid .highlighted *{
background:#FF0096 !important;
color:white !important;
}
/**** PROGRAMME ****/
......
......@@ -10,11 +10,11 @@
<script type="text/javascript" src="{{ STATIC_URL }}js/specifics.js"></script>
<link rel="stylesheet" href="{{ STATIC_URL }}css/reset.css" type="text/css" />
<link rel="stylesheet" href="{{ STATIC_URL }}font-awesome/css/font-awesome.min.css" type="text/css" />
<link rel="stylesheet" href="{{ STATIC_URL }}css/type.css" type="text/css" />
<link rel="stylesheet" href="{{ STATIC_URL }}css/general.css" type="text/css" />
<link rel="stylesheet" href="{{ STATIC_URL }}css/specifics.css" type="text/css" />
<link rel="stylesheet" href="{{ STATIC_URL }}font-awesome/css/font-awesome.min.css" type="text/css" />
<!--<script src="{{ STATIC_URL }}js/less-1.4.1.js" type="text/javascript"></script>
<link rel="stylesheet" href="{{ STATIC_URL }}css/style.css" />-->
......
......@@ -6,26 +6,26 @@
{% block title %}La grille{% endblock %}
{% block nav %}
<nav class="">
<ul class="distributed by6">
<li><button>Créations</button></li>
<li><button>Agendas</button></li>
<li><button>Info</button></li>
<li><button>Mixs</button></li>
<li><button>Communautaires</button></li>
<li><button>Continu</button></li>
<ul class="distributed by{{ categories.count }}">
{% for category in categories %}
<li><button onclick="
$('#grid .item').removeClass('highlighted');
$('#grid .{{ category|slugify }}').addClass('highlighted');
">{{ category }}</button></li>
{% endfor %}
</ul>
</nav>
{% endblock %}
{% block main %}
<div id="grille" class="wrapper">
<div id="grid" class="">
<table>
<tbody>
<tr>
<td style="width:3em;"><br/></td>
<td style=""><br/></td>
{% for weekday in weekdays %}
<th class="day" width="13%">{{ weekday }}</th>
{% endfor %}
<td style="width:3em;"><br/></td>
<td style=""><br/></td>
</tr>
{% for time_header, time_cells in times|zip:grid %}
<tr>
......@@ -38,8 +38,11 @@
{% endif %}
{% if cell.schedules %}
{% for schedule in cell.schedules %}
<div class="item">
<strong><a href="{% url 'emission-view' slug=schedule.emission.slug %}">{{ schedule.emission.title }}</a></strong>
<div class="item {% for category in schedule.emission.categories.all %}{{ category|slugify }}{% endfor %}">
<strong>
<a href="{% url 'emission-view' slug=schedule.emission.slug %}">{{ schedule.emission.title }}</a>
</strong>
<br />{% if schedule.weeks_string %}
({{ schedule.weeks_string }})
{% endif %}
......@@ -51,7 +54,7 @@
{% endif %}
</td>
{% endfor %}
<th class="heure vertical">{{ time_header }}</th>
<th class="heure">{{ time_header }}</th>
</tr>
{% endfor %}
</tbody>
......
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