notfire/Iceshrimp.NET
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[frontend] Layout cleanup, fixing onclick propagation

Browse source
This commit is contained in:
Lilian 2024-04-28 23:52:02 +02:00
parent f2e07f17d4
commit 23792e1b87
No known key found for this signature in database
GPG key ID: 007CA12D692829E1
3 changed files with 13 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
Iceshrimp.Frontend/Components/NoteBody.razor
View file

@ -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;
}
}

4
Iceshrimp.Frontend/Components/NoteBody.razor.css
View file

@ -24,3 +24,7 @@
.hidden {
display: none;
}
.indent {
padding-left: 0.75em;
}

2
Iceshrimp.Frontend/Components/NoteUserInfo.razor.css
View file

@ -7,7 +7,7 @@
.name-section {
display: flex;
flex-direction: column;
padding-left: 10px;
padding-left: 0.75em;
.identifier {
font-size: 0.9em;
}