GoToSocial-FE-Example/app/templates/home/index.html

52 lines
2.1 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html>
<head>
<title>Home Timeline Example</title>
</head>
<!--
Hey, this is *extremely* basic HTML and really ugly CSS.
You should not use this if you continue, make something else
This is notably also missing support for images, boosts,
tallying for each of those, links to the post, etc...
Just use this as an example for how to display posts.
-->
<body>
{% for post in home_timeline %}
<div style="padding: 2em;border: solid black 4px;margin: 2em;display: flex;overflow: auto;">
<div
style="max-height: 16em; display: flex; overflow: visible; max-width: 16em; flex-flow: column; border: black 4px solid; height: 16em;">
<div style=" margin: 1em; display: flex; flex-flow: column; overflow: auto;">
<div style="max-width: inherit;height: 100%;display: inherit;flex-flow: column;max-height: inherit;">
<img src="{{ post['account']['avatar'] }}" style="margin: auto;flex: auto;height: 100%;" />
<a href="{{ post['account']['url'] }}" style="width: auto; margin: auto;">{{
post['account']['display_name']
}}</a>
<a href="{{ post['account']['url'] }}" style="width: auto; margin: auto;">@{{
post['account']['acct']
}}</a>
</div>
</div>
</div>
<div style="margin-left: 2em; overflow: visible; flex: auto; display: inline-flex;border: solid black 4px;">
{% if post['sensitive'] %}
<details style="padding: 1em; margin: auto;">
<summary>{{ post['spoiler_text'] }}</summary>
<div style="padding: 1em; margin: auto;">
<p>{{ post['content'] | safe }}</p>
</div>
</details>
{% else%}
<div style="padding: 1em; margin: auto;">
<p>{{ post['content'] | safe }}</p>
</div>
{% endif %}
</div>
</div>
{% endfor %}
</body>
</html>