Moved module-menu to fixed position, not tooltip

_layouts/rule.html

@@ -93,26 +93,7 @@ layout: default
       }
   }
 
-  // DEPRECATED?
-  // Moves a text field up or down
-  // direction is bool: true is up, false is down
-  function swapSibling(node1, direction) {
-      var node2 = null;
-      if (direction == true) {
-          node2 = node1.previousElementSibling;
-          if (node2 == null) { return; }
-          node2.parentNode.replaceChild(node2, node1);
-          node2.parentNode.insertBefore(node1, node2);          
-      } else {
-          node2 = node1.nextElementSibling;
-          if (node2 == null) { return; }
-          node1.parentNode.replaceChild(node1, node2);
-          node1.parentNode.insertBefore(node2, node1);
-      }
-      // cancel if there is no sibling
-  }
-
-  // Tests if the Builder is empty
+  // Tests if the RuleBuilder is empty
   function builderEmpty() {
       var builder = document.getElementById("module-input");
       var childs = builder.children;
@@ -122,8 +103,15 @@ layout: default
           return true;
       }
   }
-  
-  // end BUILDER functions
+
+  // Turns RuleBuilder contents into a nested array
+  // TKTK to do
+  function builderArray() {
+      var modulesDOM = "";
+      var modulesArray = [];
+          
+  }
+  // end RuleBuilder functions
   
   // toggleVisible(id)
   // Toggles the visibility of a given element by given ID
@@ -465,53 +453,56 @@ layout: default
 
     <div id="rule-builder">
 
-       <div class="button" id="module-hover">
-          <img src="{% link assets/tabler_icons/tool.svg %}" title="Modules" />
-          <div class="tooltiptext" id="module-menu">
-            <!-- Customizable module -->
-            <span class="module" id="module-custom"
-                  draggable="true" ondragstart="drag(event)">
-			  <input contenteditable="true" placeholder="Custom..."/>
-              <img src="{% link assets/tabler_icons/bulb.svg %}"
-                   draggable="false" />
-		      <a onclick="this.parentNode.remove()" class="delete-module"
-			     style="display:none">
-			    <img src="{% link assets/tabler_icons/x.svg %}" /></a>
-		    </span>
-		    <!-- Load preset modules from _data/modules.csv -->
-		    {% for module in site.data.modules %}
-		    <span class="module" id="module-{{ module.id }}"
-			      draggable="true" ondragstart="drag(event)">
-		      <span id="module-name"
-                    onclick="moduleEditField(this.parentNode.id)">
-                {{ module.name }}</span>
-              <a target="_blank" href="{{ module.url }}" class="module-link">
-                <img title="{{ module.type }}" draggable="false" 
-                     {% if module.type == "structure" %}
-                     src="{% link assets/tabler_icons/building.svg %}" {% endif %}
-                     {% if module.type == "process" %}
-                     src="{% link assets/tabler_icons/rotate.svg %}" {% endif %}
-                     {% if module.type == "decision" %}
-                     src="{% link assets/tabler_icons/thumb-up.svg %}" {% endif %}
-                     {% if module.type == "culture" %}
-                     src="{% link assets/tabler_icons/palette.svg %}" {% endif %}
-                     /></a>
-		      <a onclick="this.parentNode.remove()" class="delete-module"
-			     style="display:none">
-			    <img src="{% link assets/tabler_icons/x.svg %}" /></a>
-		    </span>
-            {% endfor %}
-          </div>
-       </div>
-
-       <div id="module-input"
-            ondrop="drop(event)" ondragover="allowDrop(event)">
-         <span class="question" id="drag-directions">
-           Drag modules from the icon at right</span>      
-       </div>
-       
-       <div id="builder-field">
-       </div>
+      <button id="module-toggle" onclick="toggleVisible('module-menu')"
+              class="button" title="Show/hide">
+        <img src="{% link assets/tabler_icons/tool.svg %}" title="Modules" />
+      </button>
+
+      <div id="module-input"
+           ondrop="drop(event)" ondragover="allowDrop(event)">
+        <span class="question" id="drag-directions">
+          </span>      
+      </div>
+
+      <div id="builder-field">
+      </div>
+      
+      <div id="module-menu">
+        <!-- Customizable module -->
+        <span class="module" id="module-custom"
+              draggable="true" ondragstart="drag(event)">
+		  <input contenteditable="true" placeholder="Custom..."/>
+          <img src="{% link assets/tabler_icons/bulb.svg %}"
+               draggable="false" />
+		  <a onclick="this.parentNode.remove()" class="delete-module"
+			 style="display:none">
+			<img src="{% link assets/tabler_icons/x.svg %}" /></a>
+		</span>
+		<!-- Load preset modules from _data/modules.csv -->
+		{% for module in site.data.modules %}
+		<span class="module" id="module-{{ module.id }}"
+			  draggable="true" ondragstart="drag(event)">
+		  <span id="module-name"
+                onclick="moduleEditField(this.parentNode.id)">
+            {{ module.name }}</span>
+          <a target="_blank" href="{{ module.url }}" class="module-link">
+            <img title="{{ module.type }}" draggable="false" 
+                 {% if module.type == "structure" %}
+                 src="{% link assets/tabler_icons/building.svg %}" {% endif %}
+                 {% if module.type == "process" %}
+                 src="{% link assets/tabler_icons/rotate.svg %}" {% endif %}
+                 {% if module.type == "decision" %}
+                 src="{% link assets/tabler_icons/thumb-up.svg %}" {% endif %}
+                 {% if module.type == "culture" %}
+                 src="{% link assets/tabler_icons/palette.svg %}" {% endif %}
+                 /></a>
+		  <a onclick="this.parentNode.remove()" class="delete-module"
+			 style="display:none">
+			<img src="{% link assets/tabler_icons/x.svg %}" /></a>
+		</span>
+        {% endfor %}
+      </div>
+      
     </div>
 
     <h2 id="header-rw" class="metaheader">

_sass/communityrule.scss

@@ -10,7 +10,7 @@
   background-color: white;
   text-align: center;
   border-radius: 6px;
-  padding: 0 5px 0 5px;
+  padding: 0;
 }
 .callout-text {
     font-family: serif;
@@ -41,12 +41,17 @@
 /* Tooltip for Modules
    https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip_right 
    This could bear substantial improvement. */
-#module-hover {
+#module-toggle {
     float: right;
     position: relative;
     margin-left: 10px;
+    padding: 5px;
 }
 #module-menu {
+    display: none;
+    max-height: 200px;
+    overflow: scroll;
+    margin: 0 0 10px 0;
 }
 .button .tooltiptext {
     visibility: hidden;