Several improvements to builder, including moveable text fields

_guides/first_rule.md

@@ -12,11 +12,11 @@ Whether your community is already up and running or still just an ambition, choo
 
 **It may be easiest to start with a [template]({% link templates.md %}), but you can also [start from scratch]({% link create.md %}).** On a template, press the <span class="pushButton">Customize</span> button to get started. Even if you end up changing almost everything you find in a template, the process can spur thinking in ways that a blank canvas would not.
 
-**Press the <span class="pushButton"><img src="{% link assets/tabler_icons/plus.svg %}" title="Expand" /></span> buttons to expand each section and start exploring.** You don't need to fill every field or even every section. If you don't leave an answer, the field will simply disappear when you publish.
+**Press the <span class="pushButton"><img src="{% link assets/tabler_icons/chevrons-down.svg %}" title="Expand" /></span> buttons to expand each section and start exploring.** You don't need to fill every field or even every section. If you don't leave an answer, the field will simply disappear when you publish.
 
 **Answer the questions in complete sentences**, because the questions will disappear when you publish. Make sure what you write will make sense when the questions are no longer there.
 
-**Use the Modules for inspiration.** Access them via <span class="pushButton"><img src="{% link assets/tabler_icons/tool.svg %}" title="Modules" /></span> alongside a given question. These suggestions are drawn from [Democratic Mediums](https://democraticmediums.info), a sister project that aims to collect governance patterns from diverse contexts.
+**Use the Modules for inspiration.** Access them via <span class="pushButton"><img src="{% link assets/tabler_icons/tool.svg %}" title="Modules" /></span>. These suggestions are drawn from [Democratic Mediums](https://democraticmediums.info), a sister project that aims to collect governance patterns from diverse contexts.
 
 **Separate the Rule from its data**. Think of your Rule like a constitution as opposed to a code of laws, like a building as opposed to the people who put it to use. Don't try to include all your community's policies in your Rule; explain there how you make and change policies. Don't list out who holds what roles; just define the roles. In your Rule, make clear where people can find that data---the policies, the role-holders, and so forth.
 

_layouts/rule.html

@@ -52,11 +52,34 @@ layout: default
       // include a field removal button
       var destination = document.getElementById("builder-field");
       if (content == null) { content = ""; }     
-      var output = '\n<div><a onclick="this.parentNode.remove()"><img src="{% link assets/tabler_icons/x.svg %}" class="delete-module" align="right" /></a>';
+      var output = '\n<div><div class="field-controls">';
+      output += '<a onclick="swapSibling(this.parentNode.parentNode,true)"><img src="{% link assets/tabler_icons/chevron-up.svg %}" /></a><br />';
+      output += '<a onclick="this.parentNode.parentNode.remove()"><img src="{% link assets/tabler_icons/x.svg %}" class="delete-module" /></a><br />';
+      output += '<a onclick="swapSibling(this.parentNode.parentNode,false)"><img src="{% link assets/tabler_icons/chevron-down.svg %}" /></a></div>';
       output += '<span class="question">' + content + '</span>';
       output += '<p contenteditable="true" class="editable output" id="custom-field"></p></div>\n';
       destination.innerHTML += output;
   }
+
+  // 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);
+      }
+      console.log(node2);
+      // cancel if there is no sibling
+  }
+  
   // end BUILDER functions
   
   // toggleVisible(id)
@@ -89,6 +112,8 @@ layout: default
           classDisplayAll("button","none");
           classDisplayAll("question","none");
           classDisplayAll("delete-module","none");
