diff --git a/app/assets/stylesheets/bubbles.css b/app/assets/stylesheets/bubbles.css index f58ae6095..f030fd3a6 100644 --- a/app/assets/stylesheets/bubbles.css +++ b/app/assets/stylesheets/bubbles.css @@ -174,6 +174,51 @@ } } + &.bubble__comments { + --arrow-size: 1.5em; + --border-color: var(--bubble-color); + --border-size: var(--bubble-border-width); + + aspect-ratio: 9/6; + font-size: 5cqi; + inset: auto auto 1em 0em; + place-content: center; + + &::before { + aspect-ratio: 2; + background: var(--border-color); + clip-path: polygon(50% 100%, 100% 0, 0 0); + inline-size: var(--arrow-size); + content: ""; + display: block; + inset-block-end: auto; + inset-block-start: 100%; + inset-inline-start: 48%; + position: absolute; + transform: translateX(-50%); + } + + &::after { + aspect-ratio: 2; + background: var(--color-bg); + clip-path: polygon(50% 100%, 100% 0, 0 0); + inline-size: var(--arrow-size); + content: ""; + display: block; + inset-block-end: auto; + inset-block-start: calc(100% - var(--border-size) * 1.5); + inset-inline-start: 48%; + position: absolute; + transform: translateX(-50%); + } + + @media (hover: hover) { + .windshield .bubble:hover & { + transform: translate(-0.5rem, -2rem); + } + } + } + &.bubble__date { --rotation: -45deg; diff --git a/app/views/bubbles/_bubble.html.erb b/app/views/bubbles/_bubble.html.erb index be53dffda..839db07a5 100644 --- a/app/views/bubbles/_bubble.html.erb +++ b/app/views/bubbles/_bubble.html.erb @@ -30,6 +30,7 @@ <%= render "bubbles/assignments", bubble: bubble %> <%= render "bubbles/boosts", bubble: bubble %> + <%= render "bubbles/comments", bubble: bubble %> <%= render "bubbles/date", bubble: bubble %> <%= render "bubbles/image", bubble: bubble %> diff --git a/app/views/bubbles/_comments.html.erb b/app/views/bubbles/_comments.html.erb new file mode 100644 index 000000000..dc439aec7 --- /dev/null +++ b/app/views/bubbles/_comments.html.erb @@ -0,0 +1,5 @@ +<% if bubble.messages.comments.any? %> +
+ <%= bubble.messages.comments.count %> +
+<% end %> \ No newline at end of file