Update styles

public/css/style.css

@@ -4,10 +4,6 @@ body {
 }
 
 /* Style for hamburger menu */
-.fa-check {
-  color: green;
-}
-
 .inner {
   display: flex;
   flex-direction: row;
@@ -22,7 +18,7 @@ body {
 
 .ref-tab {
   width: 60px;
-  padding-top: 65px !important;
+  padding-top: 75px !important;
 }
 
 .ref-tab ul {
@@ -81,7 +77,6 @@ body {
 
 #ref {
   padding: 5px;
-  font-size: 12pt;
 }
 
 #passage {
@@ -121,6 +116,12 @@ textarea#notes {
   overflow-x: scroll;
 }
 
+#previewBtn.active,
+#show-hide-btn.active {
+  background-color: #f56a6a !important;
+  color: white !important;
+}
+
 #note-header-left {
   display: inline-flex;
   flex-direction: row;
@@ -189,7 +190,16 @@ div#refQuery #search {
   opacity: 0;
   text-align: right;
   font-size: 20pt;
-  margin-top: 15px;
+  margin-left: 15px;
+  color: green;
+}
+
+#save-check.saving {
+  color: orange;
+}
+
+#save-check.error {
+  color: red;
 }
 
 #fields-container input,
@@ -209,4 +219,20 @@ div#refQuery #search {
 
 #old-notes article p:last-child {
   font-size: 12pt;
+}
+
+.inner {
+  padding-left: 0;
+}
+
+.ref h2 {
+  display: inline-block;
+}
+
+#ref {
+  font-size: 12pt;
+}
+
+#referenceBook {
+  display: none;
 }/*# sourceMappingURL=style.css.map */

public/css/style.css.map

