Attached module descriptions to title tags, extensive module formatting work

_layouts/rule.html

@@ -26,7 +26,6 @@ layout: default
           } else if (!document.getElementById("module-input").contains(target) ||
                      document.getElementById("module-menu").contains(target)) {
               // Ignore destinations not in the correct area
-              console.log(target);
               return;
           }
       }
@@ -36,51 +35,65 @@ layout: default
       var module = document.getElementById(data);
       if (module.parentElement.id == "module-menu") {
           module = module.cloneNode(true);
-          // Add a corresponding text field
           var name = null;
           if (module.id == "module-custom") {
-              // For custom modules:
+              // For custom modules: replace the <input> with text
               name = module.getElementsByTagName("input")[0].value;
-              // While we're at it, replace the <input> with text
               module.getElementsByTagName("input")[0].remove();
               var customText = document.createElement("span");
-              customText.append(name);
+              customText.onClick = "moduleEditField(this.parentNode.id)";
               customText.id = "module-name";
+              customText.append(name);              
               module.prepend(customText);
-          } else {
-              // For predefined modules
-              name = module.innerHTML.replace(/(<([^>]+)>)/ig,'');
           }
-          var query = "Explain how the <strong>" + name + "</strong> module works.";
-          addField(query);
+          // append id with unique timestamp
+          var nowModule = new Date();
+          module.id += "-" + nowModule.getTime();
       }
-      // append name
-      module.id += "-dropped";
       // display the deletion button
       module.children[2].style.display = "inline";
       // pop it in!
       target.appendChild(module);
+      // set up the editing field
+      moduleEditField(module.id);
       // be sure the dummy text is gone
-      document.getElementById("drag-directions").style.display = "none";
-      // Send field contents to console to aid in database stuff
-      console.log(document.getElementById("module-input"));   
+      if (document.contains(document.getElementById("drag-directions"))) {
+          document.getElementById("drag-directions").remove();
+      }
   }
 
-  // Adds a new question field
-  function addField(content) {
-      // if input is null, add an empty field to the list
-      // include a field removal button
-      var destination = document.getElementById("builder-field");
-      if (content == null) { content = ""; }     
-      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;
+  // Edits the title field of a given module based on #custom-field
+  function moduleTitleEdit(moduleID) {
+      var module = document.getElementById(moduleID).children[0];
+      var content = document.getElementById("custom-field").innerHTML.replace(/(<([^>]+)>)/ig,'');
+      module.title = content;
+  }
+  
+  // Sets up a field for displaying and editing module details
+  function moduleEditField(moduleID) {
+      var module = document.getElementById(moduleID);
+      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 destination = document.getElementById("builder-field");
+          if (moduleName == null) { moduleName = ""; }     
+          var output = '\n<div id="custom-field-container">';
+          output += '<span class="question">' + 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';
+          destination.innerHTML = output;
+      } else {
+          var output = '\n<div id="custom-field-container">';
+          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 class="editable" id="custom-field">'
+              + moduleTitle + '</p>';
+      }
   }
 
+  // DEPRECATED?
   // Moves a text field up or down
   // direction is bool: true is up, false is down
   function swapSibling(node1, direction) {
@@ -96,9 +109,19 @@ layout: default
           node1.parentNode.replaceChild(node1, node2);
           node1.parentNode.insertBefore(node2, node1);
       }
-      console.log(node2);
       // cancel if there is no sibling
   }
+
+  // Tests if the Builder is empty
+  function builderEmpty() {
+      var builder = document.getElementById("module-input");
+      var childs = builder.children;
+      if (builder.getElementsByClassName("module").length > 0) {
+          return false;
+      } else {
+          return true;
+      }
+  }
   
   // end BUILDER functions
   
@@ -131,9 +154,8 @@ layout: default
           classDisplayAll("section","block");
           classDisplayAll("button","none");
           classDisplayAll("question","none");
+          classDisplayAll("metaheader","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,8 +168,15 @@ layout: default
                   editableFields[i].style.display = "none";
               }   
           }
