upd: docker compose

update docker compose files to us new 2.0 version

assets/app.js

@@ -5,7 +5,6 @@ import './bootstrap.js';
  * This file will be included onto the page via the importmap() Twig function,
  * which should already be in your base.html.twig.
  */
-import './styles/app.css';
+//import './styles/app.css';
-const $ = require('jquery');
 
 // console.log('This log comes from assets/app.js - welcome to AssetMapper! 🎉');

assets/css/lg-screen-style.css

@@ -16,7 +16,7 @@
     display: grid;
     height: 100vh;
     grid-template-columns: 25em 60px 35% 0.98fr;
-    grid-template-rows: 60px 1fr;
+    grid-template-rows: 60px 100vh;
     gap: 5px 5px;
     grid-auto-flow: row;
     grid-template-areas: "sidebar-header ref-btn-header ref-header note-header" "sidebar ref-btn ref-text notes";
@@ -40,8 +40,8 @@
   .notes {
     display: flex;
     flex-direction: column;
-    grid-template-columns: 1fr;
+    grid-template-columns: 100vh;
-    grid-template-rows: 75px 1fr;
+    grid-template-rows: 75px 100vh;
     gap: 2px 0px;
     grid-template-areas: "fields-container" "note-text";
     grid-area: notes;

assets/css/lg-screen-style.css.map

@@ -1 +1 @@
-{"version":3,"sources":["lg-screen-style.scss","lg-screen-style.css"],"names":[],"mappings":"AAAA;EACA;IACC,aAAA;ECCC;EDEF;IACC,aAAA;IACA,kBAAA;ECAC;EDGF;IACC,UAAA;ECDC;EDIF;IACI,UAAA;ECFF;EDKF;IACC,aAAA;IACA,aAAA;IACA,2CAAA;IACA,4BAAA;IACA,YAAA;IACA,mBAAA;IACA,4GACC;IAGD,kDAAA;ECNC;EDQD;IACC,iBAAA;ECNA;EDSD;IACC,aAAA;ECPA;EDUD;IACC,0CAAA;ECRA;EDUA;IACC,OAAA;ECRD;EDaF;IACC,0BAAA;ECXC;EDcF;IACC,aAAA;IACA,sBAAA;IACA,0BAAA;IACA,4BAAA;IACA,YAAA;IACA,mDAAA;IAEA,gBAAA;ECbC;EDeD;IACC,6BAAA;IACA,eAAA;IACA,YAAA;ECbA;EDgBA;IACC,mCAAA;IACA,kBAAA;IACA,aAAA;IACA,qBAAA;IACA,wBAAA;IAEA,gBAAA;IACA,sBAAA;IACA,6BAAA;IACA,UAAA;IACA,cAAA;IACA,qBAAA;IACA,eAAA;IACA,gBAAA;IACA,iBAAA;IACA,gBAAA;IACA,YAAA;IACA,cAAA;IACA,eAAA;IACA,gBAAA;ECdD;EDkBD;IACC,YAAA;IACA,WAAA;EChBA;EDkBA;IACC,8BAAA;IAAA,sBAAA;IAAA,eAAA;IACA,6BAAA;IAAA,qBAAA;IAAA,cAAA;IACA,mBAAA;IACA,6BAAA;IACA,kBAAA;IACA,0BAAA;EChBD;EDqBF;IACC,aAAA;IACA,8BAAA;IACA,mBAAA;ECnBC;EDqBD;IACC,SAAA;ECnBA;EDsBD;IACC,mCAAA;IACA,kBAAA;IACA,aAAA;IACA,qBAAA;IACA,wBAAA;IAEA,gBAAA;IACA,sBAAA;IACA,6BAAA;IACA,UAAA;IACA,cAAA;IACA,qBAAA;IACA,eAAA;IACA,gBAAA;IACA,iBAAA;IACA,gBAAA;IACA,YAAA;IACA,cAAA;IACA,eAAA;IACA,gBAAA;IACA,iBAAA;ECpBA;AACF","file":"lg-screen-style.css"}
+{"version":3,"sources":["lg-screen-style.scss","lg-screen-style.css"],"names":[],"mappings":"AAAA;EACA;IACC,aAAA;ECCC;EDEF;IACC,aAAA;IACA,kBAAA;ECAC;EDGF;IACC,UAAA;ECDC;EDIF;IACI,UAAA;ECFF;EDKF;IACC,aAAA;IACA,aAAA;IACA,2CAAA;IACA,8BAAA;IACA,YAAA;IACA,mBAAA;IACA,4GACC;IAGD,kDAAA;ECNC;EDQD;IACC,iBAAA;ECNA;EDSD;IACC,aAAA;ECPA;EDUD;IACC,0CAAA;ECRA;EDUA;IACC,OAAA;ECRD;EDaF;IACC,0BAAA;ECXC;EDcF;IACC,aAAA;IACA,sBAAA;IACA,4BAAA;IACA,8BAAA;IACA,YAAA;IACA,mDAAA;IAEA,gBAAA;ECbC;EDeD;IACC,6BAAA;IACA,eAAA;IACA,YAAA;ECbA;EDgBA;IACC,mCAAA;IACA,kBAAA;IACA,aAAA;IACA,qBAAA;IACA,wBAAA;IAEA,gBAAA;IACA,sBAAA;IACA,6BAAA;IACA,UAAA;IACA,cAAA;IACA,qBAAA;IACA,eAAA;IACA,gBAAA;IACA,iBAAA;IACA,gBAAA;IACA,YAAA;IACA,cAAA;IACA,eAAA;IACA,gBAAA;ECdD;EDkBD;IACC,YAAA;IACA,WAAA;EChBA;EDkBA;IACC,8BAAA;IAAA,sBAAA;IAAA,eAAA;IACA,6BAAA;IAAA,qBAAA;IAAA,cAAA;IACA,mBAAA;IACA,6BAAA;IACA,kBAAA;IACA,0BAAA;EChBD;EDqBF;IACC,aAAA;IACA,8BAAA;IACA,mBAAA;ECnBC;EDqBD;IACC,SAAA;ECnBA;EDsBD;IACC,mCAAA;IACA,kBAAA;IACA,aAAA;IACA,qBAAA;IACA,wBAAA;IAEA,gBAAA;IACA,sBAAA;IACA,6BAAA;IACA,UAAA;IACA,cAAA;IACA,qBAAA;IACA,eAAA;IACA,gBAAA;IACA,iBAAA;IACA,gBAAA;IACA,YAAA;IACA,cAAA;IACA,eAAA;IACA,gBAAA;IACA,iBAAA;ECpBA;AACF","file":"lg-screen-style.css"}

assets/css/lg-screen-style.scss

@@ -20,7 +20,7 @@
 	display: grid;
 	height: 100vh;
 	grid-template-columns: 25em 60px 35% 0.98fr;
-	grid-template-rows: 60px 1fr;
+	grid-template-rows: 60px 100vh;
 	gap: 5px 5px;
 	grid-auto-flow: row;
 	grid-template-areas:
@@ -53,8 +53,8 @@
 .notes {
 	display: flex;
 	flex-direction: column;
-	grid-template-columns: 1fr;
+	grid-template-columns: 100vh;
-	grid-template-rows: 75px 1fr;
+	grid-template-rows: 75px 100vh;
 	gap: 2px 0px;
 	grid-template-areas: "fields-container" "note-text";
 

assets/css/mobile-style.css

@@ -0,0 +1,97 @@
+@media screen and (max-width: 1050px) {
+  #sidebar {
+    display: none;
+  }
+  .note-header, #note-list, .ref-header, .ref-btn-header, .ref-btn, .fields-container {
+    display: none;
+  }
+  .container {
+    display: grid;
+    height: 100vh;
+    width: 100vw;
+    grid-template-columns: 1fr;
+    grid-template-rows: 50px 50% 1fr;
+    gap: 5px 0;
+    grid-auto-flow: column;
+    grid-template-areas: "mobile-note-header" "notes" "ref-text";
+  }
+  .container .ref-text {
+    height: 100%;
+    width: 98vw;
+    margin-left: 1vw;
+  }
+  .container .ref-text a {
+    color: var(--primary);
+  }
+  .ref-header, .ref-btn-header, .ref-btn, .note-header, .fields-container {
+    display: none;
+  }
+  .mobile-note-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .mobile-note-header h2 {
+    margin: 0 10px;
+  }
+  .mobile-note-header button {
+    margin: 0 10px;
+  }
+  .notes {
+    width: 98vw;
+    margin-left: 1vw;
+    display: flex;
+    flex-direction: column;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 50px;
+    gap: 2px 0;
+    grid-template-areas: "note-text" "fields-container";
+    grid-area: notes;
+  }
+  .notes .fields-container {
+    justify-content: space-between;
+    flex-wrap: wrap;
+    width: 99.5%;
+  }
+  .notes .fields-container input[type=text], .notes .fields-container select {
+    background-color: var(--background);
+    color: var(--text);
+    height: 1.5em;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    border-radius: 0.375em;
+    border: solid 1px var(--border);
+    outline: 0;
+    padding: 0 1em;
+    text-decoration: none;
+    font-size: 14pt;
+    font-weight: 400;
+    line-height: 1.65;
+    flex-basis: auto;
+    flex-grow: 1;
+    flex-shrink: 1;
+    min-width: 50px;
+    max-width: 200px;
+  }
+  .notes .note-text {
+    height: 100%;
+    width: 100%;
+  }
+  .notes .note-text textarea {
+    height: 100%;
+    width: 98%;
+    border-radius: 10px;
+    background-color: transparent;
+    color: var(--text);
+    font-family: "Roboto Sans";
+    padding: 0 5px;
+  }
+  #sidebar {
+    position: fixed !important;
+  }
+  #refQuery {
+    height: 150px !important;
+  }
+}/*# sourceMappingURL=mobile-style.css.map */