@@ -1 +1 @@
-{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA,kCAAA;AACA;EACI,SAAA;ACCJ;;ADEA,6BAAA;AAEA;EACI,YAAA;ACAJ;;ADGA;EACI,aAAA;EACA,mBAAA;EACA,eAAA;EACA,6BAAA;EACA,oBAAA;EACA,yBAAA;EACA,iBAAA;EACA,iCAAA;EACA,cAAA;ACAJ;;ADGA;EACI,WAAA;EACA,4BAAA;ACAJ;;ADGA;EACI,SAAA;EACA,UAAA;ACAJ;;ADGA;EACI,gBAAA;EACA,qBAAA;ACAJ;;ADGA;EACI,kBAAA;ACAJ;;ADGA,GAAA;AACA;EACI,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,YAAA;EACA,WAAA;EACA,kBAAA;EACA,yBAAA;EACA,sBAAA;EACA,YAAA;EACA,kBAAA;EACA,wCAAA;EACA,eAAA;EACA,kBAAA;ACAJ;ADEI;EACI,yBAAA;ACAR;;ADIA;EACI,oCAAA;ACDJ;;ADIA;EACI,UAAA;ACDJ;;ADIA;EACI,mBAAA;EACA,sBAAA;EACA,oBAAA;EACA,kBAAA;EACA,WAAA;EACA,YAAA;EACA,uBAAA;EACA,kBAAA;EACA,wCAAA;ACDJ;;ADIA;EACI,YAAA;EACA,eAAA;ACDJ;;ADIA;EACI,YAAA;ACDJ;;ADIA;EACI,aAAA;EACA,YAAA;ACDJ;;ADIA;EACI,aAAA;EACA,YAAA;ACDJ;;ADIA;EACI,aAAA;ACDJ;;ADIA;EACI,cAAA;ACDJ;;ADIA;EACI,UAAA;ACDJ;;ADIA;EACI,WAAA;EACA,YAAA;EACA,eAAA;ACDJ;;ADIA;EACI,aAAA;EACA,kBAAA;ACDJ;;ADIA;EACI,oBAAA;EACA,mBAAA;EACA,UAAA;ACDJ;;ADIA;EACI,oBAAA;EACA,2BAAA;EACA,UAAA;ACDJ;;ADIA;EACI,iBAAA;ACDJ;;ADIA;EACI,aAAA;ACDJ;;ADIA;EACI,SAAA;EACA,UAAA;EACA,qBAAA;EACA,gBAAA;ACDJ;;ADIA;EACI,aAAA;EACA,kBAAA;EACA,YAAA;EACA,oCAAA;EACA,YAAA;EACA,aAAA;ACDJ;;ADIA;EACI,YAAA;EACA,kBAAA;EACA,kBAAA;EACA,eAAA;EACA,gBAAA;EACA,WAAA;EACA,yBAAA;EACA,YAAA;EACA,YAAA;EACA,eAAA;ACDJ;;ADIA;EACI,aAAA;EACA,kBAAA;EACA,YAAA;EACA,sBAAA;EACA,YAAA;EACA,aAAA;EACA,sBAAA;EACA,kBAAA;EACA,wCAAA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;ACDJ;;ADIA;EACI,UAAA;EACA,iBAAA;EACA,eAAA;EACA,gBAAA;ACDJ;;ADIA;;EAEI,YAAA;EACA,qBAAA;ACDJ;;ADIA;EACI,2BAAA;EACA,eAAA;ACDJ;;ADIA;EACI,eAAA;ACDJ;;ADIA;EACI,eAAA;ACDJ","file":"style.css"}
+{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA,kCAAA;AACA;EACI,SAAA;ACCJ;;ADEA,6BAAA;AAEA;EACI,aAAA;EACA,mBAAA;EACA,eAAA;EACA,6BAAA;EACA,oBAAA;EACA,yBAAA;EACA,iBAAA;EACA,iCAAA;EACA,cAAA;ACAJ;;ADGA;EACI,WAAA;EACA,4BAAA;ACAJ;;ADGA;EACI,SAAA;EACA,UAAA;ACAJ;;ADGA;EACI,gBAAA;EACA,qBAAA;ACAJ;;ADGA;EACI,kBAAA;ACAJ;;ADGA,GAAA;AACA;EACI,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,YAAA;EACA,WAAA;EACA,kBAAA;EACA,yBAAA;EACA,sBAAA;EACA,YAAA;EACA,kBAAA;EACA,wCAAA;EACA,eAAA;EACA,kBAAA;ACAJ;ADEI;EACI,yBAAA;ACAR;;ADIA;EACI,oCAAA;ACDJ;;ADIA;EACI,UAAA;ACDJ;;ADIA;EACI,mBAAA;EACA,sBAAA;EACA,oBAAA;EACA,kBAAA;EACA,WAAA;EACA,YAAA;EACA,uBAAA;EACA,kBAAA;EACA,wCAAA;ACDJ;;ADIA;EACI,YAAA;ACDJ;;ADIA;EACI,YAAA;ACDJ;;ADIA;EACI,aAAA;EACA,YAAA;ACDJ;;ADIA;EACI,aAAA;EACA,YAAA;ACDJ;;ADIA;EACI,aAAA;ACDJ;;ADIA;EACI,cAAA;ACDJ;;ADIA;EACI,UAAA;ACDJ;;ADIA;EACI,WAAA;EACA,YAAA;EACA,eAAA;ACDJ;;ADIA;EACI,aAAA;EACA,kBAAA;ACDJ;;ADIA;;EAEI,oCAAA;EACA,uBAAA;ACDJ;;ADIA;EACI,oBAAA;EACA,mBAAA;EACA,UAAA;ACDJ;;ADIA;EACI,oBAAA;EACA,2BAAA;EACA,UAAA;ACDJ;;ADIA;EACI,iBAAA;ACDJ;;ADIA;EACI,aAAA;ACDJ;;ADIA;EACI,SAAA;EACA,UAAA;EACA,qBAAA;EACA,gBAAA;ACDJ;;ADIA;EACI,aAAA;EACA,kBAAA;EACA,YAAA;EACA,oCAAA;EACA,YAAA;EACA,aAAA;ACDJ;;ADIA;EACI,YAAA;EACA,kBAAA;EACA,kBAAA;EACA,eAAA;EACA,gBAAA;EACA,WAAA;EACA,yBAAA;EACA,YAAA;EACA,YAAA;EACA,eAAA;ACDJ;;ADIA;EACI,aAAA;EACA,kBAAA;EACA,YAAA;EACA,sBAAA;EACA,YAAA;EACA,aAAA;EACA,sBAAA;EACA,kBAAA;EACA,wCAAA;EACA,YAAA;EACA,aAAA;EACA,kBAAA;ACDJ;;ADIA;EACI,UAAA;EACA,iBAAA;EACA,eAAA;EACA,iBAAA;EACA,YAAA;ACDJ;;ADIA;EACI,aAAA;ACDJ;;ADIA;EACI,UAAA;ACDJ;;ADIA;;EAEI,YAAA;EACA,qBAAA;ACDJ;;ADIA;EACI,2BAAA;EACA,eAAA;ACDJ;;ADIA;EACI,eAAA;ACDJ;;ADIA;EACI,eAAA;ACDJ;;ADIA;EACI,eAAA;ACDJ;;ADIA;EACI,qBAAA;ACDJ;;ADIA;EACI,eAAA;ACDJ;;ADIA;EACI,aAAA;ACDJ","file":"style.css"}

public/css/style.min.css

@@ -1 +1 @@
-body{margin:0}.fa-check{color:green}.inner{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-evenly;align-items:stretch;align-content:flex-start;max-width:1020px;margin:0 auto}.ref-tab{width:60px;padding-top:65px !important}.ref-tab ul{margin:0;padding:0}.ref-tab ul li{list-style:none;list-style-type:none}.tab{margin-bottom:3px}.tab button{display:flex;justify-content:center;align-items:center;height:80px;width:100%;text-align:center;background-color:#f56a6a;color:#fff !important;border:none;border-radius:3px;box-shadow:0 4px 5px rgba(0,0,0,.8);font-size:14px;margin-bottom:3px}.tab button:active{background-color:#7a0016}.activeRef{background-color:#3e8e41 !important}.ref{width:35%}.ref>div#ref{vertical-align:top;justify-content:start;align-content:start;overflow-y:scroll;width:100%;height:100%;border:#000 solid 1px;border-radius:3px;box-shadow:0 2px 5px rgba(0,0,0,.3)}#ref{padding:5px;font-size:12pt}#passage{width:100px}#newSpeaker{display:none;width:110px}#newSeries{display:none;width:110px}#fields-container{display:none}#fields-container.show{display:block}.notes{width:55%}textarea#notes{width:100%;height:100%;font-size:14pt}#notePreview{display:none;overflow-x:scroll}#note-header-left{display:inline-flex;flex-direction:row;width:25%}#note-header-right{display:inline-flex;flex-direction:row-reverse;width:74%}#note-header-left h2.dirty{color:#ff8c00}#note-list{display:none}#note-list ul{margin:0;padding:0;list-style-type:none;list-style:none}div#refQuery{display:none;position:absolute;z-index:100;background-color:rgba(0,0,0,.5);width:400px;height:200px}div#refQuery #search{border:none;border-radius:5px;padding:10px 20px;font-size:16px;line-height:1.5;color:#333;background-color:#f4f4f4;width:150px;height:25px;cursor:pointer}#passage-popup{display:none;position:absolute;z-index:100;background-color:#fff;color:#000;padding:10px;border:1px solid #ccc;border-radius:5px;box-shadow:0 2px 5px rgba(0,0,0,.3);width:300px;height:300px;overflow-x:scroll}#save-check{opacity:0;text-align:right;font-size:20pt;margin-top:15px}#fields-container input,#fields-container select{width:19.5%;display:inline-block}#old-notes article p:first-child{margin-bottom:0 !important;font-size:10pt}#old-notes article a{font-size:12pt}#old-notes article p:last-child{font-size:12pt}/*# sourceMappingURL=style.min.css.map */
+body{margin:0}.inner{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-evenly;align-items:stretch;align-content:flex-start;max-width:1020px;margin:0 auto}.ref-tab{width:60px;padding-top:75px !important}.ref-tab ul{margin:0;padding:0}.ref-tab ul li{list-style:none;list-style-type:none}.tab{margin-bottom:3px}.tab button{display:flex;justify-content:center;align-items:center;height:80px;width:100%;text-align:center;background-color:#f56a6a;color:#fff !important;border:none;border-radius:3px;box-shadow:0 4px 5px rgba(0,0,0,.8);font-size:14px;margin-bottom:3px}.tab button:active{background-color:#7a0016}.activeRef{background-color:#3e8e41 !important}.ref{width:35%}.ref>div#ref{vertical-align:top;justify-content:start;align-content:start;overflow-y:scroll;width:100%;height:100%;border:#000 solid 1px;border-radius:3px;box-shadow:0 2px 5px rgba(0,0,0,.3)}#ref{padding:5px}#passage{width:100px}#newSpeaker{display:none;width:110px}#newSeries{display:none;width:110px}#fields-container{display:none}#fields-container.show{display:block}.notes{width:55%}textarea#notes{width:100%;height:100%;font-size:14pt}#notePreview{display:none;overflow-x:scroll}#previewBtn.active,#show-hide-btn.active{background-color:#f56a6a !important;color:#fff !important}#note-header-left{display:inline-flex;flex-direction:row;width:25%}#note-header-right{display:inline-flex;flex-direction:row-reverse;width:74%}#note-header-left h2.dirty{color:#ff8c00}#note-list{display:none}#note-list ul{margin:0;padding:0;list-style-type:none;list-style:none}div#refQuery{display:none;position:absolute;z-index:100;background-color:rgba(0,0,0,.5);width:400px;height:200px}div#refQuery #search{border:none;border-radius:5px;padding:10px 20px;font-size:16px;line-height:1.5;color:#333;background-color:#f4f4f4;width:150px;height:25px;cursor:pointer}#passage-popup{display:none;position:absolute;z-index:100;background-color:#fff;color:#000;padding:10px;border:1px solid #ccc;border-radius:5px;box-shadow:0 2px 5px rgba(0,0,0,.3);width:300px;height:300px;overflow-x:scroll}#save-check{opacity:0;text-align:right;font-size:20pt;margin-left:15px;color:green}#save-check.saving{color:orange}#save-check.error{color:red}#fields-container input,#fields-container select{width:19.5%;display:inline-block}#old-notes article p:first-child{margin-bottom:0 !important;font-size:10pt}#old-notes article a{font-size:12pt}#old-notes article p:last-child{font-size:12pt}.inner{padding-left:0}.ref h2{display:inline-block}#ref{font-size:12pt}#referenceBook{display:none}/*# sourceMappingURL=style.min.css.map */

public/css/style.min.css.map

@@ -1 +1 @@
-{"version":3,"sources":["style.scss"],"names":[],"mappings":"AACA,KACI,QAAA,CAKJ,UACI,WAAA,CAGJ,OACI,YAAA,CACA,kBAAA,CACA,cAAA,CACA,4BAAA,CACA,mBAAA,CACA,wBAAA,CACA,gBAAA,CAEA,aAAA,CAGJ,SACI,UAAA,CACA,2BAAA,CAGJ,YACI,QAAA,CACA,SAAA,CAGJ,eACI,eAAA,CACA,oBAAA,CAGJ,KACI,iBAAA,CAIJ,YACI,YAAA,CACA,sBAAA,CACA,kBAAA,CACA,WAAA,CACA,UAAA,CACA,iBAAA,CACA,wBAAA,CACA,qBAAA,CACA,WAAA,CACA,iBAAA,CACA,mCAAA,CACA,cAAA,CACA,iBAAA,CAEA,mBACI,wBAAA,CAIR,WACI,mCAAA,CAGJ,KACI,SAAA,CAGJ,aACI,kBAAA,CACA,qBAAA,CACA,mBAAA,CACA,iBAAA,CACA,UAAA,CACA,WAAA,CACA,qBAAA,CACA,iBAAA,CACA,mCAAA,CAGJ,KACI,WAAA,CACA,cAAA,CAGJ,SACI,WAAA,CAGJ,YACI,YAAA,CACA,WAAA,CAGJ,WACI,YAAA,CACA,WAAA,CAGJ,kBACI,YAAA,CAGJ,uBACI,aAAA,CAGJ,OACI,SAAA,CAGJ,eACI,UAAA,CACA,WAAA,CACA,cAAA,CAGJ,aACI,YAAA,CACA,iBAAA,CAGJ,kBACI,mBAAA,CACA,kBAAA,CACA,SAAA,CAGJ,mBACI,mBAAA,CACA,0BAAA,CACA,SAAA,CAGJ,2BACI,aAAA,CAGJ,WACI,YAAA,CAGJ,cACI,QAAA,CACA,SAAA,CACA,oBAAA,CACA,eAAA,CAGJ,aACI,YAAA,CACA,iBAAA,CACA,WAAA,CACA,+BAAA,CACA,WAAA,CACA,YAAA,CAGJ,qBACI,WAAA,CACA,iBAAA,CACA,iBAAA,CACA,cAAA,CACA,eAAA,CACA,UAAA,CACA,wBAAA,CACA,WAAA,CACA,WAAA,CACA,cAAA,CAGJ,eACI,YAAA,CACA,iBAAA,CACA,WAAA,CACA,qBAAA,CACA,UAAA,CACA,YAAA,CACA,qBAAA,CACA,iBAAA,CACA,mCAAA,CACA,WAAA,CACA,YAAA,CACA,iBAAA,CAGJ,YACI,SAAA,CACA,gBAAA,CACA,cAAA,CACA,eAAA,CAGJ,iDAEI,WAAA,CACA,oBAAA,CAGJ,iCACI,0BAAA,CACA,cAAA,CAGJ,qBACI,cAAA,CAGJ,gCACI,cAAA","file":"style.min.css"}
+{"version":3,"sources":["style.scss"],"names":[],"mappings":"AACA,KACI,QAAA,CAKJ,OACI,YAAA,CACA,kBAAA,CACA,cAAA,CACA,4BAAA,CACA,mBAAA,CACA,wBAAA,CACA,gBAAA,CAEA,aAAA,CAGJ,SACI,UAAA,CACA,2BAAA,CAGJ,YACI,QAAA,CACA,SAAA,CAGJ,eACI,eAAA,CACA,oBAAA,CAGJ,KACI,iBAAA,CAIJ,YACI,YAAA,CACA,sBAAA,CACA,kBAAA,CACA,WAAA,CACA,UAAA,CACA,iBAAA,CACA,wBAAA,CACA,qBAAA,CACA,WAAA,CACA,iBAAA,CACA,mCAAA,CACA,cAAA,CACA,iBAAA,CAEA,mBACI,wBAAA,CAIR,WACI,mCAAA,CAGJ,KACI,SAAA,CAGJ,aACI,kBAAA,CACA,qBAAA,CACA,mBAAA,CACA,iBAAA,CACA,UAAA,CACA,WAAA,CACA,qBAAA,CACA,iBAAA,CACA,mCAAA,CAGJ,KACI,WAAA,CAGJ,SACI,WAAA,CAGJ,YACI,YAAA,CACA,WAAA,CAGJ,WACI,YAAA,CACA,WAAA,CAGJ,kBACI,YAAA,CAGJ,uBACI,aAAA,CAGJ,OACI,SAAA,CAGJ,eACI,UAAA,CACA,WAAA,CACA,cAAA,CAGJ,aACI,YAAA,CACA,iBAAA,CAGJ,yCAEI,mCAAA,CACA,qBAAA,CAGJ,kBACI,mBAAA,CACA,kBAAA,CACA,SAAA,CAGJ,mBACI,mBAAA,CACA,0BAAA,CACA,SAAA,CAGJ,2BACI,aAAA,CAGJ,WACI,YAAA,CAGJ,cACI,QAAA,CACA,SAAA,CACA,oBAAA,CACA,eAAA,CAGJ,aACI,YAAA,CACA,iBAAA,CACA,WAAA,CACA,+BAAA,CACA,WAAA,CACA,YAAA,CAGJ,qBACI,WAAA,CACA,iBAAA,CACA,iBAAA,CACA,cAAA,CACA,eAAA,CACA,UAAA,CACA,wBAAA,CACA,WAAA,CACA,WAAA,CACA,cAAA,CAGJ,eACI,YAAA,CACA,iBAAA,CACA,WAAA,CACA,qBAAA,CACA,UAAA,CACA,YAAA,CACA,qBAAA,CACA,iBAAA,CACA,mCAAA,CACA,WAAA,CACA,YAAA,CACA,iBAAA,CAGJ,YACI,SAAA,CACA,gBAAA,CACA,cAAA,CACA,gBAAA,CACA,WAAA,CAGJ,mBACI,YAAA,CAGJ,kBACI,SAAA,CAGJ,iDAEI,WAAA,CACA,oBAAA,CAGJ,iCACI,0BAAA,CACA,cAAA,CAGJ,qBACI,cAAA,CAGJ,gCACI,cAAA,CAGJ,OACI,cAAA,CAGJ,QACI,oBAAA,CAGJ,KACI,cAAA,CAGJ,eACI,YAAA","file":"style.min.css"}

public/css/style.scss

@@ -5,10 +5,6 @@ body {
 
 /* Style for hamburger menu */
 
-.fa-check {
-    color: green;
-}
-
 .inner {
     display: flex;
     flex-direction: row;
@@ -23,7 +19,7 @@ body {
 
 .ref-tab {
     width: 60px;
-    padding-top: 65px !important;
+    padding-top: 75px !important;
 }
 
 .ref-tab ul {
@@ -83,7 +79,6 @@ body {
 
 #ref {
     padding: 5px;
-    font-size: 12pt;
 }
 
 #passage {
@@ -123,6 +118,12 @@ textarea#notes {
     overflow-x: scroll;
 }
 
+#previewBtn.active,
+#show-hide-btn.active {
+    background-color: #f56a6a !important;
+    color: white !important;
+}
+
 #note-header-left {
     display: inline-flex;
     flex-direction: row;
@@ -191,7 +192,16 @@ div#refQuery #search {
     opacity: 0;
     text-align: right;
     font-size: 20pt;
-    margin-top: 15px;
+    margin-left: 15px;
+    color: green;
+}
+
+#save-check.saving {
+    color: orange;
+}
+
+#save-check.error {
+    color: red;
 }
 
 #fields-container input,
@@ -212,3 +222,19 @@ div#refQuery #search {
 #old-notes article p:last-child {
     font-size: 12pt;
 }
+
+.inner {
+    padding-left: 0;
+}
+
+.ref h2 {
+    display: inline-block;
+}
+
+#ref {
+    font-size: 12pt;
+}
+
+#referenceBook {
+    display: none;
+}

