bvandeusen/imagerepo
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ensuring tags dropdown is visible

Browse Source
This commit is contained in:
Bryan Van Deusen
2026-02-04 19:56:04 -05:00
parent c95896693f
commit 079f1c1d49
4 changed files with 60 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/static/style.css
+23 -4
View File
@@ -168,10 +168,10 @@ header {
left: 50%;
transform: translateX(-50%);
min-width: 150px;
background: var(--surface);
border: 1px solid var(--border);
background: rgba(0, 0, 0, 0.7);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
box-shadow: 0 4px 12px rgba(0,0,0,0.5);
z-index: 1001;
padding: 0.5rem 0;
margin-top: 0.25rem;
@@ -187,7 +187,7 @@ header {
}
.nav-dropdown-menu a:hover {
background: var(--hover);
background: rgba(255, 255, 255, 0.15);
}
.nav-dropdown:hover .nav-dropdown-menu,
@@ -1255,6 +1255,25 @@ header {
background: rgba(255,255,255,0.15);
}
/* Dropdown within showcase nav */
.showcase-nav .nav-dropdown {
position: relative;
display: inline-block;
pointer-events: auto;
}
.showcase-nav .nav-dropdown-trigger {
cursor: pointer;
border: none;
background: transparent;
font-family: inherit;
}
.showcase-nav .nav-dropdown-menu {
left: 50%;
transform: translateX(-50%);
}
.showcase-nav .nav-hint {
color: rgba(255,255,255,0.4);
font-size: 0.8rem;
app/templates/layout.html
+13 -8
View File
@@ -2,16 +2,20 @@
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ImageRepo - {% block title %}{% endblock %}</title>
<link rel="icon" href="{{ url_for('static', filename='favicon.svg') }}" type="image/svg+xml">
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" sizes="any">
<link rel="apple-touch-icon" href="{{ url_for('static', filename='apple-touch-icon.png') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
{% block head %}{% endblock %}
</head>
<body>
<body{% block body_attrs %}{% endblock %}>
{% block body %}
<div class="mainview">
{% block header %}
<header>
<nav class="navbar">
<a class="nav-button" href="{{ url_for('main.index') }}">Showcase</a>
@@ -34,9 +38,9 @@
<a class="nav-button" href="{{ url_for('main.settings') }}">Settings</a>
</nav>
</header>
{% endblock %}
<!-- FLASH MESSAGES -->
<!-- FLASH MESSAGES -->
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
<div class="flash-container">
@@ -47,12 +51,13 @@
{% endif %}
{% endwith %}
<!-- MAIN CONTENT -->
<div class="content">
{% block content %}{% endblock %}
</div>
<!-- MAIN CONTENT -->
<div class="content">
{% block content %}{% endblock %}
</div>
</div>
{% endblock %}
{% block scripts %}{% endblock %}
</body>
</html>
app/templates/showcase.html
+24 -13
View File
@@ -1,20 +1,30 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ImageRepo - Showcase</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body class="showcase-body">
{% extends "layout.html" %}
{% block title %}Showcase{% endblock %}
{% block body_attrs %} class="showcase-body"{% endblock %}
{% block body %}
<!-- Floating navbar overlay -->
<nav class="showcase-nav">
<div class="showcase-nav-links">
<a class="nav-link" href="{{ url_for('main.index') }}">Showcase</a>
<a class="nav-link" href="{{ url_for('main.gallery') }}">Gallery</a>
<a class="nav-link" href="{{ url_for('main.tag_list', kind='artist') }}">Artists</a>
<a class="nav-link" href="{{ url_for('main.tag_list') }}">Tags</a>
<div class="nav-dropdown">
<button class="nav-link nav-dropdown-trigger">Tags</button>
<div class="nav-dropdown-menu">
<a href="{{ url_for('main.tag_list') }}">All Tags</a>
<a href="{{ url_for('main.tag_list', kind='artist') }}">Artists</a>
<a href="{{ url_for('main.tag_list', kind='character') }}">Characters</a>
<a href="{{ url_for('main.tag_list', kind='series') }}">Series</a>
<a href="{{ url_for('main.tag_list', kind='fandom') }}">Fandoms</a>
<a href="{{ url_for('main.tag_list', kind='rating') }}">Ratings</a>
<a href="{{ url_for('main.tag_list', kind='archive') }}">Archives</a>
<a href="{{ url_for('main.tag_list', kind='source') }}">Sources</a>
<a href="{{ url_for('main.tag_list', kind='post') }}">Posts</a>
<a href="{{ url_for('main.tag_list', kind='user') }}">User Tags</a>
</div>
</div>
<a class="nav-link" href="{{ url_for('main.settings') }}">Settings</a>
</div>
<span class="nav-hint">Press R to shuffle</span>
@@ -63,8 +73,9 @@
</div>
</div>
</div>
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='js/view-modal.js') }}"></script>
<script src="{{ url_for('static', filename='js/showcase.js') }}"></script>
</body>
</html>
{% endblock %}
generate_favicon.py
-145
View File
@@ -1,145 +0,0 @@
#!/usr/bin/env python3
"""
Generate favicon files for ImageRepo.
Creates a simple gallery/image icon in multiple formats and sizes.
"""
from PIL import Image, ImageDraw
import os
# Output directory
STATIC_DIR = os.path.join(os.path.dirname(__file__), 'app', 'static')
# Color scheme (dark theme friendly)
BG_COLOR = (45, 45, 55) # Dark background
FRAME_COLOR = (99, 102, 241) # Indigo accent (matches --accent)
IMAGE_BG = (60, 60, 70) # Slightly lighter for image area
MOUNTAIN_COLOR = (80, 85, 95) # Mountain silhouette
SUN_COLOR = (251, 191, 36) # Warm yellow sun
def create_favicon_image(size):
"""Create a gallery icon at the specified size."""
img = Image.new('RGBA', (size, size), (0, 0, 0, 0))
draw = ImageDraw.Draw(img)
# Padding and dimensions
padding = max(1, size // 16)
frame_width = max(1, size // 10)
corner_radius = max(2, size // 8)
# Outer frame (rounded rectangle)
frame_box = (padding, padding, size - padding, size - padding)
draw.rounded_rectangle(frame_box, radius=corner_radius, fill=FRAME_COLOR)
# Inner image area
inner_padding = padding + frame_width
inner_box = (inner_padding, inner_padding, size - inner_padding, size - inner_padding)
inner_radius = max(1, corner_radius - frame_width // 2)
draw.rounded_rectangle(inner_box, radius=inner_radius, fill=IMAGE_BG)
# Simple landscape scene inside
inner_width = size - 2 * inner_padding
inner_height = size - 2 * inner_padding
if inner_width > 4 and inner_height > 4:
# Sun (small circle in upper right)
sun_size = max(2, inner_width // 5)
sun_x = inner_padding + inner_width - sun_size - max(1, inner_width // 6)
sun_y = inner_padding + max(1, inner_height // 6)
draw.ellipse(
(sun_x, sun_y, sun_x + sun_size, sun_y + sun_size),
fill=SUN_COLOR
)
# Mountains (triangular shapes)
mountain_base_y = size - inner_padding - max(1, inner_height // 8)
# Left mountain (taller)
peak1_x = inner_padding + inner_width // 3
peak1_y = inner_padding + inner_height // 3
draw.polygon([
(inner_padding, mountain_base_y),
(peak1_x, peak1_y),
(inner_padding + int(inner_width * 0.6), mountain_base_y)
], fill=MOUNTAIN_COLOR)
# Right mountain (shorter, overlapping)
peak2_x = inner_padding + int(inner_width * 0.7)
peak2_y = inner_padding + int(inner_height * 0.5)
draw.polygon([
(inner_padding + inner_width // 3, mountain_base_y),
(peak2_x, peak2_y),
(size - inner_padding, mountain_base_y)
], fill=(90, 95, 105)) # Slightly lighter for depth
return img
def create_svg_favicon():
"""Create an SVG favicon."""
svg_content = '''<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<!-- Outer frame -->
<rect x="4" y="4" width="56" height="56" rx="8" fill="#6366f1"/>
<!-- Inner image area -->
<rect x="10" y="10" width="44" height="44" rx="4" fill="#3c3c46"/>
<!-- Sun -->
<circle cx="44" cy="20" r="6" fill="#fbbf24"/>
<!-- Back mountain -->
<polygon points="10,48 32,24 50,48" fill="#5a5f6b"/>
<!-- Front mountain -->
<polygon points="24,48 44,30 54,48" fill="#50555f"/>
</svg>'''
svg_path = os.path.join(STATIC_DIR, 'favicon.svg')
with open(svg_path, 'w') as f:
f.write(svg_content)
print(f"Created: {svg_path}")
return svg_path
def main():
os.makedirs(STATIC_DIR, exist_ok=True)
# Generate SVG (scalable, modern browsers)
create_svg_favicon()
# Generate PNG favicons at various sizes
sizes = [16, 32, 48, 180, 192, 512]
png_images = {}
for size in sizes:
img = create_favicon_image(size)
filename = f'favicon-{size}x{size}.png'
filepath = os.path.join(STATIC_DIR, filename)
img.save(filepath, 'PNG')
png_images[size] = img
print(f"Created: {filepath}")
# Create apple-touch-icon (180x180)
apple_path = os.path.join(STATIC_DIR, 'apple-touch-icon.png')
png_images[180].save(apple_path, 'PNG')
print(f"Created: {apple_path}")
# Create ICO file with multiple sizes (16, 32, 48)
ico_path = os.path.join(STATIC_DIR, 'favicon.ico')
ico_sizes = [png_images[16], png_images[32], png_images[48]]
ico_sizes[0].save(
ico_path,
format='ICO',
sizes=[(16, 16), (32, 32), (48, 48)],
append_images=ico_sizes[1:]
)
print(f"Created: {ico_path}")
print("\nFavicon generation complete!")
print("\nAdd these lines to your layout.html <head> section:")
print('''
<link rel="icon" href="{{ url_for('static', filename='favicon.svg') }}" type="image/svg+xml">
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" sizes="any">
<link rel="apple-touch-icon" href="{{ url_for('static', filename='apple-touch-icon.png') }}">
''')
if __name__ == '__main__':
main()