assets/css/mobile-style.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["mobile-style.scss","mobile-style.css"],"names":[],"mappings":"AAAA;EACA;IACC,aAAA;ECCC;EDEF;IACC,aAAA;ECAC;EDGF;IACC,aAAA;IACA,aAAA;IACA,YAAA;IACA,0BAAA;IACA,gCAAA;IACA,UAAA;IACA,sBAAA;IACA,4DACC;ECFA;EDMD;IACC,YAAA;IACA,WAAA;IACA,gBAAA;ECJA;EDMA;IACC,qBAAA;ECJD;EDSF;IACC,aAAA;ECPC;EDUF;IACC,aAAA;IACA,mBAAA;IACA,8BAAA;IACA,mBAAA;ECRC;EDUD;IACC,cAAA;ECRA;EDWD;IACC,cAAA;ECTA;EDaF;IACC,WAAA;IACA,gBAAA;IAEA,aAAA;IACA,sBAAA;IACA,0BAAA;IACA,4BAAA;IACA,UAAA;IACA,mDAAA;IAEA,gBAAA;ECbC;EDeD;IACC,8BAAA;IACA,eAAA;IACA,YAAA;ECbA;EDeA;IACC,mCAAA;IACA,kBAAA;IACA,aAAA;IACA,qBAAA;IACA,wBAAA;IAEA,gBAAA;IACA,sBAAA;IACA,+BAAA;IACA,UAAA;IACA,cAAA;IACA,qBAAA;IACA,eAAA;IACA,gBAAA;IACA,iBAAA;IACA,gBAAA;IACA,YAAA;IACA,cAAA;IACA,eAAA;IACA,gBAAA;ECbD;EDiBD;IACC,YAAA;IACA,WAAA;ECfA;EDiBA;IACC,YAAA;IACA,UAAA;IACA,mBAAA;IACA,6BAAA;IACA,kBAAA;IACA,0BAAA;IACA,cAAA;ECfD;EDoBF;IACC,0BAAA;EClBC;EDqBF;IACC,wBAAA;ECnBC;AACF","file":"mobile-style.css"}

assets/css/mobile-style.scss

@@ -0,0 +1,118 @@
+@media screen and (max-width: 1050px) {
+#sidebar {
+	display: none;
+}
+
+.note-header, #note-list, .ref-header, .ref-btn-header, .ref-btn, .fields-container {
+	display: none;
+}
+
+.container {
+	display: grid;
+	height: 100vh;
+	width: 100vw;
+	grid-template-columns: 1fr;
+	grid-template-rows: 50px 50% 1fr;
+	gap: 5px 0;
+	grid-auto-flow: column;
+	grid-template-areas: 
+		"mobile-note-header"
+		"notes"
+		"ref-text";
+
+	.ref-text {
+		height: 100%;
+		width: 98vw;
+		margin-left: 1vw;
+
+		& a {
+			color: var(--primary);
+		}
+	}
+}
+
+.ref-header, .ref-btn-header, .ref-btn, .note-header, .fields-container {
+	display: none;
+}
+
+.mobile-note-header {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+
+	h2 {
+		margin: 0 10px;
+	}
+
+	button {
+		margin: 0 10px;
+	}
+}
+
+.notes {
+	width: 98vw;
+	margin-left: 1vw;
+
+	display: flex;
+	flex-direction: column;
+	grid-template-columns: 1fr;
+	grid-template-rows: 1fr 50px;
+	gap: 2px 0;
+	grid-template-areas: "note-text" "fields-container";
+
+	grid-area: notes;
+
+	.fields-container {
+		justify-content: space-between;
+		flex-wrap: wrap;
+		width: 99.5%;
+		
+		input[type="text"], select {
+			background-color: var(--background);
+			color: var(--text);
+			height: 1.5em;
+			-moz-appearance: none;
+			-webkit-appearance: none;
+			-ms-appearance: none;
+			appearance: none;
+			border-radius: 0.375em;
+			border: solid 1px var(--border);
+			outline: 0;
+			padding: 0 1em;
+			text-decoration: none;
+			font-size: 14pt;
+			font-weight: 400;
+			line-height: 1.65;
+			flex-basis: auto;
+			flex-grow: 1;
+			flex-shrink: 1;
+			min-width: 50px;
+			max-width: 200px;
+		}
+	}
+
+	.note-text {
+		height: 100%;
+		width: 100%;
+
+		textarea {
+			height: 100%;
+			width: 98%;
+			border-radius: 10px;
+			background-color: transparent;
+			color: var(--text);
+			font-family: 'Roboto Sans';
+			padding: 0 5px;
+		}
+	}
+}
+
+#sidebar {
+	position: fixed !important;
+}
+
+#refQuery {
+	height: 150px !important;
+}
+}

assets/css/sidebar-style.css

@@ -19,6 +19,7 @@
   overflow-y: auto;
   min-width: 0;
   border-right: solid 2px var(--border);
+  height: calc(100vh - 60px);
   background-color: var(--background);
   color: var(--text);
   font-size: 0.9em;

assets/css/sidebar-style.css.map

