Merge branch 'singularity-table' into 'master'

Add sorting/styling to the Singularity image list table.

Closes #25

See merge request hcc/hcc-docs!183

content/applications/user_software/using_singularity.md

@@ -31,14 +31,17 @@ Publically available Docker images can be found at [Docker Hub](http://hub.docke
 convenience, HCC also provides a set of images on [Docker Hub](https://hub.docker.com/u/unlhcc/)
 known to work on HCC resources.  
 
-
 ### Available Images at HCC
 
 The following table lists the currently available images and the command
 to run the software.
 
+{{< sorttable >}}
+
 {{< readfile file="static/markdown/singularity-images.md" markdown="true" >}}
 
+{{< /sorttable >}}
+
 {{% notice note %}}
 If you would like to request an image to be added, please fill out the
 HCC [Software Request Form](http://hcc.unl.edu/software-installation-request)

layouts/shortcodes/sorttable.html

+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.1/js/jquery.tablesorter.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.1/js/widgets/widget-pager.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.1/js/widgets/widget-filter.min.js"></script>
+<script src="/js/sort-table.js"></script>
+
+<link rel="stylesheet" href="http://mottie.github.io/tablesorter/css/theme.default.css">
+<link rel="stylesheet" href="https://mottie.github.io/tablesorter/css/theme.dropbox.css">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.1/css/jquery.tablesorter.pager.min.css">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.1/css/filter.formatter.min.css">
+
+<div class="pager">
+    <img src="http://mottie.github.com/tablesorter/addons/pager/icons/first.png" class="first"/
+>
+    <img src="http://mottie.github.com/tablesorter/addons/pager/icons/prev.png" class="prev"/>
+    <!-- the "pagedisplay" can be any element, including an input -->
+    <span class="pagedisplay" data-pager-output-filtered="{startRow:input} &ndash; {endRow} / {
+filteredRows} of {totalRows} total rows"></span>
+    <img src="http://mottie.github.com/tablesorter/addons/pager/icons/next.png" class="next"/>
+    <img src="http://mottie.github.com/tablesorter/addons/pager/icons/last.png" class="last"/>
+    <select class="pagesize">
+      <option value="5">5</option>
+      <option value="10">10</option>
+      <option value="20">20</option>
+      <option value="30">30</option>
+      <option value="40">40</option>
+      <option value="all">All Rows</option>
+    </select>
+    <select class="gotoPage" title="Select page number">
+      <option value="1">1</option>
+      <option value="2">2</option>
+      <option value="3">3</option>
+      <option value="4">4</option>
+      <option value="5">5</option>
+    </select>
+</div>
+
+{{ .Inner }}
+
+<div class="pager">
+    <img src="http://mottie.github.com/tablesorter/addons/pager/icons/first.png" class="first"/
+>
+    <img src="http://mottie.github.com/tablesorter/addons/pager/icons/prev.png" class="prev"/>
+    <!-- the "pagedisplay" can be any element, including an input -->
+    <span class="pagedisplay" data-pager-output-filtered="{startRow:input} &ndash; {endRow} / {
+filteredRows} of {totalRows} total rows"></span>
+    <img src="http://mottie.github.com/tablesorter/addons/pager/icons/next.png" class="next"/>
+    <img src="http://mottie.github.com/tablesorter/addons/pager/icons/last.png" class="last"/>
+    <select class="pagesize">
+      <option value="5">5</option>
+      <option value="10">10</option>
+      <option value="20">20</option>
+      <option value="30">30</option>
+      <option value="40">40</option>
+      <option value="all">All Rows</option>
+    </select>
+    <select class="gotoPage" title="Select page number">
+      <option value="1">1</option>
+      <option value="2">2</option>
+      <option value="3">3</option>
+      <option value="4">4</option>
+      <option value="5">5</option>
+    </select>
+</div>
+
+<script>
+  var table = $("table");
+  table.addClass("sorttable");
+</script>