Turned RuleWriter into single field, replaced type icons in modules with info buttons and put type icons in type headers

_layouts/rule.html

@@ -101,7 +101,7 @@ https://github.com/Bernardo-Castilho/dragdroptouch -->
           var destination = document.getElementById("builder-field");
           if (moduleName == null) { moduleName = ""; }     
           var output = '\n<div id="custom-field-container">';
-          output += '<span class="question">' + query + '</span>';
+          output += '<span class="prompt">' + query + '</span>';
           output += '<div class="field-controls"><a onclick="this.parentNode.parentNode.remove()"><img src="{% link assets/tabler_icons/x.svg %}" class="delete-module" /></a></div>';
           output += '<p contenteditable="true" class="editable" id="custom-field" oninput="moduleTitleEdit(\'' + moduleID + '\')">' + moduleTitle + '</p>';
           output += '</div>\n';
@@ -272,10 +272,8 @@ https://github.com/Bernardo-Castilho/dragdroptouch -->
   function toggleEditMode() {
       if (editMode === true) { // switch to preview mode
           editMode = false;
-          classDisplayAll("section","block");
           classDisplayAll("button","none");
-          classDisplayAll("question","none");
-          classDisplayAll("metaheader","none");
+          classDisplayAll("prompt","none");
           classDisplayAll("delete-module","none");
           var editableFields = document.getElementsByClassName("editable");  
           // de-editable-ize the editable fields
@@ -300,21 +298,6 @@ https://github.com/Bernardo-Castilho/dragdroptouch -->
               document.getElementById("custom-field-container").remove();
           }
           document.getElementById("module-menu").style.display = "none";
-          // RuleWriter: Remove headers of empty sections
-          var sections = document.getElementsByClassName("section");
-          for (var i = 0; i < sections.length; i++) {
-              var sectionQuestions = sections[i].getElementsByClassName("editable");
-              var blanks = 0;
-              for (var x = 0; x < sectionQuestions.length; x++) {
-                  var content = sectionQuestions[x].innerHTML;
-                  content = content.replace(/(<([^>]+)>)/ig,''); // strips stray tags
-                  if (content == "") { blanks++; }
-                  if (blanks == sectionQuestions.length) {
-                      var headerID = "header-s" + (i + 1);
-                      document.getElementById(headerID).style.display = "none";
-                  }
-              }
-          }
           // Handle author link
           var authorName = document.getElementById("author-text").value;
           var authorURL = document.getElementById("author-url").value;
@@ -335,19 +318,17 @@ https://github.com/Bernardo-Castilho/dragdroptouch -->
       } else { // Switch to editMode
           editMode = true;
           classDisplayAll("button","block");
-          classDisplayAll("question","block");
+          classDisplayAll("prompt","block");
           classDisplayAll("editable","block");
-          classDisplayAll("header","block");
-          classDisplayAll("section","none");
-          classDisplayAll("metaheader","block");
-          classDisplayAll("link-text","inline");
-          classDisplayAll("link-url","inline");
-          classDisplayAll("delete-module","inline");
-          // builder handling
+          // RuleBuilder handling
+          classDisplayAll("delete-module","inline");          
           document.getElementById("rule-builder").style.display = "block";
+          document.getElementById("module-menu").style.display = "block";
           document.getElementById("module-input").style.border = "";
-          document.getElementById("builder-field").innerHTML = "";          
-          // author handling
+          document.getElementById("builder-field").innerHTML = "";
+          // link handling
+          classDisplayAll("link-text","inline");
+          classDisplayAll("link-url","inline");
           document.getElementById("authorship-result").style.display = "none";
           document.getElementById("authorship-words").style.display = "none";
           document.getElementById("authorship").style.display = "block";
@@ -610,16 +591,13 @@ https://github.com/Bernardo-Castilho/dragdroptouch -->
   
   <div id="rulebox">
 
-    <span class="question">What is the community’s name?</span>
+    <span class="prompt">What is the community’s name?</span>
     <h1 contenteditable="true" class="editable output" id="communityname">{{ page.community-name }}</h1>
 
-    <span class="question">Summarize its structure:</span>
+    <span class="prompt">Summarize its structure:</span>
     <p contenteditable="true" class="editable output" id="structure">{{ page.structure }}</p>
     
     <!-- RuleBuilder -->
-
-    <h2 class="metaheader">RuleBuilder
-      <button onclick="toggleVisible('rule-builder')" class="button chevrons"><img src="{% link assets/tabler_icons/chevrons-down.svg %}" title="Show/hide" /></button></h2>
     <div id="rule-builder">
 
       <button id="module-toggle" onclick="toggleVisible('module-menu')"
@@ -629,13 +607,14 @@ https://github.com/Bernardo-Castilho/dragdroptouch -->
 
       <div id="module-input"
            ondrop="drop(event)" ondragover="allowDrop(event)">
-        <span class="question" id="drag-directions">Browse modules with the tool button and drag them here.</span>
+        <span class="prompt" id="drag-directions">Browse modules with the tool button and drag them here.</span>
       </div>
 
       <div id="builder-field">
       </div>
       
-      <div id="module-menu" style="display:none;">
+      <div id="module-menu">
+
         <!-- Customizable module -->
         <span class="module" id="module-custom"
               draggable="true" ondragstart="drag(event)">
@@ -654,7 +633,18 @@ https://github.com/Bernardo-Castilho/dragdroptouch -->
         {% if module.layout == "module" %}
         {% if module.type != last_type %}
         {% if last_type != "" %}</div>{% endif %} 
-      <div class="module-type-header">{{ module.type }}
+      <div class="module-type-header">
+        <img
+          {% 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 %}
+          />
+        {{ 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 }}">
@@ -664,16 +654,9 @@ https://github.com/Bernardo-Castilho/dragdroptouch -->
 			  draggable="true" ondragstart="drag(event)">
 		  <span id="module-name" title="{{ module.summary }}">{{ module.title }}</span>
           <a target="_blank" href="{{ module.url }}">
-            <img title="{{ module.type }} (press for info)" draggable="false" class="module-logo"
-                 {% 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>
+            <img title="More info" draggable="false" class="module-logo"
+                 src="{% link assets/tabler_icons/info-circle.svg %}" />
+          </a>
 		  <a onclick="this.parentNode.remove()" class="delete-module"
 			 style="display:none">
 			<img src="{% link assets/tabler_icons/x.svg %}" /></a>
@@ -681,124 +664,15 @@ https://github.com/Bernardo-Castilho/dragdroptouch -->
         {% endif %}
         {% endfor %}
       </div>
-    </div>
-      
-    </div>
+    </div>  
+  </div>
+  <!-- END RuleBuilder -->
 
-  <h2 class="metaheader">RuleWriter
-    <button onclick="toggleVisible('rule-writer')" class="button chevrons"><img src="{% link assets/tabler_icons/chevrons-down.svg %}" title="Show/hide" /></button></h2>
+  <div id="rulewriter">
+    <span class="prompt">What else?</span>
+    <p id="rulewriter-field" contenteditable="true" class="editable output">Need to change DisplayRule and PublishRule</p>
+  </div>
   
-    <div id="rule-writer">
-      
-      <!-- SECTION S1: BASICS -->
-      <h3 id="header-s1" class="header">
-        <img src="{% link assets/tabler_icons/info-circle.svg %}"
-             class="icons" />
-        <span class="subhead output">Basics</span>
-        <button onclick="toggleVisible('s1')" class="button chevrons"><img src="{% link assets/tabler_icons/chevrons-down.svg %}" title="Show/hide" /></button>
-      </h3>
-      <div class="section" id="s1" style="display:none">        
-
-        <span class="question">What is the community’s mission?</span>
-        <p contenteditable="true" class="editable output" id="mission">{{ page.mission }}</p>
-
-        <span class="question">What core values does the community hold?</span>
-        <p contenteditable="true" class="editable output" id="values">{{ page.values }}</p>
-
-        <span class="question">What is the legal status of the community’s assets and creations?</span>
-        <p contenteditable="true" class="editable output" id="legal">{{ page.legal }}</p>
-        
-
-      </div><!--hiding section s1-->
-
-      <!-- SECTION s2: PARTICIPANTS -->
-      <h3 id="header-s2" class="header">
-        <img src="{% link assets/tabler_icons/user.svg %}"
-             class="icons" />
-        <span class="subhead output">Participants</span>
-        <button onclick="toggleVisible('s2')" class="button chevrons"><img src="{% link assets/tabler_icons/chevrons-down.svg %}" title="Show/hide" /></button>
-      </h3>  
-      <div class="section" id="s2" style="display:none">
-        
-        <span class="question">How does someone become a participant?</span>
-        <p contenteditable="true" class="editable output" id="membership">{{ page.membership }}</p>
-        
-        <span class="question">How are participants suspended or removed?</span>
-        <p contenteditable="true" class="editable output" id="removal">{{ page.removal }}</p>
-
-        <span class="question">What special roles can participants hold, and how are roles assigned?</span>
-        <p contenteditable="true" class="editable output" id="roles">{{ page.roles }}</p>
-
-        <span class="question">Are there limits on the terms or powers of participant roles?</span>
-        <p contenteditable="true" class="editable output" id="limits">{{ page.limits }}</p>
-
-      </div><!--hiding section s2-->
-
-      <!--SECTION s3: POLICY-->
-      <h3 id="header-s3" class="header">
-        <img src="{% link assets/tabler_icons/news.svg %}"
-             class="icons" />
-        <span class="subhead output">Policy</span>
-        <button onclick="toggleVisible('s3')" class="button chevrons"><img src="{% link assets/tabler_icons/chevrons-down.svg %}" title="Show/hide" /></button>
-      </h3>
-      <div class="section" id="s3" style="display:none">
-
-        <span class="question">What basic rights does this Rule guarantee?</span>
-        <p contenteditable="true" class="editable output" id="rights">{{ page.rights }}</p>
-        
-        <span class="question">Who has the capacity to decide on policies, and how do they do so?</span>
-        <p contenteditable="true" class="editable output" id="decision">{{ page.decision }}</p>
-        
-        <span class="question">How are policies implemented?</span>
-        <p contenteditable="true" class="editable output" id="implementation">{{ page.implementation }}</p>
-        
-        <span class="question">How does the community monitor and evaluate its policy implementation? </span>
-        <p contenteditable="true" class="editable output" id="oversight">{{ page.oversight }}</p>
-        
-      </div><!--hiding section s3-->
-
-      <!-- SECTION s4: PROCESS -->
-      <h3 id="header-s4" class="header">
-        <img src="{% link assets/tabler_icons/refresh.svg %}"
-             class="icons" />
-        <span class="subhead output">Process</span>
-        <button onclick="toggleVisible('s4')" class="button chevrons"><img src="{% link assets/tabler_icons/chevrons-down.svg %}" title="Show/hide" /></button>
-      </h3>
-      <div class="section" id="s4" style="display:none">
-
-        <span class="question">Where does the community deliberate about policies and governance?</span>
-        <p contenteditable="true" class="editable output" id="deliberation">{{ page.deliberation }}</p>
-
-        <span class="question">How does the community manage access to administrative accounts and other tools?</span>
-        <p contenteditable="true" class="editable output" id="access">{{ page.access }}</p>
-
-        <span class="question">How does the community manage funds and economic flows?</span>
-        <p contenteditable="true" class="editable output" id="economics">{{ page.economics }}</p>
-        
-        <span class="question">How are grievances among participants addressed?</span>
-        <p contenteditable="true" class="editable output" id="grievances">{{ page.grievances }}</p>
-        
-      </div><!--hiding section s4-->
-
-      <!-- SECTION s5: EVOLUTION -->
-      <h3 id="header-s5" class="header">
-        <img src="{% link assets/tabler_icons/adjustments.svg %}"
-             class="icons" />
-        <span class="subhead output">Evolution</span>
-        <button onclick="toggleVisible('s5')" class="button chevrons"><img src="{% link assets/tabler_icons/chevrons-down.svg %}" title="Show/hide" /></button>
-      </h3>
-      <div class="section" id="s5" style="display:none">
-
-        <span class="question">Where are policies and records kept?</span>
-        <p contenteditable="true" class="editable output" id="records">{{ page.records }}</p>
-
-        <span class="question">How can this Rule be modified?</span>
-        <p contenteditable="true" class="editable output" id="modification">{{ page.modification }}</p>
-
-      </div><!--hiding section s5-->
-
-    </div><!--end: rule-writer-->
-      
   <div id="authorship" class="linkbox">
     <span id="authorship-words">Created by</span>
     <input contenteditable="true" class="editable link-text" id="author-text" placeholder="Created by" />

_sass/communityrule.scss

@@ -27,15 +27,12 @@
     padding: 10px 10px 10px 10px;
     min-height: 1.5em;
     font-family: serif;
+    border: none;
     border-bottom: 1px dashed gray;
 }
-.question {
+.prompt {
     color: gray;
 }
-.metaheader {
-    color: gray;
-    margin-top: 50px;
-}
 
 .page-type {
     color: gray;
@@ -53,7 +50,6 @@
     padding: 5px;
 }
 #module-menu {
-    display: none;
     max-height: 300px;
     overflow-y: scroll;
     margin: 0 0 10px 0;
@@ -99,6 +95,9 @@
     border-color: gray;
 }
 .module a:hover {
+}
+#module-name {
+
 }
 .delete-module {
     cursor: pointer;
@@ -237,9 +236,15 @@ Enabling users to add links*/
 #communityname {
     font-weight: bold;
 }
+#structure {
+    font-size: 1.3em;
+}
+#rulewriter {
+    margin: 50px 0 50px 0;
+}
 #editToggle {
-  float: right;
-  clear: both;
+    float: right;
+    clear: both;
 }
 #toggleDisplayMode {
     margin: 0 0 10px 0;
@@ -248,9 +253,6 @@ Enabling users to add links*/
 #publishRule {
   margin: 0 0 10px 0;
 }
-#structure {
-  font-size: 1.3em;
-}
 #attribution {
     font-family: serif;
     font-size: .8em;