feat(Documents) Notes/Docs page improvements and warning cleanup

2022-04-07 13:30:00 -04:00
parent b270453030
commit d82e60efdf
223 changed files with 4396 additions and 2861 deletions
@@ -0,0 +1,140 @@
+@layout PageLayout
+
+@inject INoteService noteService
+@implements IDisposable
+
+@page "/notes"
+
+
+@if (!noteService.IsLoaded())
+{
+    <LoadingComponent/>
+}
+else
+{
+    <LayoutMediumContentComponent>
+
+        <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: 8px;
+    }
+    
+    .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()
+    {
+        noteService.Subscribe(StateHasChanged);
+
+        noteService.Load();
+    }
+
+
+    public void Dispose()
+    {
+        noteService.Unsubscribe(StateHasChanged);
+    }
+
+
+    void OnSectionChanged(ChangeEventArgs e)
+    {
+        selectedSection = e.Value!.ToString()!;
+        StateHasChanged();
+    }
+
+}
@@ -1,109 +1,71 @@
@layout PageLayout

-@inject INoteService NoteService
+@inject INoteService noteService
@implements IDisposable

-@page "/notes"
+@page "/notes/{href1}/{href2?}/{href3?}/{href4?}/{href5?}"


-@if (!NoteService.IsLoaded())
+@if (!noteService.IsLoaded())
 {
-    <LoadingComponent></LoadingComponent>
+    <LoadingComponent/>
 }
 else
 {
-    <LayoutMediumContentComponent>
-        <WebsiteTitleComponent>Notes</WebsiteTitleComponent>
-
-        <div class="section">
-            <div for="noteSection">Section: </div>
-            <div style="flex: 1"></div>
-            <select @oninput="OnSectionChanged" style="background-color: #36393F; width: 250px; margin-right: 16px;" name="noteSection">
-                <option value="All">All</option>
-
-            </select>
-        </div>
-
-        <div class="notesContainer">
-            @foreach (var note in NoteService.NoteModels) {
-                if (note.IsHidden) {
-                    continue;
+    <LayoutWithSidebarComponent>
+        <Sidebar>
+            <NoteNavComponent
+                Connections="noteService.NoteConnectionModels"
+                Notes="noteService.NoteContentModels"/>
+        </Sidebar>
+        <Content>
+            <PaperComponent>
+                @foreach (var note in noteService.NoteContentModels)
+                {
+                    if (!note.Href.Equals(Href))
+                    {
+                        continue;
+                    }
+                    <NoteComponent NoteContentModel="note"/>
                }
-                if (selectedSection != "All" && note.Section != selectedSection) {
-                    continue;
-                }
-                @if (note.IsPreAlpha) {
-                    <AlertComponent Type=SeverityType.Warning>
-                        <Title>Pre Alpha</Title>
-                        <Message>This note refers to content that is in pre-alpha. It won't be accurate in future updates to IGP.</Message>
-                    </AlertComponent>
-                }
-                <PaperComponent>
-                    <div style="display: flex; flex-direction: row;">
-                        <span style="font-weight: bold; font-style:italic;">@note.Section</span>
-                        <div style="flex: 1"></div>
-                        <span style="font-weight: bold; font-style:italic;">Last Updated on @note.LastUpdated</span>
-                    </div>
-                    <div>
-                        <div id="@note.DEPRECATED_Id()" style="font-weight: bold; font-size: 1.4rem;">@note.Name</div>
-                        
-                        <div style="white-space:break-spaces;">@((MarkupString)note.Description)</div>
-                    </div>
-                </PaperComponent>
-            }
-        </div>
-    </LayoutMediumContentComponent>
-   
+            </PaperComponent>
+        </Content>
+    </LayoutWithSidebarComponent>
 }
+
 <style>
-    .section {
-        display: flex;
-        width: 500px;
-        flex-direction: row;
-        background-color: var(--paper);
-        justify-content: center;
-        padding: 24px;
-        border: 4px solid var(--paper-border);
-        box-shadow: 0px 6px var(--paper-border);
-    }

-    .notesContainer {
-        display: flex;
-        flex-direction: column;
-        gap: 16px;
-    }
-
-    .noteContainer {
-        padding: 24px;
-        border: 2px solid black;
-        margin: auto;
-        overflow-y: auto;
-        overflow-x: hidden;
-        background-color: var(--paper);
-    }
 </style>

@code {

-    string selectedSection = "All";
+    [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 ?? "";

    protected override void OnInitialized()
    {
-        NoteService.Subscribe(StateHasChanged);
-        
-        NoteService.Load();
+        noteService.Subscribe(StateHasChanged);
+
+        noteService.Load();
    }
-    
-    
+
    public void Dispose()
    {
-        NoteService.Unsubscribe(StateHasChanged);
-
+        noteService.Unsubscribe(StateHasChanged);
    }
-    

-    void OnSectionChanged(ChangeEventArgs e) {
-        selectedSection = e.Value.ToString();
-        StateHasChanged();
-    }
 }
@@ -0,0 +1,35 @@
+<div class="note">
+    <div class="noteHeader">
+        <div class="noteTitle">@NoteContentModel.Name</div>
+
+        <div class="noteDates">
+            <div class="noteDateUpdated"><b>Updated</b>: @NoteContentModel.UpdatedDate.ToString("MM/dd/yyyy")</div>
+            <div class="noteDateCreated"><b>Created</b>: @NoteContentModel.CreatedDate.ToString("MM/dd/yyyy")</div>
+        </div>
+    </div>
+    <div class="noteContent">@((MarkupString)Markdown.ToHtml(NoteContentModel.Content))</div>
+</div>
+
+<style>
+ .noteTitle {
+    font-weight: bold;
+ }
+ 
+ .noteHeader {
+    display: flex;
+    justify-content: space-between;
+ }
+ 
+ .noteDates {
+    display: flex;
+    flex-direction: column;
+ }
+ 
+</style>
+
+@code {
+
+    [Parameter]
+    public NoteContentModel NoteContentModel { get; set; } = default!;
+
+}
@@ -0,0 +1,75 @@
+@if (Note!.NoteContentModels.Count > 0)
+{
+    <div class="noteInnerNavContainer">
+        @foreach (var innerNote in Note.NoteContentModels)
+        {
+            var linkStyle = $"noteInnerNavButton inner_{Layers}";
+            <NavLink class="@linkStyle" href="@innerNote.GetNoteLink()">@innerNote.Name</NavLink>
+            <NoteInnerNavComponent Note="@innerNote" Layers="@IncrementLayers()"/>
+        }
+    </div>
+}
+
+<style>
+ 
+.noteInnerNavContainer {
+    display: flex;
+    flex-direction: column;
+}
+
+.noteInnerNavButton a {
+    color: white;
+}
+
+.noteInnerNavButton a:hover {
+    color: white;
+}
+
+.noteInnerNavButton {
+    padding: 8px;
+    margin-left: 8px;
+    color: white;
+}
+
+.noteInnerNavButton:hover {
+    
+}
+
+
+.inner_1 {
+    margin-left: 8px;
+}
+
+.inner_2 {
+    margin-left: 16px;
+}
+
+.inner_3 {
+    margin-left: 24px;
+}
+
+
+
+
+</style>
+
+@code {
+
+    [Parameter]
+    public NoteContentModel? Note { get; set; } = default!;
+
+    [Parameter]
+    public int Layers { get; set; } = 1;
+
+    public int IncrementLayers()
+    {
+        return Layers + 1;
+    }
+
+
+    private string GetLink(NoteContentModel note)
+    {
+        return $"notes/{note.Href}";
+    }
+
+}
@@ -0,0 +1,43 @@
+<div class="noteNavContainer">
+    @foreach (var note in Notes)
+    {
+        if (note.Parent == null)
+        {
+            <NavLink class="noteNavButton" href="@note.GetNoteLink()">@note.Name</NavLink>
+            <NoteInnerNavComponent Note="@note"/>
+        }
+    }
+</div>
+
+<style>
+ .noteNavContainer {
+     display: flex;
+     flex-direction: column;
+ }
+ 
+ .noteNavButton a {
+     color: white;
+ }
+ 
+ .noteNavButton a:hover {
+      color: white;
+      background-color: var(--primary-hover);
+           
+  }
+ 
+ .noteNavButton {
+     padding: 8px;
+     color: white;
+ }
+
+</style>
+
+@code {
+
+    [Parameter]
+    public List<NoteContentModel> Notes { get; set; } = default!;
+
+    [Parameter]
+    public List<NoteConnectionModel> Connections { get; set; } = default!;
+
+}