updates rulebook styling and function

_about/modules.html

@@ -28,7 +28,7 @@ permalink: /modules/
         {% endif %}
         {% assign last_type = module.type %}
 		<span class="module" id="module-{{ module.title | slugify }}"
-			  draggable="true" ondragstart="drag(event)">
+			  draggable="true" ondragstart="drag(event)" ondragend="dragEnd()">
 		  <span id="module-name" title="{{ module.summary }}">{{ module.title }}</span>
           <a target="_blank" href="{{ module.url }}">
             <img title="More info" draggable="false" class="module-logo"

_includes/rule-scripts.html

@@ -13,6 +13,10 @@ https://github.com/Bernardo-Castilho/dragdroptouch -->
   }
   function drag(ev) {
       ev.dataTransfer.setData("text", ev.target.id);
+      document.getElementById("module-input").classList.add('drag-target');
+  }
+  function dragEnd(ev) {
+      document.getElementById("module-input").classList.remove('drag-target');
   }
   function drop(ev) {
       ev.preventDefault();
@@ -62,9 +66,9 @@ https://github.com/Bernardo-Castilho/dragdroptouch -->
           module.id += "-" + nowModule.getTime();
       }
       // hide the info button
-      module.children[1].style.display = "none";
+    //   module.children[1].style.display = "none";
       // display the deletion button
-      module.children[2].style.display = "inline";
+    //   module.children[2].style.display = "inline";
       // pop it in!
       target.appendChild(module);
       // add module-field button (using HTML so it saves to Library)
