Archived
austinandClaude Opus 5
68f1ec5961
A sweep for the bug behind the homepage titles found five more of it, because
the mistake is easy and silent: put a class on the tag you write a th:replace
on, and Thymeleaf hands you back the fragment with its own class attribute and
drops yours. Nothing warns, and the page looks nearly right.
catering the divider's mt-10, so the branch mark sat on the paragraph above it
contact mt-4 under both "Our hours" and "Find us" — the same flush headings
the homepage had
footer mt-4 between the address and the hours under it
home text-bakery-800 on the address, which is why "Find us" rendered a
shade darker (bakery-900, inherited from body) than "Our hours" in
the panel beside it
Fixed where the fragments already said it should be: "both fragments take the
classes that vary by where they sit". They now take two — the element's own
class as well as the row's or the link's — so the caller has somewhere to put
this that survives. `divider` takes its spacing the same way.
A class on a th:replace tag now has no reason to exist anywhere in the
templates, and there are none left.
Co-Authored-By: Claude Opus 5 (1M context) <[email protected]>
50 lines
2.6 KiB
HTML
50 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
||
<html xmlns:th="http://www.thymeleaf.org">
|
||
<body>
|
||
<!--/*
|
||
The opening times and the address, printed from the shop's own record rather than from markup.
|
||
|
||
They were three hand-written lines repeated in three templates. Now `Hours` collapses the week into the
|
||
lines a sign would show — consecutive days that keep the same times become one row — and the same data
|
||
answers "are they open right now?" in the header and describes the shop to a search engine. A shop that
|
||
changes its Saturday hours changes them in Shop.java, once.
|
||
|
||
Both fragments take the classes that vary by where they sit — cream in the footer, sage on white in a
|
||
card — so the content is shared without the styling being averaged into something that suits neither.
|
||
|
||
They take TWO classes each, and the outer one is not a convenience. A caller cannot put a class on the
|
||
tag it writes the th:replace on: th:replace swaps that whole tag out for the fragment, so the attribute
|
||
is dropped and nothing says so. Every call site here had tried it — an mt-4 that never spaced anything,
|
||
a text-bakery-800 that left the address a shade darker than the hours beside it.
|
||
*/-->
|
||
|
||
<ul th:fragment="hours(className, rowClass)" th:class="'space-y-3 ' + ${className}">
|
||
<li th:each="span : ${hours}" th:class="'flex justify-between gap-4 ' + ${rowClass}">
|
||
<span th:text="${span.days}">Tuesday – Friday</span>
|
||
<span class="font-medium whitespace-nowrap" th:text="${span.hours}">7:00am – 2:00pm</span>
|
||
</li>
|
||
</ul>
|
||
|
||
<address th:fragment="address(className, linkClass)" th:class="'not-italic space-y-3 ' + ${className}">
|
||
<p th:text="${shopStreet}">215 E Main Street</p>
|
||
<p th:text="${shopTown}">Princeville, IL 61559</p>
|
||
<p>
|
||
<a th:href="|tel:${shopPhone}|" th:class="${linkClass}" th:text="${shopPhoneSpoken}">(309) 701-0660</a>
|
||
</p>
|
||
<p class="break-words">
|
||
<a th:href="|mailto:${shopEmail}|" th:class="${linkClass}" th:text="${shopEmail}">[email protected]</a>
|
||
</p>
|
||
</address>
|
||
|
||
<!--/* "Open until 2:00pm", or when it opens next. The one thing a visitor at 2:30 on a Sunday wants. */-->
|
||
<!--/* The caller passes the display too (`inline-flex`, or `hidden lg:inline-flex`): setting it here as
|
||
well would be two rules for one property, and the winner would depend on Tailwind's output order
|
||
rather than on the markup. */-->
|
||
<span th:fragment="open-now(dotClass, textClass)"
|
||
th:class="'items-center gap-2 ' + ${textClass}">
|
||
<span th:class="'h-2 w-2 rounded-full shrink-0 ' + ${dotClass}" aria-hidden="true"></span>
|
||
<span th:text="${openNow.summary}">Open until 2:00pm</span>
|
||
</span>
|
||
</body>
|
||
</html>
|