Several usability improvements, such as hiding RuleWriter by default and having modules hidden by default

_includes/rule-scripts.js

@@ -90,8 +90,8 @@ https://github.com/Bernardo-Castilho/dragdroptouch -->
       var moduleName = module.children[0].innerHTML;
       var moduleTitle = module.children[0].title;
       if (editMode) {
-          var query = "Explain how the <strong>" + moduleName
-              + "</strong> module works.";
+          var query = "How does the <strong>" + moduleName
+              + "</strong> module work?";
           var destination = document.getElementById("builder-field");
           if (moduleName == null) { moduleName = ""; }     
           var output = '\n<div id="custom-field-container">';
@@ -349,9 +349,14 @@ https://github.com/Bernardo-Castilho/dragdroptouch -->
           classDisplayAll("post-header","none");
           classDisplayAll("site-footer","none");
           document.getElementById("attribution").style.display = "block";
-          document.getElementById("toggleDisplayMode").style.display = "inline-block";
+          document.getElementById("fork").style.display = "inline-block";
           document.getElementById("publishRule").style.display = "none";
           document.getElementById("trash").style.display = "inline-block";
+          // Turn on RuleWriter if there's content
+          if ("" != document.getElementById("rulewriter").innerHTML) {
+              document.getElementById("rulewriter-box").style.display = "inline-block";
+          }
+          // Finish
           displayMode = true;
       } else {
           toggleEditMode() // turns on editMode
@@ -359,7 +364,7 @@ https://github.com/Bernardo-Castilho/dragdroptouch -->
           classDisplayAll("post-header","block");
           classDisplayAll("site-footer","block");
           document.getElementById("attribution").style.display = "none";
-          document.getElementById("toggleDisplayMode").style.display = "none";
+          document.getElementById("fork").style.display = "none";
           document.getElementById("publishRule").style.display = "inline-block";
           document.getElementById("trash").style.display = "none";
           displayMode = false;

_layouts/rule.html

@@ -47,18 +47,7 @@ layout: default
       </div>
       
       <div id="module-menu">
-
-        <!-- Customizable module -->
-        <span class="module" id="module-custom"
-              draggable="true" ondragstart="drag(event)">
-		  <input contenteditable="true" draggable="false" placeholder="Custom..."/>
-          <img src="{% link assets/tabler_icons/bulb.svg %}" class="module-logo"
-               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 _modules/ -->
         {% assign modules_array = site.modules | sort: "type" %}
         {% assign last_type = "" %}
@@ -72,7 +61,7 @@ layout: default
         <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 class="module-questions">{{ site.data.module_types[module.type].question }}</div>
-      <div id="module-type-{{ module.type }}">
+      <div id="module-type-{{ module.type }}" style="display: none;">
         {% endif %}
         {% assign last_type = module.type %}
 		<span class="module" id="module-{{ module.title | slugify }}"
@@ -89,6 +78,20 @@ layout: default
         {% endif %}
         {% endfor %}
       </div>
+
+      <div id="module-custom-container">
+        <!-- Customizable module -->
+        <span class="module" id="module-custom"
+              draggable="true" ondragstart="drag(event)">
+		  <input contenteditable="true" draggable="false" placeholder="Custom..."/>
+          <img src="{% link assets/tabler_icons/bulb.svg %}" class="module-logo"
+               draggable="false" />
+		  <a onclick="this.parentNode.remove()" class="delete-module"
+			 style="display:none">
+			<img src="{% link assets/tabler_icons/x.svg %}" /></a>
+		</span>
+      </div>
+
     </div>
   </div>
   <!-- END RuleBuilder -->
@@ -116,7 +119,7 @@ layout: default
 
 <button class="pushButton" id="publishRule" onclick="publishRule()"
         title="Add to the public Library">Publish</button>
-<button class="pushButton" id="toggleDisplayMode" onclick="fork()"
+<button class="pushButton" id="fork" onclick="fork()"
         title="Edit this Rule into a new one">Fork</button>
 <button class="pushButton" onclick="textOutput()"
         title="Download this Rule as a Markdown text file">Export</button>

_sass/communityrule.scss

@@ -50,8 +50,8 @@
     padding: 5px;
 }
 #module-menu {
-    max-height: 300px;
-    overflow-y: scroll;
+/*    max-height: 300px;
+    overflow-y: scroll; */
     margin: 0 0 10px 0;
     padding: 10px;
     border: 1px solid lightgray;
@@ -110,6 +110,10 @@
 .module-logo {
 }
 
+#module-custom-container {
+    margin: 20px 0 10px 0;
+}
+
 .builder-list {
     margin-bottom: 2em;
 }
@@ -253,6 +257,7 @@ Enabling users to add links*/
 }
 #rulewriter-box {
     margin:50px 0 50px 0;
+    display: none;
 }
 #rulewriter {
 }
@@ -260,7 +265,7 @@ Enabling users to add links*/
     float: right;
     clear: both;
 }
-#toggleDisplayMode {
+#toggleDisplayMode, #fork {
     margin: 0 0 10px 0;
     display: none;
 }