Illustrations/web/templates/entry_view.html

184 lines
7.4 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{% extends "base.html" %}
{% block body_class %}themed-bg{% endblock %}
{% load static %}
{% block content %}
<div class="result-wrap">
<!-- Top bar: back + counter + clear Prev/Next -->
<div class="result-toolbar">
<div class="rt-left">
<a class="btn btn-secondary" href="{% url 'search' %}">← Back to Search</a>
{% if count %}
<span class="rt-count">{{ position }} of {{ count }}</span>
{% endif %}
</div>
<div class="rt-right">
<form method="get" action="{% url 'nav_prev' %}" class="inline" style="display:inline;">
<input type="hidden" name="i" value="{{ position|add:'-1' }}">
<button class="btn btn-lg" {% if position <= 1 %}disabled{% endif %}> Prev</button>
</form>
<form method="get" action="{% url 'nav_next' %}" class="inline" style="display:inline;">
<input type="hidden" name="i" value="{{ position|add:'-1' }}">
<button class="btn btn-lg btn-primary" {% if position >= count %}disabled{% endif %}>Next </button>
</form>
<!-- Share Button -->
<button id="shareBtn" class="btn btn-lg" title="Share this illustration" style="margin-left:6px;">
<span style="display:inline-flex;align-items:center;gap:6px;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
viewBox="0 0 16 16">
<path d="M11 2a2 2 0 1 1 1.414 3.414l-6.657 3.89a2.005 2.005 0 0 1 0 .392l6.657 3.89A2 2 0 1 1 11 14a2 2 0 0 1-.723-.138l-6.657-3.89a2 2 0 1 1 0-4l6.657-3.89A2 2 0 0 1 11 2z"/>
</svg>
Share
</span>
</button>
{% if user.is_authenticated and user.is_staff %}
<a class="btn btn-outline" href="{% url 'entry_edit' entry.id %}">Edit</a>
<a class="btn btn-danger" href="{% url 'entry_delete' entry.id %}">Delete</a>
{% endif %}
</div>
</div>
<!-- Main card -->
<div class="result-card">
<!-- SUBJECT pills (WOL-linked) -->
<div class="subject-pills">
{% 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>
<!-- ILLUSTRATION -->
<div class="section">
<div class="section-label">Illustration</div>
<div id="illustrationText" class="section-body lead-text">
{{ entry.illustration|linebreaksbr|default:"—" }}
</div>
</div>
<!-- APPLICATION -->
<div class="section">
<div class="section-label">Application</div>
<div id="applicationText" class="section-body lead-text">
{{ entry.application|linebreaksbr|default:"—" }}
</div>
</div>
<!-- Meta (smaller) -->
<div class="meta-grid">
<div class="meta-item">
<div class="meta-label">Source</div>
<div class="meta-value">
{% if entry.source %}
{% with s=entry.source %}
{% with sl=s|lower %}
{% if sl|slice:":2" == "wp" or sl|slice:":2" == "ws" or sl|slice:":2" == "yb" or sl|slice:":2" == "km" or sl|slice:":3" == "mwb" or sl|slice:":1" == "w" or sl|slice:":1" == "g" 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" == "cl" or sl|slice:":2" == "ct" or sl|slice:":2" == "dp" or sl|slice:":2" == "fg" or sl|slice:":2" == "fy" or sl|slice:":2" == "gt" or sl|slice:":2" == "hb" or sl|slice:":2" == "im" or sl|slice:":2" == "ip" or sl|slice:":2" == "it" or sl|slice:":2" == "jv" or sl|slice:":2" == "ka" or sl|slice:":2" == "kj" or sl|slice:":2" == "kl" or sl|slice:":2" == "lf" or sl|slice:":3" == "lff" or sl|slice:":2" == "ll" or sl|slice:":2" == "ly" or sl|slice:":2" == "my" or sl|slice:":2" == "od" or sl|slice:":2" == "pe" or sl|slice:":2" == "po" or sl|slice:":2" == "pt" or sl|slice:":2" == "rr" or sl|slice:":2" == "rs" or sl|slice:":2" == "sg" or sl|slice:":2" == "sh" or sl|slice:":2" == "si" or sl|slice:":2" == "td" or sl|slice:":2" == "tp" or sl|slice:":2" == "tr" or sl|slice:":2" == "ts" or sl|slice:":2" == "un" %}
<a class="chip chip-link"
href="https://wol.jw.org/en/wol/l/r1/lp-e?q={{ s|urlencode }}"
target="_blank" rel="noopener noreferrer">{{ s }}</a>
{% else %}
<a class="chip chip-link"
href="https://www.google.com/search?q={{ s|urlencode }}"
target="_blank" rel="noopener noreferrer">{{ s }}</a>
{% endif %}
{% endwith %}
{% endwith %}
{% else %}—{% endif %}
</div>
</div>
<div class="meta-item">
<div class="meta-label">Scripture</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 class="meta-item">
<div class="meta-label">Code</div>
<div class="meta-value">{{ entry.entry_code|default:"—" }}</div>
</div>
<div class="meta-item">
<div class="meta-label">Talk</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 class="meta-item">
<div class="meta-label">Dates</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>
<!-- Toast -->
<div id="toast" style="visibility:hidden;min-width:200px;margin-left:-100px;background:#333;color:#fff;text-align:center;border-radius:4px;padding:10px;position:fixed;z-index:1;left:50%;bottom:30px;font-size:14px;">
The Illustration was copied to the clipboard
</div>
<script>
document.getElementById("shareBtn").addEventListener("click", function() {
const ill = document.getElementById("illustrationText").innerText.trim();
const app = document.getElementById("applicationText").innerText.trim();
const textToCopy = ill + " " + app;
navigator.clipboard.writeText(textToCopy).then(function() {
const toast = document.getElementById("toast");
toast.style.visibility = "visible";
setTimeout(() => { toast.style.visibility = "hidden"; }, 5000);
}).catch(function(err) {
console.error("Failed to copy: ", err);
});
});
</script>
<style>
.subject-pills{
display:flex;
flex-wrap:wrap;
gap:10px;
margin:0 0 10px;
}
.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>
{% endblock %}