silberengel
/
newsroom
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Styles and templates

imwald
Nuša Pukšič 3 months ago
parent
ea6ca2f9fd
commit
20e448c8f8
6 changed files with 176 additions and 243 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      assets/styles/02-layout/layout.css
  2. 18
      assets/styles/04-pages/forum.css
  3. 233
      templates/pages/author-about.html.twig
  4. 25
      templates/pages/author-media.html.twig
  5. 110
      templates/pages/author.html.twig
  6. 29
      templates/partial/_author-section.html.twig

4
assets/styles/02-layout/layout.css
Unescape View File

@ -156,6 +156,10 @@ aside header { @@ -156,6 +156,10 @@ aside header {
main {
margin-top: 60px;
padding: 0;
}
article {
padding: 0 var(--spacing-3);
}

18
assets/styles/04-pages/forum.css
Unescape View File

@ -76,12 +76,13 @@ @@ -76,12 +76,13 @@
.sub-card {
border: 1px solid var(--color-primary);
background: #fff;
padding: 1rem;
display: flex;
flex-direction: column;
justify-content: space-between;
border: 1px solid var(--color-primary);
background: #fff;
padding: 1rem;
display: flex;
flex-direction: column;
justify-content: space-between;
margin: 0 var(--spacing-3);
}
.sub-card h3 {
@ -100,8 +101,9 @@ flex-shrink: 0; @@ -100,8 +101,9 @@ flex-shrink: 0;
}
.articles-list {
list-style: none;
padding: 0;
list-style: none;
padding: 0;
margin: 0 var(--spacing-3);
}
.article-item {

233
templates/pages/author-about.html.twig
Unescape View File

@ -1,152 +1,141 @@ @@ -1,152 +1,141 @@
{% extends 'layout.html.twig' %}
{% block body %}
<h1><twig:Atoms:NameOrNpub :author="author" :npub="npub"></twig:Atoms:NameOrNpub></h1>
{% if author.nip05 is defined %}
{% if author.nip05 is iterable %}
{% for nip05Value in author.nip05 %}
<twig:Atoms:Nip05Badge
nip05="{{ nip05Value }}"
:npub="npub"
/>
{% endfor %}
{% else %}
<twig:Atoms:Nip05Badge
nip05="{{ author.nip05 }}"
:npub="npub"
/>
{% endif %}
{% endif %}
<div class="profile-tabs">
<a href="{{ path('author-profile', {'npub': npub}) }}" class="tab-link">Articles</a>
<a href="{{ path('author-media', {'npub': npub}) }}" class="tab-link">Media</a>
<a href="{{ path('author-about', {'npub': npub}) }}" class="tab-link active">About</a>
</div>
<div class="w-container mt-4">
<div class="profile-details">
<h2>Profile Information</h2>
{% if author.about is defined %}
<div class="profile-field">
<h3>About</h3>
<div class="profile-value">
{{ author.about|markdown_to_html|mentionify|linkify }}
{% import 'partial/_author-section.html.twig', {author: author, npub: npub} %}
<section>
<div class="profile-tabs">
<a href="{{ path('author-profile', {'npub': npub}) }}" class="tab-link">Articles</a>
<a href="{{ path('author-media', {'npub': npub}) }}" class="tab-link">Media</a>
<a href="{{ path('author-about', {'npub': npub}) }}" class="tab-link active">About</a>
</div>
<div class="w-container mt-4">
<div class="profile-details">
<h2>Profile Information</h2>
{% if author.about is defined %}
<div class="profile-field">
<h3>About</h3>
<div class="profile-value">
{{ author.about|markdown_to_html|mentionify|linkify }}
</div>
</div>
</div>
{% endif %}
{% endif %}
{% if author.banner is defined %}
<div class="profile-field">
<h3>Banner</h3>
<div class="profile-value">
<img src="{{ author.banner }}" alt="Profile banner" style="max-width: 100%; height: auto;" onerror="this.style.display = 'none'" />
{% if author.banner is defined %}
<div class="profile-field">
<h3>Banner</h3>
<div class="profile-value">
<img src="{{ author.banner }}" alt="Profile banner" style="max-width: 100%; height: auto;" onerror="this.style.display = 'none'" />
</div>
</div>
</div>
{% endif %}
{% endif %}
{% if author.website is defined %}
<div class="profile-field">
<h3>Website</h3>
<div class="profile-value">
<a href="{{ author.website }}" target="_blank" rel="noopener noreferrer">{{ author.website }}</a>
{% if author.website is defined %}
<div class="profile-field">
<h3>Website</h3>
<div class="profile-value">
<a href="{{ author.website }}" target="_blank" rel="noopener noreferrer">{{ author.website }}</a>
</div>
</div>
</div>
{% endif %}
{% endif %}
{% if author.lud16 is defined %}
<div class="profile-field">
<h3>Lightning Address{{ author.lud16 is iterable and author.lud16|length > 1 ? 'es' : '' }}</h3>
<div class="profile-value">
{% if author.lud16 is iterable %}
{% for address in author.lud16 %}
<div class="mb-1">
<code>{{ address }}</code>
</div>
{% endfor %}
{% else %}
<code>{{ author.lud16 }}</code>
{% endif %}
</div>
</div>
{% endif %}
{% if author.lud06 is defined %}
<div class="profile-field">
<h3>LNURL{{ author.lud06 is iterable and author.lud06|length > 1 ? 's' : '' }}</h3>
<div class="profile-value">
{% if author.lud06 is iterable %}
{% for lnurl in author.lud06 %}
<div class="mb-1">
<code style="word-break: break-all;">{{ lnurl }}</code>
</div>
{% endfor %}
{% else %}
<code style="word-break: break-all;">{{ author.lud06 }}</code>
{% endif %}
</div>
</div>
{% endif %}
{% if author.lud16 is defined %}
<div class="profile-field">
<h3>Lightning Address{{ author.lud16 is iterable and author.lud16|length > 1 ? 'es' : '' }}</h3>
<h3>Public Key (hex)</h3>
<div class="profile-value">
{% if author.lud16 is iterable %}
{% for address in author.lud16 %}
<div class="mb-1">
<code>{{ address }}</code>
</div>
{% endfor %}
{% else %}
<code>{{ author.lud16 }}</code>
{% endif %}
<code style="word-break: break-all;">{{ pubkey }}</code>
</div>
</div>
{% endif %}
{% if author.lud06 is defined %}
<div class="profile-field">
<h3>LNURL{{ author.lud06 is iterable and author.lud06|length > 1 ? 's' : '' }}</h3>
<h3>Public Key (npub)</h3>
<div class="profile-value">
{% if author.lud06 is iterable %}
{% for lnurl in author.lud06 %}
<div class="mb-1">
<code style="word-break: break-all;">{{ lnurl }}</code>
</div>
{% endfor %}
{% else %}
<code style="word-break: break-all;">{{ author.lud06 }}</code>
{% endif %}
<code style="word-break: break-all;">{{ npub }}</code>
</div>
</div>
{% endif %}
<div class="profile-field">
<h3>Public Key (hex)</h3>
<div class="profile-value">
<code style="word-break: break-all;">{{ pubkey }}</code>
</div>
</div>
<div class="profile-field">
<h3>Public Key (npub)</h3>
<div class="profile-value">
<code style="word-break: break-all;">{{ npub }}</code>
</div>
</div>
{# Display any additional fields that might be present #}
{% set standardFields = ['name', 'display_name', 'about', 'picture', 'banner', 'nip05', 'website', 'lud16', 'lud06', 'image'] %}
{% for key, value in author %}
{% if key not in standardFields and value is not empty %}
<div class="profile-field">
<h3>{{ key|title }}</h3>
<div class="profile-value">
{% if value starts with 'http://' or value starts with 'https://' %}
<a href="{{ value }}" target="_blank" rel="noopener noreferrer">{{ value }}</a>
{% else %}
{{ value }}
{% endif %}
{# Display any additional fields that might be present #}
{% set standardFields = ['name', 'display_name', 'about', 'picture', 'banner', 'nip05', 'website', 'lud16', 'lud06', 'image'] %}
{% for key, value in author %}
{% if key not in standardFields and value is not empty %}
<div class="profile-field">
<h3>{{ key|title }}</h3>
<div class="profile-value">
{% if value starts with 'http://' or value starts with 'https://' %}
<a href="{{ value }}" target="_blank" rel="noopener noreferrer">{{ value }}</a>
{% else %}
{{ value }}
{% endif %}
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
{% endif %}
{% endfor %}
</div>
{# Raw Event Debug Section #}
<div class="mt-6 p-4 bg-gray-100 rounded">
<details>
<summary class="cursor-pointer font-semibold text-lg mb-2">Raw Profile Event (Debug)</summary>
<div class="mt-2">
<h4 class="font-semibold">Event ID:</h4>
<pre class="bg-white p-2 rounded overflow-x-auto"><code>{{ rawEvent.id ?? 'N/A' }}</code></pre>
{# Raw Event Debug Section #}
<div class="mt-6 p-4 bg-gray-100 rounded">
<details>
<summary class="cursor-pointer font-semibold text-lg mb-2">Raw Profile Event (Debug)</summary>
<div class="mt-2">
<h4 class="font-semibold">Event ID:</h4>
<pre class="bg-white p-2 rounded overflow-x-auto"><code>{{ rawEvent.id ?? 'N/A' }}</code></pre>
<h4 class="font-semibold mt-3">Created At:</h4>
<pre class="bg-white p-2 rounded overflow-x-auto"><code>{{ rawEvent.created_at ?? 'N/A' }} ({{ rawEvent.created_at is defined ? rawEvent.created_at|date('Y-m-d H:i:s') : 'N/A' }})</code></pre>
<h4 class="font-semibold mt-3">Created At:</h4>
<pre class="bg-white p-2 rounded overflow-x-auto"><code>{{ rawEvent.created_at ?? 'N/A' }} ({{ rawEvent.created_at is defined ? rawEvent.created_at|date('Y-m-d H:i:s') : 'N/A' }})</code></pre>
<h4 class="font-semibold mt-3">Tags:</h4>
<pre class="bg-white p-2 rounded overflow-x-auto"><code>{{ rawEvent.tags is defined ? rawEvent.tags|json_encode(constant('JSON_PRETTY_PRINT')) : '[]' }}</code></pre>
<h4 class="font-semibold mt-3">Tags:</h4>
<pre class="bg-white p-2 rounded overflow-x-auto"><code>{{ rawEvent.tags is defined ? rawEvent.tags|json_encode(constant('JSON_PRETTY_PRINT')) : '[]' }}</code></pre>
<h4 class="font-semibold mt-3">Content (JSON):</h4>
<pre class="bg-white p-2 rounded overflow-x-auto"><code>{{ rawEvent.content ?? '{}' }}</code></pre>
<h4 class="font-semibold mt-3">Content (JSON):</h4>
<pre class="bg-white p-2 rounded overflow-x-auto"><code>{{ rawEvent.content ?? '{}' }}</code></pre>
<h4 class="font-semibold mt-3">Signature:</h4>
<pre class="bg-white p-2 rounded overflow-x-auto text-xs"><code>{{ rawEvent.sig ?? 'N/A' }}</code></pre>
<h4 class="font-semibold mt-3">Signature:</h4>
<pre class="bg-white p-2 rounded overflow-x-auto text-xs"><code>{{ rawEvent.sig ?? 'N/A' }}</code></pre>
<h4 class="font-semibold mt-3">Full Event Object:</h4>
<pre class="bg-white p-2 rounded overflow-x-auto text-xs"><code>{{ rawEvent|json_encode(constant('JSON_PRETTY_PRINT')) }}</code></pre>
</div>
</details>
<h4 class="font-semibold mt-3">Full Event Object:</h4>
<pre class="bg-white p-2 rounded overflow-x-auto text-xs"><code>{{ rawEvent|json_encode(constant('JSON_PRETTY_PRINT')) }}</code></pre>
</div>
</details>
</div>
</div>
</div>
</section>
<style>
.profile-details {

25
templates/pages/author-media.html.twig
Unescape View File

@ -1,28 +1,10 @@ @@ -1,28 +1,10 @@
{% extends 'layout.html.twig' %}
{% block body %}
<h1><twig:Atoms:NameOrNpub :author="author" :npub="npub"></twig:Atoms:NameOrNpub></h1>
{% if author.nip05 is defined %}
{% if author.nip05 is iterable %}
{% for nip05Value in author.nip05 %}
<twig:Atoms:Nip05Badge
nip05="{{ nip05Value }}"
:npub="npub"
/>
{% endfor %}
{% else %}
<twig:Atoms:Nip05Badge
nip05="{{ author.nip05 }}"
:npub="npub"
/>
{% endif %}
{% endif %}
<div class="mt-2">
{% if author.about is defined %}
{{ author.about|markdown_to_html|mentionify|linkify }}
{% endif %}
</div>
{% import 'partial/_author-section.html.twig', {author: author, npub: npub} %}
<section>
<div class="profile-tabs">
<a href="{{ path('author-profile', {'npub': npub}) }}" class="tab-link">Articles</a>
<a href="{{ path('author-media', {'npub': npub}) }}" class="tab-link active">Media</a>
@ -162,4 +144,5 @@ @@ -162,4 +144,5 @@
</div>
{% endif %}
</div>
</section>
{% endblock %}

110
templates/pages/author.html.twig
Unescape View File

@ -1,101 +1,27 @@ @@ -1,101 +1,27 @@
{% extends 'layout.html.twig' %}
{% block body %}
<h1><twig:Atoms:NameOrNpub :author="author" :npub="npub"></twig:Atoms:NameOrNpub></h1>
{% if author.bot is defined %}
<div class="tags">
<span class="tag">bot</span>
</div>
{% endif %}
{% if author.nip05 is defined %}
{% if author.nip05 is iterable %}
{% for nip05Value in author.nip05 %}
<twig:Atoms:Nip05Badge
nip05="{{ nip05Value }}"
:npub="npub"
/>
{% endfor %}
{% else %}
<twig:Atoms:Nip05Badge
nip05="{{ author.nip05 }}"
:npub="npub"
/>
{% endif %}
{% endif %}
<div class="mt-2">
{% if author.about is defined %}
{{ author.about|markdown_to_html|mentionify|linkify }}
{% endif %}
</div>
<div class="profile-tabs">
<a href="{{ path('author-profile', {'npub': npub}) }}" class="tab-link active">Articles</a>
<a href="{{ path('author-media', {'npub': npub}) }}" class="tab-link">Media</a>
{% if is_granted('ROLE_ADMIN') %}
<a href="{{ path('author-about', {'npub': npub}) }}" class="tab-link">About</a>
{% endif %}
</div>
{# {% if relays|length > 0 %}#}
{# {% for rel in relays %}#}
{# <p>{{ rel }}</p>#}
{# {% endfor %}#}
{# {% endif %}#}
{# {% if app.user and app.user.userIdentifier is same as npub %}#}
{# <div id="invoice-component" class="p-4 bg-gray-100 rounded-lg">#}
{# <h3 class="text-xl font-semibold mb-4">Purchase Search Credits</h3>#}
{# <div class="mb-4">#}
{# <p>Amount: {{ amount ?? 0 }} sats</p>#}
{# <p>Status: <span id="payment-status">Pending</span></p>#}
{# </div>#}
{# #}{# You can access the width and height via the matrix #}
{# #}{# Replace the string with the invoice #}
{# {% set qrCode = qr_code_result('My QR Code') %}#}
{# <img src="{{ qrCode.dataUri }}" width="{{ qrCode.matrix.outerSize }}" alt="invoice-qr" />#}
{% import 'partial/_author-section.html.twig', {author: author, npub: npub} %}
{# <br>#}
{# <button id="check-payment" class="px-4 py-2 bg-blue-500 text-white rounded">Check Payment Status</button>#}
{# <script>#}
{# document.getElementById('check-payment').addEventListener('click', async () => {#}
{# const response = await fetch('/payment-status/{{ payment_hash ?? '' }}');#}
{# const data = await response.json();#}
{# if (data.status === 'paid') {#}
{# document.getElementById('payment-status').innerText = 'Paid';#}
{# } else {#}
{# document.getElementById('payment-status').innerText = 'Pending';#}
{# }#}
{# });#}
{# </script>#}
{# </div>#}
{# {% endif %}#}
{# {% if nzine %}#}
{# <a href="{{ path('nzine_view', {npub: author.npub}) }}">View as N-Zine</a>#}
{# <h2>List of indices</h2>#}
{# {% for i in idx %}#}
{# {{ i.title }}#}
{# {% endfor %}#}
{# {% endif %}#}
<section>
<div class="profile-tabs">
<a href="{{ path('author-profile', {'npub': npub}) }}" class="tab-link active">Articles</a>
<a href="{{ path('author-media', {'npub': npub}) }}" class="tab-link">Media</a>
{% if is_granted('ROLE_ADMIN') %}
<a href="{{ path('author-about', {'npub': npub}) }}" class="tab-link">About</a>
{% endif %}
</div>
<div class="w-container">
{% if articles|length > 0 %}
<twig:Organisms:CardList :list="articles" class="article-list"></twig:Organisms:CardList>
{% else %}
<div class="no-media">
<p>No articles found for this author.</p>
<div class="w-container">
{% if articles|length > 0 %}
<twig:Organisms:CardList :list="articles" class="article-list"></twig:Organisms:CardList>
{% else %}
<div class="no-media">
<p>No articles found for this author.</p>
</div>
{% endif %}
</div>
{% endif %}
</div>
</section>
{% endblock %}
{% block aside %}
{# <twig:Organisms:ZineList :nzines="nzines" />#}
{% endblock %}

29
templates/partial/_author-section.html.twig
Unescape View File

@ -0,0 +1,29 @@ @@ -0,0 +1,29 @@
<section>
<h1><twig:Atoms:NameOrNpub :author="author" :npub="npub"></twig:Atoms:NameOrNpub></h1>
{% if author.bot is defined %}
<div class="tags">
<span class="tag">bot</span>
</div>
{% endif %}
{% if author.nip05 is defined %}
{% if author.nip05 is iterable %}
{% for nip05Value in author.nip05 %}
<twig:Atoms:Nip05Badge
nip05="{{ nip05Value }}"
:npub="npub"
/>
{% endfor %}
{% else %}
<twig:Atoms:Nip05Badge
nip05="{{ author.nip05 }}"
:npub="npub"
/>
{% endif %}
{% endif %}
<div class="mt-2">
{% if author.about is defined %}
{{ author.about|markdown_to_html|mentionify|linkify }}
{% endif %}
</div>
</section>
Write Preview
Loading…
Cancel
Save