public/js/data.js

@@ -1,95 +0,0 @@
-var BOOKS = {
-    "bible": [
-        "Genesis",
-        "Exodus",
-        "Leviticus",
-        "Numbers",
-        "Deuteronomy",
-        "Joshua",
-        "Judges",
-        "Ruth",
-        "1 Samuel",
-        "2 Samuel",
-        "1 Kings",
-        "2 Kings",
-        "1 Chronicles",
-        "2 Chronicles",
-        "Ezra",
-        "Nehemiah",
-        "Esther",
-        "Job",
-        "Psalms",
-        "Proverbs",
-        "Ecclesiastes",
-        "Song of Solomon",
-        "Isaiah",
-        "Jeremiah",
-        "Lamentations",
-        "Ezekiel",
-        "Daniel",
-        "Hosea",
-        "Joel",
-        "Amos",
-        "Obadiah",
-        "Jonah",
-        "Micah",
-        "Nahum",
-        "Habakkuk",
-        "Zephaniah",
-        "Haggai",
-        "Zechariah",
-        "Malachi",
-        "Matthew",
-        "Mark",
-        "Luke",
-        "John",
-        "Acts",
-        "Romans",
-        "1 Corinthians",
-        "2 Corinthians",
-        "Galatians",
-        "Ephesians",
-        "Philippians",
-        "Colossians",
-        "1 Thessalonians",
-        "2 Thessalonians",
-        "1 Timothy",
-        "2 Timothy",
-        "Titus",
-        "Philemon",
-        "Hebrews",
-        "James",
-        "1 Peter",
-        "2 Peter",
-        "1 John",
-        "2 John",
-        "3 John",
-        "Jude",
-        "Revelation"
-    ],
-    "creed": {
-        "apc": "Apostle's Creed",
-        "nc": "Nicene Creed",
-        "atc": "Athanasian Creed",
-        "dc": "Definition of Chalcedon",
-        "fc": "French Confession"
-    },
-    "bc": [
-        1, 37
-    ],
-    "hc": [
-        1, 52
-    ],
-    "cd": [
-        "1", "2", "3", "5", "Conclusion"
-    ],
-    "wcf": [
-        1, 33
-    ],
-    "wsc": [
-        1, 107
-    ],
-    "wlc": [
-        1, 196
-    ]
-};

