MateuszSkoczek/WatchIt
1
0
Fork 0
Code Issues Pull Requests Actions Projects Wiki Activity

style fixes

Browse Source
This commit is contained in:
Mateusz Skoczek
2024-09-29 13:20:30 +02:00
Unverified
parent df9c9c25ce
commit b449135896
17 changed files with 167 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
WatchIt.Website/WatchIt.Website/App.razor
View File

@@ -9,13 +9,19 @@
<link rel="icon" type="image/png" href="favicon.png"/> <link rel="icon" type="image/png" href="favicon.png"/>
<!-- CSS --> <!-- CSS -->
<link rel="stylesheet" href="app.css?version=0.2.0.2"/> <link rel="stylesheet" href="css/general.css?version=0.2.0.3"/>
<link rel="stylesheet" href="css/main_button.css?version=0.2.0.0"/>
<link rel="stylesheet" href="WatchIt.Website.styles.css?version=0.2.0.9"/> <link rel="stylesheet" href="WatchIt.Website.styles.css?version=0.2.0.9"/>
<!-- BOOTSTRAP --> <!-- BOOTSTRAP -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<!-- BLAZORISE -->
<link href="_content/Blazorise.Icons.FontAwesome/v6/css/all.min.css" rel="stylesheet">
<link href="_content/Blazorise/blazorise.css" rel="stylesheet" />
<link href="_content/Blazorise.Bootstrap5/blazorise.bootstrap5.css" rel="stylesheet" />
<!-- FONTS --> <!-- FONTS -->
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

2
WatchIt.Website/WatchIt.Website/Components/ErrorComponent.razor
View File

@@ -1,5 +1,5 @@
<div class="rounded-3 panel panel-regular p-4"> <div class="rounded-3 panel panel-regular p-4">
<div class="container-fluid"> <div class="container-grid">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<div class="d-flex justify-content-center"> <div class="d-flex justify-content-center">

2
WatchIt.Website/WatchIt.Website/Components/ListItemComponent.razor
View File

@@ -1,4 +1,4 @@
<div class="container-float m-0 p-0"> <div class="container-grid">
<div class="row"> <div class="row">
<div class="col-auto"> <div class="col-auto">
<img id="picture" class="rounded-2 shadow object-fit-cover picture-aspect-ratio" src="@(_picture is not null ? _picture.ToString() : "assets/poster.png")" alt="picture" height="@(PictureHeight)"/> <img id="picture" class="rounded-2 shadow object-fit-cover picture-aspect-ratio" src="@(_picture is not null ? _picture.ToString() : "assets/poster.png")" alt="picture" height="@(PictureHeight)"/>

6
WatchIt.Website/WatchIt.Website/Components/SearchPage/SearchResultComponent.razor
View File

@@ -6,7 +6,7 @@
<div class="rounded-3 panel panel-regular p-4"> <div class="rounded-3 panel panel-regular p-4">
<div class="container-fluid p-0 m-0"> <div class="container-grid">
<div class="row mb-4"> <div class="row mb-4">
<div class="col"> <div class="col">
<h4 class="m-0"><strong>@(Title)</strong></h4> <h4 class="m-0"><strong>@(Title)</strong></h4>
@@ -46,12 +46,12 @@
<button class="btn btn-secondary" @onclick="DownloadItems"> <button class="btn btn-secondary" @onclick="DownloadItems">
@if (!_itemsLoading) @if (!_itemsLoading)
{ {
<span class="sr-only">Load more</span> <span>Load more</span>
} }
else else
{ {
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span class="sr-only">Saving...</span> <span>Saving...</span>
} }
</button> </button>
</div> </div>

62
WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor
View File

