mi/sunday
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💄 images for comic nav

Browse Source
This commit is contained in:
mi
2025-11-13 10:38:26 +10:00
parent 2846576c2f
commit 2ac7405cf4
10 changed files with 174 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app.py
View File

@@ -1,7 +1,7 @@
import os
from datetime import datetime
from flask import Flask, render_template, abort, jsonify, request
from comics_data import COMICS, FULL_WIDTH_DEFAULT, PLAIN_DEFAULT, HEADER_IMAGE, FOOTER_IMAGE, COMPACT_FOOTER
from comics_data import COMICS, FULL_WIDTH_DEFAULT, PLAIN_DEFAULT, HEADER_IMAGE, FOOTER_IMAGE, COMPACT_FOOTER, USE_ICON_NAV
import markdown
app = Flask(__name__)
@@ -16,7 +16,8 @@ def inject_global_settings():
return {
'header_image': HEADER_IMAGE,
'footer_image': FOOTER_IMAGE,
'compact_footer': COMPACT_FOOTER
'compact_footer': COMPACT_FOOTER,
'use_icon_nav': USE_ICON_NAV
}

4
comics_data.py
View File

@@ -23,6 +23,10 @@ FOOTER_IMAGE = None # 'footer.jpg'
# Compact mode: single line, no border, horizontal layout
COMPACT_FOOTER = True
# Global setting: Set to True to use icon images for navigation buttons
# Icons should be in static/images/icons/ (first.png, previous.png, next.png, latest.png)
USE_ICON_NAV = True
COMICS = [
{
'number': 1,

42
static/css/style.css
View File

@@ -360,6 +360,32 @@ main {
color: var(--color-disabled);
}
/* Icon-based navigation buttons */
.btn-icon-nav {
display: inline-block;
cursor: pointer;
transition: opacity var(--transition-speed);
}
.btn-icon-nav img {
height: 2rem;
width: auto;
display: block;
}
.btn-icon-nav:hover {
opacity: 0.7;
}
.btn-icon-disabled {
opacity: 0.3;
cursor: not-allowed;
}
.btn-icon-disabled:hover {
opacity: 0.3;
}
.comic-date-display {
padding: 0 var(--space-sm);
color: var(--color-text);
@@ -469,6 +495,10 @@ main {
font-size: var(--font-size-sm);
}
.btn-icon-nav img {
height: 1.5rem;
}
.comic-date-display {
font-size: var(--font-size-xs);
flex-basis: 100%;
@@ -476,6 +506,18 @@ main {
padding-top: var(--space-xs);
}
/* Keep icon navigation on single line on mobile */
.nav-buttons:has(.btn-icon-nav) {
flex-wrap: nowrap;
}
.nav-buttons:has(.btn-icon-nav) .comic-date-display {
flex-basis: auto;
padding-top: 0;
font-size: var(--font-size-xs);
white-space: nowrap;
}
.nav-buttons {
flex-wrap: wrap;
}

BIN
static/images/icons/first.png LFS Normal file
View File

Binary file not shown.

BIN
static/images/icons/latest.png LFS Normal file
View File

Binary file not shown.

BIN
static/images/icons/next.png LFS Normal file
View File

Binary file not shown.

BIN
static/images/icons/previous.png LFS Normal file
View File

Binary file not shown.

19
static/js/comic-nav.js
View File

@@ -175,23 +175,26 @@
function updateNavButtons(currentNumber, formattedDate) {
const navButtons = document.querySelector('.nav-buttons');
// Detect if using icon navigation
const isIconNav = navButtons.children[0].classList.contains('btn-icon-nav');
// First button
const firstBtn = navButtons.children[0];
if (currentNumber > 1) {
firstBtn.className = 'btn btn-nav';
firstBtn.className = isIconNav ? 'btn-icon-nav' : 'btn btn-nav';
firstBtn.onclick = (e) => { e.preventDefault(); loadComic(1); };
} else {
firstBtn.className = 'btn btn-nav btn-disabled';
firstBtn.className = isIconNav ? 'btn-icon-nav btn-icon-disabled' : 'btn btn-nav btn-disabled';
firstBtn.onclick = null;
}
// Previous button
const prevBtn = navButtons.children[1];
if (currentNumber > 1) {
prevBtn.className = 'btn btn-nav';
prevBtn.className = isIconNav ? 'btn-icon-nav' : 'btn btn-nav';
prevBtn.onclick = (e) => { e.preventDefault(); loadComic(currentNumber - 1); };
} else {
prevBtn.className = 'btn btn-nav btn-disabled';
prevBtn.className = isIconNav ? 'btn-icon-nav btn-icon-disabled' : 'btn btn-nav btn-disabled';
prevBtn.onclick = null;
}
@@ -203,20 +206,20 @@
// Next button
const nextBtn = navButtons.children[3];
if (currentNumber < totalComics) {
nextBtn.className = 'btn btn-nav';
nextBtn.className = isIconNav ? 'btn-icon-nav' : 'btn btn-nav';
nextBtn.onclick = (e) => { e.preventDefault(); loadComic(currentNumber + 1); };
} else {
nextBtn.className = 'btn btn-nav btn-disabled';
nextBtn.className = isIconNav ? 'btn-icon-nav btn-icon-disabled' : 'btn btn-nav btn-disabled';
nextBtn.onclick = null;
}
// Latest button
const latestBtn = navButtons.children[4];
if (currentNumber < totalComics) {
latestBtn.className = 'btn btn-nav';
latestBtn.className = isIconNav ? 'btn-icon-nav' : 'btn btn-nav';
latestBtn.onclick = (e) => { e.preventDefault(); loadComic(totalComics); };
} else {
latestBtn.className = 'btn btn-nav btn-disabled';
latestBtn.className = isIconNav ? 'btn-icon-nav btn-icon-disabled' : 'btn btn-nav btn-disabled';
latestBtn.onclick = null;
}
}

38
templates/comic.html
View File

@@ -47,6 +47,43 @@
<div class="comic-navigation">
<div class="nav-buttons">
{% if use_icon_nav %}
{# Icon-based navigation #}
{% if comic.number > 1 %}
<a href="{{ url_for('comic', comic_id=1) }}" class="btn-icon-nav" aria-label="First">
<img src="{{ url_for('static', filename='images/icons/first.png') }}" alt="First">
</a>
<a href="{{ url_for('comic', comic_id=comic.number - 1) }}" class="btn-icon-nav" aria-label="Previous">
<img src="{{ url_for('static', filename='images/icons/previous.png') }}" alt="Previous">
</a>
{% else %}
<span class="btn-icon-nav btn-icon-disabled" aria-label="First">
<img src="{{ url_for('static', filename='images/icons/first.png') }}" alt="First">
</span>
<span class="btn-icon-nav btn-icon-disabled" aria-label="Previous">
<img src="{{ url_for('static', filename='images/icons/previous.png') }}" alt="Previous">
</span>
{% endif %}
<span class="comic-date-display">{{ comic.formatted_date }}</span>
{% if comic.number < total_comics %}
<a href="{{ url_for('comic', comic_id=comic.number + 1) }}" class="btn-icon-nav" aria-label="Next">
<img src="{{ url_for('static', filename='images/icons/next.png') }}" alt="Next">
</a>
<a href="{{ url_for('comic', comic_id=total_comics) }}" class="btn-icon-nav" aria-label="Latest">
<img src="{{ url_for('static', filename='images/icons/latest.png') }}" alt="Latest">
</a>
{% else %}
<span class="btn-icon-nav btn-icon-disabled" aria-label="Next">
<img src="{{ url_for('static', filename='images/icons/next.png') }}" alt="Next">
</span>
<span class="btn-icon-nav btn-icon-disabled" aria-label="Latest">
<img src="{{ url_for('static', filename='images/icons/latest.png') }}" alt="Latest">
</span>
{% endif %}
{% else %}
{# Text-based navigation #}
{% if comic.number > 1 %}
<a href="{{ url_for('comic', comic_id=1) }}" class="btn btn-nav">First</a>
<a href="{{ url_for('comic', comic_id=comic.number - 1) }}" class="btn btn-nav">Previous</a>
@@ -64,6 +101,7 @@
<span class="btn btn-nav btn-disabled">Next</span>
<span class="btn btn-nav btn-disabled">Latest</span>
{% endif %}
{% endif %}
</div>
</div>

38
templates/index.html
View File

@@ -30,6 +30,43 @@
<div class="comic-navigation">
<div class="nav-buttons">
{% if use_icon_nav %}
{# Icon-based navigation #}
{% if comic.number > 1 %}
<a href="{{ url_for('comic', comic_id=1) }}" class="btn-icon-nav" aria-label="First">
<img src="{{ url_for('static', filename='images/icons/first.png') }}" alt="First">
</a>
<a href="{{ url_for('comic', comic_id=comic.number - 1) }}" class="btn-icon-nav" aria-label="Previous">
<img src="{{ url_for('static', filename='images/icons/previous.png') }}" alt="Previous">
</a>
{% else %}
<span class="btn-icon-nav btn-icon-disabled" aria-label="First">
<img src="{{ url_for('static', filename='images/icons/first.png') }}" alt="First">
</span>
<span class="btn-icon-nav btn-icon-disabled" aria-label="Previous">
<img src="{{ url_for('static', filename='images/icons/previous.png') }}" alt="Previous">
</span>
{% endif %}
<span class="comic-date-display">{{ comic.formatted_date }}</span>
{% if comic.number < total_comics %}
<a href="{{ url_for('comic', comic_id=comic.number + 1) }}" class="btn-icon-nav" aria-label="Next">
<img src="{{ url_for('static', filename='images/icons/next.png') }}" alt="Next">
</a>
<a href="{{ url_for('comic', comic_id=total_comics) }}" class="btn-icon-nav" aria-label="Latest">
<img src="{{ url_for('static', filename='images/icons/latest.png') }}" alt="Latest">
</a>
{% else %}
<span class="btn-icon-nav btn-icon-disabled" aria-label="Next">
<img src="{{ url_for('static', filename='images/icons/next.png') }}" alt="Next">
</span>
<span class="btn-icon-nav btn-icon-disabled" aria-label="Latest">
<img src="{{ url_for('static', filename='images/icons/latest.png') }}" alt="Latest">
</span>
{% endif %}
{% else %}
{# Text-based navigation #}
{% if comic.number > 1 %}
<a href="{{ url_for('comic', comic_id=1) }}" class="btn btn-nav">First</a>
<a href="{{ url_for('comic', comic_id=comic.number - 1) }}" class="btn btn-nav">Previous</a>
@@ -47,6 +84,7 @@
<span class="btn btn-nav btn-disabled">Next</span>
<span class="btn btn-nav btn-disabled">Latest</span>
{% endif %}
{% endif %}
</div>
</div>