-
+
diff --git a/scripts/main.js b/scripts/main.js
index 5d2f0ce..1a8817d 100644
--- a/scripts/main.js
+++ b/scripts/main.js
@@ -116,7 +116,6 @@ function parse(el, type, text) {
for (var verse of t.split("\n")) {
++u;
if (!first) { // First verse is the container
- console.log(u, originalLen);
if (u <= originalLen) {
t = t.replace(verse, '
' + verse + "");
} else {
@@ -186,7 +185,7 @@ var prev = document.getElementById("prev");
var prevIcon = document.getElementById("prev-icon");
var prevLabel = document.getElementById("prev-label");
var title = document.getElementById("title");
-var pages = document.getElementById("main").children;
+var pages = document.getElementById("content").children;
var tabs = document.getElementById("nav").children;
function previous(action, label, hide = "") {
switch (hide) {
@@ -233,12 +232,6 @@ function slide(page, tab, data = undefined, load = true) {
}
}
switch (page) {
- case "search":
- console.log("SEARCH WIP");
- previous(function () { console.log("CANCEL SEARCH IGNORED") }, "Cancel", "icon");
- document.title = "Search | Sprym";
- title.textContent = "Search";
- break;
case "home":
previous(function () {}, "", "button");
document.title = "Sprym";
@@ -395,7 +388,6 @@ function bookCatalog() { // Get parts
var label = document.createElement("p");
label.textContent = part.name;
(function () {
- var b = book;
var p = part;
if (p.type == "skip") {
if (p.id == "stp") {
@@ -585,3 +577,21 @@ function note(link) {
// readLines("/eng/scriptures/nt.spr/matt/2.sch", [2, 3, 6, 18, 20, 21, 22], function (selection) {
// console.log(selection);
// });
+
+function menu(target) {
+ var el = document.getElementById(target);
+ if (el.classList.contains("hidden")) {
+ el.classList.remove("hidden");
+ setTimeout(function () {
+ document.addEventListener("click", function () {
+ this.removeEventListener("click", arguments.callee);
+ el.classList.add("hidden");
+ });
+ }, 0);
+ } else {
+ el.classList.add("hidden");
+ }
+}
+function modal() {
+ document.body.classList.add("modal");
+}
diff --git a/stylesheets/main.css b/stylesheets/main.css
index 41549dc..2e6e4bb 100644
--- a/stylesheets/main.css
+++ b/stylesheets/main.css
@@ -115,6 +115,7 @@ summary { display: list-item }
--primary-bg: #ffffff;
--secondary-bg: #f2f2f7;
--frosted: rgba(255, 255, 255, 0.8);
+ --frosted-2: rgba(0, 0, 0, 0.075);
--overlay: rgba(0, 0, 0, 0.2);
--active: rgba(0, 0, 0, 0.08);
--inactive: rgba(0, 0, 0, 0.4);
@@ -130,6 +131,7 @@ summary { display: list-item }
--primary-bg: #1d1d1e;
--secondary-bg: #3a3a3b;
--frosted: rgba(29, 29, 30, 0.8);
+ --frosted-2: rgba(0, 0, 0, 0.15);
--overlay: rgba(0, 0, 0, 0.4);
--active: rgba(255, 255, 255, 0.08);
--inactive: rgba(255, 255, 255, 0.4);
@@ -138,6 +140,7 @@ summary { display: list-item }
}
/** General **/
body,
+#main,
main {
height: 100%;
width: 100%;
@@ -146,11 +149,22 @@ main {
body {
background-color: var(--primary-bg);
color: var(--text);
- position: absolute;
+ position: fixed;
+ top: 0;
font-family: Lexend, "Helvetica Neue", Helvetica, sans-serif;
font-weight: 300;
line-height: 1.5;
- top: 0;
+}
+#main {
+ background-color: var(--primary-bg);
+ transition: filter 0.25s;
+}
+body.modal #main {
+ filter: brightness(88%);
+ transition: filter 0.35s;
+}
+#modal {
+ padding: 72px 20px 20px;
}
header,
nav {
@@ -163,18 +177,56 @@ main>* {
padding: 0 2px;
}
header {
+ border-top-left-radius: inherit;
+ border-top-right-radius: inherit;
+}
+#main header {
padding-top: max(env(safe-area-inset-top), 2px);
}
-header::after {
+#main header::after {
content: "";
background-color: var(--status);
- height: env(safe-area-inset-top, 0);
+ height: env(safe-area-inset-top);
position: fixed;
left: 0;
top: 0;
right: 0;
z-index: 999;
}
+#toolbar {
+ border-radius: 15px;
+ box-shadow: 10px 10px 20px 0 rgba(0, 0, 0, 0.04), -10px 0 20px 0 rgba(0, 0, 0, 0.04);
+ overflow: hidden;
+ position: absolute;
+ top: calc(100% + 6px);
+ right: calc(env(safe-area-inset-right) + 12px);
+ transform-origin: top right;
+ transition: opacity 0.25s, transform 0.3s cubic-bezier(0.25, 1.25, 0.5, 1); /* (0.25, 0.1, 0.25, 1.3) */
+}
+#toolbar.hidden {
+ opacity: 0;
+ transform: scale(0);
+ transition: opacity 0.2s, transform 0.25s ease;
+}
+#toolbar button {
+ border-radius: 0;
+ color: var(--text);
+ display: flex;
+ justify-content: space-between;
+ margin: 0;
+ padding: 10px 16px;
+ width: 250px;
+}
+#toolbar li:not(:first-child, hr+li) {
+ border-top: 1px solid var(--border);
+}
+#toolbar .gs {
+ color: inherit;
+}
+#toolbar hr {
+ border: 5px solid var(--frosted-2);
+ margin: 0;
+}
nav {
padding-bottom: max(env(safe-area-inset-bottom), 2px);
}
@@ -212,12 +264,16 @@ h6 {
small {
font-size: 0.765em;
}
-#title {
+#title,
+#modal-title {
font-size: 1rem;
font-weight: 500;
margin: 0;
white-space: nowrap;
}
+#modal header {
+ border-bottom: 1px solid var(--border);
+}
ul {
margin: 0;
}
@@ -319,8 +375,8 @@ main>*:not(#inspector)::after {
content: "";
background-color: transparent;
pointer-events: none;
- position: fixed;
- top: calc(env(safe-area-inset-top) + 52px);
+ position: absolute;
+ top: calc(max(env(safe-area-inset-top), 2px) + 50px);
right: 0;
bottom: 0;
left: 0;
@@ -360,15 +416,16 @@ main>.hidden::after {
background-color: var(--overlay) !important;
}
header,
-nav {
+nav,
+#toolbar {
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
background-color: var(--frosted);
}
header {
- position: fixed;
- left: 0;
+ position: absolute;
top: 0;
+ left: 0;
right: 0;
z-index: 99;
}
@@ -385,26 +442,42 @@ header>div {
height: 48px;
padding: 0 max(env(safe-area-inset-left), env(safe-area-inset-right), 6px);
}
-#head-left,
-#head-center,
-#head-right {
+.head-left,
+.head-center,
+.head-right {
display: flex;
align-items: center;
}
-#head-left,
-#head-right {
+.head-left,
+.head-right {
flex-grow: 1;
flex-basis: 0;
}
-#head-center {
+.head-center {
justify-content: center;
}
-#head-right {
+.head-right {
justify-content: flex-end;
}
nav {
z-index: 999;
}
+#modal {
+ background-color: var(--primary-bg);
+ border-top-left-radius: 15px;
+ border-top-right-radius: 15px;
+ position: fixed;
+ top: calc(env(safe-area-inset-top) + 30px);
+ left: env(safe-area-inset-left);
+ right: env(safe-area-inset-right);
+ bottom: 0;
+ z-index: 9999;
+ transition: top 0.35s;
+}
+#modal:not(.modal #modal) {
+ top: 100%;
+ transition: top 0.25s;
+}
/** UI Elements **/
button {
background-color: transparent;
@@ -422,6 +495,7 @@ button>span {
vertical-align: middle;
}
header button {
+ color: var(--accent);
display: flex;
justify-content: flex-start;
align-items: center;
@@ -529,7 +603,7 @@ main>*::after {
bottom: calc(env(safe-area-inset-bottom) + 52px);
}
nav {
- position: fixed;
+ position: absolute;
left: 0;
bottom: 0;
right: 0;
@@ -545,9 +619,6 @@ nav ul {
button>span:not(header button>span) {
display: none;
}
-header button>span {
- color: var(--accent);
-}
nav li {
width: 100%;
}