@@ -1 +1 @@
-{"version":3,"sources":["sidebar-style.scss","sidebar-style.css"],"names":[],"mappings":"AAAA;;EAAA;AAIA;EACI,yBAAA;EACA,mCAAA;EACA,gBAAA;EACA,YAAA;EACA,aAAA;ACAJ;ADEI;EACI,UAAA;ACAR;;ADIA;EACI,kBAAA;EACA,MAAA;EACA,cAAA;EACA,gBAAA;EACA,YAAA;EACA,qCAAA;EAEA,mCAAA;EACA,kBAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;ACFJ;ADII;EACI,WAAA;ACFR;;ADMA;EACI,oBAAA;EACA,kBAAA;EACA,cAAA;ACHJ;;ADMA;EACI,kBAAA;EACA,MAAA;EACA,WAAA;EACA,YAAA;EACA,iBAAA;EACA,cAAA;EACA,iCAAA;EACA,mCAAA;EACA,qBAAA;EACA,SAAA;EACA,gBAAA;EACA,oBAAA;ACHJ;ADKI;EACI,gBAAA;EACA,kCAAA;EACA,gBAAA;EACA,kBAAA;EACA,OAAA;EACA,MAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,eAAA;EACA,kBAAA;ACHR;;ADOA;EACI,aAAA;ACJJ;;ADOA;EACI,kBAAA;ACJJ;;ADOA;EACC,yBAAA;KAAA,sBAAA;UAAA,iBAAA;EACA,iCAAA;EACA,gBAAA;EACA,uBAAA;EACA,gBAAA;EACA,UAAA;EACA,yBAAA;ACJD;;ADOA;EACC,mCAAA;EACA,mBAAA;EACA,oBAAA;ACJD;;ADOA;EACC,aAAA;EACA,aAAA;EACA,cAAA;ACJD;;ADOA;EACC,gBAAA;EACA,cAAA;EACA,eAAA;EACA,cAAA;EACA,gBAAA;EACA,kBAAA;EACG,qBAAA;ACJJ;;ADOA;EACI,wBAAA;KAAA,qBAAA;UAAA,gBAAA;EACA,6BAAA;EACA,sBAAA;EACA,+BAAA;EACA,cAAA;EACA,cAAA;EACA,UAAA;EACA,cAAA;EACA,qBAAA;EACA,UAAA;EACA,gBAAA;EACA,iBAAA;EACA,eAAA;EACA,aAAA;ACJJ;;ADOA;EACI,sCAAA;EACA,mCAAA;EACA,cAAA;EACA,eAAA;EACA,kBAAA;EACA,cAAA;ACJJ;;ADOA;EACI,aAAA;ACJJ;;ADOA;EACI,cAAA;EACA,WAAA;EACA,kBAAA;EAEA,mCAAA;EACA,gBAAA;ACLJ;ADOI;EACI,eAAA;EACA,yBAAA;EACA,qBAAA;EACA,qBAAA;EACA,eAAA;ACLR;ADQI;EACI,eAAA;EACA,cAAA;EACA,aAAA;ACNR;;ADUA;EACI,aAAA;EACA,eAAA;EACA,cAAA;ACPJ;;ADUA;EACI,gBAAA;EACA,kBAAA;EACA,iBAAA;ACPJ;;ADUA;EACI,gBAAA;EACA,eAAA;EACA,cAAA;ACPJ;;ADUA;EACI,gBAAA;EACA,UAAA;ACPJ;ADSI;EACI,kCAAA;EACA,kBAAA;EACA,gBAAA;EACA,qBAAA;EACA,gBAAA;EACA,eAAA;EACA,kBAAA;EACA,kBAAA;EACA,YAAA;ACPR;ADUI;EACI,qBAAA;EACA,iBAAA;ACRR","file":"sidebar-style.css"}
+{"version":3,"sources":["sidebar-style.scss","sidebar-style.css"],"names":[],"mappings":"AAAA;;EAAA;AAIA;EACI,yBAAA;EACA,mCAAA;EACA,gBAAA;EACA,YAAA;EACA,aAAA;ACAJ;ADEI;EACI,UAAA;ACAR;;ADIA;EACI,kBAAA;EACA,MAAA;EACA,cAAA;EACA,gBAAA;EACA,YAAA;EACA,qCAAA;EACA,0BAAA;EAEA,mCAAA;EACA,kBAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;ACFJ;ADII;EACI,WAAA;ACFR;;ADMA;EACI,oBAAA;EACA,kBAAA;EACA,cAAA;ACHJ;;ADMA;EACI,kBAAA;EACA,MAAA;EACA,WAAA;EACA,YAAA;EACA,iBAAA;EACA,cAAA;EACA,iCAAA;EACA,mCAAA;EACA,qBAAA;EACA,SAAA;EACA,gBAAA;EACA,oBAAA;ACHJ;ADKI;EACI,gBAAA;EACA,kCAAA;EACA,gBAAA;EACA,kBAAA;EACA,OAAA;EACA,MAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,cAAA;EACA,eAAA;EACA,kBAAA;ACHR;;ADOA;EACI,aAAA;ACJJ;;ADOA;EACI,kBAAA;ACJJ;;ADOA;EACC,yBAAA;KAAA,sBAAA;UAAA,iBAAA;EACA,iCAAA;EACA,gBAAA;EACA,uBAAA;EACA,gBAAA;EACA,UAAA;EACA,yBAAA;ACJD;;ADOA;EACC,mCAAA;EACA,mBAAA;EACA,oBAAA;ACJD;;ADOA;EACC,aAAA;EACA,aAAA;EACA,cAAA;ACJD;;ADOA;EACC,gBAAA;EACA,cAAA;EACA,eAAA;EACA,cAAA;EACA,gBAAA;EACA,kBAAA;EACG,qBAAA;ACJJ;;ADOA;EACI,wBAAA;KAAA,qBAAA;UAAA,gBAAA;EACA,6BAAA;EACA,sBAAA;EACA,+BAAA;EACA,cAAA;EACA,cAAA;EACA,UAAA;EACA,cAAA;EACA,qBAAA;EACA,UAAA;EACA,gBAAA;EACA,iBAAA;EACA,eAAA;EACA,aAAA;ACJJ;;ADOA;EACI,sCAAA;EACA,mCAAA;EACA,cAAA;EACA,eAAA;EACA,kBAAA;EACA,cAAA;ACJJ;;ADOA;EACI,aAAA;ACJJ;;ADOA;EACI,cAAA;EACA,WAAA;EACA,kBAAA;EAEA,mCAAA;EACA,gBAAA;ACLJ;ADOI;EACI,eAAA;EACA,yBAAA;EACA,qBAAA;EACA,qBAAA;EACA,eAAA;ACLR;ADQI;EACI,eAAA;EACA,cAAA;EACA,aAAA;ACNR;;ADUA;EACI,aAAA;EACA,eAAA;EACA,cAAA;ACPJ;;ADUA;EACI,gBAAA;EACA,kBAAA;EACA,iBAAA;ACPJ;;ADUA;EACI,gBAAA;EACA,eAAA;EACA,cAAA;ACPJ;;ADUA;EACI,gBAAA;EACA,UAAA;ACPJ;ADSI;EACI,kCAAA;EACA,kBAAA;EACA,gBAAA;EACA,qBAAA;EACA,gBAAA;EACA,eAAA;EACA,kBAAA;EACA,kBAAA;EACA,YAAA;ACPR;ADUI;EACI,qBAAA;EACA,iBAAA;ACRR","file":"sidebar-style.css"}

assets/css/sidebar-style.scss

@@ -21,6 +21,7 @@
     overflow-y: auto;
     min-width: 0;
     border-right: solid 2px var(--border);
+    height: calc(100vh - 60px);
     
     background-color: var(--background);
     color: var(--text);

assets/css/styles.css

