Jonathan
145 lines
3.3 KiB
Plaintext
145 lines
3.3 KiB
Plaintext
@layout PageLayout
|
|
|
|
@inherits BasePage
|
|
|
|
@inject INoteService NoteService
|
|
@implements IDisposable
|
|
|
|
@inject IDataCollectionService DataCollectionService
|
|
|
|
@page "/notes"
|
|
|
|
|
|
@if (!NoteService.IsLoaded())
|
|
{
|
|
<LoadingComponent/>
|
|
}
|
|
else
|
|
{
|
|
<LayoutMediumContentComponent>
|
|
|
|
<WebsiteTitleComponent>Notes</WebsiteTitleComponent>
|
|
|
|
<PaperComponent>
|
|
@foreach (var noteSection in NoteService.NoteSectionModels)
|
|
{
|
|
<div class="noteSectionContainer">
|
|
<div class="noteSectionTitle">@noteSection.Name</div>
|
|
<div class="noteContentContainer">
|
|
@foreach (var noteContent in noteSection.NoteContentModels)
|
|
{
|
|
<NavLink class="noteContentLink" href="@noteContent.GetNoteLink()">
|
|
<div class="noteContentName">@noteContent.Name</div>
|
|
<div class="noteContentDescription">@noteContent.Description</div>
|
|
</NavLink>
|
|
}
|
|
</div>
|
|
</div>
|
|
}
|
|
</PaperComponent>
|
|
</LayoutMediumContentComponent>
|
|
}
|
|
<style>
|
|
.noteSectionContainer {
|
|
width: 100%;
|
|
padding-left: 8px;
|
|
padding-right: 8px;
|
|
padding-top: 8px;
|
|
padding-bottom: 64px;
|
|
}
|
|
|
|
.noteSectionTitle {
|
|
font-size: 3rem;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.noteContentContainer {
|
|
display: grid;
|
|
gap: 12px;
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
@@media only screen and (max-width: 1025px) {
|
|
.noteContentContainer {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.noteContentName {
|
|
font-weight: bold;
|
|
font-size: 1.6rem;
|
|
}
|
|
|
|
.noteContentDescription {
|
|
font-weight: normal;
|
|
}
|
|
|
|
|
|
.noteContentLink {
|
|
background-color: var(--paper);
|
|
border: 1px solid var(--paper-border);
|
|
border-radius: 2px;
|
|
padding-left: 12px;
|
|
padding-right: 12px;
|
|
padding-top: 24px;
|
|
padding-bottom: 24px;
|
|
color: white;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
text-align: center;
|
|
margin-left: 12px;
|
|
margin-right: 12px;
|
|
}
|
|
|
|
|
|
.noteContentLink:hover {
|
|
background-color: var(--paper-hover);
|
|
border-color: var(--paper-border-hover);
|
|
text-decoration: none;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.6);
|
|
transform: translateY(-2px) scale(1.01);
|
|
}
|
|
|
|
</style>
|
|
|
|
@code {
|
|
|
|
[Parameter] public string? Href1 { get; set; }
|
|
|
|
[Parameter] public string? Href2 { get; set; }
|
|
|
|
[Parameter] public string? Href3 { get; set; }
|
|
|
|
[Parameter] public string? Href4 { get; set; }
|
|
|
|
[Parameter] public string? Href5 { get; set; }
|
|
|
|
private string Href => Href5 ?? Href4 ?? Href3 ?? Href2 ?? Href1 ?? "";
|
|
|
|
string selectedSection = "All";
|
|
|
|
protected override void OnInitialized()
|
|
{
|
|
base.OnInitialized();
|
|
NoteService.Subscribe(StateHasChanged);
|
|
|
|
NoteService.Load();
|
|
}
|
|
|
|
|
|
void IDisposable.Dispose()
|
|
{
|
|
NoteService.Unsubscribe(StateHasChanged);
|
|
}
|
|
|
|
|
|
void OnSectionChanged(ChangeEventArgs e)
|
|
{
|
|
selectedSection = e.Value!.ToString()!;
|
|
StateHasChanged();
|
|
}
|
|
|
|
} |