narratives.html

<div class="cards">

	<div class="card card-wide" data-order="0" data-name=""> 
		<p class="lead">Narratives</p>
		<p>A narrative is a collection of research reports on a single subject by one or more authors.</p>
		
		<!--
		<div class="text-right">
			Sort by 
			<button id="sortName" class="button tiny">Name</button> 
			<button id="sortDate" class="button tiny">Date</button>
		</div>
		-->
		<div class="pagination-container">
			{{pagination}}
		</div>
	</div>

{%for narrative in narratives%}
	{% if narrative.cover_image_thumb == "" %}
	<div class="card" data-order="{{forloop.index}}" data-name="{{narrative.name}}">
		<a class="whole-tile" href="{{narratives_path | append: "/" | append: narrative.id}}">		
		<span class="arrow">→</span>
		</a>
		<p class="smaller-text sans-serif">NARRATIVE</p>
   		<h3>{{narrative.name | link_to_show: project, narrative}}</h3>
		<i class="fa fa-newspaper-o fa-4x card-symbol"></i>
	</div>
	{% else %}
		<a href="{{narratives_path | append: "/" | append: narrative.id}}">
		<div data-order="{{forloop.index}}" data-name="{{narrative.name}}" class="fill-link slip card" style="background: 
		linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), 
		url('{{narrative.cover_image_thumb}}'); background-repeat: no-repeat; background-position: center; background-size: cover;">
			<div class='card-label'><span>{{narrative.name}}</span><i>→</i></div>
		</div>
		</a>
	{% endif %}
{%endfor%}
</div>


<script type="text/javascript">
	$(function(){
		$('#sortName').click(function(){
			$grid.isotope({sortBy: 'name'});	
			
		})
		$('#sortDate').click(function(){
			$grid.isotope({ sortBy : 'order' });	
			
		})
	})
</script>