@@ -266,76 +270,73 @@ https://github.com/Bernardo-Castilho/dragdroptouch -->
   // Toggles whether editable fields are editable or not
   // and removes editing tools.
   function toggleEditMode() {
-      if (editMode === true) { // switch to preview mode
-          editMode = false;
-          classDisplayAll("prompt","none");
-          classDisplayAll("delete-module","none");
-          var editableFields = document.getElementsByClassName("editable");  
-          // de-editable-ize the editable fields
-          for (var i = 0; i < editableFields.length; i++) {
-              editableFields[i].contentEditable = "false";
-              editableFields[i].style.borderStyle = "none";
-              // Remove empty fields entirely
-              var content = editableFields[i].innerHTML;
-              content = stripHTML(content);
-              if (content === "") {
-                  editableFields[i].style.display = "none";
-              }   
-          }
-          // RuleBuilder sections
-          if (builderEmpty()) {
-              document.getElementById("rule-builder").style.display = "none";
-          } else {
-              document.getElementById("builder-field").innerHTML = displayBuilderHTML();
-              document.getElementById("module-input").style.border = "none";
-          }
-          if (document.contains(document.getElementById("custom-field-container"))) {
-              document.getElementById("custom-field-container").remove();
-          }
-          document.getElementById("module-menu").style.display = "none";
-          // Handle author link
-          var authorName = document.getElementById("author-text").value;
-          var authorURL = document.getElementById("author-url").value;
-          if (authorName != "") {
-              document.getElementById("authorship-words").style.display = "inline";
-              if (authorURL != "") { // both author and URL present                
-                  document.getElementById("authorship-result").innerHTML = "<a href='" + authorURL +"'>" + authorName + "</a>";
-                  document.getElementById("authorship-result").style.display = "inline";
-              } else { // only authorName present
-                  document.getElementById("authorship-result").innerHTML = authorName;
-                  document.getElementById("authorship-result").style.display = "inline";
-              }
-          } else {
-              document.getElementById("authorship").style.display = "none";
-          }
-          // Finally, change button name
-          document.getElementById("editToggle").innerHTML = "Customize";
-      } else { // Switch to editMode
-          editMode = true;
-          classDisplayAll("prompt","block");
-          classDisplayAll("editable","block");
-          // 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 = "";
-          // 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";
-          // make all editable fields visible
-          var editableFields = document.getElementsByClassName("editable");
-          for (var i = 0; i < editableFields.length; i++) {
-              editableFields[i].style.borderStyle = "none none dashed none";
-              editableFields[i].contentEditable = "true";
-          }
-          // Change button name
-          document.getElementById("editToggle").innerHTML = "Preview";
+      if (editMode === true) {
+          disableEditMode();
+        } else {
+          enableEditMode();
       }
-  }
+    }
+
+  function disableEditMode() { // switch to preview mode
+        editMode = false;
+
+        document.getElementById("rulebox").classList.add('rulebox-preview');
+        document.getElementById("rulebox").classList.remove('rulebox-edit');
+
+        var editableFields = document.getElementsByClassName("editable");  
+        // de-editable-ize the editable fields
+        for (var i = 0; i < editableFields.length; i++) {
+            editableFields[i].contentEditable = "false";
+            // Remove empty fields entirely
+            var content = editableFields[i].innerHTML;
+            content = stripHTML(content);
+            if (content === "") {
+                // editableFields[i].style.display = "none";
+            }   
+        }
+
+        // RuleBuilder sections
+        if (builderEmpty()) {
+        } else {
+            document.getElementById("builder-field").innerHTML = displayBuilderHTML();
+        }
+        if (document.contains(document.getElementById("custom-field-container"))) {
+            document.getElementById("custom-field-container").remove();
+        }
+
+        // Handle author link
+        var authorName = document.getElementById("author-text").value;
+        var authorURL = document.getElementById("author-url").value;
+        if (authorName != "") {
+            if (authorURL != "") { // both author and URL present                
+                document.getElementById("authorship-result").innerHTML = "<a href='" + authorURL +"'>" + authorName + "</a>";
+            } else { // only authorName present
+                document.getElementById("authorship-result").innerHTML = authorName;
+            }
+            document.getElementById("authorship").style.display = "";
+        } else {
+            document.getElementById("authorship").style.display = "none";
+        }
+        // Finally, change button name
+        document.getElementById("editToggle").innerHTML = "Customize";
+    }
+
+  function enableEditMode() { // Switch to editMode
+        editMode = true;
+
+        document.getElementById("rulebox").classList.remove('rulebox-preview');
+        document.getElementById("rulebox").classList.add('rulebox-edit');
+
+        // RuleBuilder handling
+        document.getElementById("builder-field").innerHTML = "";
+        // make all editable fields visible
+        var editableFields = document.getElementsByClassName("editable");
+        for (var i = 0; i < editableFields.length; i++) {
+            editableFields[i].contentEditable = "true";
+        }
+        // Change button name
+        document.getElementById("editToggle").innerHTML = "Preview";
+    }
 
   // toggleDisplayMode()
   // toggles full displayMode, the Rule-only display for a published Rule

_layouts/rule.html

@@ -22,7 +22,7 @@ layout: default
 
   </header>
   
-  <div id="rulebox">
+  <div id="rulebox" class="rulebox rulebox-edit">
 
     <span class="prompt">What is the community’s name?</span>
     <h1 contenteditable="true" class="editable output" id="communityname">{{ page.community-name }}</h1>
@@ -31,16 +31,16 @@ layout: default
     <p contenteditable="true" class="editable output" id="structure">{{ page.structure }}</p>
     
     <!-- RuleBuilder -->
-    <div id="rule-builder">
-      <div id="module-input"
+    <div id="rule-builder" class="rulebuilder">
+      <div id="module-input" class="rulebuilder_input"
            ondrop="drop(event)" ondragover="allowDrop(event)">
         <span class="prompt" id="drag-directions">Browse modules from below and drag them here.</span>
       </div>
 
-      <div id="builder-field">
+      <div id="builder-field" class="rulebuilder_list">
       </div>
       
-      <div id="module-menu">
+      <div id="module-menu" class="rulebuilder_modules">
         
 		    <!-- Load preset modules from _modules/ -->
         {% assign modules_array = site.modules | sort: "type" %}
