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

[frontend/components] Improve layout styling

Browse source
This commit is contained in:
pancakes 2025-03-07 14:34:58 +10:00 • committed by Laura Hausmann
parent 2e73fb05bd
commit c43394075a
No known key found for this signature in database
GPG key ID: D044E84C5BE01605
4 changed files with 62 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
Iceshrimp.Frontend/Layout/MainLayout.razor.css
View file

@ -49,6 +49,7 @@
margin-right: 0.5rem; margin-right: 0.5rem;
padding: 0.2rem 0.4rem; padding: 0.2rem 0.4rem;
border-radius: 0.5rem; border-radius: 0.5rem;
background-color: var(--foreground-color);
cursor: pointer; cursor: pointer;
} }
} }

10
Iceshrimp.Frontend/Layout/ModerationLayout.razor.css
View file

@ -28,16 +28,8 @@
.body { .body {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding-right: 2rem; padding-right: 1rem;
padding-left: 1rem; padding-left: 1rem;
@media(max-width: 1000px) {
padding-left: 1rem;
padding-right: 1rem;
}
> .body {
max-width: 50rem;
}
} }
@media(max-width: 1000px){ @media(max-width: 1000px){

68
Iceshrimp.Frontend/Pages/Moderation/CustomEmojis.razor
View file

@ -37,42 +37,40 @@
} }
</SectionContent> </SectionContent>
<div class="body"> @if (State is State.Empty or State.Error or State.Loaded)
@if (State is State.Empty or State.Error or State.Loaded) {
{ <div class="emoji-search">
<div class="emoji-search"> <input @bind="EmojiFilter" class="search" type="text" placeholder="@Loc["Name"]" aria-label="search name"/>
<input @bind="EmojiFilter" class="search" type="text" placeholder="@Loc["Name"]" aria-label="search name"/> <button @onclick="FilterEmojis" class="button">@Loc["Search"]</button>
<button @onclick="FilterEmojis" class="button">@Loc["Search"]</button>
</div>
}
@if (State is State.Loaded)
{
@foreach (var category in Categories)
{
<span class="category-name">@category.Key</span>
<div class="emoji-list">
@foreach (var emoji in category.Value)
{
<EmojiManagementEntry Emoji="@emoji" GetEmojis="GetEmojis"/>
}
</div>
}
}
@if (State is State.Empty)
{
<i>This instance has no emojis</i>
}
@if (State is State.Loading)
{
<div class="loading">
<LoadingSpinner Scale="2" />
</div>
}
<div class="file-input">
<InputFile @ref="UploadInput" OnChange="Upload" accept="image/*">Upload</InputFile>
<InputFile @ref="ImportInput" OnChange="Import" accept=".zip">Import</InputFile>
</div> </div>
}
@if (State is State.Loaded)
{
@foreach (var category in Categories)
{
<span class="category-name">@category.Key</span>
<div class="emoji-list">
@foreach (var emoji in category.Value)
{
<EmojiManagementEntry Emoji="@emoji" GetEmojis="GetEmojis"/>
}
</div>
}
}
@if (State is State.Empty)
{
<i>This instance has no emojis</i>
}
@if (State is State.Loading)
{
<div class="loading">
<LoadingSpinner Scale="2"/>
</div>
}
<div class="file-input">
<InputFile @ref="UploadInput" OnChange="Upload" accept="image/*">Upload</InputFile>
<InputFile @ref="ImportInput" OnChange="Import" accept=".zip">Import</InputFile>
</div> </div>
@code { @code {

59
Iceshrimp.Frontend/Pages/Moderation/CustomEmojisRemote.razor
View file

@ -11,10 +11,7 @@
@attribute [Authorize(Roles = "moderator")] @attribute [Authorize(Roles = "moderator")]
@layout ModerationLayout @layout ModerationLayout
@inject ApiService Api; @inject ApiService Api;
@inject GlobalComponentSvc Global;
@inject IJSRuntime Js;
@inject IStringLocalizer<Localization> Loc; @inject IStringLocalizer<Localization> Loc;
@inject ILogger<CustomEmojis> Logger;
<HeadTitle Text="@Loc["Remote Emojis"]"/> <HeadTitle Text="@Loc["Remote Emojis"]"/>
@ -29,39 +26,37 @@
} }
</SectionContent> </SectionContent>
<div class="body"> @if (State is State.Empty or State.Error or State.Loaded)
@if (State is State.Empty or State.Error or State.Loaded) {
{ <div class="emoji-search">
<div class="emoji-search"> <input @bind="EmojiFilter" class="search" type="text" placeholder="@Loc["Name"]" aria-label="search name"/>
<input @bind="EmojiFilter" class="search" type="text" placeholder="@Loc["Name"]" aria-label="search name"/> <input @bind="HostFilter" class="search" type="text" placeholder="@Loc["Host"]" aria-label="search host"/>
<input @bind="HostFilter" class="search" type="text" placeholder="@Loc["Host"]" aria-label="search host"/> <button @onclick="Search" class="button">@Loc["Search"]</button>
<button @onclick="Search" class="button">@Loc["Search"]</button> </div>
</div> }
} @if (State is State.Loaded)
@if (State is State.Loaded) {
{ <div class="emoji-list">
<div class="emoji-list"> @foreach (var emoji in Emojis)
@foreach (var emoji in Emojis)
{
<EmojiManagementEntry Emoji="@emoji" Remote="true"/>
}
</div>
@if (PaginationData is { Next: not null })
{ {
<ScrollEnd ManualLoad="FetchMore" IntersectionChange="FetchMore"></ScrollEnd> <EmojiManagementEntry Emoji="@emoji" Remote="true"/>
} }
} </div>
@if (State is State.Empty) @if (PaginationData is { Next: not null })
{ {
<i>This instance hasn't received remote emojis</i> <ScrollEnd ManualLoad="FetchMore" IntersectionChange="FetchMore"></ScrollEnd>
} }
@if (State is State.Loading) }
{ @if (State is State.Empty)
<div class="loading"> {
<LoadingSpinner Scale="2"/> <i>This instance hasn't received remote emojis</i>
</div> }
} @if (State is State.Loading)
</div> {
<div class="loading">
<LoadingSpinner Scale="2"/>
</div>
}
@code { @code {
private List<EmojiResponse> Emojis { get; set; } = []; private List<EmojiResponse> Emojis { get; set; } = [];