Added type categories in module menus

_layouts/rule.html

@@ -648,11 +648,20 @@ https://github.com/Bernardo-Castilho/dragdroptouch -->
 			 style="display:none">
 			<img src="{% link assets/tabler_icons/x.svg %}" /></a>
 		</span>
-		<!-- Load preset modules from _modules/ -->
 
-        {% assign modules_array = site.modules | sort: "type" | reverse %}
-		{% for module in modules_array %}
+		<!-- Load preset modules from _modules/ -->
+        {% assign modules_array = site.modules | sort: "type" %}
+        {% assign last_type = "" %}
+        {% for module in modules_array %}
         {% if module.layout == "module" %}
+        {% if module.type != last_type %}
+        {% if last_type != "" %}</div>{% endif %} 
+      <div class="module-type-header">{{ module.type }}
+        <button onclick="toggleVisible('module-type-{{ module.type }}')" class="button chevrons"><img src="{% link assets/tabler_icons/chevrons-down.svg %}" title="Show/hide" /></button>
+      </div>
+      <div id="module-type-{{ module.type }}">
+        {% endif %}
+        {% assign last_type = module.type %}
 		<span class="module" id="module-{{ module.title | slugify }}"
 			  draggable="true" ondragstart="drag(event)">
 		  <span id="module-title" title="{{ module.summary }}">{{ module.title }}</span>
@@ -674,6 +683,7 @@ https://github.com/Bernardo-Castilho/dragdroptouch -->
         {% endif %}
         {% endfor %}
       </div>
+    </div>
       
     </div>
 

_sass/communityrule.scss

@@ -1,5 +1,6 @@
 /* BEGIN COMMUNITYRULE-SPECIFIC CSS */
 
+
 /* CLASSES */
 .button {
   position: relative;
@@ -54,11 +55,19 @@
 }
 #module-menu {
     display: none;
-    max-height: 200px;
+    max-height: 300px;
     overflow-y: scroll;
     margin: 0 0 10px 0;
+    padding: 10px;
     border: 1px solid lightgray;
 }
+
+.module-type-header {
+    font-weight: bold;
+    font-size: 1em;
+    margin: 10px 5px 5px 5px;
+}
+
 .button:hover {
     background-color: lightgray;
 }

modules.html

@@ -13,9 +13,18 @@ permalink: /modules/
   existing ones.
 </p>
 
-{% assign modules_array = site.modules | sort: "type" | reverse %}
+{% assign modules_array = site.modules | sort: "type" %}
+{% assign last_type = "" %}
 {% for module in modules_array %}
 {% if module.layout == "module" %}
+{% if module.type != last_type %}
+{% if last_type != "" %}</div>{% endif %} 
+<div class="module-type-header">{{ module.type }}
+  <button onclick="toggleVisible('module-type-{{ module.type }}')" class="button chevrons"><img src="{% link assets/tabler_icons/chevrons-down.svg %}" title="Show/hide" /></button>
+</div>
+<div id="module-type-{{ module.type }}">
+   {% endif %}
+   {% assign last_type = module.type %}
 <span class="module" id="module-{{ module.title | slugify }}"
       draggable="true" ondragstart="drag(event)">
   <span id="module-title" title="{{ module.summary }}">
@@ -37,3 +46,4 @@ permalink: /modules/
 </span>
 {% endif %}
 {% endfor %}
+</div>