refactor: extract to card.html template
This commit is contained in:
parent
0653435474
commit
3ba18380d6
3 changed files with 89 additions and 172 deletions
75
templates/card.html
Normal file
75
templates/card.html
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
|
||||
<article class="card">
|
||||
<div class="card_avatar">
|
||||
{% if thread.account.avatar is defined %}
|
||||
<img class="avatar" src="{{ thread.account.avatar }}"
|
||||
alt="avatar of {{ thread.account.display_name }}"
|
||||
title="avatar of {{ thread.account.display_name }}" />
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="card_content" id="{{ thread.id }}">
|
||||
<div class="heading">
|
||||
<h2 class="author" rel="author">
|
||||
{{thread.account.display_name | safe}}
|
||||
</h2>
|
||||
|
||||
<div class="right_menu">
|
||||
<a href="{{ thread.url }}" title="{{ thread.created_at }}">
|
||||
<relative-time datetime="{{ thread.created_at }}" precision="day">{{ thread.created_at }}</relative-time>
|
||||
</a>
|
||||
<span>·</span>
|
||||
<a href="{{ url_for('threads.thread', id=thread['id']) + '#' + thread['id'] }}">Anchor</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="body">
|
||||
{{thread.content | safe}}
|
||||
{% if thread.descendants is defined %}
|
||||
{% for media in thread.media_attachments %}
|
||||
{% if media.type == 'image'%}
|
||||
<a href="{{ media.url }}">
|
||||
<img
|
||||
class="media"
|
||||
width="{{ media.meta.small.width }}"
|
||||
height="{{ media.meta.small.height }}"
|
||||
src="{{media.preview_url}}"
|
||||
alt="{{ media.description or 'media attachment' }}"
|
||||
title="{{ media.description or 'media attachment' }}"
|
||||
/>
|
||||
</a>
|
||||
{% elif media.type == 'gifv' %}
|
||||
<video
|
||||
class="media"
|
||||
controls
|
||||
autoplay="autoplay"
|
||||
muted
|
||||
loop
|
||||
alt="{{ media.description or 'media attachment' }}"
|
||||
title="{{ media.description or 'media attachment' }}"
|
||||
>
|
||||
<source src="{{media.url}}" type="video/mp4" />
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% if thread.media_attachments|length <= 0 and thread.card %}
|
||||
<a href="{{ thread.card.url }}">
|
||||
<div class="link_card">
|
||||
<small>
|
||||
{{ thread.card.provider_name or
|
||||
thread.card.provider_url }}
|
||||
</small>
|
||||
<strong>{{ thread.card.title }}</strong>
|
||||
<small>{{thread.card.description}}</small>
|
||||
</div>
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
{% if is_thread %}
|
||||
<a href="{{ url_for('threads.thread', id=thread.id) }}">Read full thread</a>
|
||||
{% endif %}
|
||||
</article>
|
||||
|
||||
3
templates/mock.html
Normal file
3
templates/mock.html
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<article>
|
||||
hey {{ data }}
|
||||
</article>
|
||||
|
|
@ -74,7 +74,7 @@
|
|||
}
|
||||
|
||||
main.thread {
|
||||
& li:not(:last-of-type) .card_avatar::after {
|
||||
& .card:not(:last-of-type) .card_avatar::after {
|
||||
content: " ";
|
||||
display: block;
|
||||
height: 100%;
|
||||
|
|
@ -91,13 +91,6 @@
|
|||
width: 50px;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
display: grid;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
.card {
|
||||
grid-template-columns: 55px auto;
|
||||
display: grid;
|
||||
|
|
@ -188,13 +181,6 @@
|
|||
|
||||
}
|
||||
|
||||
& .action {
|
||||
color: var(--color-link);
|
||||
margin: 1em 0;
|
||||
cursor: pointer;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
& .link_card {
|
||||
color: var(--text-color-dark-faded);
|
||||
text-decoration: underline;
|
||||
|
|
@ -220,7 +206,7 @@
|
|||
}
|
||||
|
||||
main.thread {
|
||||
& li:not(:last-of-type) .card_avatar::after {
|
||||
& .card:not(:last-of-type) .card_avatar::after {
|
||||
border-right: 2px solid rgba(197, 209, 222, 0.15);
|
||||
}
|
||||
}
|
||||
|
|
@ -266,165 +252,18 @@
|
|||
<div class="back">
|
||||
<a href="{{url_for('threads.home')}}">Back</a>
|
||||
</div>
|
||||
|
||||
<ul>
|
||||
{% for thread in threads %}
|
||||
<li class="card">
|
||||
<div class="card_avatar">
|
||||
{% if thread.account.avatar is defined %}
|
||||
<img class="avatar" src="{{ thread.account.avatar }}"
|
||||
alt="avatar of {{ thread.account.display_name }}"
|
||||
title="avatar of {{ thread.account.display_name }}" />
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="card_content" id="{{ thread.id }}">
|
||||
<div class="heading">
|
||||
<h2 class="author" rel="author">
|
||||
{{thread.account.display_name | safe}}
|
||||
</h2>
|
||||
|
||||
<div class="right_menu">
|
||||
<a href="{{ thread.url }}" title="{{ thread.created_at }}">
|
||||
<relative-time datetime="{{ thread.created_at }}" precision="day">{{ thread.created_at }}</relative-time>
|
||||
</a>
|
||||
<span>·</span>
|
||||
<a href="{{ url_for('threads.thread', id=thread['id']) + '#' + thread['id'] }}">Anchor</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="body">
|
||||
{{thread.content | safe}}
|
||||
{% if thread.descendants is defined %}
|
||||
{% for media in thread.media_attachments %}
|
||||
{% if media.type == 'image'%}
|
||||
<a href="{{ media.url }}">
|
||||
<img
|
||||
class="media"
|
||||
width="{{ media.meta.small.width }}"
|
||||
height="{{ media.meta.small.height }}"
|
||||
src="{{media.preview_url}}"
|
||||
alt="{{ media.description or 'media attachment' }}"
|
||||
title="{{ media.description or 'media attachment' }}"
|
||||
/>
|
||||
</a>
|
||||
{% elif media.type == 'gifv' %}
|
||||
<video
|
||||
class="media"
|
||||
controls
|
||||
autoplay="autoplay"
|
||||
muted
|
||||
loop
|
||||
alt="{{ media.description or 'media attachment' }}"
|
||||
title="{{ media.description or 'media attachment' }}"
|
||||
>
|
||||
<source src="{{media.url}}" type="video/mp4" />
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% if thread.media_attachments|length <= 0 and thread.card %}
|
||||
<a href="{{ thread.card.url }}">
|
||||
<div class="link_card">
|
||||
<small>
|
||||
{{ thread.card.provider_name or
|
||||
thread.card.provider_url }}
|
||||
</small>
|
||||
<strong>{{ thread.card.title }}</strong>
|
||||
<small>{{thread.card.description}}</small>
|
||||
</div>
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
|
||||
{% if thread.descendants is defined %}
|
||||
</li>
|
||||
{% for descendant in thread.descendants %}
|
||||
<li class="card descendant">
|
||||
<div class="card_avatar">
|
||||
{% if descendant.account.avatar is defined %}
|
||||
<img class="avatar" src="{{ descendant.account.avatar }}"
|
||||
alt="avatar of {{ descendant.account.display_name }}"
|
||||
title="avatar of {{ descendant.account.display_name }}" />
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="card_content" id="{{ descendant.id }}">
|
||||
<div class="heading">
|
||||
<h2 class="author" rel="author">
|
||||
{{descendant.account.display_name | safe}}
|
||||
</h2>
|
||||
|
||||
<div class="right_menu">
|
||||
<a href="{{ descendant.url }}" title="{{ descendant.created_at }}">
|
||||
<relative-time datetime="{{ descendant.created_at }}" precision="day">{{ descendant.created_at }}</relative-time>
|
||||
</a>
|
||||
<span>·</span>
|
||||
<a href="{{ url_for('threads.thread', id=thread['id']) + '#' + descendant['id'] }}">Anchor</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="body">
|
||||
{{ descendant.content | safe }}
|
||||
{% for media in descendant.media_attachments %}
|
||||
{% if media.type == 'image'%}
|
||||
<a href="{{ media.url }}">
|
||||
<img
|
||||
class="media"
|
||||
width="{{ media.meta.small.width }}"
|
||||
height="{{ media.meta.small.height }}"
|
||||
src="{{ media.preview_url}} "
|
||||
alt="{{ media.description or 'media attachment' }}"
|
||||
title="{{ media.description or 'media attachment' }}"
|
||||
/>
|
||||
</a>
|
||||
{% elif media.type == 'gifv' %}
|
||||
<video
|
||||
class="media"
|
||||
controls
|
||||
autoplay="autoplay"
|
||||
muted
|
||||
loop
|
||||
alt="{{ media.description or 'media attachment' }}"
|
||||
title="{{ media.description or 'media attachment' }}"
|
||||
>
|
||||
<source src="{{media.url}}" type="video/mp4" />
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% if descendant.media_attachments|length <= 0 and descendant.card %}
|
||||
<a href="{{ descendant.card.url }}">
|
||||
<div class="link_card">
|
||||
<small>
|
||||
{{ descendant.card.provider_name or
|
||||
descendant.card.provider_url }}
|
||||
</small>
|
||||
<strong>{{ descendant.card.title }}</strong>
|
||||
<small>{{descendant.card.description}}</small>
|
||||
</div>
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
{% with thread=thread, is_thread=threads|length > 1 %}
|
||||
{% include "card.html" %}
|
||||
{% endwith %}
|
||||
{% if thread.descendants is defined %}
|
||||
{% for descendant in thread.descendants %}
|
||||
{% with thread=descendant %}
|
||||
{% include "card.html" %}
|
||||
{% endwith %}
|
||||
{% endfor %}
|
||||
|
||||
{% else %}
|
||||
<a
|
||||
class="action"
|
||||
href="{{ url_for('threads.thread', id=thread.id) }}"
|
||||
>Read full thread</a
|
||||
>
|
||||
</li>
|
||||
{% endif %}
|
||||
</div>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<a href="#top">Top</a>
|
||||
</main>
|
||||
<footer>
|
||||
|
|
|
|||
Loading…
Reference in a new issue