-          // Remove headers of empty sections
-          // Inefficient! Might be merged with the above iteration
+          // Remove headers of empty sections (Inefficient! Might be merged with the above iteration)
+          // First, RuleBuilder
+          if (builderEmpty()) {
+              document.getElementById("rule-builder").style.display = "none";
+          }
+          if (document.contains(document.getElementById("custom-field-container"))) {
+              document.getElementById("custom-field-container").remove();
+          }
+          // Now, RuleWriter sections
           var sections = document.getElementsByClassName("section");
           for (var i = 0; i < sections.length; i++) {
               var sectionQuestions = sections[i].getElementsByClassName("editable");
@@ -188,12 +217,12 @@ layout: default
           classDisplayAll("editable","block");
           classDisplayAll("header","block");
           classDisplayAll("section","none");
+          classDisplayAll("metaheader","block");
           classDisplayAll("link-text","inline");
           classDisplayAll("link-url","inline");
           classDisplayAll("delete-module","inline");
-          classDisplayAll("module-link","inline");
-          classDisplayAll("field-controls","inline");
-          // link handling TKTK
+          // builder handling
+          document.getElementById("rule-builder").style.display = "block";
           // author handling
           document.getElementById("authorship-result").style.display = "none";
           document.getElementById("authorship-words").style.display = "none";
@@ -429,160 +458,181 @@ layout: default
     <h1 contenteditable="true" class="editable output" id="communityname">{{ page.community-name }}</h1>
 
     <!-- BUILDER -->
-    <div ondrop="drop(event)" ondragover="allowDrop(event)"
-         class="modulebox" id="module-input">
-      <span class="question" id="drag-directions">
-        Drag modules from the icon at right</span>      
-      <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">{{ 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>
-    <div id="builder-field">
-    </div>
-
-    <!-- SECTION S1: BASICS -->
-    <h2 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="Expand" /></button>
+    <h2 id="header-rb" class="metaheader">
+      <span class="subhead output">RuleBuilder</span>
+      <button onclick="toggleVisible('rule-builder')" class="button chevrons"><img src="{% link assets/tabler_icons/chevrons-down.svg %}" title="Show/hide" /></button>
     </h2>
-    <div class="section" id="s1" style="display:none">
-    
-      <span class="question">What is the basic structure of the community?</span>
-      <p contenteditable="true" class="editable output" id="structure">{{ page.structure }}</p>
 
-      <span class="question">What is the community’s mission?</span>
-      <p contenteditable="true" class="editable output" id="mission">{{ page.mission }}</p>
+    <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>
+    </div>
 
-      <span class="question">What core values does the community hold?</span>
-      <p contenteditable="true" class="editable output" id="values">{{ page.values }}</p>
+    <h2 id="header-rw" class="metaheader">
+      <span class="subhead output">RuleWriter</span>
+      <button onclick="toggleVisible('rule-writer')" class="button chevrons"><img src="{% link assets/tabler_icons/chevrons-down.svg %}" title="Show/hide" /></button>
+    </h2>
 
-      <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 id="rule-writer">
       
-
-    </div><!--hiding section s1-->
-
-    <!-- SECTION s2: PARTICIPANTS -->
-    <h2 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="Expand" /></button>
-    </h2>  
-    <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>
+      <!-- SECTION S1: BASICS -->
+      <h2 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>
+      </h2>
+      <div class="section" id="s1" style="display:none">
+        
+        <span class="question">What is the basic structure of the community?</span>
+        <p contenteditable="true" class="editable output" id="structure">{{ page.structure }}</p>
+
+        <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 -->
+      <h2 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>
+      </h2>  
+      <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-->
+      <h2 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>
+      </h2>
+      <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 -->
+      <h2 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>
+      </h2>
+      <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 -->
+      <h2 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>
+      </h2>
+      <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-->
       
-      <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-->
-    <h2 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="Expand" /></button>
-    </h2>
-    <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 -->
-  <h2 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="Expand" /></button>
-  </h2>
-  <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 -->
-  <h2 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="Expand" /></button>
-  </h2>
-  <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 id="authorship" class="linkbox">
     <span id="authorship-words">Created by</span>
     <input contenteditable="true" class="editable link-text" id="author-text" placeholder="Created by" />
@@ -623,7 +673,7 @@ layout: default
     Feedback
   </button>
 
-  <div class="question">Publish and Export are not yet available for the modules and associated fields</div>
+  <div class="question">Publish and Export are not yet available for the RuleBuilder</div>
   
 </article>
 

_sass/communityrule.scss

@@ -3,9 +3,9 @@
 /* CLASSES */
 .button {
   position: relative;
-  display: inline-block;
+  display: inline;
   float: right;
-  border: 1px solid gray;
+  border: 0px solid gray;
   color: gray;
   background-color: white;
   text-align: center;
@@ -31,29 +31,38 @@
 .question {
     color: gray;
 }
-
+.metaheader {
+    color: gray;
+    margin-top: 30px;
+    border-bottom: 1px solid lightgray;
+}
 
 
 /* Tooltip for Modules
    https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip_right 
    This could bear substantial improvement. */
+#module-hover {
+    float: right;
+    position: relative;
+    margin-left: 10px;
+}
 #module-menu {
 }
 .button .tooltiptext {
-  visibility: hidden;
-  width: 400px;
-  overflow:scroll;
-  height:400px;
-  border: 1px solid black;
-  background-color: white;
-  text-align: center;
-  border-radius: 6px;
-  padding: 10px;
-  /* Position the tooltip */
-  position: absolute;
-  z-index: 1;
-  top: -5px;
-  right: 100%;
+    visibility: hidden;
+    width: 400px;
+    overflow:scroll;
+    height:400px;
+    border: 1px solid black;
+    background-color: white;
+    text-align: center;
+    border-radius: 6px;
+    padding: 10px;
+    /* Position the tooltip */
+    position: absolute;
+    z-index: 1;
+    top: -5px;
+    right: 100%;
 }
 .button:hover {
     background-color: lightgray;
@@ -64,15 +73,14 @@
 
 /* Modules */
 
-.modulebox {
-    position: relative;
-    display: block;
+#module-input {
+    overflow: hidden;
     border: 1px solid lightgray;
     border-radius: 6px;
     padding: 10px 10px 10px 10px;
-    margin-bottom: 15px;
+    margin: 0 0 15px 0;
     text-align: left;
-    min-height: 50px;
+    min-height: 100px;
 }
   
 .module {
@@ -115,6 +123,7 @@ These are the major functional buttons*/
     text-align: center;
     border-radius: 6px;
     padding: 5px;
+    margin: 0 5px 0 5px;
     font-size: 1.2em;
 }
 .pushButton:hover {