Browse Source

fix styling

imwald
Silberengel 4 days ago
parent
commit
a7f35ff173
  1. 56
      assets/styles/article.css
  2. 22
      assets/styles/layout.css
  3. 2
      config/services.yaml
  4. 4
      config/unfold.yaml
  5. 2
      src/Service/ArticleCommentThreadLoader.php
  6. 15
      src/Service/NostrShareMenuBuilder.php
  7. 65
      src/Twig/MagazineJumbleExtension.php
  8. 3
      templates/components/Footer.html.twig
  9. 1
      templates/components/Header.html.twig
  10. 4
      templates/components/Molecules/NostrShareMenu.html.twig
  11. 2
      templates/components/Organisms/Comments.html.twig

56
assets/styles/article.css

@ -128,21 +128,49 @@ blockquote p { @@ -128,21 +128,49 @@ blockquote p {
gap: 0.35rem;
}
/* Thread depth: light indent, max visual level 3 (deeper uses --depth-3) */
.comments .card.comment--depth-0 {
margin-left: 0;
/* Tracebacks: same flex+gap as .comments so spacing isn’t lost to margin collapse or .card { margin } from app.css */
.comments-quotes__list {
display: flex;
flex-direction: column;
gap: 0.4rem;
min-height: 0;
}
.comments-quotes__list > .card.comment--quote {
margin: 0; /* override app.css .card { margin-bottom: 50px } */
flex-shrink: 0;
}
.comments .card.comment--depth-1 {
margin-left: 0.28rem;
.comments-quotes__list .card.comment--quote .card-footer.nostr-previews {
margin-top: 0.75rem;
}
.comments .card.comment--depth-2 {
margin-left: 0.6rem;
/* Thread: no depth indent; one accent color for all replies; compact vertical rhythm */
.comments {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.comments .card.comment {
margin-left: 0;
margin-bottom: 0;
padding: 0.5rem 0.65rem 0.5rem 0.7rem;
border-radius: 6px;
border: 1px solid var(--color-border);
border-left: 3px solid var(--color-primary);
}
.comments .card.comment--depth-0,
.comments .card.comment--depth-1,
.comments .card.comment--depth-2,
.comments .card.comment--depth-3 {
margin-left: 0.95rem;
margin-left: 0;
border-left-color: var(--color-primary);
}
.comments .card.comment .metadata {
margin-bottom: 0.4rem;
}
.comment__reply-blurb {
@ -185,13 +213,13 @@ blockquote p { @@ -185,13 +213,13 @@ blockquote p {
}
.comment-reply {
margin-top: 1rem;
padding-top: 1rem;
margin-top: 0.45rem;
padding-top: 0.45rem;
border-top: 1px solid var(--color-border);
}
.comment-reply--article {
margin-bottom: 1.5rem;
margin-bottom: 0.75rem;
border: 1px solid var(--color-border);
border-radius: 6px;
border-top: 1px solid var(--color-border);
@ -219,8 +247,8 @@ blockquote p { @@ -219,8 +247,8 @@ blockquote p {
}
.comment-reply__toolbar--inline {
margin-bottom: 0.25rem;
margin-top: 0.5rem;
margin-bottom: 0.15rem;
margin-top: 0.3rem;
justify-content: flex-end;
}
@ -243,7 +271,7 @@ blockquote p { @@ -243,7 +271,7 @@ blockquote p {
}
.comment-reply--nested {
margin-top: 0.5rem;
margin-top: 0.3rem;
}
.comment-reply__head {

22
assets/styles/layout.css

@ -92,13 +92,28 @@ nav a:hover { @@ -92,13 +92,28 @@ nav a:hover {
}
.nostr-share-menu__trigger {
display: inline-flex;
align-items: center;
gap: 0.2rem;
min-width: 2.25rem;
font-size: 1.15rem;
font-size: 0.9rem;
line-height: 1.2;
padding: 0.2rem 0.45rem;
list-style: none;
}
.nostr-share-menu__label {
font-size: 0.85rem;
font-weight: 600;
white-space: nowrap;
}
.nostr-share-menu__glyph {
font-size: 1.1rem;
line-height: 1;
opacity: 0.9;
}
.nostr-share-menu__trigger::-webkit-details-marker {
display: none;
}
@ -578,6 +593,11 @@ footer { @@ -578,6 +593,11 @@ footer {
text-align: center;
}
.site-footer__jumble {
margin: 0 0 0.65rem;
font-size: 0.95rem;
}
.site-footer__legal {
margin: 1rem 0 0;
font-size: 0.95rem;

2
config/services.yaml

@ -47,6 +47,8 @@ services: @@ -47,6 +47,8 @@ services:
tags: [ 'twig.extension' ]
App\Twig\NostrShareMenuExtension:
tags: [ 'twig.extension' ]
App\Twig\MagazineJumbleExtension:
tags: [ 'twig.extension' ]
# Nostr index snapshots: distinct key prefix from other cache.app users.
App\Service\MagazineIndexStore:
arguments:

4
config/unfold.yaml

@ -45,8 +45,8 @@ parameters: @@ -45,8 +45,8 @@ parameters:
magazine_prewarm_also_slugs: '%env(default:magazine_prewarm_also_slugs_empty:MAGAZINE_PREWARM_ALSO_SLUGS)%'
external_links:
- title: "Unfold"
url: "https://github.com/decent-newsroom/unfold"
description: "Project source code on GitHub."
url: "https://git.imwald.eu/silberengel/unfold/src/branch/imwald"
description: "This site’s Unfold source (imwald branch)."
- title: "Decent Newsroom"
url: "https://decentnewsroom.com/"
description: "Decentralized magazine platform."

2
src/Service/ArticleCommentThreadLoader.php

@ -309,7 +309,7 @@ final readonly class ArticleCommentThreadLoader @@ -309,7 +309,7 @@ final readonly class ArticleCommentThreadLoader
$pRaw = isset($parent->content) ? (string) $parent->content : '';
$preview = $this->parentEventTextPreviewForBlurb($pRaw);
if ($preview !== '') {
$blurb = '> *'.'Replying to thread'.'* — '."\n> ".$preview;
$blurb = '> *'.'Reply to'.'* — '."\n> ".$preview;
}
}
}

15
src/Service/NostrShareMenuBuilder.php

@ -106,18 +106,13 @@ final class NostrShareMenuBuilder @@ -106,18 +106,13 @@ final class NostrShareMenuBuilder
return new Key();
}
public function buildForRequest(Request $request): ?NostrShareMenuContext
/**
* Context for the header Nostr menu. Always returns a context on real HTTP requests (never null).
* Templates that do not include the header never call this; no need to suppress on XHR / fragments.
*/
public function buildForRequest(Request $request): NostrShareMenuContext
{
if ($request->isXmlHttpRequest() || 'xmlhttprequest' === strtolower((string) $request->headers->get('X-Requested-With'))) {
return null;
}
if ($request->attributes->getBoolean('_embed')) {
return null;
}
$route = (string) $request->attributes->get('_route', '');
if (str_ends_with($route, 'fragment') || str_starts_with($request->getPathInfo(), '/fragment/')) {
return null;
}
if ('' === $route) {
return $this->siteWithRootMenu();
}

65
src/Twig/MagazineJumbleExtension.php

@ -0,0 +1,65 @@ @@ -0,0 +1,65 @@
<?php
declare(strict_types=1);
namespace App\Twig;
use App\Enum\KindsEnum;
use App\Nostr\Nip19Addressable;
use swentel\nostr\Key\Key;
use Symfony\Component\DependencyInjection\Attribute\Autowire;
use Twig\Extension\AbstractExtension;
use Twig\TwigFunction;
/**
* Footer “View this magazine on Jumble”: Jumble /feed/notes/{naddr} for the site root kind 30040 index.
*/
final class MagazineJumbleExtension extends AbstractExtension
{
public function __construct(
#[Autowire('%npub%')]
private readonly string $siteNpub,
#[Autowire('%d_tag%')]
private readonly string $rootMagazineDTag,
#[Autowire('%jumble_feed_notes_base%')]
private readonly string $jumbleFeedNotesBase,
) {
}
public function getFunctions(): array
{
return [
new TwigFunction('magazine_on_jumble_url', $this->magazineOnJumbleUrl(...)),
];
}
public function magazineOnJumbleUrl(): string
{
$key = new Key();
try {
$pubkeyHex = $key->convertToHex($this->siteNpub);
} catch (\Throwable) {
return '#';
}
if (64 !== \strlen($pubkeyHex) || !ctype_xdigit($pubkeyHex)) {
return '#';
}
$d = \trim($this->rootMagazineDTag);
if ($d === '') {
return '#';
}
try {
$naddr = Nip19Addressable::naddrBech32(
KindsEnum::PUBLICATION_INDEX->value,
strtolower($pubkeyHex),
$d,
[],
);
} catch (\Throwable) {
return '#';
}
$b = \rtrim($this->jumbleFeedNotesBase, '/');
return $b === '' ? $naddr : $b.'/'.$naddr;
}
}

3
templates/components/Footer.html.twig

@ -24,6 +24,9 @@ @@ -24,6 +24,9 @@
</nav>
</div>
<div class="site-footer__main">
<p class="site-footer__jumble">
<a class="site-footer__link" href="{{ magazine_on_jumble_url()|e('html_attr') }}" target="_blank" rel="nofollow noopener noreferrer">View this magazine on Jumble</a>
</p>
<div class="footer-links">
{% for link in footer_links %}
<div class="footer-link">

1
templates/components/Header.html.twig

@ -9,7 +9,6 @@ @@ -9,7 +9,6 @@
</h1>
</a>
<div class="header__end">
{% include 'components/Molecules/NostrShareMenu.html.twig' %}
<button class="hamburger btn btn-secondary" data-action="click->menu#toggle" aria-label="Menu">&#9776;</button>
</div>
</div>

4
templates/components/Molecules/NostrShareMenu.html.twig

@ -1,7 +1,9 @@ @@ -1,7 +1,9 @@
{% set share = nostr_share_menu() %}
{% if share is not null %}
<details class="nostr-share-menu">
<summary class="nostr-share-menu__trigger btn btn-secondary btn-sm" title="Nostr options" aria-label="Nostr options">⋯</summary>
<summary class="nostr-share-menu__trigger btn btn-secondary btn-sm" title="Nostr options" aria-label="Nostr options">
<span class="nostr-share-menu__label">Nostr</span><span class="nostr-share-menu__glyph" aria-hidden="true">⋯</span>
</summary>
<ul class="nostr-share-menu__list" role="menu">
{% if share.npub is not null and share.npub is not same as('') %}
<li class="nostr-share-menu__item" role="none"

2
templates/components/Organisms/Comments.html.twig

@ -165,6 +165,7 @@ @@ -165,6 +165,7 @@
<div class="comments-quotes">
<h3 class="comments-quotes__title">Quotes and references</h3>
<p class="text-subtle comments-quotes__lede">Other notes that cite this article in a <code>q</code> tag (NIP-18) or reference its address in <code>a</code> / <code>A</code> (e.g. generic reposts, highlights).</p>
<div class="comments-quotes__list">
{% for item in quotes %}
{% set cid = item.id|default('') %}
{% set cpk = item.pubkey|default('') %}
@ -204,5 +205,6 @@ @@ -204,5 +205,6 @@
{% endif %}
</div>
{% endfor %}
</div>
</div>
{% endif %}

Loading…
Cancel
Save