joshlaymon/Illustrations
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update web/templates/entry_view.html

Browse Source
This commit is contained in:
Joshua Laymon 2025-08-15 22:30:44 +00:00
parent b2b7aa6231
commit 88be4a8b4a
1 changed files with 118 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

179
web/templates/entry_view.html
View File

@ -3,56 +3,85 @@
{% block body_class %}themed-bg{% endblock %} {% block body_class %}themed-bg{% endblock %}
{% block content %} {% block content %}
<div class="container"> <div class="result-wrap">
<!-- Toolbar -->
<!-- Top bar: back + counter + Prev/Next -->
<div class="result-toolbar"> <div class="result-toolbar">
<div class="rt-left"> <div class="rt-left">
<a class="btn btn-secondary" href="{% url 'search' %}">← Back to Results</a> <a class="btn btn-secondary" href="{% url 'search' %}">← Back to Search</a>
<span class="rt-count">#{{ entry.id }}</span> {% if count %}
<span class="rt-count">{{ position }} of {{ count }}</span>
{% endif %}
</div> </div>
<div class="rt-right"> <div class="rt-right">
<a class="btn btn-primary" href="{% url 'entry_view' entry.next_id %}">Next</a> <!-- Prev -->
<form method="get" action="{% url 'nav_prev' %}" class="inline">
<input type="hidden" name="i" value="{{ position|add:'-1' }}">
<button class="btn btn-lg" {% if position <= 1 %}disabled{% endif %}>‹ Prev</button>
</form>
<!-- Share button --> <!-- Next -->
<button id="share-btn" class="btn btn-primary" style="margin-left:6px;"> <form method="get" action="{% url 'nav_next' %}" class="inline">
<span style="display:flex;align-items:center;gap:4px;"> <input type="hidden" name="i" value="{{ position|add:'-1' }}">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <button class="btn btn-lg btn-primary" {% if position >= count %}disabled{% endif %}>Next ›</button>
<path d="M13.5 1a1.5 1.5 0 0 1 1.5 1.5v3a.5.5 0 0 1-1 0V2.707l-6.146 6.147a.5.5 0 0 1-.708-.708L13.293 2H11.5a.5.5 0 0 1 0-1h3z"/> </form>
<path d="M3.5 5a1.5 1.5 0 0 0-1.5 1.5v7A1.5 1.5 0 0 0 3.5 15h7a1.5 1.5 0 0 0 1.5-1.5V9a.5.5 0 0 1 1 0v4.5A2.5 2.5 0 0 1 10.5 16h-7A2.5 2.5 0 0 1 1 13.5v-7A2.5 2.5 0 0 1 3.5 4H8a.5.5 0 0 1 0 1H3.5z"/>
<!-- Share -->
<button id="share-btn" class="btn btn-lg btn-primary" type="button" style="margin-left:6px;">
<span style="display:flex;align-items:center;gap:6px;">
<!-- iOS-style share icon (SVG) -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
viewBox="0 0 16 16" aria-hidden="true" focusable="false">
<path d="M8 1a.5.5 0 0 1 .5.5V9a.5.5 0 0 1-1 0V1.5A.5.5 0 0 1 8 1z"/>
<path d="M5.646 3.646a.5.5 0 0 1 .708 0L8 5.293l1.646-1.647a.5.5 0 0 1 .708.708L8.354 6.354a.5.5 0 0 1-.708 0L5.646 4.354a.5.5 0 0 1 0-.708z"/>
<path d="M4.5 6A1.5 1.5 0 0 0 3 7.5v5A1.5 1.5 0 0 0 4.5 14h7A1.5 1.5 0 0 0 13 12.5v-5A1.5 1.5 0 0 0 11.5 6H10a.5.5 0 0 0 0 1h1.5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-5a.5.5 0 0 1 .5-.5H6a.5.5 0 0 0 0-1H4.5z"/>
</svg> </svg>
Share Share
</span> </span>
</button> </button>
<a class="btn btn-secondary" href="{% url 'entry_edit' entry.id %}">Edit</a> {% if user.is_authenticated and user.is_staff %}
<a class="btn btn-outline" href="{% url 'entry_edit' entry.id %}">Edit</a>
{% endif %}
</div> </div>
</div> </div>
<!-- Card --> <!-- Main card -->
<div class="card entry-view"> <div class="result-card">
<div class="entry-section"> <!-- SUBJECT pills (WOL-linked) -->
<div class="entry-label">Subject</div> <div class="subject-pills">
<div class="entry-value">{{ entry.subject|default:"—" }}</div> {% if subject_list %}
{% for s in subject_list %}
<a
class="chip chip-subject"
href="https://wol.jw.org/en/wol/s/r1/lp-e?q={{ s }}"
target="_blank" rel="noopener noreferrer"
title="Search WOL for {{ s }}"
>{{ s }}</a>
{% endfor %}
{% else %}
<span class="chip chip-muted">(no subject)</span>
{% endif %}
</div> </div>
<div class="entry-section"> <!-- ILLUSTRATION -->
<div class="entry-label">Illustration</div> <div class="section">
<div class="entry-value" id="illustration-text">{{ entry.illustration|linebreaksbr|default:"—" }}</div> <div class="section-label">Illustration</div>
</div> <div class="section-body lead-text" id="illustration-text">
{{ entry.illustration|linebreaksbr|default:"—" }}
<div class="entry-section">
<div class="entry-label">Application</div>
<div class="entry-value" id="application-text">{{ entry.application|linebreaksbr|default:"—" }}</div>
</div>
<!-- Meta -->
<div class="meta-grid">
<div class="meta-item">
<div class="meta-label">Scripture</div>
<div class="meta-value">{{ entry.scripture_raw|default:"—" }}</div>
</div> </div>
</div>
<!-- Fixed Source block --> <!-- APPLICATION -->
<div class="section">
<div class="section-label">Application</div>
<div class="section-body lead-text" id="application-text">
{{ entry.application|linebreaksbr|default:"—" }}
</div>
</div>
<!-- Meta (smaller) -->
<div class="meta-grid">
<div class="meta-item"> <div class="meta-item">
<div class="meta-label">Source</div> <div class="meta-label">Source</div>
<div class="meta-value"> <div class="meta-value">
@ -60,9 +89,8 @@
{% with s=entry.source|default:"" %} {% with s=entry.source|default:"" %}
{% with sl=s|lower|cut:" " %} {% with sl=s|lower|cut:" " %}
{% if {% if
sl|slice:":2" == "w " or sl|startswith:"w" or sl|slice:":1" == "w" or sl|slice:":2" == "wp" or sl|slice:":2" == "ws" or
sl|slice:":2" == "wp" or sl|slice:":2" == "ws" or sl|slice:":1" == "g" or sl|slice:":1" == "g" or sl|slice:":2" == "yb" or sl|slice:":2" == "kt" or
sl|slice:":2" == "yb" or sl|slice:":2" == "kt" or
sl|slice:":2" == "km" or sl|slice:":3" == "mwb" or sl|slice:":2" == "km" or sl|slice:":3" == "mwb" or
sl|slice:":2" == "ap" or sl|slice:":3" == "apf" or sl|slice:":2" == "be" or sl|slice:":2" == "bh" or sl|slice:":2" == "ap" or sl|slice:":3" == "apf" or sl|slice:":2" == "be" or sl|slice:":2" == "bh" or
sl|slice:":2" == "br" or sl|slice:":2" == "bt" or sl|slice:":3" == "btg" or sl|slice:":2" == "cf" or sl|slice:":2" == "br" or sl|slice:":2" == "bt" or sl|slice:":3" == "btg" or sl|slice:":2" == "cf" or
@ -95,31 +123,43 @@
</div> </div>
<div class="meta-item"> <div class="meta-item">
<div class="meta-label">Talk Title</div> <div class="meta-label">Scripture</div>
<div class="meta-value">{{ entry.talk_title|default:"—" }}</div> <div class="meta-value">
{% if scripture_list %}
{% for sc in scripture_list %}
<a class="chip chip-link"
href="https://wol.jw.org/en/wol/l/r1/lp-e?q={{ sc|urlencode }}"
target="_blank" rel="noopener noreferrer">
{{ sc }}
</a>
{% endfor %}
{% else %}—{% endif %}
</div>
</div> </div>
<div class="meta-item"> <div class="meta-item">
<div class="meta-label">Talk Number</div> <div class="meta-label">Code</div>
<div class="meta-value">{{ entry.talk_number|default:"—" }}</div>
</div>
<div class="meta-item">
<div class="meta-label">Entry Code</div>
<div class="meta-value">{{ entry.entry_code|default:"—" }}</div> <div class="meta-value">{{ entry.entry_code|default:"—" }}</div>
</div> </div>
<div class="meta-item"> <div class="meta-item">
<div class="meta-label">Date Added</div> <div class="meta-label">Talk</div>
<div class="meta-value">{{ entry.date_added|date:"Y-m-d" }}</div> <div class="meta-value">
{% if entry.talk_title %}{{ entry.talk_title }}{% else %}—{% endif %}
{% if entry.talk_number %}<span class="chip chip-muted">#{{ entry.talk_number }}</span>{% endif %}
</div>
</div> </div>
<div class="meta-item"> <div class="meta-item">
<div class="meta-label">Date Edited</div> <div class="meta-label">Dates</div>
<div class="meta-value">{{ entry.date_edited|date:"Y-m-d" }}</div> <div class="meta-value small">
{% if entry.date_added %}Added: {{ entry.date_added }}{% else %}Added: —{% endif %}
{% if entry.date_edited %} • Edited: {{ entry.date_edited }}{% endif %}
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- Toast --> <!-- Toast -->
@ -130,19 +170,36 @@
The Illustration was copied to the clipboard The Illustration was copied to the clipboard
</div> </div>
<script> <style>
document.getElementById('share-btn').addEventListener('click', function() { .subject-pills{
const illustration = document.getElementById('illustration-text').innerText.trim(); display:flex; flex-wrap:wrap; gap:10px; margin:0 0 10px;
const application = document.getElementById('application-text').innerText.trim(); }
const textToCopy = illustration + " " + application; .chip-subject{
font-weight:700; font-size:16px; padding:8px 14px; border-radius:999px;
background:#eef5fc; border:1px solid #d7e6f7; color:#0f172a; text-decoration:none;
text-transform: capitalize;
}
.chip-subject:hover{ background:#e2effc; border-color:#c9def5; }
</style>
navigator.clipboard.writeText(textToCopy).then(() => { <script>
const toast = document.getElementById('copy-toast'); // Copy Illustration + two spaces + Application
toast.style.display = 'block'; (function () {
setTimeout(() => { toast.style.display = 'none'; }, 5000); const btn = document.getElementById('share-btn');
}).catch(err => { if (!btn) return;
alert('Failed to copy: ' + err); btn.addEventListener('click', function () {
}); const ill = (document.getElementById('illustration-text')?.innerText || '').trim();
}); const app = (document.getElementById('application-text')?.innerText || '').trim();
const text = ill + ' ' + app;
navigator.clipboard.writeText(text).then(() => {
const toast = document.getElementById('copy-toast');
if (!toast) return;
toast.style.display = 'block';
setTimeout(() => { toast.style.display = 'none'; }, 5000);
}).catch(err => {
alert('Failed to copy: ' + err);
});
});
})();
</script> </script>
{% endblock %} {% endblock %}