Merge pull request #358 from Moonlight-Panel/v2_UiFixes

Added some ui fixes
This commit is contained in:
Marcel Baumgartner
2024-01-16 16:32:14 +01:00
committed by GitHub
15 changed files with 120 additions and 76 deletions

View File

@@ -15,7 +15,7 @@
{
if (ErrorMessages.Any())
{
<div class="alert alert-danger bg-danger text-white p-10 mb-3">
<div class="alert alert-danger bg-danger text-white p-10 mb-3 rounded-0">
@foreach (var msg in ErrorMessages)
{
@(msg)

View File

@@ -10,7 +10,7 @@
<i class="bx bx-sm bx-envelope text-gray-500"></i>
</div>
<div class="d-flex align-items-center flex-row-fluid flex-wrap">
<a href="/community" class="text-gray-800 fs-5 fw-bold text-active-primary @(Index == 0 ? "active" : "")">Announcements</a>
<a href="/community" class="text-gray-800 fs-5 fw-bold text-active-primary @(Index == 0 ? "active" : "")">News</a>
</div>
</div>
<div class="separator separator-dashed my-4"></div>

View File

@@ -33,7 +33,7 @@ else
{
foreach (var errorMessage in ErrorMessages)
{
<div class="alert alert-danger bg-danger text-white p-3 mb-5 fw-bold">
<div class="alert alert-danger bg-danger text-white p-3 mb-5 fw-semibold fs-5 text-center">
@errorMessage
</div>
}
@@ -65,6 +65,10 @@ else
{
Exception = exception;
Crashed = true;
var username = IdentityService.IsSignedIn ? IdentityService.CurrentUser.Username : "Guest";
Logger.Warn($"A crash occured in the view of the user '{username}'");
Logger.Warn(exception);
}
Recover();

View File

@@ -3,7 +3,7 @@
<CascadingValue Value="this">
@if (ViewIndex == 0)
{
<button @onclick="() => SetViewIndex(1)" class="btn btn-lg btn-icon btn-rounded-circle btn-white border border-warning" style="pointer-events: all">
<button @onclick="() => SetViewIndex(1)" class="btn btn-lg btn-icon btn-rounded-circle bg-secondary btn-white border border-2 border-warning" style="pointer-events: all">
<i class="bx bg-lg bx-chat"></i>
</button>
}

View File

@@ -51,6 +51,11 @@
<span class="text-muted fs-7 mb-1">@(Formatter.FormatAgoFromDateTime(ticket.CreatedAt))</span>
</div>
</a>
if (ticket.Id != Tickets.Last().Id)
{
<span class="separator"></span>
}
}
}
else

View File

@@ -29,12 +29,12 @@
</div>
</div>
<div class="col ms-n2">
<h4 class="mb-1">
<div class="mb-1 fs-5 fw-semibold">
Your avatar
</h4>
<small class="text-body-secondary">
PNG or JPG no bigger than 1000px wide and tall.
</small>
</div>
<div class="fs-7">
PNG or JPG no bigger than 1000px wide and tall
</div>
</div>
</div>
</div>

View File

@@ -16,7 +16,7 @@
<div class="row mt-5">
<div class="col-md-6 col-12">
<div class="card">
<div class="card h-100">
<div class="card-header">
<h3 class="card-title">Redeem gift code</h3>
</div>
@@ -29,7 +29,7 @@
</div>
</div>
<div class="col-md-6 col-12">
<div class="card card-body">
<div class="card card-body h-100">
<div class="row d-flex justify-content-center">
<input @bind="Amount" class="form-control form-control-lg form-control-solid-bg w-50 text-center fs-2" placeholder="Enter amount to add to your account"/>
</div>
@@ -61,7 +61,7 @@
<LazyLoader @ref="LazyLoader" Load="Load">
<Table TableItem="Transaction"
Items="Transactions"
PageSize="50"
PageSize="10"
TableClass="table table-row-bordered table-row-gray-100 align-middle gs-0 gy-3 fs-6"
TableHeadClass="fw-bold text-muted">
<Column TableItem="Transaction" Title="" Field="@(x => x.Id)" Sortable="false" Filterable="false" Width="10%">

View File

@@ -1,6 +1,5 @@
@page "/account/security"
@using Moonlight.App.Models.Forms
@using Moonlight.App.Services
@using Moonlight.App.Services.Users
@using OtpNet
@@ -17,6 +16,9 @@
<div class="row mt-5">
<div class="col-md-6 col-12">
<div class="card">
<div class="card-header">
<span class="card-title">Change password</span>
</div>
<SmartForm Model="PasswordForm" OnValidSubmit="OnPasswordSubmit">
<div class="card-body">
<div class="row">
@@ -45,20 +47,25 @@
<div class="col-md-6 col-12">
@if (IdentityService.Flags[UserFlag.TotpEnabled])
{
<div class="card card-body fs-6">
<div class="card h-100">
<div class="card-header">
<span class="card-title text-success">Your account is secured with 2fa</span>
<div class="text-center">
</div>
<div class="card-body"></div>
<div class="card-footer">
<div class="text-end">
<ConfirmButton OnClick="OnDisable2FA" Text="Disable 2fa" CssClasses="btn btn-danger" WorkingText="Disabling"/>
</div>
</div>
</div>
}
else if (!IdentityService.Flags[UserFlag.TotpEnabled] && IdentityService.CurrentUser.TotpKey != null)
{
<div class="card">
<div class="card-body fs-6">
<p>
Scan the qr code and enter the code generated by the app you have scanned it in
</p>
<div class="card h-100">
<div class="card-header">
<span class="card-title">Scan the qr code and enter the code generated by the app you have scanned it in</span>
</div>
<div class="card-body fs-5">
@{
QRCodeGenerator qrGenerator = new QRCodeGenerator();
@@ -73,16 +80,16 @@
var base64 = Convert.ToBase64String(qrCodeAsPngByteArr);
}
<div class="text-center">
<img src="data:image/png;base64,@(base64)" alt="QR Code" class="img-fluid">
<img src="data:image/png;base64,@(base64)" alt="QR Code" class="img-fluid rounded" style="max-height: 25vh">
</div>
<div class="mt-3 text-center">
<span class="h3">@(IdentityService.CurrentUser.TotpKey)</span>
<div class="mt-5 text-center">
<span class="fs-4 fw-semibold">@(IdentityService.CurrentUser.TotpKey)</span>
</div>
</div>
<div class="card-footer">
<SmartForm Model="CodeForm" OnValidSubmit="On2FASubmit">
<div class="input-group">
<input @bind="CodeForm.Code" type="number" class="form-control"/>
<input @bind="CodeForm.Code" type="number" placeholder="Enter generated code..." class="form-control"/>
<button type="submit" class="btn btn-primary">Enable 2fa</button>
</div>
</SmartForm>
@@ -91,8 +98,11 @@
}
else
{
<div class="card card-body fs-6">
<div class="card h-100">
<div class="card-header">
<span class="card-title">Secure your account using 2fa</span>
</div>
<div class="card-body fs-5">
<p>
Make sure you have installed one of the following apps on your smartphone and continue
</p>
@@ -105,10 +115,13 @@
<br/>
<a href="https://support.1password.com/one-time-passwords/" target="_blank">1Password</a>
<br/>
<div class="text-center">
</div>
<div class="card-footer">
<div class="text-end">
<WButton OnClick="OnSeed2FA" Text="Enable 2fa" CssClasses="btn btn-primary"/>
</div>
</div>
</div>
}
</div>
</div>

View File

@@ -10,6 +10,8 @@
<AdminSysNavigation Index="3" />
<div class="row">
<div class="col-md-6 col-12">
<Tooltip Color="danger">
Dont share this file with random people.
We do our best to clear this file from sensitive information but it can still contain some.
@@ -19,6 +21,8 @@
<div class="card card-body mt-5">
<WButton Text="Generate diagnose" OnClick="GenerateDiagnose" />
</div>
</div>
</div>
@code
{

View File

@@ -18,7 +18,7 @@
else
{
<div class="card mt-5">
<div class="card-header">
<div class="card-header border-bottom-0">
@{
string title;

View File

@@ -11,28 +11,44 @@
</div>
<div class="mt-5 row">
<div class="col-md-3 col-12">
<div href="#" class="card card-body text-center fs-6">
<div class="col-md-3 col-12 mb-3">
<a href="/store" class="card border-hover-primary border-2 h-100">
<img class="card-img-top p-5" src="/svg/shopping.svg" alt="Shopping" style="max-height: 20vh"/>
<div class="card-body text-center fs-5">
<div class="mb-5">
Do you want to order new services? Are you searching for our service specifications and prices?
</div>
<a href="/store" class="btn btn-primary">Go to store</a>
</div>
</a>
</div>
<div class="col-md-3 col-12">
<div href="#" class="card card-body text-center fs-6">
<div class="col-md-3 col-12 mb-3">
<a href="/services" class="card border-hover-primary border-2 h-100">
<img class="card-img-top p-5" src="/svg/manageServices.svg" alt="Manage services" style="max-height: 20vh"/>
<div class="card-body text-center fs-5">
<div class="mb-5">
Do you want to order new services? Are you searching for our service specifications and prices?
</div>
<a href="/store" class="btn btn-primary">Go to store</a>
You want to see your services? Do you want to renew them? Or just take a quick look?
</div>
</div>
<div class="col-md-3 col-12">
<div href="#" class="card card-body text-center fs-6">
</a>
</div>
<div class="col-md-3 col-12 mb-3">
<a href="/community" class="card border-hover-primary border-2 h-100">
<img class="card-img-top p-5" src="/svg/news.svg" alt="News" style="max-height: 20vh"/>
<div class="card-body text-center fs-5">
<div class="mb-5">
Do you want to order new services? Are you searching for our service specifications and prices?
</div>
<a href="/store" class="btn btn-primary">Go to store</a>
You want to see the latest news? Do you want to join our events? Having a project to share with the community?
</div>
</div>
</a>
</div>
<div class="col-md-3 col-12 mb-3">
<a href="/account" class="card border-hover-primary border-2 h-100">
<img class="card-img-top p-5" src="/svg/userSettings.svg" alt="User settings" style="max-height: 20vh"/>
<div class="card-body text-center fs-5">
<div class="mb-5">
Searching for you settings? Want to add balance to your account? Do you want to change your profile picture?
</div>
</div>
</a>
</div>
</div>

View File

@@ -4,7 +4,6 @@
@using Moonlight.App.Services
@using Moonlight.App.Database.Entities.Store
@using Moonlight.App.Repositories
@using Moonlight.App.Services.ServiceManage
@inject ConfigService ConfigService
@inject StoreService StoreService
@@ -33,17 +32,17 @@
</div>
<div class="row mb-5">
<div class="col-md-4 col-12">
<a @onclick="() => SetDurationMultiplier(1)" @onclick:preventDefault href="#" class="card card-body bg-hover-secondary text-center @(DurationMultiplier == 1 ? "border border-info" : "")">
<a @onclick="() => SetDurationMultiplier(1)" @onclick:preventDefault href="#" class="card card-body bg-hover-secondary text-center @(DurationMultiplier == 1 ? "border border-2 border-info" : "")">
<h4 class="fw-bold mb-0 align-middle">@(SelectedProduct.Duration * 1) days</h4>
</a>
</div>
<div class="col-md-4 col-12">
<a @onclick="() => SetDurationMultiplier(2)" @onclick:preventDefault href="#" class="card card-body bg-hover-secondary text-center @(DurationMultiplier == 2 ? "border border-info" : "")">
<a @onclick="() => SetDurationMultiplier(2)" @onclick:preventDefault href="#" class="card card-body bg-hover-secondary text-center @(DurationMultiplier == 2 ? "border border-2 border-info" : "")">
<h4 class="fw-bold mb-0 align-middle">@(SelectedProduct.Duration * 2) days</h4>
</a>
</div>
<div class="col-md-4 col-12">
<a @onclick="() => SetDurationMultiplier(3)" @onclick:preventDefault href="#" class="card card-body bg-hover-secondary text-center @( DurationMultiplier == 3 ? "border border-info" : "")">
<a @onclick="() => SetDurationMultiplier(3)" @onclick:preventDefault href="#" class="card card-body bg-hover-secondary text-center @( DurationMultiplier == 3 ? "border border-2 border-info" : "")">
<h4 class="fw-bold mb-0 align-middle">@(SelectedProduct.Duration * 3) days</h4>
</a>
</div>

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 13 KiB

1
Moonlight/wwwroot/svg/news.svg vendored Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 10 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 7.1 KiB