Merge pull request #55 from mikaelGusse/master

Improve comparison table view in exercise

review/templates/review/_comparisontable_unique.html

@@ -1,11 +1,6 @@
 {% load review %}
-<table class="comparison">
-	<tr>
-		{% for comparison in comparisons %}
-			<td>{% student_td course comparison %}</td>
-			{% if forloop.counter|divisibleby:10 %}
-				</tr><tr>
-			{% endif %}
-		{% endfor %}
-	</tr>
-</table>
+<grid class="comparison-grid">
+	{% for comparison in comparisons %}
+		<div class="grid-item" data-similarity={{comparison.similarity}}>{% student_td course comparison %}</div>
+	{% endfor %}
+</grid>

review/templates/review/exercise.html

@@ -59,7 +59,7 @@ <h4>Comparison pairs with highest similarity</h4>
 	var similarity = js.parseJSON($('#similarity'));
 	js.buildHeat(similarity);
 	js.histogram($('div.histogram'), similarity, 600, 80);
-	js.applyHeat($('table.comparison'));
+	js.applyHeat($('grid.comparison-grid'));
 });
 
 document.addEventListener('DOMContentLoaded', function() {

static/main.css

@@ -37,6 +37,51 @@ table.comparison td small { display:block; font-size:x-small; white-space:nowrap
 table.comparison td.success { background-color:transparent !important; }
 table.comparison .glyphicon { text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white; }
 
+/* Comparison Grid */
+.comparison-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+  border: 1px solid grey;
+  max-width: 2000px;
+}
+
+.comparison-grid .grid-item {
+  border: 1px solid grey;
+  padding: 0.1em 0.3em;
+  line-height: 1em;
+  display: flex;
+  flex-direction: column;
+}
+
+.comparison-grid .grid-item a {
+  display: block;
+  color: inherit;
+  text-decoration: none;
+}
+
+.comparison-grid .grid-item a:hover,
+.comparison-grid .grid-item.selected a {
+  background-color: #333;
+  color: white;
+}
+
+.comparison-grid .grid-item .similarity {
+  font-style: oblique;
+}
+
+.comparison-grid .grid-item small {
+  font-size: x-small;
+  white-space: break-word;
+}
+
+.comparison-grid .grid-item .success {
+  background-color: transparent !important;
+}
+
+.comparison-grid .glyphicon {
+  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
+}
+
 /* Course histograms */
 ul.course-histograms {
   list-style: none;