From 23792e1b8746d6e9c81bc44e84a7772df36d90e8 Mon Sep 17 00:00:00 2001
From: Lilian <lilian@blahaj.space>
Date: Sun, 28 Apr 2024 23:52:02 +0200
Subject: [PATCH] [frontend] Layout cleanup, fixing onclick propagation

---
 Iceshrimp.Frontend/Components/NoteBody.razor        | 13 ++++++++-----
 Iceshrimp.Frontend/Components/NoteBody.razor.css    |  4 ++++
 .../Components/NoteUserInfo.razor.css               |  2 +-
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/Iceshrimp.Frontend/Components/NoteBody.razor b/Iceshrimp.Frontend/Components/NoteBody.razor
index ce4bd487..f454a643 100644
--- a/Iceshrimp.Frontend/Components/NoteBody.razor
+++ b/Iceshrimp.Frontend/Components/NoteBody.razor
@@ -3,21 +3,21 @@
 @if (NoteBase.Cw != null)
 {
     <div class="cw">
-        <span class="cw-field">@NoteBase.Cw</span><button class="cw-button" @onclick="ToggleCw">Toggle CW</button>
+        <span class="cw-field">@NoteBase.Cw</span><button class="cw-button" @onclick="ToggleCw" @onclick:stopPropagation="true">Toggle CW</button>
     </div>
-    <div hidden="@CwToggle" class="note-body @(CwToggle ? "hidden" : "")">
+    <div hidden="@CwToggle" class="note-body @(CwToggle ? "hidden" : "") @(Indented ? "indent" : "")">
         @NoteBase.Text
     </div>
 }
 @if (NoteBase.Cw == null && OverLength)
 {
     <div 
-        class="note-body @(Truncate ? "truncated" : "")" 
+        class="note-body @(Truncate ? "truncated" : "") @(Indented ? "indent" : "")" 
         style="max-height: @(Truncate ? MaxHeight + "px" : "initial")" 
     >
         @NoteBase.Text
     </div>
-    <button class="truncate-btn" @onclick="ToggleTruncate">
+    <button class="truncate-btn" @onclick="ToggleTruncate" @onclick:stopPropagation="true">
         @if (Truncate)
         {<span>Show more</span> }
         @if (!Truncate)
@@ -26,7 +26,7 @@
 }
 @if (NoteBase.Cw == null && OverLength == false)
 {
-    <div class="note-body">
+    <div class="note-body @(Indented ? "indent" : "")">
         @NoteBase.Text
     </div>
 }
@@ -39,10 +39,12 @@
 @code {
     [Parameter] public required NoteBase NoteBase   { get; set; }
     [Parameter] public required bool     OverLength { get; set; }
+    [Parameter] public          bool     Indented   { get; set; } = false;
 
     private static int  MaxHeight => 500;
     private        bool Truncate  { get; set; } = true;
     private        bool CwToggle  { get; set; } = true;
+
     private void ToggleCw()
     {
         CwToggle = !CwToggle;
@@ -53,4 +55,5 @@
     {
         Truncate = !Truncate;
     }
+
 }
\ No newline at end of file
diff --git a/Iceshrimp.Frontend/Components/NoteBody.razor.css b/Iceshrimp.Frontend/Components/NoteBody.razor.css
index ca362430..048ffb47 100644
--- a/Iceshrimp.Frontend/Components/NoteBody.razor.css
+++ b/Iceshrimp.Frontend/Components/NoteBody.razor.css
@@ -24,3 +24,7 @@
 .hidden {
     display: none;
 }
+
+.indent {
+    padding-left: 0.75em;
+}
diff --git a/Iceshrimp.Frontend/Components/NoteUserInfo.razor.css b/Iceshrimp.Frontend/Components/NoteUserInfo.razor.css
index b14b8ee1..5a624293 100644
--- a/Iceshrimp.Frontend/Components/NoteUserInfo.razor.css
+++ b/Iceshrimp.Frontend/Components/NoteUserInfo.razor.css
@@ -7,7 +7,7 @@
 .name-section {
     display: flex;
     flex-direction: column;
-    padding-left: 10px;
+    padding-left: 0.75em;
     .identifier {
         font-size: 0.9em;
     }