implements loading skeleton

_includes/rule-scripts.html

@@ -344,8 +344,9 @@ https://github.com/Bernardo-Castilho/dragdroptouch -->
   var displayMode = false;
   function toggleDisplayMode() {
       if (displayMode == false) {
+          document.body.classList.add("display_rule");
           editMode = true;
-          toggleEditMode(); // turns off editMode
+          disableEditMode(); // turns off editMode
           classDisplayAll("site-nav","none");
           classDisplayAll("post-header","none");
           classDisplayAll("site-footer","none");
@@ -361,7 +362,8 @@ https://github.com/Bernardo-Castilho/dragdroptouch -->
           // Finish
           displayMode = true;
       } else {
-          toggleEditMode() // turns on editMode
+          document.body.classList.remove("display_rule");
+          enableEditMode() // turns on editMode
           classDisplayAll("site-nav","block");
           classDisplayAll("post-header","block");
           classDisplayAll("site-footer","block");
@@ -587,21 +589,22 @@ https://github.com/Bernardo-Castilho/dragdroptouch -->
   
   // END Publish tools
 
-  
+var rID;
+  window.onload = function() {
   // FINALLY, Page loading
   // First, grab the current URL
   var urlParams = new URLSearchParams(window.location.search);
   // Determine if it is a published Rule
   if (urlParams.has('r')) {
       // If so, grab the Rule from database and enter displayMode
-      var rID = urlParams.get('r');
+      rID = urlParams.get('r');
+      document.body.classList.add("display_rule");
       displayRule(rID);
   } else {
       // Otherwise, open in editMode as default
-      var editMode = true;
+      enableEditMode();
   }
   // eqip editable fields to remove formatting from pasted content    
-  window.onload = function() {
       var editableElements = document.getElementsByClassName("editable");
       for (var i = 0; i < editableElements.length; i++ ) {
           editableElements[i].addEventListener("paste", handleEditablePaste);

_layouts/rule.html

@@ -22,7 +22,7 @@ layout: default
 
   </header>
   
-  <div id="rulebox" class="rulebox rulebox-edit">
+  <div id="rulebox" class="rulebox">
 
     <span class="prompt">What is the community’s name?</span>
     <h1 contenteditable="true" class="editable output" id="communityname">{{ page.community-name }}</h1>

_sass/communityrule.scss

@@ -24,13 +24,6 @@
     margin:1.5em 0 1em 0;
 }
 
-.editable, input.editable { /* All editable fields */
-    padding: 10px 10px 10px 10px;
-    min-height: 1.5em;
-    border: none;
-    border-bottom: 1px dashed gray;
-}
-
 .prompt {
     color: gray;
 }
@@ -117,6 +110,16 @@
     font-size: 1.3em;
 }
 
+// DISPLAY MODE
+
+.display_rule {
+    .site-nav,
+    .post-header,
+    .site-footer {
+        display: none;
+    }
+}
+
 /* pushButton
 These are the major functional buttons*/
 .pushButton {

_sass/rulebox.scss

@@ -1,3 +1,50 @@
+// rulebox module skeleton for loading
+
+.rulebox:not([class*="rulebox-"]) {
+    .editable:empty {
+        background-color: $grey-color-light;
+    }
+    h1 {
+        max-width: 45%;
+    }
+
+    p {
+        min-height: 3em;
+    }
+
+    .rulebuilder_input {
+        $padding: 10px;
+        $height: 38px;
+        $widths: 80px, 78px, 140px, 90px, 200px, 130px;
+
+        $position: $padding;
+        $bg-img: null;
+        $bg-size: null;
+        $bg-pos: null;
+
+        @for $i from 1 through length($widths) {
+            $bg-img: $bg-img linear-gradient(white $height, transparent 0)#{if($i != length($widths), ',', '')};
+            $bg-size: $bg-size nth($widths, $i) $height#{if($i != length($widths), ',', '')};
+            $bg-pos: $bg-pos $position $padding#{if($i != length($widths), ',', '')};
+
+            $position: $position + nth($widths, $i) + $padding;
+        }
+        
+        background-color: $grey-color-light;
+        background-image: $bg-img;
+        background-size: $bg-size;
+        background-position: $bg-pos;
+        background-repeat: no-repeat;
+        height: $height + $padding * 2;
+    }
+
+    .rulebuilder_list {
+        background-color: $grey-color-light;
+        min-height: 9em;
+        max-width: 90%;
+    }
+}
+
 // Styles for the rulebox module
 
 .rulebox {
@@ -28,11 +75,13 @@
     .metadata_input {
         display: none;
     }
-    
-    .editable[contenteditable="true"] { /* active editable fields */
-        border-bottom: 1px dashed $grey-color-dark;
+
+    .editable, input.editable { /* All editable fields */
+        padding: 10px;
+        min-height: 1.5em;
+        border: none;
     }
-    
+
     .editable[contenteditable="false"] { /* inactive editable fields */
         border: none;
     }
@@ -101,6 +150,10 @@
         .linkbox_input {
             display: inline;
         }
+    
+        .editable[contenteditable="true"] { /* active editable fields */
+            border-bottom: 1px dashed $grey-color-dark;
+        }
 
         .metadata_display {
             display: none;