Remove bootstrap
This commit is contained in:
mark committed
1 parent
04ea39607d
commit
531a32e394
14 files changed
+154
-395
No files matched your search
@@ -4,11 +4,9 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{% block title %}{{ title | safe }}{% endblock %}</title>
|
||||
<link rel="stylesheet" href="css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="css/app.css">
|
||||
<meta name="htmx-config"
|
||||
content='{"historyCacheSize":0,"refreshOnHistoryMiss":false}'>
|
||||
<script src="js/bootstrap.bundle.min.js" defer></script>
|
||||
<script src="js/htmx.min.js"></script>
|
||||
<link rel="manifest" href="manifest.webmanifest">
|
||||
<meta name="theme-color" content="#1a202c">
|
||||
@@ -20,55 +18,12 @@
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<meta name="apple-mobile-web-app-title" content="Bible">
|
||||
</head>
|
||||
<body class="{% block body_class %}{% endblock %} bg-body-tertiary"
|
||||
<body class="{% block body_class %}{% endblock %}"
|
||||
hx-boost="true" hx-target="#content" hx-swap="innerHTML show:window:top">
|
||||
|
||||
<nav class="site-header navbar navbar-expand-lg bg-dark sticky-top"
|
||||
data-bs-theme="dark">
|
||||
<div class="container-xl">
|
||||
<a class="navbar-brand" href="./">Bible</a>
|
||||
{% include "reference.njk" %}
|
||||
<button class="navbar-toggler" type="button"
|
||||
data-bs-toggle="collapse" data-bs-target="#site-nav"
|
||||
aria-controls="site-nav" aria-expanded="false"
|
||||
aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="site-nav">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
{% block navbar_nav %}
|
||||
{% endblock %}
|
||||
</ul>
|
||||
{% include "bookmark.njk" %}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main class="container-xl my-4">
|
||||
<div class="row justify-content-center">
|
||||
{# A verse number is a link to itself, so the browser handles the jump and
|
||||
the address bar; this only adds the dialog on top. Enter comes free
|
||||
with the link, which is why there is no key handler here. #}
|
||||
<div id="content" class="col-12 col-xl-8" hx-history-elt
|
||||
hx-on:click="var verse = event.target.closest('.v[id]');
|
||||
if (verse) htmx.ajax('GET', 'api/verse?at=' + verse.id,
|
||||
{ target: '#verse-dialog .modal-content',
|
||||
swap: 'innerHTML' });">
|
||||
<main id="content" hx-history-elt>
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div class="modal fade" id="verse-dialog" tabindex="-1"
|
||||
aria-labelledby="verse-dialog-ref" aria-hidden="true"
|
||||
hx-on::after-swap="bootstrap.Modal.getOrCreateInstance(this).show();"
|
||||
hx-on:verse-done="bootstrap.Modal.getOrCreateInstance(this).hide();">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="toast-container position-fixed bottom-0 end-0 p-3" id="toasts"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,5 +0,0 @@
|
||||
<span class="bookmark navbar-text d-flex align-items-center gap-1" id="bookmark">
|
||||
<span class="bookmark-label">Bookmark:</span>
|
||||
<a class="bookmark-link link-light text-truncate" href="{{ mark.href }}"
|
||||
hx-boost="false">{{ mark.ref }}</a>
|
||||
</span>
|
||||
@@ -1,5 +1,3 @@
|
||||
{% extends "base.njk" %}
|
||||
{% block body_class %}browsing{% endblock %}
|
||||
{% block navbar_nav %}
|
||||
{% endblock %}
|
||||
{% block content %}{{ content | safe }}{% endblock %}
|
||||
@@ -1,28 +0,0 @@
|
||||
<div class="reference navbar-text d-flex{% if not reference %} invisible{% endif %} align-items-center gap-1 ms-3"
|
||||
id="reference"
|
||||
{%- if oob %} hx-swap-oob="true"{% endif %}
|
||||
hx-get="api/reference"
|
||||
{# htmx keeps an event only when the filter returns true exactly, so a
|
||||
string is discarded. #}
|
||||
hx-trigger="{% if reference and not settled %}load[!!location.hash], {% endif %}htmx:historyRestore from:body"
|
||||
hx-target="this" hx-swap="outerHTML">
|
||||
<span class="reference-book text-light fw-semibold"
|
||||
id="reference-book">{{ reference.book }}</span>
|
||||
<label class="visually-hidden" for="reference-chapter">Chapter</label>
|
||||
<select class="reference-chapter form-select form-select-sm"
|
||||
id="reference-chapter" name="at"
|
||||
hx-get="api/reference" hx-target="#reference-verse"
|
||||
hx-swap="innerHTML">
|
||||
{%- for chapter in reference.chapters %}
|
||||
<option value="{{ chapter.id }}"
|
||||
{%- if chapter.id == reference.chapter %} selected{% endif %}>{{ chapter.label }}</option>
|
||||
{%- endfor %}
|
||||
</select>
|
||||
<span class="reference-sep text-light">:</span>
|
||||
<label class="visually-hidden" for="reference-verse">Verse</label>
|
||||
<select class="reference-verse form-select form-select-sm"
|
||||
id="reference-verse" name="at"
|
||||
hx-get="api/reference" hx-target="this" hx-swap="innerHTML">
|
||||
{% include "verses.njk" %}
|
||||
</select>
|
||||
</div>
|
||||
@@ -1,13 +0,0 @@
|
||||
{% if oob %}<div hx-swap-oob="beforeend:#toasts">{% endif %}
|
||||
<div class="toast align-items-center{% if bad %} text-bg-danger{% endif %}"
|
||||
role="alert" aria-live="assertive" aria-atomic="true"
|
||||
hx-on::load="bootstrap.Toast.getOrCreateInstance(this).show();"
|
||||
hx-on:hidden.bs.toast="this.remove();">
|
||||
<div class="d-flex">
|
||||
<div class="toast-body">{{ text }}</div>
|
||||
<button type="button"
|
||||
class="btn-close{% if bad %} btn-close-white{% endif %} me-2 m-auto"
|
||||
data-bs-dismiss="toast" aria-label="Close"></button>
|
||||
</div>
|
||||
</div>
|
||||
{% if oob %}</div>{% endif %}
|
||||
@@ -1,46 +0,0 @@
|
||||
<div class="modal-header">
|
||||
<h2 class="modal-title fs-5 verse-dialog-ref" id="verse-dialog-ref">{{ verse.ref }}</h2>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<label class="visually-hidden" for="verse-dialog-url">Link to {{ verse.ref }}</label>
|
||||
<input class="verse-dialog-url form-control form-control-sm" id="verse-dialog-url"
|
||||
type="text" readonly value="{{ verse.url }}">
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<form class="verse-dialog-actions d-flex flex-wrap gap-2 m-0"
|
||||
hx-post="api/bookmark" hx-target="#bookmark" hx-swap="outerHTML">
|
||||
<input type="hidden" name="ref" value="{{ verse.ref }}">
|
||||
<input type="hidden" name="href" value="{{ verse.href }}">
|
||||
<button class="btn btn-outline-secondary" type="button"
|
||||
hx-on:click="var button = this;
|
||||
var field = document.getElementById('verse-dialog-url');
|
||||
var toast = function (say) {
|
||||
htmx.ajax('GET', 'api/toast?say=' + say,
|
||||
{ target: '#toasts', swap: 'beforeend' });
|
||||
};
|
||||
var copied = function () {
|
||||
toast('copied');
|
||||
button.dispatchEvent(
|
||||
new CustomEvent('verse-done', { bubbles: true }));
|
||||
};
|
||||
var select = function () {
|
||||
field.focus();
|
||||
field.select();
|
||||
};
|
||||
var refused = function () {
|
||||
select();
|
||||
toast('copy-refused');
|
||||
};
|
||||
if (navigator.clipboard) {
|
||||
navigator.clipboard.writeText(field.value)
|
||||
.then(copied, refused);
|
||||
} else {
|
||||
select();
|
||||
if (document.execCommand('copy')) copied();
|
||||
else toast('copy-refused');
|
||||
}">Copy link</button>
|
||||
<button class="btn btn-primary" type="submit">Set bookmark</button>
|
||||
</form>
|
||||
</div>
|
||||
@@ -1,4 +0,0 @@
|
||||
{% for verse in reference.verses -%}
|
||||
<option value="{{ verse.id }}"
|
||||
{%- if verse.id == reference.verse %} selected{% endif %}>{{ verse.label }}</option>
|
||||
{% endfor -%}
|
||||
@@ -1,5 +1,3 @@
|
||||
<div class="app-version text-center mt-5 mb-2">
|
||||
<p class="app-version-digests form-text m-0">
|
||||
shell {{ version.shell }} · library {{ version.library }}
|
||||
</p>
|
||||
<div class="app-version">
|
||||
<p>shell {{ version.shell }} · library {{ version.library }}</p>
|
||||
</div>
|
||||
Reference in new issue
Block a user