Commit a236551c authored by Simon Daron's avatar Simon Daron
Browse files

Fixing GRID for small sizes

parent 569b25e5
......@@ -60,6 +60,27 @@ nav a.active,
nav a:hover{
text-decoration:underline;
}
table{
width:95%;
margin:auto;
table-layout:fixed
}
table,td,th,tr {
word-wrap: break-word;
text-overflow: ellipsis;
overflow: hidden;
text-align: center;
vertical-align: middle;
border: 5px solid #D0D0D0;
border-collapse:collapse;
}
table {
}
th {
white-space: nowrap;
}
tr{
}
p {
/*line-height: 1.2;*/
margin-bottom: 1em;
......@@ -183,7 +204,7 @@ ul.inline li{
.left{float:left;margin-left:1em;}
.smooth{opacity:0.5;}
.hidden{display:none;}
.padded{padding:2em;}
.spinning {
position:relative;
-webkit-animation: rotation 10s infinite linear;
......@@ -207,8 +228,15 @@ ul.inline li{
@keyframes rotation {
from {transform: rotate(0deg);}
to {transform: rotate(359deg);}
}
.vertical {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
......
......@@ -4,91 +4,62 @@
{% block main %}
<style>
#grille table, #grille tr, #grille td {
text-align: center;
vertical-align: middle;
}
#grille .symbol {
font-size:40px;
width:100%;
}
#grille table {
border-top: 5px solid #D0D0D0;
border-left: 5px solid #D0D0D0;
}
#grille td,#grille th {
border-bottom: 5px solid #D0D0D0;
border-right: 5px solid #D0D0D0;
}
#grille .heure {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
padding:20px 10px;
font-size:15px;
}
#grille h3 {
width: 100%;
}
#grille .jour {
margin-top:20px;
margin-bottom:30px;
width: 100%;
padding:1.5em 0;
}
#grille .continu, #grille .communautaire, #grille .mix, #grille .info {
font-family:Reglo;
text-transform:uppercase;
font-size:15px;
margin-bottom:10px;
line-height: 100%;
#grille .day {
padding:1em 0 1em 0;
}
#grille td:hover {
cursor: pointer;
background-color: #D0D0D0;
}
#grille .item {
margin-bottom:1em;
}
#grille {min-width:400px;}
</style>
<div id="grille">
<table>
<tbody>
<tr>
<td><br/></td>
{% for weekday in weekdays %}
<th width="13%">{{ weekday }}</th>
{% endfor %}
<td><br/></td>
</tr>
{% for time_header, time_cells in times|zip:grid %}
<tr>
<th class="heure">{{ time_header }}</th>
{% for cell in time_cells %}
<td {% if cell.w > 1 %}colspan="{{cell.w}}"{% endif %}
{% if cell.h > 1 %}rowspan="{{cell.h}}"{% endif %}>
{% if cell.time_label %}<div class="cell-time-label">{{ cell.time_label }}</div>{% endif %}
{% if cell.schedules %}
{% for schedule in cell.schedules %}
<div class="emission-title"><a href="{% url 'emission-view' slug=schedule.emission.slug %}">{{ schedule.emission.title }}</a></div>
{% if schedule.weeks_string %}
({{ schedule.weeks_string }})
{% endif %}
{% endfor %}
{% else %}
<div class="continu cell">{{ cell }}</div>
{% if cell.w > 1 and cell.h > 1%}<p>la musique en continu</p>{% endif %}
{% endif %}
</td>
{% endfor %}
<th class="heure">{{ time_header }}</th>
</tr>
{% endfor %}
</tbody>
</table>
<table>
<tbody>
<tr>
<td style="width:3em;"><br/></td>
{% for weekday in weekdays %}
<th class="day" width="13%">{{ weekday }}</th>
{% endfor %}
<td style="width:3em;"><br/></td>
</tr>
{% for time_header, time_cells in times|zip:grid %}
<tr>
<th class="heure vertical">{{ time_header }}</th>
{% for cell in time_cells %}
<td class="" {% if cell.w > 1 %}colspan="{{cell.w}}"{% endif %}
{% if cell.h > 1 %}rowspan="{{cell.h}}"{% endif %}>
{% if cell.time_label %}
<div class="cell-time-label">{{ cell.time_label }}</div>
{% 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>
<br />{% if schedule.weeks_string %}
({{ schedule.weeks_string }})
{% endif %}
</div>
{% endfor %}
{% else %}
<div class="continu cell"><strong>{{ cell }}</strong></div>
{% if cell.w > 1 and cell.h > 1%}<p>la musique en continu</p>{% endif %}
{% endif %}
</td>
{% endfor %}
<th class="heure vertical">{{ time_header }}</th>
</tr>
{% endfor %}
</tbody>
</table>
</div>
......
<div class="program tabs">
<ul class="custom">
{% for day in days %}
<li><a href="#Program-tabs-{{ day.datetime|date:"w" }}">{{ day.datetime|date:"D" }}</a></li>
<li><a href="#Program-tabs-{{ day.datetime|date:"w" }}">{{ day.datetime|date:"D d" }}</a></li>
{% endfor %}
</ul>
{% for day in days %}
......
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