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

[frontend] Improve note rendering at small widths

Browse source 
Fix single note view alignment issues
This commit is contained in:
Lilian 2024-05-21 21:57:20 +02:00
parent ba2392ac90
commit c647224b32
No known key found for this signature in database
GPG key ID: 007CA12D692829E1
5 changed files with 29 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -15,7 +15,6 @@
.note-container {
display: flex;
max-width: 45rem;
min-width: 25rem;
width: 100%;
}
.pad {

3
Iceshrimp.Frontend/Components/RecursiveNote.razor.css
View file

@ -20,9 +20,8 @@
}
.root-note {
max-width: 45rem;
/*min-width: 25rem;*/
background-color: var(--foreground-color);
padding: 1.25rem 1.5rem 1rem; /* top, left-right, bottom*/
padding: 1.25rem 0 1rem; /* top, left-right, bottom*/
@media (max-width: 1000px) {
padding: 1.25rem 1rem 1rem;
}

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

@ -1,6 +1,5 @@
.note-container {
max-width: 45rem;
min-width: 20rem;
background-color: var(--foreground-color);
padding: 1.5rem 1.5rem 1rem; /* top, left-right, bottom*/
@media (max-width: 1000px) {

38
Iceshrimp.Frontend/Pages/SingleNote.razor
View file

@ -9,27 +9,29 @@
{
<div class="scroller">
<div class="wrapper">
@if (Ascendants != null)
{
<div class="ascendants">
@foreach (var note in Ascendants)
<div class="container">
@if (Ascendants != null)
{
<AscendedNote Note="note"/>
<div class="ascendants">
@foreach (var note in Ascendants)
{
<AscendedNote Note="note"/>
}
</div>
}
<div class="root-note">
<Note NoteResponse="RootNote"></Note>
</div>
@if (Descendants != null)
{
<div class="descendants">
@foreach (var element in Descendants)
{
<RecursiveNote Note="element" Depth="0"/>
}
</div>
}
</div>
}
<div class="root-note">
<Note NoteResponse="RootNote"></Note>
</div>
@if (Descendants != null)
{
<div class="descendants">
@foreach (var element in Descendants)
{
<RecursiveNote Note="element" Depth="0"/>
}
</div>
}
</div>
</div>
}

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

@ -5,8 +5,6 @@
width: 100%;
padding-bottom: 1rem;
border-bottom: solid var(--highlight-color) 0.1rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.scroller {
height: 100vh;
@ -21,20 +19,18 @@
}
.wrapper {
background-color: var(--foreground-color);
border-radius: 0.75rem;
margin-top: 1rem;
margin-bottom: 1rem;
padding-top: 1.5rem;
padding-bottom: 1rem;
display: flex;
flex-direction: column;
margin-left: 1rem;
margin-right: 1rem;
align-items: center;
}
.container {
background-color: var(--foreground-color);
border-radius: 0.75rem;
padding: 1.5rem 1.5rem 1rem;
margin: 1.5rem 1rem 2rem;
}
.ascendants {
padding-left: 1.5rem;
padding-right: 1.5rem;
}