Styling grid

panikweb_templates/static/css/general.css

@@ -73,9 +73,11 @@ hr {
 }
 table{
 	margin:auto;
-	table-layout:fixed
+	table-layout:fixed;
 }
 table,td,tr  {
+	padding:0;
+	margin:0;
 	word-wrap: break-word;
 	text-overflow: ellipsis;
 	overflow: hidden;

panikweb_templates/static/css/specifics.css

@@ -83,6 +83,10 @@ body {
 	margin:1em 0 1em 0;
 }
 
+#Nav nav a, 
+  #Nav nav button{
+    border-bottom:2px transparent solid;
+}
 #Nav nav a.active, 
  #Nav nav a:hover,
   #Nav nav button:focus{
@@ -454,12 +458,15 @@ button.tag {
 #Grid .day {
 	padding:1em 0 1em 0;
 }
-#Grid td:hover {
-	cursor: pointer;
-	background-color: #D0D0D0;
+#Grid .nonstop {
+	color:#CCC;
+}
+#Grid .item{
+	padding:1em 0.2em 1em 0.2em;
 }
-#Grid .item {
-	padding:0.5em;
+#Grid .cell hr {
+	border:1px dotted #ddd;
+	margin:1em;
 }
 #Grid .highlighted,#Grid .highlighted  *{
 	background:#FF0096 !important;

panikweb_templates/static/js/specifics.js

@@ -19,5 +19,5 @@ $(function() {
 		
 		    });  
 		});  
-	});
+	});	
 });

panikweb_templates/templates/grid.html

@@ -5,11 +5,15 @@
 {% block listen %}{% endblock %}
 {% block title %}La grille{% endblock %}
 {% block nav %}
-	<nav class="">
+	<nav id="gridNav" class="">
 		<ul class="distributed by{{ categories.count }}">
+		        <li><button onclick="
+					$('#grid *').removeClass('highlighted');
+					$('#grid .nonstop').addClass('highlighted');
+				">Non-stop</button></li>
 		{% for category in categories %}
 		        <li><button onclick="
-					$('#grid .item').removeClass('highlighted');
+					$('#grid *').removeClass('highlighted');
 					$('#grid .{{ category|slugify }}').addClass('highlighted');
 				">{{ category }}</button></li>
 		{% endfor %}
@@ -31,13 +35,14 @@
 		<tr>
 			  <th class="heure">{{ time_header }}</th>
 			  {% for cell in time_cells %}
-			  <td class="small" {% if cell.w > 1 %}colspan="{{cell.w}}"{% endif %}
+			  <td class="small cell {% if cell.schedules|length > 1 %}many {% endif %}{% if cell.schedules %}scheduled{% else %}nonstop{% endif %}" {% 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 %}
+					{% if forloop.first == False and cell.schedules|length > 1 %}<hr />{% endif %}
 					<div class="item {% for category in schedule.emission.categories.all %}{{ category|slugify }}{% endfor %}">
 					
 						<strong>
@@ -49,7 +54,7 @@
 					</div>
 					{% endfor %}
 				      {% else %}
-					<div class="continu cell"><strong>{{ cell }}</strong></div>
+					<div class="continu"><strong>{{ cell }}</strong></div>
 					{% if cell.w > 1 and cell.h > 1%}<p>la musique en continu</p>{% endif %}
 				      {% endif %}
 			  </td>