[frontend/components] Improve layout styling
This commit is contained in:
parent
2e73fb05bd
commit
c43394075a
4 changed files with 62 additions and 76 deletions
|
@ -49,6 +49,7 @@
|
|||
margin-right: 0.5rem;
|
||||
padding: 0.2rem 0.4rem;
|
||||
border-radius: 0.5rem;
|
||||
background-color: var(--foreground-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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){
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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; } = [];
|
||||
|
|
Loading…
Add table
Reference in a new issue