marijo/routes
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Images not cropping

Browse source
This commit is contained in:
marijo 2026-06-29 08:20:03 +00:00
parent c021498808
commit 18de453ac1
3 changed files with 14 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

7
app.js
View file

@ -189,6 +189,7 @@ function renderRoutes() {
function createRouteCard(route) { function createRouteCard(route) {
const card = template.content.firstElementChild.cloneNode(true); const card = template.content.firstElementChild.cloneNode(true);
const image = card.querySelector(".route-image"); const image = card.querySelector(".route-image");
const picture = card.querySelector(".route-picture");
const meta = card.querySelector(".route-meta"); const meta = card.querySelector(".route-meta");
const title = card.querySelector(".route-title"); const title = card.querySelector(".route-title");
const description = card.querySelector(".route-description"); const description = card.querySelector(".route-description");
@ -205,7 +206,7 @@ function createRouteCard(route) {
if (route.picture) { if (route.picture) {
image.hidden = false; image.hidden = false;
image.style.backgroundImage = `url("${cssUrlEscape(route.picture)}")`; picture.src = route.picture;
} }
return card; return card;
@ -428,7 +429,3 @@ function isValidUrl(value) {
function formatDate(value) { function formatDate(value) {
return new Intl.DateTimeFormat(undefined, { dateStyle: "medium" }).format(new Date(`${value}T00:00:00`)); return new Intl.DateTimeFormat(undefined, { dateStyle: "medium" }).format(new Date(`${value}T00:00:00`));
} }
function cssUrlEscape(value) {
return value.replaceAll("\\", "\\\\").replaceAll('"', '\\"');
}

2
index.html
View file

@ -94,7 +94,7 @@
<template id="route-card-template"> <template id="route-card-template">
<article class="route-card"> <article class="route-card">
<div class="route-image" aria-hidden="true" hidden></div> <div class="route-image" aria-hidden="true" hidden><img class="route-picture" alt="" /></div>
<div class="route-content"> <div class="route-content">
<div class="route-meta"></div> <div class="route-meta"></div>
<div class="route-top"> <div class="route-top">

17
styles.css
View file

@ -231,11 +231,16 @@ textarea:focus {
} }
.route-image { .route-image {
min-height: 130px; display: flex;
background-color: color-mix(in srgb, var(--border) 45%, transparent); align-items: center;
background-position: center; justify-content: center;
background-repeat: no-repeat; background: color-mix(in srgb, var(--border) 45%, transparent);
background-size: contain; }
.route-picture {
display: block;
width: 100%;
height: auto;
} }
.route-content { .route-content {
@ -398,7 +403,7 @@ textarea:focus {
} }
.route-image { .route-image {
min-height: 100%; align-self: start;
} }
} }