Introduce text collapsible

aleksis/core/static/js/main.js

@@ -64,4 +64,16 @@ $(document).ready( function () {
             "paging": false
         });
     });
+
+    // Initialize text collapsibles [MAT, own work]
+    $(".text-collapsible").addClass("closed").removeClass("opened");
+
+    $(".text-collapsible .open-icon").click(function (e) {
+        var el = $(e.target).parent();
+        el.addClass("opened").removeClass("closed");
+    });
+    $(".text-collapsible .close-icon").click(function (e) {
+        var el = $(e.target).parent();
+        el.addClass("closed").removeClass("opened");
+    });
 });

aleksis/core/static/style.scss

@@ -368,6 +368,27 @@ main .alert p:first-child, main .alert div:first-child {
   margin-right: -10px;
 }
 
+// Text collapsible
+
+.text-collapsible > .material-icons {
+    font-size: 20px;
+    line-height: 15px;
+    margin-bottom: 2px;
+    margin-left: -1px;
+    vertical-align: middle;
+    cursor: pointer;
+    color: #6d6d6d;
+}
+
+.text-collapsible.opened .a,
+.text-collapsible.opened > .material-icons.open-icon {
+    display: none;
+}
+
+.text-collapsible.closed .b,
+.text-collapsible.closed > .material-icons.close-icon {
+    display: none;
+}
 
 // Helpers
 

aleksis/core/templates/components/text_collapsible.html

+<span class="text-collapsible opened">
+    <span class="a">
+      {% include template with item=qs.first %} –
+      {% include template with item=qs.last %}
+    </span>
+    <i class="material-icons open-icon" title="Show more">add_circle_outline</i>
+    <span class="b">
+      {% for item in qs %}
+        {% include template with item=item %}
+      {% endfor %}
+    </span>
+    <i class="material-icons close-icon" title="Show less">remove_circle_outline</i>
+</span>