Show/hide behavior for long threads in threads list

This commit is contained in:
swaggboi 2023-12-09 20:01:01 -05:00
parent 15fc35b0b2
commit 59122613af
3 changed files with 17 additions and 2 deletions

View File

@ -33,7 +33,9 @@ body {
/* Spooky time! */ /* Spooky time! */
/* background-image: url('/images/halloween_background_1.gif'); */ /* background-image: url('/images/halloween_background_1.gif'); */
/* Winter/snow */ /* Winter/snow */
background-image: url('/images/jwsfp1.gif'); /* background-image: url('/images/jwsfp1.gif'); */
/* Christmas */
background-image: url('/images/christmas.gif');
width: 95vmin; width: 95vmin;
margin: 0 auto; margin: 0 auto;
font-family: 'w95fa', sans-serif; font-family: 'w95fa', sans-serif;
@ -73,3 +75,5 @@ img {
cursor: url('/cursors/arrow.cur'), auto; cursor: url('/cursors/arrow.cur'), auto;
max-width: 100%; max-width: 100%;
} }
summary { cursor: pointer; }

View File

@ -91,6 +91,8 @@
border: inset var(--dark-warm-gray) 0.18rem; border: inset var(--dark-warm-gray) 0.18rem;
} }
details[open].post__body summary { display: none; }
.post__nav { .post__nav {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;

View File

@ -23,9 +23,18 @@
</h3> </h3>
<h4 class="post__date"><%= $thread->{'date'} %></h4> <h4 class="post__date"><%= $thread->{'date'} %></h4>
<h5 class="post__author"><%= $thread->{'author'} %></h5> <h5 class="post__author"><%= $thread->{'author'} %></h5>
<% if (299 < length $thread->{'body'}) { %>
<details class="post__body">
<summary>
[Show All]<%== markdown truncate_text $thread->{'body'} =%>
</summary>
<%== markdown $thread->{'body'} =%>
</details>
<% } else { =%>
<div class="post__body"> <div class="post__body">
<%== markdown truncate_text $thread->{'body'} =%> <%== markdown $thread->{'body'} =%>
</div> </div>
<% } =%>
<nav class="post__nav"> <nav class="post__nav">
<%= link_to Remark => post_remark => {thread_id => $thread->{'id'}}, <%= link_to Remark => post_remark => {thread_id => $thread->{'id'}},
(class => 'click') %> (class => 'click') %>