bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Timeline exploration

Browse Source
This commit is contained in:
Jason Zimdars
2024-08-12 17:42:35 -05:00
parent 7f14b14dc6
commit 5998ec3c21
4 changed files with 51 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/comments.css
+19
View File
@@ -0,0 +1,19 @@
.comment {
inline-size: 100%;
flex-wrap: wrap;
border: 1px solid currentColor;
border-radius: 1em;
padding: var(--block-space);
position: relative;
&:after {
content: "";
background: currentColor;
block-size: var(--block-space);
inline-size: 4px;;
margin: auto;
position: absolute;
inset: auto 50% 0 auto;
margin-block-end: calc(var(--block-space) * -1);
}
}
app/assets/stylesheets/splats.css
+1 -1
View File
@@ -61,7 +61,7 @@
}
.splat__perma & {
--splat-size: 40vw !important;
--splat-size: 50vh !important;
}
}
app/views/splats/_splat.html.erb
+1 -1
View File
@@ -7,7 +7,7 @@
<span class="for-screen-reader"><%= splat.title %></span>
<% end %>
<time class="splat__bubble splat__meta splat__date"><%= splat.updated_at.strftime("%b <br> %d").html_safe %></time>
<time class="splat__bubble splat__meta splat__date"><%= splat.created_at.strftime("%b <br> %d").html_safe %></time>
<% splat.categories.each do | category | %>
<%= link_to category.title, splats_path(category_id: category.id), class: "splat__bubble splat__meta splat__category" %>
app/views/splats/show.html.erb
+30 -20
View File
@@ -35,41 +35,51 @@
<% end %>
</div>
<section class="comments panel center borderless margin">
<section class="comments panel center borderless margin-block flex flex-column gap">
<div class="comment flex align-start gap">
<span class="avatar fill-shade flex-item-no-shrink"><strong>JZ</strong></span>
<div class="flex-item-grow txt-align-start">
<header class="full-width flex align-center gap margin-block-start">
<header class="full-width margin-block">
Added by <strong>Jason Zimdars</strong> <%= time_ago_in_words @splat.created_at %> ago.
</header>
</div>
<div class="comment flex align-start gap">
<div class="flex align-center gap">
<span class="avatar fill-shade flex-item-no-shrink"><strong>JZ</strong></span>
<header class="full-width flex align-center gap">
<strong>Jason Zimdars</strong>
</header>
<div class="comment__body">
<p>I'll be speaking in Chicago early next month at the ABA convention and they'll be sharing this resource with all State Bar Presidents. I mentioned Writebook in the intro towards the bottom. The platform is awesome! </p>
</div>
</div>
<div class="comment__body txt-align-start">
<p class="margin-none-block-start">I'll be speaking in Chicago early next month at the ABA convention and they'll be sharing this resource with all State Bar Presidents. I mentioned Writebook in the intro towards the bottom. The platform is awesome! </p>
</div>
</div>
<div class="comment flex align-start gap">
<span class="avatar fill-selected flex-item-no-shrink"><strong>JF</strong></span>
<div class="flex-item-grow txt-align-start">
<header class="full-width flex align-center gap margin-block-start">
<div class="flex align-center gap">
<span class="avatar fill-selected flex-item-no-shrink"><strong>JF</strong></span>
<header class="full-width flex align-center gap">
<strong>Jason Fried</strong>
</header>
<div class="comment__body">
<p>Never mind, I nipped home and tried it on Browser Stack. It's working correctly on Windows with Edge, Chrome & Firefox. </p>
</div>
</div>
<div class="comment__body txt-align-start">
<p class="margin-none-block-start">Never mind, I nipped home and tried it on Browser Stack. It's working correctly on Windows with Edge, Chrome & Firefox. </p>
</div>
</div>
<div class="comment flex align-start gap">
<span class="avatar fill-black txt-reversed flex-item-no-shrink"><strong>JF</strong></span>
<div class="flex-item-grow txt-align-start">
<header class="full-width flex align-center gap margin-block-start">
<div class="flex align-center gap">
<span class="avatar fill-black txt-reversed flex-item-no-shrink"><strong>JF</strong></span>
<header class="full-width flex align-center gap">
<strong>Kevin McConnell</strong>
</header>
<div class="comment__body">
<p>If this is only happening to one site, and potentially has already resolved itself, then I'll just dig into this on Monday and see if I can find an explanation or a way to reproduce it. Hopefully this isn't a sign of something more common, but so far doesn't sound like it. </p>
<p>But if you hear about something similar happening to anyone else, please flag it here and I'll look more urgently.</p>
</div>
</div>
<div class="comment__body txt-align-start">
<p class="margin-none-block-start">If this is only happening to one site, and potentially has already resolved itself, then I'll just dig into this on Monday and see if I can find an explanation or a way to reproduce it. Hopefully this isn't a sign of something more common, but so far doesn't sound like it. </p>
<p>But if you hear about something similar happening to anyone else, please flag it here and I'll look more urgently.</p>
</div>
</div>
<button class="btn btn--positive center">
<%= image_tag "add.svg", aria: { hidden: true }, size: 24 %>
<span class="for-screen-reader">Add a comment</span>
</button>
</section>