[frontend/components] Improve layout styling

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

View file

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

View file

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

View file

@ -37,16 +37,15 @@
}
</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">
<input @bind="EmojiFilter" class="search" type="text" placeholder="@Loc["Name"]" aria-label="search name"/>
<button @onclick="FilterEmojis" class="button">@Loc["Search"]</button>
</div>
}
@if (State is State.Loaded)
{
}
@if (State is State.Loaded)
{
@foreach (var category in Categories)
{
<span class="category-name">@category.Key</span>
@ -57,22 +56,21 @@
}
</div>
}
}
@if (State is State.Empty)
{
}
@if (State is State.Empty)
{
<i>This instance has no emojis</i>
}
@if (State is State.Loading)
{
}
@if (State is State.Loading)
{
<div class="loading">
<LoadingSpinner Scale="2" />
<LoadingSpinner Scale="2"/>
</div>
}
}
<div class="file-input">
<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 {

View file

@ -11,10 +11,7 @@
@attribute [Authorize(Roles = "moderator")]
@layout ModerationLayout
@inject ApiService Api;
@inject GlobalComponentSvc Global;
@inject IJSRuntime Js;
@inject IStringLocalizer<Localization> Loc;
@inject ILogger<CustomEmojis> Logger;
<HeadTitle Text="@Loc["Remote Emojis"]"/>
@ -29,17 +26,16 @@
}
</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">
<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"/>
<button @onclick="Search" class="button">@Loc["Search"]</button>
</div>
}
@if (State is State.Loaded)
{
}
@if (State is State.Loaded)
{
<div class="emoji-list">
@foreach (var emoji in Emojis)
{
@ -50,18 +46,17 @@
{
<ScrollEnd ManualLoad="FetchMore" IntersectionChange="FetchMore"></ScrollEnd>
}
}
@if (State is State.Empty)
{
}
@if (State is State.Empty)
{
<i>This instance hasn't received remote emojis</i>
}
@if (State is State.Loading)
{
}
@if (State is State.Loading)
{
<div class="loading">
<LoadingSpinner Scale="2"/>
</div>
}
</div>
}
@code {
private List<EmojiResponse> Emojis { get; set; } = [];