public/js/script.js

@@ -6,6 +6,22 @@ let saved = false;
 let textDirty = false;
 let saveTimeout = 10000;
 var to = null;
+let controller;
+var BOOKS = {};
+
+fetch('/js/data.json')
+    .then((res) => {
+        if (!res.ok) {
+            throw new Error('HTTP Error: Status: ${res.status}');
+        }
+        return res.json();
+    })
+    .then((data) => {
+        BOOKS = data;
+    })
+    .catch((error) => {
+        console.log(error);
+    })
 
 document.addEventListener('keyup', function (event) {
     if (event.key == "F3") {
@@ -141,6 +157,10 @@ function saveNote(event) {
         return;
     }
 
+    let saveCheck = document.querySelector('#save-check');
+
+    startSave();
+
     var note = {
         id: document.querySelector("#noteId").value,
         date: document.querySelector('#noteDate').value,
@@ -151,16 +171,17 @@ function saveNote(event) {
         note: document.querySelector('#notes').value,
         refs: references
     };
-    fetch('/index.php/save-note', {
+    $.ajax({
+        url: '/index.php/save-note',
         method: 'POST',
-        headers: {
+        contentType: 'application/json',
-            "Content-Type": 'application/json'
+        data: JSON.stringify(note),
-        },
+        dataType: 'json',
-        body: JSON.stringify(note)
+        timeout: 5000
     })
-        .then(response => response.json())
+        .done(function (data) {
-        .then(data => {
             if (data.msg == 'saved' && !saved) {
+                saveCheck.classList.remove('saving');
                 showSave();
                 saved = true;
                 textDirty = false;
@@ -171,8 +192,19 @@ function saveNote(event) {
                 }
             }
         })
-        .catch(error => console.log(error))
+        .fail(function (data) {
-        .finally(() => function () { clearTimeout(to); to = setTimeout(saveNote, saveTimeout); });
+            saveCheck.classList.remove('saving');
+            saveCheck.classList.add('error');
+            console.error(data);
+        })
+        .always(function (xhr, status) {
+            if (status == 'timeout') {
+                saveCheck.classList.remove('saving');
+                saveCheck.classList.add('error');
+            }
+            clearTimeout(to);
+            to = setTimeout(saveNote, saveTimeout);
+        });
 }
 
 function validateNote() {
@@ -198,6 +230,11 @@ function isUuidValid(uuid) {
     return regex.test(uuid);
 }
 
+function startSave() {
+    document.querySelector('#save-check').classList.add('saving');
+    document.querySelector('#save-check').style.opacity = 1;
+}
+
 /**
  * Displays a checkmark animation on the screen.
  *
@@ -213,10 +250,10 @@ function showSave() {
     var si = setInterval(function () {
         // Increment the opacity of the checkmark by 0.01 each time
         op = parseFloat(checkmark.style.opacity);
-        checkmark.style.opacity = op + 0.1;
+        checkmark.style.opacity = op - 0.1;
 
         // If the opacity is greater than or equal to 1, reset it back to 0 and stop the animation
-        if (checkmark.style.opacity >= 1) {
+        if (checkmark.style.opacity == 0.1) {
             checkmark.style.opacity = 0;
             clearInterval(si);
             saved = false;
@@ -479,21 +516,22 @@ function toggleFields() {
     const showHideBtn = document.getElementById('show-hide-btn');
 
     if (fieldsContainer.classList.contains('show')) {
-        // Hide the fields when the button says "Show Fields"
         fieldsContainer.classList.remove('show');
         fieldsContainer.style.display = 'none';
-        showHideBtn.textContent = 'Show';
+        showHideBtn.classList.remove('active');
     } else {
-        // Show the fields when the button says "Hide Fields"
         fieldsContainer.classList.add('show');
         fieldsContainer.style.display = 'block';
-        showHideBtn.textContent = 'Hide';
+        showHideBtn.classList.add('active');
     }
 
     setHeight();
 }
 
 function retrieveBooks() {
+    document.querySelector('#chapter-range').innerText = '';
+    document.querySelector('#verse-range').innerText = '';
+    document.querySelector('#referenceSearch').value = '';
     const selectedType = document.querySelector('#referenceType').value;
     if (!selectedType) { return; }
 
@@ -507,7 +545,7 @@ function retrieveBooks() {
         bookList.appendChild(none);
         for (var x in BOOKS.bible) {
             var newBook = document.createElement("option");
-            newBook.text = BOOKS.bible[x];
+            newBook.text = x;
             bookList.appendChild(newBook);
         }
     } else if (selectedType == 'creed') {
@@ -547,6 +585,39 @@ function retrieveBooks() {
     }
 }
 
+function filterBooks() {
+    document.querySelector('#chapter-range').innerText = '';
+    document.querySelector('#verse-range').innerText = '';
+    if (document.querySelector('#referenceType').value != 'bible') {
+        return;
+    }
+
+    var bookList = document.querySelector('#referenceBook');
+    var book = BOOKS.bible[bookList.value];
+    var max = Object.keys(book).length;
+
+    var chapterRange = document.querySelector('#chapter-range');
+    chapterRange.innerText = 'Chapters: ' + max;
+}
+
+function filterVerse() {
+    if (document.querySelector('#referenceType').value != 'bible') {
+        return;
+    }
+
+    var bookList = document.querySelector('#referenceBook').value;
+    var search = document.querySelector('#referenceSearch').value;
+    var chapter = search.split(':')[0];
+    var verseRange = document.querySelector('#verse-range');
+
+    if (!BOOKS.bible[bookList] || !BOOKS.bible[bookList][chapter]) {
+        verseRange.innerText = 'Unknown Chapter';
+        return;
+    }
+    var verse = BOOKS.bible[bookList][chapter];
+    verseRange.innerText = 'Verse: ' + verse;
+}
+
 function retrieveReference(el) {
     fetch('/index.php/get-reference', {
         method: "POST",
@@ -600,14 +671,14 @@ function previewNote() {
 
     notePreview.innerHTML = md.render(markdownPreview);
 
-    if (previewButton.value == 'Preview') {
+    if (previewButton.classList.contains('active')) {
-        previewButton.value = 'Hide Preview';
-        noteText.style.display = 'none';
-        notePreview.style.display = 'block';
-    } else {
-        previewButton.value = 'Preview';
         noteText.style.display = 'block';
         notePreview.style.display = 'none';
+        previewButton.classList.remove('active');
+    } else {
+        noteText.style.display = 'none';
+        notePreview.style.display = 'block';
+        previewButton.classList.add('active');
     }
 
     findLinks();
@@ -703,8 +774,8 @@ function showPassage(event, text) {
     popup.innerHTML = md.render(text);
 
     // Position the popup relative to the cursor
-    let x = event.clientX + window.pageXOffset;
+    let x = event.clientX + window.scrollX;
-    let y = event.clientY + window.pageYOffset;
+    let y = event.clientY + window.scrollY;
 
     // Set the position of the popup element
     popup.style.top = `${y}px`;

public/theme/assets/css/main.css

@@ -2233,7 +2233,7 @@ a.image:hover img {
 ol {
     list-style: decimal;
     margin: 0 0 2em 0;
-    padding-left: 1.25em;
+    padding-left: 1.5em;
 }
 
 ol li {
@@ -2246,10 +2246,6 @@ ul {
     padding-left: 1em;
 }
 
-ul li {
-    /*padding-left: 0.5em;*/
-}
-
 ul.alt {
     list-style: none;
     padding-left: 0;
@@ -3110,16 +3106,12 @@ button:disabled,
     #main>.inner {
         padding: 0 0 0 2em;
     }
-
-    #main>.inner>section {}
 }
 
 @media screen and (max-width: 1280px) {
     #main>.inner {
         padding: 0 0 0 2em;
     }
-
-    #main>.inner>section {}
 }
 
 @media screen and (max-width: 736px) {
@@ -3199,7 +3191,7 @@ button:disabled,
 }
 
 #sidebar>.inner {
-    padding: 2.22222em 2.22222em 2.44444em 2.22222em;
+    padding: 2.22em 2.22em 2.44em 2.22em;
     position: relative;
     width: 26em;
 }
@@ -3223,9 +3215,9 @@ button:disabled,
 #sidebar>.inner>.alt {
     background-color: #eff1f2;
     border-bottom: 0;
-    margin: -2.22222em 0 4.44444em -2.22222em;
+    margin: -2.22em -2.33em 1.0em -2.22em;
-    padding: 2.22222em;
+    padding: 2.22em;
-    width: calc(100% + 4.44444em);
+    width: calc(100% + 4.44em);
 }
 
 #sidebar .toggle {
@@ -3420,8 +3412,6 @@ button:disabled,
 }
 
 @media screen and (max-width: 736px) {
-    #header {}
-
     #header .logo {
         font-size: 1.25em;
         margin: 0;

src/Controller/DefaultController.php

@@ -26,9 +26,11 @@ class DefaultController extends AbstractController
     {
         $this->denyAccessUnlessGranted('IS_AUTHENTICATED_FULLY');
         $last4Notes = $emi->getRepository(Note::class)->getLast4Notes($user);
+        $openNotes = $emi->getRepository(Note::class)->reverseNoteSort($user);
 
         return $this->render('default/home.html.twig', [
             'last4Notes' => $last4Notes,
+            'reverseNoteSort' => $openNotes,
             'isAdmin' => $this->isGranted('ROLE_ADMIN'),
         ]);
     }

src/Repository/NoteRepository.php

@@ -17,6 +17,22 @@ class NoteRepository extends ServiceEntityRepository
         parent::__construct($registry, Note::class);
     }
 
+    public function reverseNoteSort(?User $user): array
+    {
+        if (!$user) {
+            return [];
+        }
+
+        $ret = $this->createQueryBuilder('n')
+            ->where('n.user = :user')
+            ->setParameter('user', $user->getId()->toBinary())
+            ->orderBy('n.date', 'DESC')
+            ->getQuery()
+            ->getResult();
+
+        return $ret;
+    }
+
     public function getLast4Notes(?User $user): array
     {
         if (!$user) {
@@ -36,13 +52,13 @@ class NoteRepository extends ServiceEntityRepository
     public function findNote(string $query, string $userId): array
     {
         $ret = $this->createQueryBuilder('n')
-            ->orderBy('n.date', 'DESC')
             ->where('n.title LIKE :query')
             ->orWhere('n.passage LIKE :query')
             ->orWhere('n.text LIKE :query')
             ->andWhere('n.user = :user')
             ->setParameter('query', "%{$query}%")
             ->setParameter('user', $userId)
+            ->orderBy('n.date', 'DESC')
             ->setMaxResults(3)
             ->getQuery()
             ->getResult();

templates/base.html.twig

@@ -10,13 +10,10 @@
         <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
 
         <title>{% block title %}Welcome!{% endblock %}</title>
-        {% block stylesheets %}
+        {% block stylesheets %}{% endblock %}
-        {% endblock %}
     </head>
     <body class='is-preload' onload='setHeight()' onresize='setHeight()'>
         {% block body %}{% endblock %}
-        {% block javascripts %}
+        {% block javascripts %}{% endblock %}
-            {% block importmap %}{{ importmap('app') }}{% endblock %}
-        {% endblock %}
     </body>
 </html>

templates/default/home.html.twig

@@ -10,7 +10,6 @@
 {% endblock %}
 
 {% block javascripts %}
-<script src='/js/data.js'></script>
 <script src='/js/script.js'></script>
 <script src="/theme/assets/js/jquery.min.js"></script>
 <script src='/theme/assets/js/jquery-ui.js'></script>
@@ -24,19 +23,19 @@
 {% block body %}
 <div id='wrapper'>
     <div id='main'>
-        <div class='inner' style='padding-left:0;'>
+        <div class='inner'>
             <section class='ref-tab'>
                 <ul id='ref-list'>
                 </ul>
             </section>
 
             <section class='ref'>
-                <h2 style='display:inline-block'>Reference</h2>
+                <h2>Reference</h2>
                 <div style='display:inline-block'>
                     <button onclick='increaseFont()'><i class='fa fa-plus'></i></button>&nbsp;
                     <button onclick='decreaseFont()'><i class='fa fa-minus'></i></button>
                 </div>
-                <div id="ref"></div>
+                <div id="ref" style='font-size:12pt;'></div>
                 <div id='note-list'>
                     <table>
                         <thead>
@@ -48,9 +47,9 @@
                             </tr>
                         </thead>
                         <tbody>
-                    {% for n in app.user.notes|reverse %}
+                        {% for n in reverseNoteSort %}
-                    {{ n.toTableRow()|raw }}<br />
+                        {{ n.toTableRow()|raw }}
-                    {% endfor %}
+                        {% endfor %}
                         </tbody>
                     </table>
                 </div>
@@ -59,7 +58,7 @@
             <section class="notes">
                 <div id='note-header-left'>
                     <h2>Notes</h2>
-                    <i id='save-check' class='fa fa-check' style='opacity:0;'></i>
+                    <i id='save-check' class='fa fa-check'></i>
                 </div>
                 <div id='note-header-right'>
                     <select id='template' onchange="retrieveTemplate('template','notes')">
@@ -68,8 +67,13 @@
                         <option value="{{ t.id }}">{{ t.name }}</option>
                         {% endfor %}
                     </select>&nbsp;
-                    <input type="button" id="previewBtn" class='button' value="Preview" onclick='previewNote()' />&nbsp;
+                    <button id="previewBtn" class='button' onclick='previewNote()'>
-                    <input type='button' id='show-hide-btn' class='button' value='Show' onclick='toggleFields()' />
+                        <i class='fa fa-eye'></i>
+                    </button>
+                    &nbsp;
+                    <button id='show-hide-btn' class='button' onclick='toggleFields()'>
+                        <i class='fa fa-table'></i>
+                    </button>
                 </div>
 
                 <div id='fields-container'>
@@ -117,9 +121,12 @@
         <option value='wsc'>Shorter Catechism</option>
         <option value='wlc'>Larger Catechism</option>
     </select>
-    <select id='referenceBook' style='display:none;'>
+    <select id='referenceBook' onchange='filterBooks()'>
-    </select><br/>
+    </select>
-    <input type="text" id="search" placeholder="Search"><br />
+    <span id='chapter-range' style='color:white;'></span>
+    <input type="text" id="referenceSearch" placeholder="Search" onkeyup='filterVerse()'>
+    <span id='verse-range' style='color:white;'></span>
+    <br />
     <button id="searchBtn" onclick="queryRef()">Search</button>
 </div>
 

templates/default/sidebar.html.twig

@@ -12,7 +12,6 @@
         <!-- Menu -->
         <nav id="menu">
             <header class="major">
-                <h2>Menu</h2>
                 {% if app.user %}
                 <h3>Welcome {{ app.user.name }}</h3>
                 <a href='/index.php/logout'>Logout</a>