narrative.html

<div class="row">
  <div class="medium-10 medium-offset-1 column">
    <div class="card card-full">
      <p class="smaller-text sans-serif">Narrative</p>
      <p class="lead">{{narrative.name}}</p>
      <div class="row">
        <div class="medium-9 columns">
          <h3>Introduction</h3>
          <div>
            {{narrative.introduction}}
          </div>

          {% if narrative.reports.size > 1 %}
          <h3>Reports</h3>
          <div>
            <ul>
            {%for report in narrative.reports %}
              <li>{{report.name | link_to_show: project, report}}</li>
            {% endfor %}
            </ul>
          </div>
          {% endif %}

          {% if narrative.images.size > 1%}
          <h3>Images</h3>
          <div>
          {% for image in narrative.images %}
            {{image | image_tag: project}}
          {% endfor %}
          </div>
          {% endif %}

          <h3>Conclusion <button id="toggle-conclusion" class="button small" >Show</button> </h3>

          <div id="narrative-conclusion" hidden="true">
            {{narrative.conclusion}}
          </div>

        </div>
        <div class="medium-3 columns">


          {% if narrative.cover_image_thumb != "" %}
          <img src="{{narrative.cover_image_thumb}}" class="narrative-thumb">
          <!-- <div class="cover-image center " style="display: block; width:90%; height:200px; background: url('{{narrative.cover_image_thumb}}');">
          </div>     -->


          {% endif %}
          <div>
            {{narrative.introduction | truncatewords: 20}}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


<script type="text/javascript">
  var isConclusionHidden = true;

  $("#toggle-conclusion").click(function(){
    if (isConclusionHidden) {
      $("#narrative-conclusion").show()
      $("#toggle-conclusion").html("Hide")

    } else {
      $("#narrative-conclusion").hide()
      $("#toggle-conclusion").html("Show")
    }
    isConclusionHidden = ! isConclusionHidden;

  })
</script>

<!--
<div class="row">
  <h1>{{narrative.name}}</h1>
  <hr>
</div>

<div class="row">
  <div class="medium-9 columns">
    <h3>Introduction</h3>
    <div>
      {{narrative.introduction}}
    </div>
    <h3>Conclusion</h3>
    <div>
      {{narrative.conclusion}}
    </div>
    {% if narrative.reports.size > 1 %}
    <h3>Reports</h3>
    <div>
      <ul>
      {%for report in narrative.reports %}
        <li>{{report.name | link_to_show: project, report}}</li>
      {% endfor %}
      </ul>
    </div>
    {% endif %}

    {% if narrative.images.size > 1%}
    <h3>Images</h3>
    <div>
    {% for image in narrative.images %}
      {{image | image_tag: project}}
    {% endfor %}
    </div>
    {% endif %}

  </div>
  <div class="medium-3 columns">
    {% if narrative.cover_image_thumb != "" %}
    <div class="cover-image center " style="display: block; width:90%; height:200px; background: url('{{narrative.cover_image_thumb}}');">
    </div>
    {% endif %}
    <div>
      {{narrative.introduction | truncatewords: 20}}
    </div>
  </div>

</div>


 -->