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

[frontend] Add overflow clipping to note

Browse source
This commit is contained in:
pancakes 2024-11-12 15:08:09 +10:00 • committed by Laura Hausmann
parent 2a456485bb
commit b4dff783a2
No known key found for this signature in database
GPG key ID: D044E84C5BE01605
7 changed files with 18 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
Iceshrimp.Frontend/Components/AscendedNote.razor.css
View file

@ -25,4 +25,5 @@
display: flex; display: flex;
max-width: 45rem; max-width: 45rem;
width: 100%; width: 100%;
overflow: clip;
} }

5
Iceshrimp.Frontend/Components/Note/NoteComponent.razor.css
View file

@ -1,10 +1,13 @@
.note-header { .note-header {
display: flex; display: flex;
padding-bottom: 0.5em; padding-bottom: 0.5em;
position: relative;
z-index: 1;
} }
.note-container { .note-container {
width: 100% width: 100%;
overflow: clip;
} }
.user-avatar { .user-avatar {

8
Iceshrimp.Frontend/Components/Note/NoteFooter.razor
View file

@ -18,7 +18,7 @@
} }
</div> </div>
} }
<button class="btn" @onclick="Reply" @onclick:stopPropagation="true" aria-label="reply"> <button class="btn positioned" @onclick="Reply" @onclick:stopPropagation="true" aria-label="reply">
<Icon Name="Icons.ArrowUUpLeft" Size="1.3em"/> <Icon Name="Icons.ArrowUUpLeft" Size="1.3em"/>
@if (Replies > 0) @if (Replies > 0)
{ {
@ -54,7 +54,7 @@
<span class="renote-count">@Renotes</span> <span class="renote-count">@Renotes</span>
} }
</button> </button>
<button @onclick="Like" @onclick:stopPropagation="true" class="btn" aria-label="like"> <button @onclick="Like" @onclick:stopPropagation="true" class="btn positioned" aria-label="like">
@if (IsLiked) @if (IsLiked)
{ {
<Icon Name="Icons.Heart" Pack="IconStyle.Fill" Size="1.3em"/> <Icon Name="Icons.Heart" Pack="IconStyle.Fill" Size="1.3em"/>
@ -68,10 +68,10 @@
<span class="like-count">@Likes</span> <span class="like-count">@Likes</span>
} }
</button> </button>
<button @ref="EmojiButton" class="btn" @onclick="ToggleEmojiPicker" @onclick:stopPropagation="true" aria-label="emoji picker" > <button @ref="EmojiButton" class="btn positioned" @onclick="ToggleEmojiPicker" @onclick:stopPropagation="true" aria-label="emoji picker" >
<Icon Name="Icons.Smiley" Size="1.3em"/> <Icon Name="Icons.Smiley" Size="1.3em"/>
</button> </button>
<button class="btn" @onclick="Quote" @onclick:stopPropagation="true" aria-label="quote"> <button class="btn positioned" @onclick="Quote" @onclick:stopPropagation="true" aria-label="quote">
<Icon Name="Icons.Quotes" Size="1.3em"/> <Icon Name="Icons.Quotes" Size="1.3em"/>
</button> </button>
<button class="btn positioned" @onclick="ToggleMenu" @onclick:stopPropagation="true" aria-label="more"> <button class="btn positioned" @onclick="ToggleMenu" @onclick:stopPropagation="true" aria-label="more">

1
Iceshrimp.Frontend/Components/SearchComponent.razor.css
View file

@ -25,6 +25,7 @@
margin-right: 0.5rem; margin-right: 0.5rem;
margin-left: 0.5rem; margin-left: 0.5rem;
width: 100%; width: 100%;
overflow: clip;
} }
.wrapper { .wrapper {
display: flex; display: flex;

1
Iceshrimp.Frontend/Components/TimelineNote.razor.css
View file

@ -10,6 +10,7 @@
margin-right: 0.5rem; margin-right: 0.5rem;
margin-left: 0.5rem; margin-left: 0.5rem;
width: 100%; width: 100%;
overflow: clip;
} }
.note-indent { .note-indent {

1
Iceshrimp.Frontend/Pages/ProfileView.razor.css
View file

@ -87,6 +87,7 @@
margin-right: 0.5rem; margin-right: 0.5rem;
margin-left: 0.5rem; margin-left: 0.5rem;
width: 100%; width: 100%;
overflow: clip;
} }
::deep .end { ::deep .end {

8
Iceshrimp.Frontend/Pages/SingleNote.razor.css
View file

@ -1,9 +1,13 @@
.root-note { .root-note {
max-width: 45rem; max-width: 45rem;
background-color: var(--foreground-color); background-color: var(--foreground-color);
width: 100%; /*width, padding and margin are a hack to make some mfm art look correct*/
padding-bottom: 1rem; width: calc(100% + 3rem);
padding: 1.5rem 1.5rem 1rem;
margin: -1.5rem -1.5rem 0;
border-bottom: solid var(--highlight-color) 0.1rem; border-bottom: solid var(--highlight-color) 0.1rem;
overflow: clip;
border-radius: 0.75rem;
} }
.descendants { .descendants {