forked from retoor/devplacepy
feat: add alt text extraction from URLs for images and improve CSS variable usage for progress bars
Add `_alt_from_url` helper in Python rendering and `altFromUrl` in JS ContentRenderer to generate descriptive alt attributes from image filenames, replacing empty alt strings. Update image embed templates and Avatar component to use derived alt text. Migrate inline `style.width` assignments to CSS custom properties (`--poll-pct`, `--hud-xp`, `--quest-pct`, `--bar-pct`, `--quota-pct`) across PollManager, GameFarm, and profile/quest CSS for better maintainability. Introduce new admin, docs, projects, services, and base CSS utility classes. Add "Code Farm" docs page entry.
This commit is contained in:
@@ -508,3 +508,78 @@
|
||||
padding: 0.25rem 0.375rem;
|
||||
}
|
||||
}
|
||||
|
||||
.admin-btn-danger-text {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.admin-news-col-title {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.admin-news-status-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
}
|
||||
|
||||
.admin-news-status-label {
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.admin-news-img-cell {
|
||||
text-align: center;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.admin-news-img-empty {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.admin-news-date-cell {
|
||||
white-space: nowrap;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.admin-settings-intro {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.admin-settings-group-title {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-secondary);
|
||||
margin: 0 0 0.75rem;
|
||||
}
|
||||
|
||||
.admin-settings-group-title-spaced {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.admin-settings-divider {
|
||||
border: none;
|
||||
border-top: 1px solid var(--border);
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
.admin-settings-num {
|
||||
max-width: 120px;
|
||||
}
|
||||
|
||||
.admin-settings-select {
|
||||
max-width: 160px;
|
||||
}
|
||||
|
||||
.admin-settings-select-wide {
|
||||
max-width: 220px;
|
||||
}
|
||||
|
||||
.admin-settings-code {
|
||||
width: 100%;
|
||||
font-family: monospace;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
@@ -84,6 +84,16 @@
|
||||
.inline-form {
|
||||
display: inline;
|
||||
}
|
||||
.empty-state-borderless {
|
||||
border: none;
|
||||
}
|
||||
.meta-muted {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.meta-muted-spaced {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
@@ -1096,6 +1106,11 @@ body:has(.page-messages) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.topnav-tools-dropdown,
|
||||
.topnav-icon[href="/leaderboard"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.topnav-hamburger {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -1260,11 +1275,11 @@ body:has(.page-messages) {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.6875rem;
|
||||
line-height: 1;
|
||||
color: var(--text-muted);
|
||||
color: var(--text-secondary);
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-input);
|
||||
opacity: 0.55;
|
||||
opacity: 0.85;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@@ -23,3 +23,15 @@
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.docs-demo-ctx-target {
|
||||
padding: 1.5rem;
|
||||
cursor: context-menu;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.docs-demo-thumb,
|
||||
.docs-demo-avatar {
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
@@ -193,7 +193,7 @@
|
||||
.poll-option-bar {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 0;
|
||||
width: var(--poll-pct, 0);
|
||||
background: rgba(255, 107, 53, 0.18);
|
||||
transition: width 0.3s ease;
|
||||
z-index: 0;
|
||||
|
||||
@@ -71,6 +71,7 @@
|
||||
.hud-xp-fill {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: var(--hud-xp, 0);
|
||||
background: var(--accent);
|
||||
transition: width 0.4s ease;
|
||||
}
|
||||
@@ -436,6 +437,7 @@
|
||||
.quest-fill {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: var(--quest-pct, 0);
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
|
||||
@@ -115,4 +115,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.notif-icon-fixed {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -90,6 +90,7 @@ a.profile-stat-value:hover {
|
||||
|
||||
.profile-level-bar .bar-fill {
|
||||
height: 100%;
|
||||
width: var(--bar-pct, 0);
|
||||
background: var(--accent);
|
||||
border-radius: 3px;
|
||||
}
|
||||
@@ -587,6 +588,7 @@ a.profile-stat-value:hover {
|
||||
.ai-quota-fill {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: var(--quota-pct, 0);
|
||||
background: var(--accent);
|
||||
border-radius: 999px;
|
||||
transition: width 0.3s ease;
|
||||
|
||||
@@ -300,3 +300,16 @@
|
||||
background: var(--bg-card-hover);
|
||||
color: var(--warning);
|
||||
}
|
||||
|
||||
.project-platforms {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.project-section-label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
@@ -414,3 +414,7 @@
|
||||
color: var(--text-secondary);
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
.service-field-input {
|
||||
max-width: 160px;
|
||||
}
|
||||
|
||||
@@ -8,7 +8,7 @@ export class Avatar {
|
||||
img.style.width = `${size}px`;
|
||||
img.style.height = `${size}px`;
|
||||
img.style.borderRadius = "50%";
|
||||
img.alt = "";
|
||||
img.alt = `${username} avatar`;
|
||||
img.loading = "lazy";
|
||||
return img;
|
||||
}
|
||||
|
||||
@@ -172,6 +172,17 @@ export class ContentRenderer {
|
||||
}
|
||||
}
|
||||
|
||||
altFromUrl(url) {
|
||||
try {
|
||||
const path = new URL(url, window.location.origin).pathname;
|
||||
const file = decodeURIComponent(path.split("/").pop() || "");
|
||||
const name = file.replace(/\.[^.]+$/, "").replace(/[-_]/g, " ").trim();
|
||||
return name || "Embedded image";
|
||||
} catch {
|
||||
return "Embedded image";
|
||||
}
|
||||
}
|
||||
|
||||
urlToEmbed(url) {
|
||||
const ytMatch = url.match(this.youtubeRe);
|
||||
if (ytMatch) {
|
||||
@@ -190,7 +201,7 @@ export class ContentRenderer {
|
||||
if (this.imageExtRe.test(url)) {
|
||||
const img = document.createElement("img");
|
||||
img.src = url;
|
||||
img.alt = "";
|
||||
img.alt = this.altFromUrl(url);
|
||||
img.loading = "lazy";
|
||||
return img;
|
||||
}
|
||||
|
||||
@@ -95,7 +95,7 @@ export class GameFarm {
|
||||
const fill = this.root.querySelector("[data-hud-xp-fill]");
|
||||
if (fill) {
|
||||
const pct = farm.level_is_max || !farm.level_span ? 100 : Math.floor((100 * farm.level_into) / farm.level_span);
|
||||
fill.style.width = `${pct}%`;
|
||||
fill.style.setProperty("--hud-xp", `${pct}%`);
|
||||
}
|
||||
set("[data-hud-xp]", farm.level_is_max ? "max level" : `${farm.level_into} / ${farm.level_span} XP`);
|
||||
}
|
||||
@@ -149,7 +149,7 @@ export class GameFarm {
|
||||
} else if (quest.claimed) {
|
||||
foot = `<span class="quest-claimed">Done</span>`;
|
||||
}
|
||||
return `<li class="quest-item${quest.claimed ? " quest-done" : ""}"><div class="quest-head"><span>${quest.label}</span><span class="quest-reward">+${quest.reward_coins}c</span></div><div class="quest-bar"><span class="quest-fill" style="width:${pct}%"></span></div><div class="quest-foot"><span class="quest-progress">${quest.progress}/${quest.goal}</span>${foot}</div></li>`;
|
||||
return `<li class="quest-item${quest.claimed ? " quest-done" : ""}"><div class="quest-head"><span>${quest.label}</span><span class="quest-reward">+${quest.reward_coins}c</span></div><div class="quest-bar"><span class="quest-fill" style="--quest-pct:${pct}%"></span></div><div class="quest-foot"><span class="quest-progress">${quest.progress}/${quest.goal}</span>${foot}</div></li>`;
|
||||
})
|
||||
.join("");
|
||||
}
|
||||
|
||||
@@ -60,7 +60,7 @@ export class PollManager extends OptimisticAction {
|
||||
button.setAttribute("aria-pressed", chosen ? "true" : "false");
|
||||
const bar = button.querySelector(".poll-option-bar");
|
||||
if (bar) {
|
||||
bar.style.width = `${data.pct}%`;
|
||||
bar.style.setProperty("--poll-pct", `${data.pct}%`);
|
||||
}
|
||||
const pct = button.querySelector(".poll-option-pct");
|
||||
if (pct) {
|
||||
|
||||
@@ -72,7 +72,7 @@ export class AppLightbox extends Component {
|
||||
const opts = options || {};
|
||||
if (!src) return;
|
||||
this.image.src = src;
|
||||
this.image.alt = opts.alt || "";
|
||||
this.image.alt = opts.alt || "Enlarged image";
|
||||
this.lastFocus = document.activeElement;
|
||||
this.bodyOverflow = document.body.style.overflow;
|
||||
document.body.style.overflow = "hidden";
|
||||
|
||||
Reference in New Issue
Block a user