@@ -118,7 +118,7 @@ button.button i {
   display: flex;
   flex-direction: column;
   align-items: start;
-  height: 100vh;
+  height: calc(100vh - 80px);
   padding: 1px;
   margin: 1px;
   list-style: none;

assets/css/styles.css.map

@@ -1 +1 @@
-{"version":3,"sources":["styles.scss","styles.css"],"names":[],"mappings":"AAAQ,6BAAA;AACA,iCAAA;AACA,gCAAA;AACA,8BAAA;AAEA,oCAAA;AACA,gHAAA;AACR,0BAAA;AAEA;;;;;EAKE,2CAAA;EACA,8BAAA;ACDF;;ADIA;EACC,4BAAA;ACDD;;ADIA;EACC,qBAAA;EACA,UAAA;EACA,eAAA;EACA,iBAAA;ACDD;ADGC;EACC,qBAAA;EACA,UAAA;ACDF;ADIC;EACC,mBAAA;EACA,UAAA;ACFF;;ADMA;EACC,sBAAA;ACHD;;ADMA;EACE,8DAAA;EACA,mCAAA;EACA,kBAAA;EACA,SAAA;EACA,UAAA;ACHF;;ADMA;EACC,kBAAA;EACA,iCAAA;EACA,gBAAA;EACA,gBAAA;EACA,mBAAA;ACHD;;ADKA;EACC,gBAAA;EACA,qBAAA;ACFD;;ADKA;EACE,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,YAAA;EACA,WAAA;EACA,kBAAA;EACA,eAAA;EACA,kBAAA;ACFF;;ADKA;;EAEC,qBAAA;EACA,wBAAA;EAEA,gBAAA;EAIA,qEAAA;EACA,6BAAA;EACA,oBAAA;EACA,SAAA;EACA,0CAAA;EACA,gCAAA;EACA,eAAA;EACA,qBAAA;EACA,iCAAA;EACA,gBAAA;EACA,gBAAA;EACA,WAAA;EACA,uBAAA;EACA,gBAAA;EACA,cAAA;EAGA,kBAAA;EACA,qBAAA;EACA,yBAAA;EACA,mBAAA;ACJD;;ADOA;EACC,gBAAA;ACJD;;ADOA;EACC,2CAAA;ACJD;;ADOA;EACC,yCAAA;ACJD;;ADOA;EAAkB,yBAAA;ACHlB;;ADKA;EACC,kBAAA;ACFD;ADIC;EACC,aAAA;EACA,sBAAA;EACA,kBAAA;EACA,aAAA;EACA,YAAA;EACA,WAAA;EACA,gBAAA;ACFF;;ADMA;EACC,mBAAA;EAEA,cAAA;EACA,kBAAA;EAEA,+BAAA;EACA,mBAAA;EACA,0CAAA;EACA,UAAA;ACLD;ADQC;EACC,cAAA;ACNF;;ADUA;EACC,eAAA;EACA,mCAAA;EACA,YAAA;EACA,YAAA;EACA,aAAA;EACA,+BAAA;EACA,mBAAA;EACA,0CAAA;EACA,iBAAA;EACA,YAAA;ACPD;;ADUA;EACC,kBAAA;ACPD;;ADUA;EACC,sBAAA;ACPD;;ADUA;EACC,WAAA;ACPD;;ADUA;EACC,aAAA;EACA,UAAA;ACPD;;ADUA;EACC,qBAAA;ACPD;;ADUA,sBAAA;AACA;EACC,kBAAA;ACPD;;ADWA;EACC,mCAAA;EACA,kBAAA;ACRD;ADUC;EACC,gCAAA;EACA,kBAAA;ACRF;;ADYA,kBAAA;AACA,2CAAA;AACA;EACE,kBAAA;EACA,qBAAA;EACA,WAAA;EACA,YAAA;ACTF;;ADYA,+BAAA;AACA;EACE,UAAA;EACA,QAAA;EACA,SAAA;ACTF;;ADYA,eAAA;AACA;EACE,kBAAA;EACA,eAAA;EACA,MAAA;EACA,OAAA;EACA,QAAA;EACA,SAAA;EACA,sBAAA;EAEA,gBAAA;ACTF;;ADYA;EACE,kBAAA;EACA,WAAA;EACA,YAAA;EACA,WAAA;EACA,SAAA;EACA,WAAA;EACA,uBAAA;EAEA,gBAAA;ACTF;;ADYA;EACE,gCAAA;ACTF;;ADYA;EACE,kCAAA;ACTF;;ADYA;EAGE,2BAAA;ACTF;;ADYA,oBAAA;AACA;EACE,mBAAA;ACTF;;ADYA;EACE,kBAAA;ACTF;;ADYA;EACC,aAAA;ACTD;;ADYA;EACE,iBAAA;ACTF;;ADYA;EACC,mBAAA;ACTD;;ADYA;EACC,kBAAA;EACA,eAAA;ACTD","file":"styles.css"}
+{"version":3,"sources":["styles.scss","styles.css"],"names":[],"mappings":"AAAQ,6BAAA;AACA,iCAAA;AACA,gCAAA;AACA,8BAAA;AAEA,oCAAA;AACA,gHAAA;AACR,0BAAA;AAEA;;;;;EAKE,2CAAA;EACA,8BAAA;ACDF;;ADIA;EACC,4BAAA;ACDD;;ADIA;EACC,qBAAA;EACA,UAAA;EACA,eAAA;EACA,iBAAA;ACDD;ADGC;EACC,qBAAA;EACA,UAAA;ACDF;ADIC;EACC,mBAAA;EACA,UAAA;ACFF;;ADMA;EACC,sBAAA;ACHD;;ADMA;EACE,8DAAA;EACA,mCAAA;EACA,kBAAA;EACA,SAAA;EACA,UAAA;ACHF;;ADMA;EACC,kBAAA;EACA,iCAAA;EACA,gBAAA;EACA,gBAAA;EACA,mBAAA;ACHD;;ADKA;EACC,gBAAA;EACA,qBAAA;ACFD;;ADKA;EACE,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,YAAA;EACA,WAAA;EACA,kBAAA;EACA,eAAA;EACA,kBAAA;ACFF;;ADKA;;EAEC,qBAAA;EACA,wBAAA;EAEA,gBAAA;EAIA,qEAAA;EACA,6BAAA;EACA,oBAAA;EACA,SAAA;EACA,0CAAA;EACA,gCAAA;EACA,eAAA;EACA,qBAAA;EACA,iCAAA;EACA,gBAAA;EACA,gBAAA;EACA,WAAA;EACA,uBAAA;EACA,gBAAA;EACA,cAAA;EAGA,kBAAA;EACA,qBAAA;EACA,yBAAA;EACA,mBAAA;ACJD;;ADOA;EACC,gBAAA;ACJD;;ADOA;EACC,2CAAA;ACJD;;ADOA;EACC,yCAAA;ACJD;;ADOA;EAAkB,yBAAA;ACHlB;;ADKA;EACC,kBAAA;ACFD;ADIC;EACC,aAAA;EACA,sBAAA;EACA,kBAAA;EACA,0BAAA;EACA,YAAA;EACA,WAAA;EACA,gBAAA;ACFF;;ADMA;EACC,mBAAA;EAEA,cAAA;EACA,kBAAA;EAEA,+BAAA;EACA,mBAAA;EACA,0CAAA;EACA,UAAA;ACLD;ADQC;EACC,cAAA;ACNF;;ADUA;EACC,eAAA;EACA,mCAAA;EACA,YAAA;EACA,YAAA;EACA,aAAA;EACA,+BAAA;EACA,mBAAA;EACA,0CAAA;EACA,iBAAA;EACA,YAAA;ACPD;;ADUA;EACC,kBAAA;ACPD;;ADUA;EACC,sBAAA;ACPD;;ADUA;EACC,WAAA;ACPD;;ADUA;EACC,aAAA;EACA,UAAA;ACPD;;ADUA;EACC,qBAAA;ACPD;;ADUA,sBAAA;AACA;EACC,kBAAA;ACPD;;ADWA;EACC,mCAAA;EACA,kBAAA;ACRD;ADUC;EACC,gCAAA;EACA,kBAAA;ACRF;;ADYA,kBAAA;AACA,2CAAA;AACA;EACE,kBAAA;EACA,qBAAA;EACA,WAAA;EACA,YAAA;ACTF;;ADYA,+BAAA;AACA;EACE,UAAA;EACA,QAAA;EACA,SAAA;ACTF;;ADYA,eAAA;AACA;EACE,kBAAA;EACA,eAAA;EACA,MAAA;EACA,OAAA;EACA,QAAA;EACA,SAAA;EACA,sBAAA;EAEA,gBAAA;ACTF;;ADYA;EACE,kBAAA;EACA,WAAA;EACA,YAAA;EACA,WAAA;EACA,SAAA;EACA,WAAA;EACA,uBAAA;EAEA,gBAAA;ACTF;;ADYA;EACE,gCAAA;ACTF;;ADYA;EACE,kCAAA;ACTF;;ADYA;EAGE,2BAAA;ACTF;;ADYA,oBAAA;AACA;EACE,mBAAA;ACTF;;ADYA;EACE,kBAAA;ACTF;;ADYA;EACC,aAAA;ACTD;;ADYA;EACE,iBAAA;ACTF;;ADYA;EACC,mBAAA;ACTD;;ADYA;EACC,kBAAA;EACA,eAAA;ACTD","file":"styles.css"}

assets/css/styles.scss

@@ -125,7 +125,7 @@ button.button i {
 		display: flex;
 		flex-direction: column;
 		align-items: start;
-		height: 100vh;
+		height: calc(100vh - 80px);
 		padding: 1px;
 		margin: 1px;
 		list-style: none;

docker/compose.mariadb.yml

@@ -1,6 +1,6 @@
 services:
   sermon-notes:
-    image: gitea.rkprather.com/ryan/sermon-notes:1.3
+    image: gitea.rkprather.com/ryan/sermon-notes:2.0
     container_name: sermon-notes
     hostname: sermon-notes
     restart: unless-stopped

docker/compose.mysql.yml

@@ -1,6 +1,6 @@
 services:
   sermon-notes:
-    image: gitea.rkprather.com/ryan/sermon-notes:1.3
+    image: gitea.rkprather.com/ryan/sermon-notes:2.0
     container_name: sermon-notes
     hostname: sermon-notes
     restart: unless-stopped

docker/compose.pgsql.yml

@@ -1,7 +1,7 @@
 services:
   sermon-notes:
     container_name: sermon-notes
-    image: gitea.rkprather.com/ryan/sermon-notes:1.3
+    image: gitea.rkprather.com/ryan/sermon-notes:2.0
     hostname: sermon-notes
     restart: unless-stopped
 

docker/compose.shared-db.yml

@@ -1,6 +1,6 @@
 services:
   sermon-notes:
-    image: gitea.rkprather.com/ryan/sermon-notes:1.3
+    image: gitea.rkprather.com/ryan/sermon-notes:2.0
     container_name: sermon-notes
     hostname: sermon-notes
     restart: unless-stopped

docker/compose.sqlite.yml

@@ -1,6 +1,6 @@
 services:
   sermon-notes:
-    image: gitea.rkprather.com/ryan/sermon-notes:1.3
+    image: gitea.rkprather.com/ryan/sermon-notes:2.0
     container_name: sermon-notes
     hostname: sermon-notes
     restart: unless-stopped

src/Controller/DefaultController.php

@@ -147,9 +147,10 @@ class DefaultController extends AbstractController
 
                 $progress = round((($step+1) / $totalClasses) * 100);
                 $nextStep = (($step + 1) < $totalClasses) ? ($step + 1) : 'summary';
+                $var = explode("\\", $classes[$step+1]);
 
                 return $this->render('default/transfer_progress.html.twig', [
-                    'current' => (isset($classes[$step+1]) ? end(explode("\\", $classes[$step+1])) : 'summary'),
+                    'current' => (isset($classes[$step+1]) ? end($var) : 'summary'),
                     'progress' => $progress,
                     'next_step' => $nextStep,
                 ]);

templates/default/home.html.twig

@@ -3,72 +3,109 @@
 {% block title %}Sermon Notes{% endblock %}
 
 {% block stylesheets %}
-<link href="{{ asset('css/main.css') }}" rel="stylesheet" />
+<link href="{{ asset('css/jquery-ui.theme.css') }}" rel="stylesheet" />
-<link href='{{ asset('css/jquery-ui.theme.css') }}' rel='stylesheet' />
+<link href="{{ asset('css/jquery-ui.structure.css') }}" rel="stylesheet" />
-<link href='{{ asset('css/jquery-ui.structure.css') }}' rel='stylesheet' />
+<link href="{{ asset('css/light-mode.css') }}" rel="stylesheet" data-css="mode" data-light="{{ asset('css/light-mode.css') }}" data-dark="{{ asset('css/dark-mode.css') }}" />
-<link href='{{ asset('styles/style.css') }}' rel='stylesheet' />
+<link href="{{ asset('css/styles.css') }}" rel="stylesheet" />
-<link href='//cdn.datatables.net/2.0.8/css/dataTables.dataTables.min.css' rel='stylesheet' />
+
+<link href="//cdn.datatables.net/2.0.8/css/dataTables.dataTables.min.css" rel="stylesheet" />
 <style>
 #notes,
 #notePreview {
     font-size: {{ meta.noteTextSize }}pt;
 }
-button.button i {
-    font-size: 1.5em;
-}
 .input-error {
-    border: solid 2px red !important;
+    /* border: solid 2px red !important; */
 }
 </style>
 {% endblock %}
 
 {% block javascripts %}
 <script src="{{ asset('js/jquery.min.js') }}"></script>
-<script src='{{ asset('js/jquery-ui.js') }}'></script>
+<script src="{{ asset('js/jquery-ui.js') }}"></script>
 <script src="{{ asset('js/browser.min.js') }}"></script>
 <script src="{{ asset('js/breakpoints.min.js') }}"></script>
 <script src="{{ asset('js/util.js') }}"></script>
-<script src="{{ asset('js/main.js') }}"></script>
+{#<script src="{{ asset('js/main.js') }}"></script>#}
-<script src='//momentjs.com/downloads/moment-with-locales.js'></script>
+<script src="//momentjs.com/downloads/moment-with-locales.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/markdown-it/13.0.2/markdown-it.min.js" integrity="sha512-ohlWmsCxOu0bph1om5eDL0jm/83eH09fvqLDhiEdiqfDeJbEvz4FSbeY0gLJSVJwQAp0laRhTXbUQG+ZUuifUQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-<script src='//cdn.datatables.net/2.0.8/js/dataTables.min.js'></script>
+<script src="//cdn.datatables.net/2.0.8/js/dataTables.min.js"></script>
-<script>
+
-let saveInterval = ({{ meta.saveInterval }} * 1000);
+{{ importmap('app') }}
-let saveTimeout = ({{ meta.saveTimeout }} * 1000);
+
-const SAVE_FAILURE_LIMIT = {{ meta.saveFailureCount }};
+<script type="module">
-let saveFailureCount = {{ meta.saveFailureCount }};
+    import * as ref from "{{ asset('js/reference.js') }}";
+    import * as home from "{{ asset('js/home.js') }}";
+    import * as note from "{{ asset('js/note.js') }}";
+    import { state } from "{{ asset('js/state.js') }}";
+    import * as series from "{{ asset('js/series.js') }}";
+    import * as speaker from "{{ asset('js/speaker.js') }}";
+    import * as template from "{{ asset('js/template.js') }}";
+    window.ref = ref;
+    window.home = home;
+    window.note = note;
+    window.state = state;
+    window.series = series;
+    window.speaker = speaker;
+    window.template = template;
+
+    document.addEventListener('DOMContentLoaded', () => {
+        home.initHome();
+
+        const sidebarToggle = document.getElementById('sidebar-link');
+        const container = document.querySelector('.container');
+
+        if (sidebarToggle && container) {
+            sidebarToggle.addEventListener('click', (e) => {
+                e.preventDefault();
+                container.classList.toggle('sidebar-collapsed');
+            })
+        }
+
+        state.saveInterval = ({{ meta.saveInterval }} * 1000);
+        state.saveTimeout = ({{ meta.saveTimeout }} * 1000);
+        state.saveFailureCount = {{ meta.saveFailureCount }};
+    });
 </script>
-<script type='module'>
-    var body;
-    import {initHome, setBooks, setHeight, setEventListeners} from "{{ asset('js/site.js') }}";
-    document.onload = initHome();
-    window.setHeight = setHeight;
-    import {retrieveTemplate, saveTemplate} from "{{ asset('js/template.js') }}";
-    window.retrieveTemplate = retrieveTemplate;
-    window.saveTemplate = saveTemplate;
-</script>
-<script src='{{ asset('js/script.js') }}'></script>
 {% endblock %}
 
 {% block body %}
-<div id='wrapper'>
+<div id="query"></div>
-    <div id='main'>
+<div class="container sidebar-collapsed">
-        <div class='inner'>
+    {% include('default/sidebar.html.twig') %}
-            <section class='ref-tab'>
-                <ul id='ref-list'>
-                </ul>
-            </section>
 
-            <section class='ref'>
+	<div class="ref-btn-header">&nbsp;</div>
-                <h2>Reference</h2>
+	<div class="ref-btn bottom-row">
-                <div style='display:inline-block'>
+		<ul id="ref-list" class="ref-list"></ul>
-                    <button onclick='increaseFont()'><i class='fa fa-plus'></i></button>&nbsp;
-                    <button onclick='decreaseFont()'><i class='fa fa-minus'></i></button>&nbsp;
-                    <button id='openRefBtn' class='button' onclick='openRef(false)'><i class='fa fa-book'></i></button>
 	</div>
-                <div id="ref" style='font-size:{{ meta.noteTextSize }}pt;'></div>
+	<div class="mobile-note-header">
-                <div id='note-list'>
+		<h2>Notes</h2>
-                    <table id='note-table' data-order='[[ 3, "desc" ]]'>
+		<label class="switch">
+			<input type="checkbox" id="mobile-dark-mode-checkbox"/>
+			<span class="slider round"></span>
+		</label>
+		<button id="mobile-open-ref" class="button">
+            <i class="fa fa-book"></i>
+        </button>
+		<button id="mobile-show-hide-btn" class="button">
+            <i class="fa fa-table"></i>
+        </button>
+	</div>
+	<div class="ref-header">
+		<label class="switch">
+			<input type="checkbox" id="dark-mode-checkbox"/>
+			<span class="slider round"></span>
+		</label>
+		<h2>Reference</h2>
+		<div class="ref-header-buttons">
+			<button id="increaseFont"><i class="fa fa-plus"></i></button>
+			<button id="decreaseFont"><i class="fa fa-minus"></i></button>
+			<button id="open-ref" class="button"><i class="fa fa-book"></i></button>
+		</div>
+	</div>
+	<div id="ref-text" class="ref-text bottom-row" style="font-size:{{ meta.noteTextSize }}pt;"></div>
+    <div id="note-list">
+        <table id="note-table" data-order='[[ 3, "desc" ]]'>
             <thead>
                 <tr>
                     <th>Title</th>
@@ -79,115 +116,110 @@ let saveFailureCount = {{ meta.saveFailureCount }};
             </thead>
         </table>
     </div>
-            </section>
 
-            <section class="notes">
+	<div class="note-header">
-                <div id='note-header-left'>
+		<div class="note-header-column">
-                    <h2>Notes</h2>
+			<button id="previewBtn" class="button">
-                    <i id='save-check' class='fa fa-save'></i>
+				<i class="fa fa-eye"></i>
+			</button>
+			<button id="show-hide-btn" class="button">
+				<i class="fa fa-table"></i>
+			</button>
+			<button id="shareBtn" class="button">
+				<i class="fas fa-share-alt"></i>
+			</button>
 		</div>
-                <div id='note-header-right'>
+		<div class="note-header-column">
-                    <select id='template' onchange="retrieveTemplate('template','notes')" style='width:200px;'>
+			<h2>Notes</h2>
-                        <option value=0>-- Template --</option>
+			<i id="save-check" class="fa fa-save"></i>
+		</div>
+		<div class="note-header-column">
+			<div class="dropdown" id="templateDropdown">
+				<select id="template" onchange="template.retrieveTemplate('template', 'notes')" >
+					<option value="0">-- Template --</option>
                     {% for t in app.user.templates %}
                         <option value="{{ t.id }}">{{ t.name }}</option>
                     {% endfor %}
-                    </select>&nbsp;
+				</select>
-                    <button id="previewBtn" class='button' onclick='previewNote()'>
-                        <i class='fa fa-eye'></i>
-                    </button>&nbsp;
-                    <button id='show-hide-btn' class='button' onclick='toggleFields()'>
-                        <i class='fa fa-table'></i>
-                    </button>&nbsp;
-                    <button id='shareBtn' class='button'>
-                        <i class='fas fa-share-alt'></i>
-                    </button>
 			</div>
-
+		</div>
-                <div id='fields-container'>
+	</div>
-                    <input type="hidden" id="noteId" value="" />
+	<div class="notes bottom-row">
-                    <input type="text" id="noteTitle" placeholder="Title..." />
+		<div class="fields-container">
-                    <input type='text' id='noteDate' placeholder='Date...' onchange='textDirty=true;saved=false;' />
+			<input type="hidden" id="noteId" value="">
-                    <input type='text' id='passage' placeholder='Passage...' onchange='saved=false;textDirty=true;' />
+			<input type="text" id="noteTitle" placeholder="Title..." onkeyup="state.textDirty=true;state.saved=false;">
-                    <br />
+			<input type="text" id="noteDate" placeholder="Date..." onchange="state.textDirty=true;state.saved=false;">
-                    <input type='text' id='recording' name='recording' placeholder='Recording link...' />
+			<input type="text" id="passage" placeholder="Passage..." onchange="state.textDirty=true;state.saved=false;">
-                    <input type='text' id='newSpeaker' placeholder='Name...' onkeyup='saveSpeaker(event)' style='display:none;' />
+			<input type="text" id="recording" placeholder="Recording link...">
-                    <select id="speaker" onchange='newSpeaker()'>
+			<input type="text" id="newSpeaker" placeholder="Name..." onkeyup="speaker.saveSpeaker(event)" style="display:none;">
-                        <option value=0>-- Speaker --</option>
+			<div class="dropdown" id="speakerDropdown">
-                        <option value='new'>New Speaker</option>
+				<select id="speaker" onchange="speaker.newSpeaker()">
+					<option value="0">-- Speaker --</option>
+					<option value="new">New Speaker</option>
                     {% for s in speakers %}
-                        <option value='{{ s.id }}'>{{ s.name }}</option>
+                        <option value="{{ s.id }}">{{ s.name }}</option>
                     {% endfor %}
 				</select>
-                    <input type='text' id='newSeries' placeholder='Series...' onkeyup='saveSeries(event)' style='display:none;' />
+			</div>
-                    <select id="series" onchange='newSeries()'>
+			<input type="text" id="newSeries" placeholder="Series..." onkeyup="series.saveSeries(event)" style="display:none;">
-                        <option value=0>-- Series --</option>
+			<div class="dropdown" id="seriesDropdown">
-                        <option value='new'>New Series</option>
+				<select id="series" onchange="series.newSeries()">
+					<option value="0">-- Series --</option>
+					<option value="new">New Series</option>
                     {% for s in series %}
-                        <option value='{{ s.id }}'>{{ s.name }}</option>
+                        <option value="{{ s.id }}">{{ s.name }}</option>
                     {% endfor %}
 				</select>
 			</div>
-
-                <textarea id="notes" wrap="hard" style='font-size:{{ meta.noteTextSize }}pt'></textarea>
-                <div id='notePreview'></div>
-            </section>
 		</div>
+		<div class="note-text">
+			<textarea id="notes" wrap="hard" style="font-size: {{ meta.noteTextSize }}pt"></textarea>
+		</div>
+        <div id="notePreview"></div>
 	</div>
-
-    {% include('default/sidebar.html.twig') %}
-
 </div>
 
 <div id="refQuery">
-    <select id='referenceType' onchange='retrieveBooks()'>
+    <select id="referenceType" onchange="ref.retrieveBooks()">
         <option>-- Select --</option>
-        <option value='bible'>Bible</option>
+        <option value="bible">Bible</option>
-        <option value='creed'>Various Creed</option>
+        <option value="creed">Various Creed</option>
-        <option value='bc'>Belgic Confession</option>
+        <option value="bc">Belgic Confession</option>
-        <option value='hc'>Heidelberg Catechism</option>
+        <option value="hc">Heidelberg Catechism</option>
-        <option value='cd'>Canons of Dort</option>
+        <option value="cd">Canons of Dort</option>
-        <option value='wcf'>Westminster Confession of Faith</option>
+        <option value="wcf">Westminster Confession of Faith</option>
-        <option value='wsc'>Westminster Shorter Catechism</option>
+        <option value="wsc">Westminster Shorter Catechism</option>
-        <option value='wlc'>Westminster Larger Catechism</option>
+        <option value="wlc">Westminster Larger Catechism</option>
-        <option value='lbc'>London Baptist Confession</option>
+        <option value="lbc">London Baptist Confession</option>
-        <option value='39a'>Thirty-Nine Articles</option>
+        <option value="39a">Thirty-Nine Articles</option>
-        <option value='1hc'>First Helvetic Confession</option>
+        <option value="1hc">First Helvetic Confession</option>
-        <option value='2hc'>Second Helvetic Confession</option>
+        <option value="2hc">Second Helvetic Confession</option>
-        <option value='sd'>Savoy Declaration</option>
+        <option value="sd">Savoy Declaration</option>
-        <option value='agc'>Augsburg Confession</option>
+        <option value="agc">Augsburg Confession</option>
     </select>
-    <select id='referenceBook' onchange='filterBooks()'>
+    <select id="referenceBook" onchange="ref.filterBooks()" style="display:none;"></select>
-    </select>
+    <span id="chapter-range"></span>
-    <span id='chapter-range' style='color:white;'></span>
+    <input type="text" id="referenceSearch" placeholder="Search" onkeyup="ref.filterVerse()" style="display:none;">
-    <input type="text" id="referenceSearch" placeholder="Search" onkeyup='filterVerse()'>
+    <span id="verse-range"></span>
-    <span id='verse-range' style='color:white;'></span>
     <br />
-    <button id="searchBtn" onclick="queryRef()">Search</button>&nbsp;
+    <button id="searchBtn">Search</button>&nbsp;
-    <button id='closeSearch' onclick='closeRef()'>Close</button>
+    <button id="closeSearch">Close</button>
 </div>
 
-<div id='passage-popup'>
+<div id="passage-popup"></div>
-</div>
 
-<!-- The modal background -->
+<div id="modal-backdrop" class="modal-backdrop fade in" style="display:none;"></div>
-<div id='modal-backdrop' class="modal-backdrop fade in" style='display:none;'></div>
 
-<!-- The modal container -->
+<div id="modal-container" class="modal-container" style="display:none;">
-<div id='modal-container' class="modal-container" style='display:none;'>
-  <!-- The modal header -->
   <header class="modal-header">Share Note</header>
-
-  <!-- The modal body -->
   <form id="emailForm" class="modal-body">
     <label for="shareEmail">Enter Friends Email:</label>
-    <input type="email" id="shareEmail" name="email" autocomplete=false required />
+    <input type="email" id="shareEmail" name="email" required />
-    <button type='button' id="submit" class="btn btn-primary" onclick='shareNote()'>Submit</button>
+    <button type="button" id="submit" class="btn btn-primary" onclick="note.shareNote()">Submit</button>
   </form>
-
-  <!-- The modal footer -->
   <footer class="modal-footer">
-    <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick='closeShareNote()'>Close</button>
+    <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="note.closeShareNote()">Close</button>
   </footer>
 </div>
+
 {% endblock %}

templates/default/new-home.html.twig

@@ -1,216 +0,0 @@
-{% extends 'base.html.twig' %}
-
-{% block title %}Sermon Notes{% endblock %}
-
-{% block stylesheets %}
-<link href="{{ asset('css/jquery-ui.theme.css') }}" rel="stylesheet" />
-<link href="{{ asset('css/jquery-ui.structure.css') }}" rel="stylesheet" />
-<link href="{{ asset('css/light-mode.css') }}" rel="stylesheet" data-css="mode" data-light="{{ asset('css/light-mode.css') }}" data-dark="{{ asset('css/dark-mode.css') }}" />
-<link href="{{ asset('css/styles.css') }}" rel="stylesheet" />
-
-<link href="//cdn.datatables.net/2.0.8/css/dataTables.dataTables.min.css" rel="stylesheet" />
-<style>
-#notes,
-#notePreview {
-    font-size: {{ meta.noteTextSize }}pt;
-}
-.input-error {
-    /* border: solid 2px red !important; */
-}
-</style>
-{% endblock %}
-
-{% block javascripts %}
-<script src="{{ asset('js/jquery.min.js') }}"></script>
-<script src="{{ asset('js/jquery-ui.js') }}"></script>
-<script src="{{ asset('js/browser.min.js') }}"></script>
-<script src="{{ asset('js/breakpoints.min.js') }}"></script>
-<script src="{{ asset('js/util.js') }}"></script>
-{#<script src="{{ asset('js/main.js') }}"></script>#}
-<script src="//momentjs.com/downloads/moment-with-locales.js"></script>
-<script src="//cdnjs.cloudflare.com/ajax/libs/markdown-it/13.0.2/markdown-it.min.js" integrity="sha512-ohlWmsCxOu0bph1om5eDL0jm/83eH09fvqLDhiEdiqfDeJbEvz4FSbeY0gLJSVJwQAp0laRhTXbUQG+ZUuifUQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-<script src="//cdn.datatables.net/2.0.8/js/dataTables.min.js"></script>
-
-{{ importmap('app') }}
-
-<script type="module">
-    import * as ref from "{{ asset('js/reference.js') }}";
-    import * as home from "{{ asset('js/home.js') }}";
-    import * as note from "{{ asset('js/note.js') }}";
-    import { state } from "{{ asset('js/state.js') }}";
-    import * as series from "{{ asset('js/series.js') }}";
-    import * as speaker from "{{ asset('js/speaker.js') }}";
-    import * as template from "{{ asset('js/template.js') }}";
-    window.ref = ref;
-    window.home = home;
-    window.note = note;
-    window.state = state;
-    window.series = series;
-    window.speaker = speaker;
-    window.template = template;
-
-    document.addEventListener('DOMContentLoaded', () => {
-        home.initHome();
-
-        state.saveInterval = ({{ meta.saveInterval }} * 1000);
-        state.saveTimeout = ({{ meta.saveTimeout }} * 1000);
-        const SAVE_FAILURE_LIMIT = {{ meta.saveFailureCount }};
-        state.saveFailureCount = {{ meta.saveFailureCount }};
-    });
-</script>
-{% endblock %}
-
-{% block body %}
-{% include('default/sidebar.html.twig') %}
-
-<div id="query"></div>
-<div class="container">
-	<div class="ref-btn-header">&nbsp;</div>
-	<div class="ref-btn bottom-row">
-		<ul id="ref-list" class="ref-list"></ul>
-	</div>
-	<div class="mobile-note-header">
-		<h2>Notes</h2>
-		<label class="switch">
-			<input type="checkbox" id="mobile-dark-mode-checkbox"/>
-			<span class="slider round"></span>
-		</label>
-		<button id="mobile-open-ref" class="button">
-            <i class="fa fa-book"></i>
-        </button>
-		<button id="mobile-show-hide-btn" class="button">
-            <i class="fa fa-table"></i>
-        </button>
-	</div>
-	<div class="ref-header">
-		<h2>Reference</h2>
-		<label class="switch">
-			<input type="checkbox" id="dark-mode-checkbox"/>
-			<span class="slider round"></span>
-		</label>
-		<div class="ref-header-buttons">
-			<button id="increaseFont"><i class="fa fa-plus"></i></button>
-			<button id="decreaseFont"><i class="fa fa-minus"></i></button>
-			<button id="open-ref" class="button"><i class="fa fa-book"></i></button>
-		</div>
-	</div>
-	<div id="ref-text" class="ref-text bottom-row" style="font-size:{{ meta.noteTextSize }}pt;"></div>
-    <div id="note-list">
-        <table id="note-table" data-order='[[ 3, "desc" ]]'>
-            <thead>
-                <tr>
-                    <th>Title</th>
-                    <th>Speaker</th>
-                    <th>Passage</th>
-                    <th>Date</th>
-                </tr>
-            </thead>
-        </table>
-    </div>
-
-	<div class="note-header">
-		<div class="note-header-column">
-			<h2>Notes</h2>
-			<i id="save-check" class="fa fa-save"></i>
-		</div>
-		<div class="note-header-column">
-			<button id="previewBtn" class="button">
-				<i class="fa fa-eye"></i>
-			</button>
-			<button id="show-hide-btn" class="button">
-				<i class="fa fa-table"></i>
-			</button>
-			<button id="shareBtn" class="button">
-				<i class="fas fa-share-alt"></i>
-			</button>
-		</div>
-		<div class="note-header-column">
-			<div class="dropdown" id="templateDropdown">
-				<select id="template" onchange="template.retrieveTemplate('template', 'notes')" >
-					<option value="0">-- Template --</option>
-                    {% for t in app.user.templates %}
-                        <option value="{{ t.id }}">{{ t.name }}</option>
-                    {% endfor %}
-				</select>
-			</div>
-		</div>
-	</div>
-	<div class="notes bottom-row">
-		<div class="fields-container">
-			<input type="hidden" id="noteId" value="">
-			<input type="text" id="noteTitle" placeholder="Title..." onkeyup="state.textDirty=true;state.saved=false;">
-			<input type="text" id="noteDate" placeholder="Date..." onchange="state.textDirty=true;state.saved=false;">
-			<input type="text" id="passage" placeholder="Passage..." onchange="state.textDirty=true;state.saved=false;">
-			<input type="text" id="recording" placeholder="Recording link...">
-			<input type="text" id="newSpeaker" placeholder="Name..." onkeyup="speaker.saveSpeaker(event)" style="display:none;">
-			<div class="dropdown" id="speakerDropdown">
-				<select id="speaker" onchange="speaker.newSpeaker()">
-					<option value="0">-- Speaker --</option>
-					<option value="new">New Speaker</option>
-                    {% for s in speakers %}
-                        <option value="{{ s.id }}">{{ s.name }}</option>
-                    {% endfor %}
-				</select>
-			</div>
-			<input type="text" id="newSeries" placeholder="Series..." onkeyup="series.saveSeries(event)" style="display:none;">
-			<div class="dropdown" id="seriesDropdown">
-				<select id="series" onchange="series.newSeries()">
-					<option value="0">-- Series --</option>
-					<option value="new">New Series</option>
-                    {% for s in series %}
-                        <option value="{{ s.id }}">{{ s.name }}</option>
-                    {% endfor %}
-				</select>
-			</div>
-		</div>
-		<div class="note-text">
-			<textarea id="notes" wrap="hard" style="font-size: {{ meta.noteTextSize }}pt"></textarea>
-		</div>
-        <div id="notePreview"></div>
-	</div>
-</div>
-
-<div id="refQuery">
-    <select id="referenceType" onchange="ref.retrieveBooks()">
-        <option>-- Select --</option>
-        <option value="bible">Bible</option>
-        <option value="creed">Various Creed</option>
-        <option value="bc">Belgic Confession</option>
-        <option value="hc">Heidelberg Catechism</option>
-        <option value="cd">Canons of Dort</option>
-        <option value="wcf">Westminster Confession of Faith</option>
-        <option value="wsc">Westminster Shorter Catechism</option>
-        <option value="wlc">Westminster Larger Catechism</option>
-        <option value="lbc">London Baptist Confession</option>
-        <option value="39a">Thirty-Nine Articles</option>
-        <option value="1hc">First Helvetic Confession</option>
-        <option value="2hc">Second Helvetic Confession</option>
-        <option value="sd">Savoy Declaration</option>
-        <option value="agc">Augsburg Confession</option>
-    </select>
-    <select id="referenceBook" onchange="ref.filterBooks()" style="display:none;"></select>
-    <span id="chapter-range"></span>
-    <input type="text" id="referenceSearch" placeholder="Search" onkeyup="ref.filterVerse()" style="display:none;">
-    <span id="verse-range"></span>
-    <br />
-    <button id="searchBtn">Search</button>&nbsp;
-    <button id="closeSearch">Close</button>
-</div>
-
-<div id="passage-popup"></div>
-
-<div id="modal-backdrop" class="modal-backdrop fade in" style="display:none;"></div>
-
-<div id="modal-container" class="modal-container" style="display:none;">
-  <header class="modal-header">Share Note</header>
-  <form id="emailForm" class="modal-body">
-    <label for="shareEmail">Enter Friends Email:</label>
-    <input type="email" id="shareEmail" name="email" required />
-    <button type="button" id="submit" class="btn btn-primary" onclick="note.shareNote()">Submit</button>
-  </form>
-  <footer class="modal-footer">
-    <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="note.closeShareNote()">Close</button>
-  </footer>
-</div>
-
-{% endblock %}

templates/editors/reference-editor.html.twig

@@ -3,7 +3,7 @@
     <head>
         <title>Reference Editor</title>
         <script type='module'>
-            import {setHeight, setBooks, setEventListeners} from "{{ asset('js/site.js') }}";
+            import {setHeight, setBooks, setEventListeners} from "{{ asset('js/home.js') }}";
             import {retrieveReference, retrieveReferenceType, saveReference} from '{{ asset("js/reference.js") }}';
             window.retrieveReference = retrieveReference;
             window.retrieveReferenceType = retrieveReferenceType;