yagich/porom
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

make usercard sticky on post

Browse Source
This commit is contained in:
Lera Elvoé 2025-06-05 00:37:05 +03:00
parent 3b7a7db0ca
commit 2bf5f4faa3
Signed by: yagich
SSH Key Fingerprint: SHA256:6xjGb6uA7lAVcULa7byPEN//rQ0wPoG+UzYVMfZnbvc
3 changed files with 27 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
data/static/style.css
View File

@ -102,15 +102,20 @@ body {
.usercard { .usercard {
grid-area: usercard; grid-area: usercard;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px 10px; padding: 20px 10px;
border: 4px outset rgb(217.26, 220.38, 213.42); border: 4px outset rgb(217.26, 220.38, 213.42);
background-color: rgb(143.7039271654, 144.3879625984, 142.8620374016); background-color: rgb(143.7039271654, 144.3879625984, 142.8620374016);
border-right: solid 2px; border-right: solid 2px;
} }
.usercard-inner {
display: flex;
flex-direction: column;
align-items: center;
top: 10px;
position: sticky;
}
.post-content-container { .post-content-container {
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
@ -248,7 +253,7 @@ blockquote {
width: 90%; width: 90%;
height: 90%; height: 90%;
object-fit: contain; object-fit: contain;
padding-bottom: 10px; margin-bottom: 10px;
} }
.username-link { .username-link {

13
sass/style.scss
View File

@ -144,15 +144,20 @@ body {
.usercard { .usercard {
grid-area: usercard; grid-area: usercard;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px 10px; padding: 20px 10px;
border: 4px outset $light; border: 4px outset $light;
background-color: $dark_bg; background-color: $dark_bg;
border-right: solid 2px; border-right: solid 2px;
} }
.usercard-inner {
display: flex;
flex-direction: column;
align-items: center;
top: 10px;
position: sticky;
}
.post-content-container { .post-content-container {
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
@ -297,7 +302,7 @@ blockquote {
width: 90%; width: 90%;
height: 90%; height: 90%;
object-fit: contain; object-fit: contain;
padding-bottom: 10px; margin-bottom: 10px;
} }
.username-link { .username-link {

16
views/threads/post.etlua
View File

@ -6,13 +6,15 @@
%> %>
<div class="<%= pc %>" id="post-<%= post.id %>"> <div class="<%= pc %>" id="post-<%= post.id %>">
<div class="usercard"> <div class="usercard">
<a href="<%= url_for("user", {username = post.username}) %>" style="display: contents;"> <div class="usercard-inner">
<img src="<%= post.avatar_path %>" class="avatar"> <a href="<%= url_for("user", {username = post.username}) %>" style="display: contents;">
</a> <img src="<%= post.avatar_path %>" class="avatar">
<a href="<%= url_for("user", {username = post.username}) %>" class="username-link"><%= post.username %></a> </a>
<% if post.status ~= "" then %> <a href="<%= url_for("user", {username = post.username}) %>" class="username-link"><%= post.username %></a>
<em class="user-status"><%= post.status %></em> <% if post.status ~= "" then %>
<% end %> <em class="user-status"><%= post.status %></em>
<% end %>
</div>
</div> </div>
<div class="post-content-container"<%= is_latest and 'id=latest-post' or "" %>> <div class="post-content-container"<%= is_latest and 'id=latest-post' or "" %>>