From 75e402bea619a0af2774ede864978ef1904f446c Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Wed, 14 Aug 2024 15:10:01 -0500 Subject: [PATCH] Handful of tweaks before all-hands --- app/assets/images/bubble-add.svg | 1 + app/assets/stylesheets/comments.css | 53 +++++++++++++++++++-------- app/assets/stylesheets/splats.css | 57 ++++++++++++++++------------- app/views/splats/_splat.html.erb | 2 +- app/views/splats/index.html.erb | 9 ++--- app/views/splats/show.html.erb | 18 +++++++-- 6 files changed, 91 insertions(+), 49 deletions(-) create mode 100644 app/assets/images/bubble-add.svg diff --git a/app/assets/images/bubble-add.svg b/app/assets/images/bubble-add.svg new file mode 100644 index 000000000..31d007539 --- /dev/null +++ b/app/assets/images/bubble-add.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/assets/stylesheets/comments.css b/app/assets/stylesheets/comments.css index 268ceaed3..bab3257ed 100644 --- a/app/assets/stylesheets/comments.css +++ b/app/assets/stylesheets/comments.css @@ -1,19 +1,42 @@ +.comments { + hr { + block-size: 6cqi; + border-inline-start: 1px solid var(--splat-color); + display: block; + inline-size: 2px; + margin: auto; + overflow: initial; + position: relative; + + &::after { + background: var(--color-bg); + border: 2px solid var(--splat-color); + border-radius: 50%; + content: ""; + display: block; + height: 1cqi; + inline-size: 1cqi; + inset: auto auto -0.5cqi auto; + margin-inline-start: -0.5cqi; + position: absolute; + } + + &::before { + background: var(--color-bg); + border: 2px solid var(--splat-color); + border-radius: 50%; + content: ""; + display: block; + height: 1cqi; + inline-size: 1cqi; + inset: -0.5cqi auto auto auto; + margin-inline-start: -0.5cqi; + position: absolute; + } + } +} + .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); - } } diff --git a/app/assets/stylesheets/splats.css b/app/assets/stylesheets/splats.css index 9fc1710c9..c62cba376 100644 --- a/app/assets/stylesheets/splats.css +++ b/app/assets/stylesheets/splats.css @@ -20,7 +20,6 @@ --splat-color: var(--color-ink); --splat-rotate: 20deg; - animation: float-up-left 400ms normal forwards ease-out; aspect-ratio: 1; block-size: var(--splat-size); color: var(--splat-color, currentColor); @@ -31,13 +30,17 @@ position: relative; transition: all 0.2s ease; - &:nth-of-type(2n+1) { - animation-delay: 50ms; - animation: float-down-right 400ms normal forwards ease-out; - } + .windshield & { + animation: float-up-left 400ms normal forwards ease-out; - &:nth-of-type(3n+1) { - animation-delay: 150ms; + &:nth-of-type(2n+1) { + animation-delay: 50ms; + animation: float-down-right 400ms normal forwards ease-out; + } + + &:nth-of-type(3n+1) { + animation-delay: 150ms; + } } .windshield &:nth-of-type(n+5) { @@ -65,24 +68,6 @@ } } -.splat__link { - content: ""; - inset: 0; - position: absolute; - z-index: -1; -} - -.splat__svg { - fill: var(--color-bg); - position: absolute; - scale: 1.1; - stroke: var(--splat-color); - stroke-width: 1.1rem; - transform: rotate(var(--splat-rotate)); - transition: all 200ms ease-out; - z-index: -1; -} - .splat__bubble { background-color: var(--color-bg); border: 0.3em solid var(--splat-color); @@ -159,6 +144,28 @@ } } +.splat__link { + content: ""; + inset: 0; + position: absolute; + z-index: -1; +} + +.splat__notes { + position: relative; +} + +.splat__svg { + fill: var(--color-bg); + position: absolute; + scale: 1.1; + stroke: var(--splat-color); + stroke-width: 1.1rem; + transform: rotate(var(--splat-rotate)); + transition: all 200ms ease-out; + z-index: -1; +} + .splat__title { -webkit-line-clamp: var(--lines, 5); -webkit-box-orient: vertical; diff --git a/app/views/splats/_splat.html.erb b/app/views/splats/_splat.html.erb index c136ad3a3..4348f7f04 100644 --- a/app/views/splats/_splat.html.erb +++ b/app/views/splats/_splat.html.erb @@ -10,7 +10,7 @@ <% splat.categories.each do | category | %> - <%= link_to category.title, splats_path(category_id: category.id), class: "splat__bubble splat__meta splat__category" %> + <%= link_to "##{category.title}", splats_path(category_id: category.id), class: "splat__bubble splat__meta splat__category" %> <% end %> <% if splat.categories.count < 3 %> diff --git a/app/views/splats/index.html.erb b/app/views/splats/index.html.erb index d00ca06e2..1282a61b3 100644 --- a/app/views/splats/index.html.erb +++ b/app/views/splats/index.html.erb @@ -18,8 +18,8 @@ <% end %> - <%= link_to new_splat_path, class: "btn flex-item-justify-end" do %> - <%= image_tag "add.svg", aria: { hidden: true }, size: 24 %> + <%= link_to new_splat_path, class: "btn btn--plain flex-item-justify-end" do %> + <%= image_tag "bubble-add.svg", aria: { hidden: true }, size: 24 %> Create a new splat <% end %> @@ -41,10 +41,9 @@ <% end %> <% splat.categories.each do |category| %> - <%= link_to "# #{ category.title }", splats_path(category_id: category.id) %> + <%= link_to "# #{ category.title }", splats_path(category_id: category.id), style: "color: #{ splat.color }" %> <% end %> - JZ - + <% end %> diff --git a/app/views/splats/show.html.erb b/app/views/splats/show.html.erb index 402f41722..73ee70e8c 100644 --- a/app/views/splats/show.html.erb +++ b/app/views/splats/show.html.erb @@ -24,7 +24,7 @@ <%= render @splat %> -
+
<%= simple_format @splat.body %>
@@ -35,13 +35,18 @@ <% end %>
-
+
+ +
+
- Added by Jason Zimdars <%= time_ago_in_words @splat.created_at %> ago. + Added by Jason Zimdars on <%= @splat.created_at.strftime("%B %d") %> (<%= time_ago_in_words @splat.created_at %> ago).
+
+
JZ @@ -54,6 +59,8 @@
+
+
JF @@ -66,6 +73,8 @@
+
+
JF @@ -78,6 +87,9 @@

But if you hear about something similar happening to anyone else, please flag it here and I'll look more urgently.

+ +
+