Fixing GRID for small sizes

panikweb_templates/static/css/general.css

@@ -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

panikweb_templates/templates/grid.html

@@ -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>
 
 

panikweb_templates/templates/includes/program.html

 <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 %}