@@ -59,13 +59,12 @@ layout: default
           {% endif %}
           {% assign last_type = module.type %}
 		      <span class="module" id="module-{{ module.title | slugify }}"
-            draggable="true" ondragstart="drag(event)">
+            draggable="true" ondragstart="drag(event)" ondragend="dragEnd()">
             <span id="module-name" title="{{ module.summary }}">{{ module.title }}</span>
-            <a target="_blank" href="{{ module.url }}">
+            <a target="_blank" href="{{ module.url }}" class="module-info">
               <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">
+            <a onclick="this.parentNode.remove()" class="delete-module">
             <img src="{% link assets/tabler_icons/x.svg %}" /></a>
           </span>
         {% endif %}
@@ -75,7 +74,7 @@ layout: default
         <div id="module-custom-container">
           <!-- Customizable module -->
           <span class="module" id="module-custom"
-                draggable="true" ondragstart="drag(event)">
+                draggable="true" ondragstart="drag(event)" ondragend="dragEnd()">
             <input contenteditable="true" draggable="false" placeholder="Custom module..."/>
             <img src="{% link assets/tabler_icons/bulb.svg %}" class="module-logo"
                 draggable="false" />
@@ -91,13 +90,19 @@ layout: default
       <span class="prompt"></span>
       <p id="rulewriter" contenteditable="true" class="editable output"></p>
     </div>
+
+    <div class="metadata_input">
+      <p class="prompt">Created by</p>
+      <input contenteditable="true" class="editable" id="author-text" placeholder="Creator Name" />
+      
+      <p class="prompt">Creator URL</p>
+      <input contenteditable="true" class="editable" id="author-url" placeholder="Creator URL (http://, https://)" type="url" pattern="http://.*|https://.*" />
+    </div>
   
-    <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" />
+    <div id="authorship" class="linkbox metadata_display">
+      <span>Created by</span>
       <span class="link-divider"><img src="{% link assets/tabler_icons/pencil.svg %}" title="Add link" /></span>
-      <input contenteditable="true" class="editable link-url" id="author-url" placeholder="Creator URL (http://, https://)" type="url" pattern="http://.*|https://.*" />
-      <span id="authorship-result"></span>
+      <span id="authorship-result" class="linkbox_result"></span>
     </div>
   
   </div><!--#rulebox-->

_sass/communityrule.scss

@@ -1,5 +1,6 @@
 /* BEGIN COMMUNITYRULE-SPECIFIC CSS */
 
+@import "rulebox";
 
 /* CLASSES */
 .button {
@@ -29,8 +30,7 @@
     border: none;
     border-bottom: 1px dashed gray;
 }
-.editable[contenteditable="true"] { /* active editable fields */
-}
+
 .prompt {
     color: gray;
 }
@@ -58,11 +58,6 @@
     border: 1px solid lightgray;
 }
 
-.module-type-header {
-    font-weight: bold;
-    font-size: 1em;
-    margin: 10px 5px 5px 5px;
-}
 .module-questions {
     color: gray;
     font-size: .8em;
@@ -74,22 +69,14 @@
 }
 
 #module-input {
-    overflow: hidden;
-    border: 1px solid lightgray;
-    border-radius: 6px;
-    padding: 10px 10px 10px 10px;
-    margin: 0 0 15px 0;
-    text-align: left;
-    min-height: 1.5em;
 }
   
 .module {
     display: block;
-    border: 1px solid gray;
-    color: black;
-    background-color: lightgray;
+    border: 2px solid #000;
+    color: $text-color;
+    background-color: #fff;
     text-align: center;
-    border-radius: 10px;
     padding: 5px;
     margin: 5px;
     display: inline-block;
@@ -101,6 +88,10 @@
 .module:hover {
     border-color: gray;
 }
+.module:active {
+    background-color: $brand-yellow;
+    border-color: #000;
+}
 .module a:hover {
 }
 #module-name {
@@ -176,14 +167,7 @@ These are the major functional buttons*/
 /* link fields
 Enabling users to add links*/
 .linkbox {
-  position: relative;
-  display: block;
-  border: 1px solid lightgray;
-  background-color: white;
-  border-radius: 6px;
-  padding: 10px 0px 10px 0px;
-  margin-bottom: 15px;
-  text-align: center;
+
 }
 .link-text {
     width: 40%;
@@ -204,13 +188,7 @@ Enabling users to add links*/
     font-size: 1em;
 }
 #authorship {
-    margin: 40px 0 0 0;
-}
-#authorship-words {
-    display: none;
-}
-#authorship-result {
-    display: none;
+    
 }
 
 /* LIBRARY */
