Improvements to rule.html and library.html

_about/faq.md

@@ -41,6 +41,6 @@ A bunch of stuff, and we have a running list in the [Issues on GitLab](https://g
 **What projects does this draw upon?**
 
 * Created with [Jekyll](https://jekyllrb.com/) (MIT License), hosted on [GitLab Pages](https://docs.gitlab.com/ee/user/project/pages/)
-* Modules are from [Democratic Mediums](http://democraticmediums.info) (CC-BY)
+* Modules are drawn largely from [Democratic Mediums](http://democraticmediums.info) (CC-BY)
 * Icons are from [Tabler](https://github.com/tabler/tabler-icons) (MIT License)
 * Database runs on [Stein](https://steinhq.com/) (MIT License), using [this Google Doc](https://docs.google.com/spreadsheets/d/12IgsMWZNzPv2nS7ksU6CUozcS6YYwRn9O1iIXKat3V4/edit?usp=sharing)

_includes/footer.html

@@ -38,7 +38,7 @@
       <div class="footer-col footer-col-3">
         <p style="text-align:right;">{{ site.description }}</p>
         <p style="text-align:right;">Help improve CommunityRule by <br />posting an <a href="https://gitlab.com/medlabboulder/communityrule/-/issues">Issue</a> or <a href="https://gitlab.com/medlabboulder/communityrule">editing the source directly</a>,<br />
-        or donate <a href="https://opencollective.com/communityrule">on Open Collective"</a></p>
+        or donate <a href="https://opencollective.com/communityrule">on Open Collective</a></p>
         <p style="text-align:right;"><a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png" /></a></p>
       </div>
     </div>

_layouts/library.html

@@ -2,44 +2,43 @@
 layout: default
 ---
 
-<style type="text/css">
-  #rulename {
-      font-size: 1.2em;
-  }
-</style>
-
 <script>
-  function printLibrary() {
+  
+  function printLibrary(sheet) {
       const store = new SteinStore(
           "https://api.steinhq.com/v1/storages/5e8b937ab88d3d04ae0816a5"
       );
       var rules = "";
-      store.read("rules", { limit: 0, offset: 0 }).then(data => {
-          console.log(data);
+      store.read(sheet, { limit: 0, offset: 0 }).then(data => {
           rules = data.reverse();
           libHTML = "";
           for (var i = 0; i < rules.length; i++) {
               var title = rules[i]["communityname"];
               if (title == null) { title = "Untitled"; }
-              libHTML += "<h2 id='rulename'>" +
+              libHTML += "<div class='library-rule-name'>" +
                   "<a href='/create/?r=" + rules[i]["ruleID"] + "'>" +
-                  title + "</a></h2>\n";
+                  title + "</a></div>\n";
+              var author = rules[i]["author-text"];
+              if (author != null) {
+                  libHTML += "<div class='library-rule-author'>" + author + "</div>";
+                  }
               var structure = rules[i]["structure"];
               if (structure != null) {
-                  libHTML += "<p>" + structure;
-                  var author = rules[i]["author-text"];
-                  if (author != null) {
-                      libHTML += " (" + author + ")";
-                  }
+                  libHTML += "<p class='library-rule-structure'>" + structure;
                   libHTML += "</p>\n\n";
               }
           }
-          document.getElementById("libraryList").innerHTML = libHTML;
+          document.getElementById("librarylist").innerHTML = libHTML;
       });
   }
 
+  // allows for using alt sheets (though rule.html is not equipped)
+  var source = "";
   window.onload = function() {
-      printLibrary();
+      if ((window.location.href.indexOf("/library/") != -1)) {
+          source = "rules";
+      }
+      printLibrary(source);
   }
 </script>
 
@@ -52,10 +51,8 @@ layout: default
 
   <div class="post-content">
     {{ content }}
-
-<hr /><br />
     
-    <div id="libraryList">
+    <div id="librarylist">
     </div>    
   </div>
 

_layouts/rule.html

@@ -149,16 +149,16 @@ layout: default
       function arrayHTML(thisArray) {
           var thisOutput = "";
           if (thisArray.length > 0) {
-              thisOutput += "<ul>\n";
+              thisOutput += '<ul class="builder-list">\n';
               for (var i = 0; i < thisArray.length; i++) {
                   var item = thisArray[i];
-                  thisOutput += "<li><strong>" + item[0] + "</strong> ";
-                  thisOutput += item[1] + "</li>\n";
+                  thisOutput += '<li><strong>' + item[0] + '</strong> ';
+                  thisOutput += item[1] + '</li>\n';
                   if (item[2].length > 0) {
                       thisOutput += arrayHTML(item[2]);
                   }
               }
-              thisOutput += "</ul>\n";
+              thisOutput += '</ul>\n';
           }
           return thisOutput
       }
@@ -467,7 +467,8 @@ layout: default
       const store = new SteinStore(
           "https://api.steinhq.com/v1/storages/5e8b937ab88d3d04ae0816a5"
       );     
-      store.read("rules", { search: { ruleID: ID } }).then(data => {
+      store.read(sheet, { search: { ruleID: ID } }).then(data => {
+          // reads sheet variable from below
           // only runs when we have the data from Goog:
           var rule = data[0];
           var fields = document.getElementsByClassName("editable");
@@ -548,11 +549,7 @@ layout: default
     <span class="question">What is the community’s name?</span>
     <h1 contenteditable="true" class="editable output" id="communityname">{{ page.community-name }}</h1>
 
-    <!-- BUILDER -->
-    <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>
+    <!-- RuleBuilder -->
 
     <div id="rule-builder">
 
@@ -574,7 +571,7 @@ layout: default
         <span class="module" id="module-custom"
               draggable="true" ondragstart="drag(event)">
 		  <input contenteditable="true" placeholder="Custom..."/>
-          <img src="{% link assets/tabler_icons/bulb.svg %}"
+          <img src="{% link assets/tabler_icons/bulb.svg %}" class="module-logo"
                draggable="false" />
 		  <a onclick="this.parentNode.remove()" class="delete-module"
 			 style="display:none">
@@ -586,8 +583,8 @@ layout: default
 			  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" 
+          <a target="_blank" href="{{ module.url }}">
+            <img title="{{ module.type }}" draggable="false" class="module-logo"
                  {% if module.type == "structure" %}
                  src="{% link assets/tabler_icons/building.svg %}" {% endif %}
                  {% if module.type == "process" %}
@@ -606,11 +603,6 @@ layout: default
       
     </div>
 
-    <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>
-
     <div id="rule-writer">
       
       <!-- SECTION S1: BASICS -->

_sass/communityrule.scss

@@ -63,7 +63,7 @@
     padding: 10px 10px 10px 10px;
     margin: 0 0 15px 0;
     text-align: left;
-    min-height: 100px;
+    min-height: 1.5em;
 }
   
 .module {
@@ -88,6 +88,14 @@
 .delete-module {
     cursor: pointer;
 }
+.module-logo {
+}
+
+.builder-list {
+    list-style-type: none;
+    color: gray;
+    margin-bottom: 2em;
+}
 
 .field-controls {
     float: right;
@@ -159,6 +167,27 @@ Enabling users to add links*/
     display: none;
 }
 
+/* LIBRARY */
+
+#librarylist {
+    margin: 50px 0 0 0;
+}
+.library-rule-name {
+    display: inline-block;
+    margin: 0;
+    font-size: 1.2em;
+    font-weight: bold;
+}
+.library-rule-author {
+    display: inline-block;    
+    margin: 0 0 0 10px;
+    font-size: .8em;
+    color: gray;
+}
+.library-rule-structure {
+    margin: 0 0 30px 0;
+}
+
 /* VARIOUS IDs */
 #rulebox {
     border: 1px solid lightgray;

create.md

@@ -35,4 +35,4 @@ records:
 modification: 
 ---
 
-Use the questions below to start a rule from scratch. Answer questions in complete sentences, since the questions disappear.
+Create a Rule from scratch, using modules and/or answering the questions in the drop-downs below. Answer questions in complete sentences—the questions disappear.