@@ -9,50 +9,61 @@
@if (_loaded) @if (_loaded)
{ {
<div class="container-xl"> <div class="container-xl">
<div class="row align-items-center m-1 my-2 mb-3 rounded-3 header panel panel-header z-3"> <div class="row sticky-top top-3 mb-2rem">
<div class="col-2"> <div class="col">
<a class="logo" href="/"> <div class="panel panel-header rounded-3 px-3">
<div class="container-grid">
<div class="row align-items-center">
<div class="col">
<a id="logo" class="logo" href="/">
WatchIt WatchIt
</a> </a>
</div> </div>
<div class="col">
<p>Menu</p>
</div>
<div class="col-auto"> <div class="col-auto">
<div class="d-flex flex-row-reverse"> menu
</div>
<div class="col">
<div class="float-end">
@if (_user is null) @if (_user is null)
{ {
<a class="main-button" href="/auth">Sign in</a> <a id="signInButton" class="main-button" href="/auth">Sign in</a>
} }
else else
{ {
<div class="dropdown z-3"> <Dropdown RightAligned>
<a class="dropdown-toggle align-items-center text-decoration-none d-flex" id="dropdownUser" aria-expanded="false" @onclick="() => _menuUserIsActive = !_menuUserIsActive"> <Button Color="Color.Default">
<div class="d-flex gap-2 align-items-center">
<img class="rounded-circle" alt="avatar" height="30" src="@(_userProfilePicture is null ? "assets/user_placeholder.png" : _userProfilePicture.ToString())"/> <img class="rounded-circle" alt="avatar" height="30" src="@(_userProfilePicture is null ? "assets/user_placeholder.png" : _userProfilePicture.ToString())"/>
<div class="text-decoration-none mx-2 text-white">@(_user.Username)</div> <span>@(_user.Username)</span>
</a> </div>
<ul class="dropdown-menu dropdown-menu-right text-small z-3" id="user-menu" aria-labelledby="dropdownUser"> </Button>
<li> <DropdownToggle Color="Color.Default" Split />
<DropdownMenu >
@if (_user.IsAdmin) @if (_user.IsAdmin)
{ {
<a class="dropdown-item" href="/admin">Administrator panel</a> <DropdownItem Clicked="@(() => NavigationManager.NavigateTo("/admin"))">Administrator panel</DropdownItem>
}
<DropdownDivider/>
<DropdownItem Clicked="UserMenuLogOut"><span class="text-danger">Log out</span></DropdownItem>
</DropdownMenu>
</Dropdown>
} }
<div class="dropdown-menu-separator"></div>
<a class="dropdown-item text-danger" @onclick="UserMenuLogOut">Log out</a>
</li>
</ul>
</div> </div>
} </div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col z-0 p-1"> <div class="col">
@Body @Body
</div> </div>
</div> </div>
</div> </div>
<style> <style>
/* TAGS */ /* TAGS */
body { body {
@@ -62,14 +73,7 @@
/* IDS */ /* IDS */
#user-menu { #logo, #signInButton {
display: @(_menuUserIsActive ? "block" : "none");
}
/* CLASSES */
.logo, .main-button {
background-image: linear-gradient(45deg, @(GetBackgroundPhoto() is null ? "#c6721c, #85200c" : $"#{Convert.ToHexString(GetBackgroundPhoto().Background.FirstGradientColor)}, #{Convert.ToHexString(GetBackgroundPhoto().Background.SecondGradientColor)}")); background-image: linear-gradient(45deg, @(GetBackgroundPhoto() is null ? "#c6721c, #85200c" : $"#{Convert.ToHexString(GetBackgroundPhoto().Background.FirstGradientColor)}, #{Convert.ToHexString(GetBackgroundPhoto().Background.SecondGradientColor)}"));
} }
</style> </style>

7
WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor.cs
View File

@@ -27,15 +27,12 @@ public partial class MainLayout : LayoutComponentBase
#region FIELDS #region FIELDS
private bool _loaded = false; private bool _loaded;
private User? _user;
private PhotoResponse? _defaultBackgroundPhoto; private PhotoResponse? _defaultBackgroundPhoto;
private User? _user = null;
private AccountProfilePictureResponse? _userProfilePicture; private AccountProfilePictureResponse? _userProfilePicture;
private bool _menuUserIsActive;
#endregion #endregion

20
WatchIt.Website/WatchIt.Website/Layout/MainLayout.razor.css
View File

@@ -8,24 +8,6 @@ h1 {
/* IDS */ /* IDS */
#user-menu { #logo {
position: fixed;
}
/* CLASSES */
.logo {
font-size: 40px; font-size: 40px;
} }
.header {
position: sticky;
top: 10px;
height: 60px;
}
.body-content {
padding-top: 100px;
}

2
WatchIt.Website/WatchIt.Website/Pages/AdminPage.razor
View File

@@ -2,7 +2,7 @@
<PageTitle>WatchIt administrator panel</PageTitle> <PageTitle>WatchIt administrator panel</PageTitle>
<div class="container-fluid"> <div class="container-grid">
@if (_loaded) @if (_loaded)
{ {
if (_authenticated) if (_authenticated)

10
WatchIt.Website/WatchIt.Website/Pages/HomePage.razor
View File

@@ -2,7 +2,7 @@
<PageTitle>WatchIt</PageTitle> <PageTitle>WatchIt</PageTitle>
<div class="container-fluid"> <div class="container-grid">
@if (_loaded) @if (_loaded)
{ {
if (string.IsNullOrWhiteSpace(_error)) if (string.IsNullOrWhiteSpace(_error))
@@ -10,7 +10,7 @@
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<div class="rounded-3 panel panel-regular p-4"> <div class="rounded-3 panel panel-regular p-4">
<div class="container-fluid p-0"> <div class="container-grid">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<h4><strong>Top 5 movies this week by popularity</strong></h4> <h4><strong>Top 5 movies this week by popularity</strong></h4>
@@ -25,7 +25,7 @@
<a class="text-reset text-decoration-none" href="/media/@_topMovies.ToArray()[i].Key.Id"> <a class="text-reset text-decoration-none" href="/media/@_topMovies.ToArray()[i].Key.Id">
<div class="d-flex flex-column align-items-center gap-2 h-100"> <div class="d-flex flex-column align-items-center gap-2 h-100">
<img class="rounded-2 shadow object-fit-cover poster-aspect-ratio" src="@(_topMovies.ToArray()[i].Value is not null ? _topMovies.ToArray()[i].Value.ToString() : "assets/poster.png")" alt="poster" width="100%"/> <img class="rounded-2 shadow object-fit-cover poster-aspect-ratio" src="@(_topMovies.ToArray()[i].Value is not null ? _topMovies.ToArray()[i].Value.ToString() : "assets/poster.png")" alt="poster" width="100%"/>
<div class="container-fluid p-0"> <div class="container-grid">
<div class="row"> <div class="row">
<div class="col-auto"> <div class="col-auto">
<div class="text-center border border-2 border-light rounded-circle place-circle"><strong>@(i + 1)</strong></div> <div class="text-center border border-2 border-light rounded-circle place-circle"><strong>@(i + 1)</strong></div>
@@ -48,7 +48,7 @@
<div class="row mt-3"> <div class="row mt-3">
<div class="col"> <div class="col">
<div class="rounded-3 panel panel-regular p-4"> <div class="rounded-3 panel panel-regular p-4">
<div class="container-fluid p-0"> <div class="container-grid">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<h4><strong>Top 5 TV series this week by popularity</strong></h4> <h4><strong>Top 5 TV series this week by popularity</strong></h4>
@@ -63,7 +63,7 @@
<a class="text-reset text-decoration-none" href="/media/@_topSeries.ToArray()[i].Key.Id"> <a class="text-reset text-decoration-none" href="/media/@_topSeries.ToArray()[i].Key.Id">
<div class="d-flex flex-column align-items-center gap-2 h-100"> <div class="d-flex flex-column align-items-center gap-2 h-100">
<img class="rounded-2 shadow object-fit-cover poster-aspect-ratio" src="@(_topSeries.ToArray()[i].Value is not null ? _topSeries.ToArray()[i].Value.ToString() : "assets/poster.png")" alt="poster" width="100%"/> <img class="rounded-2 shadow object-fit-cover poster-aspect-ratio" src="@(_topSeries.ToArray()[i].Value is not null ? _topSeries.ToArray()[i].Value.ToString() : "assets/poster.png")" alt="poster" width="100%"/>
<div class="container-fluid p-0"> <div class="container-grid">
<div class="row"> <div class="row">
<div class="col-auto"> <div class="col-auto">
<div class="text-center border border-2 border-light rounded-circle place-circle"><strong>@(i + 1)</strong></div> <div class="text-center border border-2 border-light rounded-circle place-circle"><strong>@(i + 1)</strong></div>

32
WatchIt.Website/WatchIt.Website/Pages/MediaEditPage.razor
View File

@@ -40,7 +40,7 @@
} }
</PageTitle> </PageTitle>
<div class="container-fluid"> <div class="container-grid">
@if (_loaded) @if (_loaded)
{ {
if (string.IsNullOrWhiteSpace(_error)) if (string.IsNullOrWhiteSpace(_error))
@@ -57,7 +57,7 @@
<div class="row mt-3 gx-3"> <div class="row mt-3 gx-3">
<div class="col-auto"> <div class="col-auto">
<div class="rounded-3 panel panel-regular p-4 h-100"> <div class="rounded-3 panel panel-regular p-4 h-100">
<div class="container-fluid p-0"> <div class="container-grid">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<img class="rounded-2 shadow object-fit-cover" src="@(_mediaPosterRequest is not null ? _mediaPosterRequest.ToString() : "assets/poster.png")" alt="poster" width="300" height="500"/> <img class="rounded-2 shadow object-fit-cover" src="@(_mediaPosterRequest is not null ? _mediaPosterRequest.ToString() : "assets/poster.png")" alt="poster" width="300" height="500"/>
@@ -77,12 +77,12 @@
<button type="button" class="btn btn-secondary btn-block btn-stretch-x" @onclick="SavePoster" disabled=@(!Id.HasValue || _mediaPosterSaving || _mediaPosterDeleting) autocomplete="off"> <button type="button" class="btn btn-secondary btn-block btn-stretch-x" @onclick="SavePoster" disabled=@(!Id.HasValue || _mediaPosterSaving || _mediaPosterDeleting) autocomplete="off">
@if (!_mediaPosterSaving) @if (!_mediaPosterSaving)
{ {
<span class="sr-only">Save poster</span> <span>Save poster</span>
} }
else else
{ {
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span class="sr-only">Saving...</span> <span>Saving...</span>
} }
</button> </button>
</div> </div>
@@ -96,12 +96,12 @@
<button type="button" class="btn btn-danger btn-block btn-stretch-x" @onclick="DeletePoster" disabled=@(!Id.HasValue || _mediaPosterSaving || _mediaPosterDeleting) autocomplete="off"> <button type="button" class="btn btn-danger btn-block btn-stretch-x" @onclick="DeletePoster" disabled=@(!Id.HasValue || _mediaPosterSaving || _mediaPosterDeleting) autocomplete="off">
@if (!_mediaPosterSaving) @if (!_mediaPosterSaving)
{ {
<span class="sr-only">Delete poster</span> <span>Delete poster</span>
} }
else else
{ {
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span class="sr-only">Deleting...</span> <span>Deleting...</span>
} }
</button> </button>
</div> </div>
@@ -115,7 +115,7 @@
<div class="rounded-3 panel panel-regular p-4 h-100"> <div class="rounded-3 panel panel-regular p-4 h-100">
<EditForm Model="_mediaRequest"> <EditForm Model="_mediaRequest">
<AntiforgeryToken/> <AntiforgeryToken/>
<div class="container-fluid p-0"> <div class="container-grid">
<div class="row form-group mb-1"> <div class="row form-group mb-1">
<label for="title" class="col-2 col-form-label">Title*</label> <label for="title" class="col-2 col-form-label">Title*</label>
<div class="col-10"> <div class="col-10">
@@ -183,12 +183,12 @@
<button type="button" class="btn btn-secondary" @onclick="SaveBasicData"> <button type="button" class="btn btn-secondary" @onclick="SaveBasicData">
@if (!_basicDataSaving) @if (!_basicDataSaving)
{ {
<span class="sr-only">Save</span> <span>Save</span>
} }
else else
{ {
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span class="sr-only">Saving...</span> <span>Saving...</span>
} }
</button> </button>
</div> </div>
@@ -202,7 +202,7 @@
<div class="row mt-3"> <div class="row mt-3">
<div class="col"> <div class="col">
<div class="rounded-3 panel panel-regular p-4"> <div class="rounded-3 panel panel-regular p-4">
<div class="container-fluid p-0"> <div class="container-grid">
<div class="row mb-3"> <div class="row mb-3">
<div class="col"> <div class="col">
<div class="d-flex align-items-center h-100"> <div class="d-flex align-items-center h-100">
@@ -226,12 +226,12 @@
<button type="button" class="btn btn-secondary" disabled="@(_photoEditSaving)" @onclick="SaveEditPhoto"> <button type="button" class="btn btn-secondary" disabled="@(_photoEditSaving)" @onclick="SaveEditPhoto">
@if (!_photoEditSaving) @if (!_photoEditSaving)
{ {
<span class="sr-only">Save</span> <span>Save</span>
} }
else else
{ {
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span class="sr-only">Saving...</span> <span>Saving...</span>
} }
</button> </button>
<button type="button" class="btn btn-secondary" disabled="@(_photoEditSaving)" @onclick="CancelEditPhoto">Cancel</button> <button type="button" class="btn btn-secondary" disabled="@(_photoEditSaving)" @onclick="CancelEditPhoto">Cancel</button>
@@ -248,7 +248,7 @@
<div id="scrollPhotos" class="d-flex p-3 gap-3" data-bs-spy="scroll" tabindex="0"> <div id="scrollPhotos" class="d-flex p-3 gap-3" data-bs-spy="scroll" tabindex="0">
@foreach (PhotoResponse photo in _photos) @foreach (PhotoResponse photo in _photos)
{ {
<div class="container-fluid p-0 m-0 photo-container"> <div class="container-grid photo-container">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<img class="rounded-1 shadow object-fit-cover photo-default-aspect-ratio" src="@(photo.ToString())" alt="photo" width="350"/> <img class="rounded-1 shadow object-fit-cover photo-default-aspect-ratio" src="@(photo.ToString())" alt="photo" width="350"/>
@@ -301,10 +301,10 @@
} }
else else
{ {
<div class="container-fluid p-0 m-0"> <div class="container-grid">
<div class="row"> <div class="row">
<div class="col-auto"> <div class="col-auto">
<div class="container-fluid p-0 m-0"> <div class="container-grid">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<img class="rounded-1 shadow object-fit-cover photo-default-aspect-ratio" src="@(_photoEditRequest is null ? "assets/photo.png" : _photoEditRequest.ToString())" alt="edit_photo" width="300px"/> <img class="rounded-1 shadow object-fit-cover photo-default-aspect-ratio" src="@(_photoEditRequest is null ? "assets/photo.png" : _photoEditRequest.ToString())" alt="edit_photo" width="300px"/>
@@ -321,7 +321,7 @@
</div> </div>
</div> </div>
<div class="col"> <div class="col">
<div class="container-fluid p-0 m-0"> <div class="container-grid">
<div class="row form-group"> <div class="row form-group">
<div class="col"> <div class="col">
<div class="form-check"> <div class="form-check">

8
WatchIt.Website/WatchIt.Website/Pages/MediaPage.razor
View File

@@ -24,7 +24,7 @@ else
<div class="container-fluid"> <div class="container-grid">
@if (_loaded) @if (_loaded)
{ {
if (string.IsNullOrWhiteSpace(_error)) if (string.IsNullOrWhiteSpace(_error))
@@ -35,7 +35,7 @@ else
</div> </div>
<div class="col"> <div class="col">
<div class="d-flex h-100"> <div class="d-flex h-100">
<div class="container-fluid px-0 align-self-end"> <div class="container-grid align-self-end">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<h1 class="align-self-end title-shadow"> <h1 class="align-self-end title-shadow">
@@ -60,7 +60,7 @@ else
<div class="row mt-3 gx-3"> <div class="row mt-3 gx-3">
<div class="col"> <div class="col">
<div class="rounded-3 panel panel-regular p-4 h-100"> <div class="rounded-3 panel panel-regular p-4 h-100">
<div class="container-fluid px-0"> <div class="container-grid">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<div class="d-flex flex-wrap gap-3"> <div class="d-flex flex-wrap gap-3">
@@ -133,7 +133,7 @@ else
</div> </div>
<div class="col-auto"> <div class="col-auto">
<div class="rounded-3 panel panel-yellow p-4 h-100"> <div class="rounded-3 panel panel-yellow p-4 h-100">
<div class="container-fluid px-0"> <div class="container-grid">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<h4 class="text-dark"> <h4 class="text-dark">

2
WatchIt.Website/WatchIt.Website/Pages/SearchPage.razor
View File

@@ -12,7 +12,7 @@
<div class="container-fluid"> <div class="container-grid">
@if (_loaded) @if (_loaded)
{ {
if (string.IsNullOrWhiteSpace(_error)) if (string.IsNullOrWhiteSpace(_error))

9
WatchIt.Website/WatchIt.Website/Program.cs
View File

@@ -1,5 +1,8 @@
using System.Text.Json; using System.Text.Json;
using System.Text.Json.Serialization; using System.Text.Json.Serialization;
using Blazorise;
using Blazorise.Bootstrap5;
using Blazorise.Icons.FontAwesome;
using Microsoft.AspNetCore.Components.Authorization; using Microsoft.AspNetCore.Components.Authorization;
using WatchIt.Common.Services.HttpClient; using WatchIt.Common.Services.HttpClient;
using WatchIt.Website.Services.Utility.Authentication; using WatchIt.Website.Services.Utility.Authentication;
@@ -53,6 +56,12 @@ public static class Program
private static WebApplicationBuilder SetupServices(this WebApplicationBuilder builder) private static WebApplicationBuilder SetupServices(this WebApplicationBuilder builder)
{ {
builder.Services.AddSingleton<HttpClient>(); builder.Services.AddSingleton<HttpClient>();
builder.Services.AddBlazorise(options =>
{
options.Immediate = true;
})
.AddBootstrap5Providers()
.AddFontAwesomeIcons();
// Utility // Utility
builder.Services.AddSingleton<IHttpClientService, HttpClientService>(); builder.Services.AddSingleton<IHttpClientService, HttpClientService>();

6
WatchIt.Website/WatchIt.Website/WatchIt.Website.csproj
View File

@@ -35,10 +35,16 @@
<_ContentIncludedByDefault Remove="Components\Pages\Weather.razor" /> <_ContentIncludedByDefault Remove="Components\Pages\Weather.razor" />
<_ContentIncludedByDefault Remove="wwwroot\bootstrap\bootstrap.min.css" /> <_ContentIncludedByDefault Remove="wwwroot\bootstrap\bootstrap.min.css" />
<_ContentIncludedByDefault Remove="wwwroot\bootstrap\bootstrap.min.css.map" /> <_ContentIncludedByDefault Remove="wwwroot\bootstrap\bootstrap.min.css.map" />
<_ContentIncludedByDefault Remove="wwwroot\scripts\popper.min.js" />
</ItemGroup> </ItemGroup>
<ItemGroup> <ItemGroup>
<AdditionalFiles Include="Layout\MainLayout.razor" /> <AdditionalFiles Include="Layout\MainLayout.razor" />
</ItemGroup> </ItemGroup>
<ItemGroup>
<PackageReference Include="Blazorise.Bootstrap5" Version="1.6.1" />
<PackageReference Include="Blazorise.Icons.FontAwesome" Version="1.6.1" />
</ItemGroup>
</Project> </Project>

1
WatchIt.Website/WatchIt.Website/_Imports.razor
View File

@@ -15,3 +15,4 @@
@using WatchIt.Website.Services.Utility.Authentication @using WatchIt.Website.Services.Utility.Authentication
@using WatchIt.Website.Services.WebAPI.Accounts @using WatchIt.Website.Services.WebAPI.Accounts
@using WatchIt.Website.Services.WebAPI.Media @using WatchIt.Website.Services.WebAPI.Media
@using Blazorise

57
WatchIt.Website/WatchIt.Website/wwwroot/css/general.css
View File

@@ -27,6 +27,14 @@ body, html {
/* CLASSES */ /* CLASSES */
.container-grid {
padding: 0 !important;
margin: 0 !important;
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
width: 100%;
}
.logo { .logo {
font-family: "Belanosima"; font-family: "Belanosima";
text-decoration: none; text-decoration: none;
@@ -34,53 +42,16 @@ body, html {
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }
.main-button {
--r:10px;
--b:2px;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
padding: 5px 10px;
border-radius: var(--r);
display: block;
align-items: self-end; .top-3 {
position: relative; top: 1rem !important;
z-index:0;
text-decoration: none;
transition: 0.3s;
font-family: Belanosima;
} }
.main-button::before { .mb-2rem {
content:""; margin-bottom: 2rem !important;
position:absolute;
z-index:-1;
inset: 0;
border: var(--b) solid transparent;
border-radius: var(--r);
background: inherit;
background-origin: border-box;
background-clip: border-box;
-webkit-mask:
linear-gradient(#fff 0 0) padding-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
-webkit-mask-repeat: no-repeat;
}
.main-button:hover {
color: #fff;
-webkit-text-fill-color: #fff;
-webkit-background-clip: border-box;
background-clip: border-box;
}
.main-button:hover::before {
-webkit-mask:none;
} }

50
WatchIt.Website/WatchIt.Website/wwwroot/css/main_button.css
View File

@@ -0,0 +1,50 @@
/* CLASSES */
.main-button {
--r:10px;
--b:2px;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
padding: 5px 10px;
border-radius: var(--r);
display: block;
align-items: self-end;
position: relative;
z-index:0;
text-decoration: none;
transition: 0.3s;
font-family: Belanosima;
}
.main-button::before {
content:"";
position:absolute;
z-index:-1;
inset: 0;
border: var(--b) solid transparent;
border-radius: var(--r);
background: inherit;
background-origin: border-box;
background-clip: border-box;
-webkit-mask:
linear-gradient(#fff 0 0) padding-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
-webkit-mask-repeat: no-repeat;
}
.main-button:hover {
color: #fff;
-webkit-text-fill-color: #fff;
-webkit-background-clip: border-box;
background-clip: border-box;
}
.main-button:hover::before {
-webkit-mask:none;
}