Tagging liste emissions

panikweb/views.py

@@ -383,6 +383,7 @@ class Emissions(TemplateView):
     def get_context_data(self, **kwargs):
         context = super(Emissions, self).get_context_data(**kwargs)
         context['emissions'] = Emission.objects.all().order_by('title')
+        context['categories'] = Category.objects.all()
         return context
 
 emissions = Emissions.as_view()

panikweb_templates/static/css/general.css

@@ -231,9 +231,6 @@ a.active, button.active{
 	font-weight:bold;
 	text-decoration:none;
 }
-nav .active{
-	border-bottom:2px solid black;
-}
 .active *{
 	font-weight:inherit;
 }

panikweb_templates/static/css/specifics.css

@@ -97,6 +97,23 @@ button.tag, a.tag {
 	-moz-border-radius: 0.7em;
 	-webkit-border-radius: 0.7em;
 }
+button.check {
+	font-size:0.9em;
+	background:white;
+	text-transform: none;
+	display:inline-block;
+	border: 1px solid #CCC !important;
+	color:#342E2E;
+	margin: 0.2em;
+	padding: 0.3em;
+	border-radius: 0.7em;
+	-moz-border-radius: 0.7em;
+	-webkit-border-radius: 0.7em;
+}
+button.check:before {
+	display:inline-block;
+	width:1.5em;
+}
 
 /**** TABS ****/
 
@@ -218,9 +235,6 @@ body{
 #Nav{	background:#EED1B1;}
 #Nav *{	color:#342E2E;border-color:#342E2E;}
 
-#Nav nav *:focus, #Nav li.current > a{
-	font-weight:bold;
-}
 #Nav li a{
 	display: inline-block;
 	padding: 0.5em;
@@ -588,7 +602,16 @@ body{
 	color:white !important;
 }
 
-
+#Grid .highlighted,#Grid .highlighted  *{
+	background:#333 !important;
+	color:white !important;
+}
+#Emissions li.item.normal{
+	display:none;
+}
+#Emissions li.item.hightlighted{
+	display:block !important;
+}
 
 
 /**** COLOR VARIANTS ****/

panikweb_templates/static/css/type.css

@@ -85,4 +85,9 @@
 .error:before {
 	content: "\f056 ";
 }
+.checked:before {
+
+	content: "\f056 ";
+}
+
 

panikweb_templates/static/js/specifics.js

@@ -115,6 +115,18 @@ $(function() {
 			return false;
 			*/
 		});
+		$('[data-highlight]').on('check',function(){
+			$($(this).attr('data-about')).find($(this).attr('data-highlight')).addClass('highlighted').removeClass('normal');
+		}).on('uncheck',function(){
+			$($(this).attr('data-about')).find($(this).attr('data-highlight')).removeClass('highlighted').addClass('normal');
+		}).on('click',function(){
+			$(this).toggleClass('icon-check icon-check-empty');
+			if($(this).hasClass('icon-check')){$(this).trigger('check');
+			}else{	$(this).trigger('uncheck');}
+		});
+		$('[data-highlight].icon-check-empty').each(function(){
+			$(this).trigger('uncheck');
+		});
 		/*
 		$("[data-audio-control]").each(function() {
 			var audio = $('#'+$(this).attr('data-audio-control'));

panikweb_templates/templates/emissions.html

@@ -9,7 +9,8 @@
 <div class="emissions padded">
 		<ul class="custom list columns padded">
 		{% for emission in emissions %}
-			<li>{% emission_inline %}</li>
+			<li class="item  {% if emission.categories.all.count = 0 %}nocat{% endif %} {% for category in emission.categories.all %} {{ category|slugify }}{% endfor %}{% if emission.archived %} archived{% endif %}"
+			>{% emission_inline %}</li>
 		{% endfor %}
 		</ul>
 </div>

panikweb_templates/templates/emissions/inline.html

 {% load thumbnails %}
 <div class="emission emission-inline inline">
-	<div class=" {% if emission.archived %}archived{% endif %}">
+	<div class="{% if emission.archived %}archived{% endif %}">
 		<a class="block" href="{% url 'emission-view' slug=emission.slug %}">
 			<div class="logo left">
 				{% if emission.image %}

panikweb_templates/templates/emissions/nav.html

@@ -14,18 +14,21 @@
 		</a></li>
 	</ul>
 </nav>
-{% if class = "grid" %}
+{% if categories %}
 	<nav id="gridNav" class="checkable">
-		<ul class="distributed by{{ categories.count }}">
-		        <li><button onclick="
-					$('#grid *').removeClass('highlighted');
-					$('#grid .nonstop').addClass('highlighted');
-				">Non-stop</button></li>
+		<ul class="by{{ categories.count }}">
+		{% if class = "grid" %}
+		        <li><button class="check icon-check-empty"  data-about="#Main" data-highlight=".nonstop">Non-stop</button></li>
+		{% elif  class = "emissions" %}
+		        <li><button class="check icon-check"  data-about="#Main" data-highlight=".nocat">?</button></li>
+		        <li><button class="check icon-check-empty" data-about="#Main" data-highlight=".archived">Archives</button></li>
+		{% endif %}
 		{% for category in categories %}
-		        <li><button onclick="
-					$('#grid *').removeClass('highlighted');
-					$('#grid .{{ category|slugify }}').addClass('highlighted');
-				">{{ category }}</button></li>
+			{% if class = "grid" %}
+			        <li><button class="check icon-check-empty" data-about="#Main" data-highlight=".{{ category|slugify }}">{{ category }}</button></li>
+			{% else %}
+			        <li><button class="check icon-check" data-about="#Main" data-highlight=".{{ category|slugify }}">{{ category }}</button></li>
+			{% endif %}
 		{% endfor %}
 		</ul>
 	</nav>
@@ -42,7 +45,6 @@
 	<div class="wrapper half">
 		<nav class="tabs" data-tab-about="#Emission-container">
 			<ul class="distributed">
-
 				<li>
 					<button data-tab="#Emission-tabs-last" >
 						<span class="iconLabel">Dernier épisode</span>

panikweb_templates/templates/grid.html

 {% extends "emissions.html" %}
 {% load paniktags %}
-
 {% block bodyID %}Grid{% endblock %}
 {% block title %}La grille{% endblock %}
 {% block nav %}
@@ -29,7 +28,7 @@
 				      {% 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 %}">
+					<div class="item {% if not schedule.emission.categories %}nocat{% endif %} {% for category in schedule.emission.categories.all %} {{ category|slugify }}{% endfor %}">
 					
 						<strong>
 							<a href="{% url 'emission-view' slug=schedule.emission.slug %}">{{ schedule.emission.title }}</a>