@@ -248,17 +226,6 @@ Enabling users to add links*/
 }
 
 /* VARIOUS IDs */
-#rulebox {
-    border: 1px solid lightgray;
-    padding: 20px;
-    margin: 20px 0 30px 0;
-}
-#rulebox h3 {
-    font-family: serif;
-}
-#communityname {
-    font-weight: bold;
-}
 #structure {
     font-size: 1.3em;
 }

_sass/rulebox.scss

@@ -0,0 +1,120 @@
+// Styles for the rulebox module
+
+.rulebox {
+    border: 1px solid $grey-color-light;
+    padding: 20px;
+    margin: 20px 0 30px 0;
+
+    .prompt,
+    .module-type-header {
+        color: $grey-color-dark;
+        font-family: $header-font-family;
+        font-weight: bold;
+    }
+
+    .module-type-header {
+        font-size: 1em;
+        margin: 10px 5px 5px 5px;
+    }
+
+    .prompt,
+    .delete-module,
+    .rulebuilder_modules,
+    .linkbox_input,
+    .metadata_input {
+        display: none;
+    }
+    
+    .editable[contenteditable="true"] { /* active editable fields */
+        border-bottom: 1px dashed $grey-color-dark;
+    }
+    
+    .editable[contenteditable="false"] { /* inactive editable fields */
+        border: none;
+    }
+    
+    // TODO: module display is set within the spreadsheet
+    .rulebuilder_input .module .delete-module {
+        display: none !important;
+    }
+
+    .rulebuilder {}
+    .rulebuilder_input {
+        overflow: hidden;
+        margin: 0 0 $spacing-unit;
+        text-align: left;
+        min-height: 1.5em;
+        .prompt {
+            color: $text-color;
+        }
+        .module .module-info {
+            display: none;
+        }
+    }
+    .rulebuilder_list {}
+
+    .rulebuilder_modules {
+        .module .delete-module {
+            display: none;
+        }
+    }
+
+    .metadata_input,
+    .metadata_display {
+        border: 1px solid $grey-color-light;
+        background-color: white;
+        margin: $spacing-unit 0 15px 0;
+        padding: 10px;
+    }
+    
+    .metadata_display {
+        border-radius: 6px;
+        text-align: center;
+    }
+
+    .metadata_input {
+        input {
+            margin-bottom: $spacing-unit / 2;
+        }
+    }
+
+    &.rulebox-preview {
+        // this class is toggled by toggleEditMode() in rule-scrips.html
+        // when preview/customize button is pressed
+        
+    }
+
+    &.rulebox-edit {
+        // this class is toggled by toggleEditMode() in rule-scrips.html
+        // when preview/customize button is pressed
+        .prompt,
+        .delete-module,
+        .rulebuilder_modules,
+        .metadata_input {
+            display: block;
+        }
+
+        .linkbox_input {
+            display: inline;
+        }
+
+        .metadata_display {
+            display: none;
+        }
+
+        .rulebuilder_input .module .delete-module {
+            display: inline !important;
+        }
+
+        .rulebuilder {}
+        .rulebuilder_input {
+            &.drag-target {
+                background-color: $brand-yellow;
+                border-style: solid;
+            }
+            border: 4px dashed $brand-yellow;
+            color: $text-color;
+            padding: 10px 10px 10px 10px;
+        }
+    }
+}