ayo/threads
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: show avatar; adjust layout

Browse source
This commit is contained in:
Ayo Ayco 2024-04-24 13:46:16 +02:00
parent f218e205e7
commit f27ea9278f
1 changed files with 61 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
templates/threads.html
View file

@ -10,14 +10,13 @@
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
max-width: 570px; max-width: 570px;
margin: 0 auto; margin: 0 auto;
padding: 1em;
} }
header { header, footer {
background: linear-gradient(45deg, #3054bf, #416fff); background: linear-gradient(45deg, #3054bf, #416fff);
color: white; color: white;
width: 100%;
padding: 1em; padding: 1em;
border-radius: 5px; border-radius: 5px;
margin: 1em 0;
} }
summary { summary {
cursor: pointer; cursor: pointer;
@ -27,30 +26,43 @@
list-style: none; list-style: none;
} }
.card { .card {
display:block;
margin-left: -40px; margin-left: -40px;
margin-top: 1em; margin-top: 1em;
border: 1px solid rgba(34, 34, 34, 0.15); border: 1px solid rgba(34, 34, 34, 0.35);
border-radius: 5px; border-radius: 5px;
padding:1em; padding:1em;
background-color: #fff; background-color: #fff;
box-shadow: 5px 25px 10px -25px rgba(34, 34, 34, 0.15); box-shadow: 5px 25px 10px -25px rgba(34, 34, 34, 0.15);
} display: grid;
.card_meta { grid-template-columns: 55px auto;
font-size: small; color: #888; gap: 5px;
} }
.card_content { .card_content {
width
& * { & * {
margin-top: 1em; margin-top: 1em;
} }
& img, & video { & img, & video {
border-radius: 5px; border-radius: 5px;
max-width: 100%; max-width: 100%;
height: 300px;
object-fit: cover; object-fit: cover;
} }
& .meta {
font-size: small; color: #888;
} }
}
.card_avatar img {
border: 1px solid rgba(34, 34, 34, 0.35);
border-radius: 50%;
display: inline;
width: 50px;
}
</style> </style>
</head> </head>
<body> <body>
@ -62,10 +74,18 @@
<ul> <ul>
{% for thread in threads %} {% for thread in threads %}
<li class="card"> <li class="card">
<div class="card_meta">
<div class="card_avatar">
{% if thread.account.avatar is defined %}
<img class="avatar" src="{{thread.account.avatar}}" />
{% endif %}
</div>
<div class="card_content">
<div class="meta">
<span>{{ thread.created_at }}</span> &#8729; <a href="{{thread.url}}" target="_blank">&nearr;</a> <span>{{ thread.created_at }}</span> &#8729; <a href="{{thread.url}}" target="_blank">&nearr;</a>
</div> </div>
<div class="card_content">
{{thread.content | safe}} {{thread.content | safe}}
{% for media in thread.media_attachments %} {% for media in thread.media_attachments %}
@ -78,7 +98,7 @@
</video> </video>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
</div>
<details> <details>
<summary>See more</summary> <summary>See more</summary>
<ul> <ul>
@ -104,9 +124,14 @@
{% endfor %} {% endfor %}
</ul> </ul>
</details> </details>
</div>
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>
</main> </main>
<footer>
&copy; 2024 Ayo Ayco
</footer>
</body> </body>
</html> </html>