+          classDisplayAll("module-link","none");
+          classDisplayAll("field-controls","none");
           var editableFields = document.getElementsByClassName("editable");  
           // de-editable-ize the editable fields
           for (var i = 0; i < editableFields.length; i++) {
@@ -146,6 +171,8 @@ layout: default
           classDisplayAll("link-text","inline");
           classDisplayAll("link-url","inline");
           classDisplayAll("delete-module","inline");
+          classDisplayAll("module-link","inline");
+          classDisplayAll("field-controls","inline");
           // link handling TKTK
           // author handling
           document.getElementById("authorship-result").style.display = "none";
@@ -404,7 +431,7 @@ layout: default
 		  <span class="module fixed" id="module-{{ module.id }}"
 			  draggable="true" ondragstart="drag(event)">
 		    <span>{{ module.name }}</span>
-		  <a target="_blank" href="{{ module.url }}">
+		  <a target="_blank" href="{{ module.url }}" class="module-link">
 			<img src="{% link assets/tabler_icons/link.svg %}"
 				 draggable="false" /></a>
 		  <a onclick="this.parentNode.remove()" class="delete-module"
@@ -423,7 +450,7 @@ layout: default
       <img src="{% link assets/tabler_icons/info-circle.svg %}"
            class="icons" />
       <span class="subhead output">Basics</span>
-      <button onclick="toggleVisible('s1')" class="button plus"><img src="{% link assets/tabler_icons/plus.svg %}" title="Expand" /></button>
+      <button onclick="toggleVisible('s1')" class="button chevrons"><img src="{% link assets/tabler_icons/chevrons-down.svg %}" title="Expand" /></button>
     </h2>
     <div class="section" id="s1" style="display:none">
     
@@ -447,7 +474,7 @@ layout: default
       <img src="{% link assets/tabler_icons/user.svg %}"
            class="icons" />
       <span class="subhead output">Participants</span>
-      <button onclick="toggleVisible('s2')" class="button plus"><img src="{% link assets/tabler_icons/plus.svg %}" title="Expand" /></button>
+      <button onclick="toggleVisible('s2')" class="button chevrons"><img src="{% link assets/tabler_icons/chevrons-down.svg %}" title="Expand" /></button>
     </h2>  
     <div class="section" id="s2" style="display:none">
     
@@ -470,7 +497,7 @@ layout: default
       <img src="{% link assets/tabler_icons/news.svg %}"
          class="icons" />
       <span class="subhead output">Policy</span>
-      <button onclick="toggleVisible('s3')" class="button plus"><img src="{% link assets/tabler_icons/plus.svg %}" title="Expand" /></button>
+      <button onclick="toggleVisible('s3')" class="button chevrons"><img src="{% link assets/tabler_icons/chevrons-down.svg %}" title="Expand" /></button>
     </h2>
     <div class="section" id="s3" style="display:none">
 
@@ -493,7 +520,7 @@ layout: default
     <img src="{% link assets/tabler_icons/refresh.svg %}"
          class="icons" />
     <span class="subhead output">Process</span>
-    <button onclick="toggleVisible('s4')" class="button plus"><img src="{% link assets/tabler_icons/plus.svg %}" title="Expand" /></button>
+    <button onclick="toggleVisible('s4')" class="button chevrons"><img src="{% link assets/tabler_icons/chevrons-down.svg %}" title="Expand" /></button>
   </h2>
   <div class="section" id="s4" style="display:none">
 
@@ -516,7 +543,7 @@ layout: default
     <img src="{% link assets/tabler_icons/adjustments.svg %}"
          class="icons" />
     <span class="subhead output">Evolution</span>
-    <button onclick="toggleVisible('s5')" class="button plus"><img src="{% link assets/tabler_icons/plus.svg %}" title="Expand" /></button>
+    <button onclick="toggleVisible('s5')" class="button chevrons"><img src="{% link assets/tabler_icons/chevrons-down.svg %}" title="Expand" /></button>
   </h2>
   <div class="section" id="s5" style="display:none">
 

_sass/communityrule.scss

@@ -65,28 +65,29 @@
 /* Modules */
 
 .modulebox {
-  position: relative;
-  display: block;
-  border: 1px solid lightgray;
-  background-color: white;
-  border-radius: 6px;
-  padding: 10px 10px 10px 10px;
-  margin-bottom: 15px;
-  text-align: center;
-  min-height: 50px;
+    position: relative;
+    display: block;
+    border: 1px solid lightgray;
+    background-color: white;
+    border-radius: 6px;
+    padding: 10px 10px 10px 10px;
+    margin-bottom: 15px;
+    text-align: left;
+    min-height: 50px;
 }
   
 .module {
-  border: 1px solid gray;
-  color: black;
-  background-color: lightgray;
-  text-align: center;
-  border-radius: 10px;
-  padding: 5px;
-  margin: 5px;
-  display: inline-block;
-  font-size: .8em;
-  cursor: pointer;
+    display: block;
+    border: 1px solid gray;
+    color: black;
+    background-color: lightgray;
+    text-align: center;
+    border-radius: 10px;
+    padding: 8px;
+    margin: 5px;
+    display: inline-block;
+    font-size: .8em;
+    cursor: pointer;
 }
 .module:hover {
     border-color: gray;
@@ -97,21 +98,29 @@
     cursor: pointer;
 }
 
+.field-controls {
+    float: right;
+    font-size: .7em;
+}
+.field-controls a {
+    cursor: pointer;
+}
+
 /* pushButton
 These are the major functional buttons*/
 .pushButton {
-  border: 1px solid gray;
-  color: gray;
-  background-color: white;
-  text-align: center;
-  border-radius: 6px;
-  padding: 5px;
-  font-size: 1.2em;
+    border: 1px solid gray;
+    color: gray;
+    background-color: white;
+    text-align: center;
+    border-radius: 6px;
+    padding: 5px;
+    font-size: 1.2em;
 }
 .pushButton:hover {
     background-color: lightgray;
 }
-.plus { /* The maximize/minimize button */
+.chevrons { /* The maximize/minimize button */
     font-size: 1em;
 }
 .icons {

_templates/benevolent_dictator.md

@@ -1,5 +1,5 @@
 ---
-layout: writer
+layout: rule
 title: Benevolent dictator
 permalink: /templates/benevolent-dictator/
 icon: /assets/tabler_icons/eye.svg

_templates/circles.md

@@ -1,5 +1,5 @@
 ---
-layout: writer
+layout: rule
 title: Circles
 permalink: /templates/circles/
 icon: /assets/tabler_icons/circle.svg

_templates/do-ocracy.md

@@ -1,5 +1,5 @@
 ---
-layout: writer
+layout: rule
 title: Do-ocracy
 permalink: /templates/do-ocracy/
 icon: /assets/tabler_icons/lock-open.svg

_templates/elected_board.md

@@ -1,5 +1,5 @@
 ---
-layout: writer
+layout: rule
 title: Elected board
 permalink: /templates/elected-board/
 icon: /assets/tabler_icons/user-check.svg

_templates/jury.md

@@ -1,5 +1,5 @@
 ---
-layout: writer
+layout: rule
 title: Jury
 permalink: /templates/jury/
 icon: /assets/tabler_icons/friends.svg

_templates/petition.md

@@ -1,5 +1,5 @@
 ---
-layout: writer
+layout: rule
 title: Petition
 permalink: /templates/petition/
 icon: /assets/tabler_icons/clipboard-list.svg

_templates/self-appointed_board.md

@@ -1,5 +1,5 @@
 ---
-layout: writer
+layout: rule
 title: Self-appointed board
 permalink: /templates/self-appointed-board/
 icon: /assets/tabler_icons/user-plus.svg

_templates/trias_politica.md

@@ -1,5 +1,5 @@
 ---
-layout: writer
+layout: rule
 title: Trias politica
 permalink: /templates/trias-politica/
 icon: /assets/tabler_icons/dots.svg

create.md

@@ -35,4 +35,4 @@ records:
 modification: 
 ---
 
-Use the questions below to start a rule from scratch. Answer questions in complete sentences, as the questions disappear.
+Use the questions below to start a rule from scratch. Answer questions in complete sentences, since the questions disappear.