JonathanMcCaffrey/IGP-Fan-Reference
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Jonathan McCaffrey
2022-03-28 18:44:08 -04:00
commit e43d9a90e7
267 changed files with 17049 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
IGP/Pages/MakingOf/MakingOfPage.razor
+84
View File
@@ -0,0 +1,84 @@
@page "/makingof"
@layout PageLayout
<LayoutLargeContentComponent>
<WebsiteTitleComponent>Making Of</WebsiteTitleComponent>
<AlertComponent Type="SeverityType.Warning">
<Title>Under Construction</Title>
<Message>This page is still being worked on. It will list the tech and design choices made for this website. It's is strictly for educational and reference purposes, and it has nothing to do with IMMORTAL: Gates of Pyre.</Message>
</AlertComponent>
<ContentDividerComponent></ContentDividerComponent>
<FormLayoutComponent>
<FormDisplayComponent Label="Tech Stack">
<Display>Blazor (C# and HTML)</Display>
</FormDisplayComponent>
<FormDisplayComponent Label="Stack Details">
<Display>This is a Static Single Page Application hosted on Azure.</Display>
</FormDisplayComponent>
</FormLayoutComponent>
<ContentDividerComponent></ContentDividerComponent>
<MakingOfColours></MakingOfColours>
<ContentDividerComponent></ContentDividerComponent>
<DevOnlyComponent>
<MakingOfSectionComponent Title="Empty">
<MakingOfComponent>
<Title>
Empty
</Title>
<Description>
Empty
</Description>
<Example>
Empty
</Example>
<Usage>
<CodeComponent>Empty</CodeComponent>
</Usage>
<Code>
<CodeComponent>Empty</CodeComponent>
</Code>
</MakingOfComponent>
</MakingOfSectionComponent>
</DevOnlyComponent>
<DevOnlyComponent>
<MakingOfSectionComponent Title="Dialogs">
<MakingOfDialogs></MakingOfDialogs>
</MakingOfSectionComponent>
</DevOnlyComponent>
<DevOnlyComponent>
<FormLayoutComponent>
<FormEscapeCodeComponent></FormEscapeCodeComponent>
</FormLayoutComponent>
</DevOnlyComponent>
<MakingOfSectionComponent Title="Displays">
<MakingOfDisplays></MakingOfDisplays>
</MakingOfSectionComponent>
<DevOnlyComponent>
<MakingOfSectionComponent Title="Navigation">
<MakingOfNavigation></MakingOfNavigation>
</MakingOfSectionComponent>
</DevOnlyComponent>
<MakingOfSectionComponent Title="Feedback">
<MakingOfFeedback></MakingOfFeedback>
</MakingOfSectionComponent>
<MakingOfSectionComponent Title="Forms">
<MakingOfForms></MakingOfForms>
</MakingOfSectionComponent>
</LayoutLargeContentComponent>
IGP/Pages/MakingOf/Parts/MakingOfColours.razor
+160
View File
@@ -0,0 +1,160 @@
<div>Colors</div>
<div class="colorContainer">
<CodeComponent>
--accent: @accent;
--primary: @primary;
--primary-border: @primary_border;
--primary-hover: @primary_hover;
--primary-border-hover: @primary_border_hover;
--background: @background;
--secondary: @secondary;
--secondary-hover: @secondary_hover;
--secondary-border-hover: @secondary_border_hover;
--paper: @paper;
--paper-border: @paper_border;
--info: @info;
--info-border: @info_border;
</CodeComponent>
<br />
<div class="color accent">
<div>Accent</div>
<div>
Base: <input type="color" value="@accent" @onchange="e => accent = e.Value.ToString()" />
</div>
</div>
<div class="color primary">
<div>Primary</div>
<div>
Base: <input type="color" value="@primary" @onchange="e => primary = e.Value.ToString()" />
</div>
<div>
Border: <input type="color" value="@primary_border" @onchange="e => primary_border = e.Value.ToString()" />
</div>
<div>
Hover Base: <input type="color" value="@primary_hover" @onchange="e => primary_hover = e.Value.ToString()" />
</div>
<div>
Hover Border: <input type="color" value="@primary_border_hover" @onchange="e => primary_border_hover = e.Value.ToString()" />
</div>
</div>
<div class="color secondary">
<div>Secondary</div>
<div>
Base: <input type="color" value="@secondary" @onchange="e => secondary = e.Value.ToString()" />
</div>
<div>
Hover Base: <input type="color" value="@secondary_hover" @onchange="e => secondary_hover = e.Value.ToString()" />
</div>
<div>
Hover Border: <input type="color" value="@secondary_border_hover" @onchange="e => secondary_border_hover = e.Value.ToString()" />
</div>
</div>
<div class="color paper">
<div>Paper</div>
<div>
Base: <input type="color" value="@paper" @onchange="e => paper = e.Value.ToString()" />
</div>
<div>
Border: <input type="color" value="@paper_border" @onchange="e => paper_border = e.Value.ToString()" />
</div>
</div>
<div class="color background">
<div>Background</div>
<div>
Base: <input type="color" value="@background" @onchange="e => background = e.Value.ToString()" />
</div>
</div>
<div class="color info">
<div>Info</div>
<div>
Base: <input type="color" value="@info" @onchange="e => info = e.Value.ToString()" />
</div>
</div>
</div>
<style>
:root {
--accent: @accent;
--primary: @primary;
--primary-border: @primary_border;
--primary-hover: @primary_hover;
--primary-border-hover: @primary_border_hover;
--background: @background;
--secondary: @secondary;
--secondary-hover: @secondary_hover;
--secondary-border-hover: @secondary_border_hover;
--paper: @paper;
--paper-border: @paper_border;
--info: @info;
--info-border: @info_border;
}
.colorContainer {
display: flex;
flex-direction: column;
}
.color {
padding: 12px;
display: flex;
flex-direction: row;
gap: 32px;
align-items: center;
}
.accent {
background-color: var(--accent);
}
.primary {
background-color: var(--primary);
border: 1px solid var(--primary-border);
}
.primary:hover {
background-color: var(--primary-hover);
border-color: var(--primary-border-hover);
}
.secondary {
background-color: var(--secondary);
border: 1px solid var(--secondary);
}
.secondary:hover {
background-color: var(--secondary-hover);
border-color: var(--secondary-border-hover);
}
.paper {
background-color: var(--paper);
border: 4px solid var(--paper-border);
}
.background {
background-color: var(--background);
}
.info {
background-color: var(--info);
}
</style>
@code {
string accent = "#432462";
string primary = "#4308a3";
string primary_border = "#2c0b62";
string primary_hover = "#5e00f7";
string primary_border_hover = "#a168ff";
string background = "#161618";
string secondary = "#23133e";
string secondary_hover = "#2a0070";
string secondary_border_hover = "#a168ff";
string paper = "#252526";
string paper_border = "#151516";
string info = "#451376";
readonly string info_border = "#210b36";
}
IGP/Pages/MakingOf/Parts/MakingOfColours.razor.css
+49
View File
@@ -0,0 +1,49 @@
.colorContainer {
display: flex;
flex-direction: column;
}
.color {
padding: 12px;
display: flex;
flex-direction: row;
gap: 32px;
align-items: center;
}
.accent {
background-color: var(--accent);
}
.primary {
background-color: var(--primary);
border: 1px solid var(--primary-border);
}
.primary:hover {
background-color: var(--primary-hover);
border-color: var(--primary-border-hover);
}
.secondary {
background-color: var(--secondary);
border: 1px solid var(--secondary);
}
.secondary:hover {
background-color: var(--secondary-hover);
border-color: var(--secondary-border-hover);
}
.paper {
background-color: var(--paper);
border: 4px solid var(--paper-border);
}
.background {
background-color: var(--background);
}
.info {
background-color: var(--info);
}
IGP/Pages/MakingOf/Parts/MakingOfDialogs.razor
+18
View File
@@ -0,0 +1,18 @@
<MakingOfComponent>
<Title>Dialog</Title>
<Description>...</Description>
<Example>
<DialogComponent></DialogComponent>
</Example>
<Usage>
//TODO
</Usage>
<Code>
//TODO
</Code>
</MakingOfComponent>
@code {
}
IGP/Pages/MakingOf/Parts/MakingOfDisplays.razor
+185
View File
@@ -0,0 +1,185 @@
<MakingOfComponent>
<Title>
Entity Display
</Title>
<Description>
Display element for holding entity information.
</Description>
<Example>
<LayoutRowComponent>
<EntityDisplayComponent Title="Example Entity Info">
<div>
Example Entity Content
</div>
@for (var i = 0; i < 1; i++) {
<div>
-@i Example Entity Content
</div>
}
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</EntityDisplayComponent>
<EntityDisplayComponent Title="Example Entity Info">
<div>
Example Entity Content
</div>
@for (var i = 0; i < 2; i++) {
<div>
-@i Example Entity Content
</div>
}
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
</div>
</EntityDisplayComponent>
<EntityDisplayComponent Title="Example Entity Info">
<div>
Example Entity Content
</div>
@for (var i = 0; i < 1; i++) {
<div>
-@i Example Entity Content
</div>
}
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</EntityDisplayComponent>
</LayoutRowComponent>
</Example>
<Usage>
<CodeComponent>
&lt;LayoutRowComponent&gt;
&lt;EntityDisplayComponent Title=&quot;Example Entity Info&quot;&gt;
&lt;div&gt;
Example Entity Content
&lt;/div&gt;
@@for (var i = 0; i &lt; 1; i++) {
&lt;div&gt;
-@@i Example Entity Content
&lt;/div&gt;
}
&lt;div&gt;
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
&lt;/div&gt;
&lt;/EntityDisplayComponent&gt;
&lt;EntityDisplayComponent Title=&quot;Example Entity Info&quot;&gt;
&lt;div&gt;
Example Entity Content
&lt;/div&gt;
@@for (var i = 0; i &lt; 2; i++) {
&lt;div&gt;
-@@i Example Entity Content
&lt;/div&gt;
}
&lt;div&gt;
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
&lt;/div&gt;
&lt;/EntityDisplayComponent&gt;
&lt;EntityDisplayComponent Title=&quot;Example Entity Info&quot;&gt;
&lt;div&gt;
Example Entity Content
&lt;/div&gt;
@@for (var i = 0; i &lt; 1; i++) {
&lt;div&gt;
-@@i Example Entity Content
&lt;/div&gt;
}
&lt;div&gt;
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
&lt;/div&gt;
&lt;/EntityDisplayComponent&gt;
&lt;/LayoutRowComponent&gt;
</CodeComponent>
</Usage>
<Code>
<CodeComponent>
&lt;div class=&quot;entityDisplaySection&quot;&gt;
&lt;div class=&quot;entityDisplayHeader&quot;&gt;
&lt;div class=&quot;entityDisplayTitle&quot;&gt;
@@Title
&lt;/div&gt;
&lt;div class=&quot;entityDisplayBorder&quot;&gt;
&lt;/div&gt;
&lt;/div&gt;
@@ChildContent
&lt;/div&gt;
&lt;style&gt;
.entityDisplaySection {
position: relative;
padding: 8px;
display: flex;
gap: 12px;
flex-direction: column;
margin-top: 14px;
margin-top: 20px;
padding: 12px;
background-color: var(--info);
border-top-right-radius: 12px;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
}
.entityDisplayHeader {
bottom: 100%;
position: absolute;
white-space: pre;
width: 100%;
line-height: 0px;
right: 0px;
top: -4px;
display: flex;
}
.entityDisplayTitle {
font-weight: 800;
font-size: 1.4rem;
padding-right: 8px;
text-shadow: 3px 0 0 var(--info), -3px 0 0 var(--info), 0 3px 0 var(--info), 0 -3px 0 var(--info), 2px 2px var(--info), -2px -2px 0 var(--info), 2px -2px 0 var(--info), -2px 2px 0 var(--info);
}
@@@@media only screen and (max-width: 1025px) {
.entityDisplayHeader {
position: inherit;
width: 100%;
margin: 0px;
}
.entityDisplaySection {
position: inherit;
width: 100%;
margin: 0px;
max-width: none;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.entityDisplayTitle {
position: inherit;
margin: 0px;
}
}
&lt;/style&gt;
@@code {
[Parameter] public RenderFragment ChildContent { get; set; }
[Parameter] public string Title { get; set; }
}
</CodeComponent>
</Code>
</MakingOfComponent>
IGP/Pages/MakingOf/Parts/MakingOfFeedback.razor
+58
View File
@@ -0,0 +1,58 @@
<WebsiteTitleComponent>
Feedback
</WebsiteTitleComponent>
<MakingOfComponent>
<Title>
Loading
</Title>
<Description>
Indicates a component is being loaded (a component that relies on JSON)
</Description>
<Example>
<div style="width: 300px; height: 450px;">
<LoadingComponent></LoadingComponent>
</div>
</Example>
<Usage>
<CodeComponent>Empty</CodeComponent>
</Usage>
<Code>
<CodeComponent>Empty</CodeComponent>
</Code>
</MakingOfComponent>
<MakingOfComponent>
<Title>Alert Message</Title>
<Description>Used to convey important information to the viewer. Comes in Yellow (Warning), Blue (Information), Red (Error), and Green (Success). Mostly used to warn viewers of pre-alpha or incomplete content being viewed.</Description>
<Example>
<AlertComponent Type="SeverityType.Warning">
<Title>Warning Alert Title</Title>
<Message>Warning Alert Message</Message>
</AlertComponent>
<AlertComponent Type="SeverityType.Information">
<Title>Information Alert Title</Title>
<Message>Information Alert Message</Message>
</AlertComponent>
<AlertComponent Type="SeverityType.Error">
<Title>Error Alert Title</Title>
<Message>Error Alert Message</Message>
</AlertComponent>
<AlertComponent Type="SeverityType.Success">
<Title>Succsess Alert Title</Title>
<Message>Succsess Alert Message</Message>
</AlertComponent>
</Example>
<Usage>
<CodeComponent>&lt;AlertComponent Type=SeverityType.Warning&gt;<br/> &lt;Title&gt;Warning Alert Title&lt;/Title&gt;<br/> &lt;Message&gt;Warning Alert Message&lt;/Message&gt;<br/>&lt;/AlertComponent&gt;<br/>&lt;AlertComponent Type=SeverityType.Information&gt;<br/> &lt;Title&gt;Information Alert Title&lt;/Title&gt;<br/> &lt;Message&gt;Information Alert Message&lt;/Message&gt;<br/>&lt;/AlertComponent&gt;<br/>&lt;AlertComponent Type=SeverityType.Error&gt;<br/> &lt;Title&gt;Error Alert Title&lt;/Title&gt;<br/> &lt;Message&gt;Error Alert Message&lt;/Message&gt;<br/>&lt;/AlertComponent&gt;<br/>&lt;AlertComponent Type=SeverityType.Success&gt;<br/> &lt;Title&gt;Succsess Alert Title&lt;/Title&gt;<br/> &lt;Message&gt;Succsess Alert Message&lt;/Message&gt;<br/>&lt;/AlertComponent&gt;<br/></CodeComponent>
</Usage>
<Code>
<CodeComponent>@@using Components.Pages.Utils<br/><br/>&lt;div class=&quot;alertContainer @@Type.ToString().ToLower()&quot;&gt;<br/> @@if (Title != null) {<br/> &lt;div class=&quot;alertTitle&quot;&gt;<br/> @@Title<br/> &lt;/div&gt;<br/> }<br/> @@if (Message != null) {<br/> &lt;div&gt;<br/> @@Message<br/> &lt;/div&gt;<br/><br/> }<br/>&lt;/div&gt;<br/>&lt;style&gt;<br/> .alertContainer {<br/> border: 4px solid;<br/> border-radius: 4px;<br/> padding: 16px;<br/> display: flex;<br/> flex-direction: column;<br/> justify-items: stretch;<br/> width: 100%;<br/> }<br/><br/> .alertContainer.@@SeverityType.Warning.ToString().ToLower() {<br/> border-color: #2a2000;<br/> background-color: #ffbf0029;<br/> }<br/><br/> .alertContainer.@@SeverityType.Error.ToString().ToLower() {<br/> border-color: #290102;<br/> background-color: #4C2C33;<br/> }<br/><br/> .alertContainer.@@SeverityType.Information.ToString().ToLower() {<br/> border-color: #030129;<br/> background-color: #2c3a4c;<br/> }<br/><br/> .alertContainer.@@SeverityType.Success.ToString().ToLower() {<br/> border-color: #042901;<br/> background-color: #2E4C2C;<br/> }<br/><br/> .alertTitle {<br/> font-weight: 800;<br/> }<br/><br/>&lt;/style&gt;<br/>@@code {<br/> [Parameter] public RenderFragment? Title { get; set; }<br/> [Parameter] public RenderFragment? Message { get; set; }<br/> [Parameter] public SeverityType Type { get; set; } = SeverityType.Warning;<br/>}</CodeComponent>
</Code>
</MakingOfComponent>
@code {
}
IGP/Pages/MakingOf/Parts/MakingOfForms.razor
+35
View File
@@ -0,0 +1,35 @@
<MakingOfComponent>
<Title>Form Text</Title>
<Description>Add Text Input</Description>
<Example>
<FormLayoutComponent>
<FormTextComponent Label="Label Text" Info="Info Text" Placeholder="Placeholder Text..." Value="Value Text"/>
<FormTextAreaComponent Label="Label Text" Info="Info Text" Placeholder="Placeholder Text..." Value="Value Text"/>
</FormLayoutComponent>
</Example>
<Usage>
//TODO
</Usage>
<Code>
//TODO
</Code>
</MakingOfComponent>
<MakingOfComponent>
<Title>Form Area</Title>
<Description>Add Text Body Input</Description>
<Example>
<FormTextAreaComponent Label="Label Text" Info="Info Text" Placeholder="Placeholder Text..." Value="Value Text"/>
</Example>
<Usage>
//TODO
</Usage>
<Code>
//TODO
</Code>
</MakingOfComponent>
@code {
}
IGP/Pages/MakingOf/Parts/MakingOfNavigation.razor
+80
View File
@@ -0,0 +1,80 @@
<MakingOfComponent>
<Title>
Nav Section with Nav Links
</Title>
<Description>
Group specfic webpages. Each webpage link is used to navigate to that specific webpage. If on the webpage, the link turns dark gray. It can be clicked again to leave the page and return to home.
</Description>
<Example>
<NavSectionComponent Section=@(new WebSectionModel { Name = "Example Section" })
Children=@(new List<WebPageModel> { new() { Name = "Example Page", Href = "immortal-makingof", IsPrivate = "False" }, new() { Name = "Database", Href = "immortal-database", IsPrivate = "False" } })>
</NavSectionComponent>
</Example>
<Usage>
<CodeComponent>
&lt;NavSectionComponent Section=@@(new WebSectionModel{Name = &quot;Example Section&quot;})
Children=@@(new List&lt;WebPageModel&gt;{new WebPageModel{Name=&quot;Example Page&quot;, Href = &quot;immortal-makingof&quot;, IsPrivate = false}, new WebPageModel{Name=&quot;Database&quot;, Href = &quot;immortal-database&quot;, IsPrivate = false}})&gt;
&lt;/NavSectionComponent&gt;
</CodeComponent>
</Usage>
<Code>
<CodeComponent>
@@using Model.Website;
@@using Model.Website.Enums;
&lt;div class=&quot;sectionContainer&quot;&gt;
&lt;div class=&quot;sectionHeader&quot;&gt;
&lt;div class=&quot;sectionTitle&quot;&gt;
@@Section.Name
&lt;/div&gt;
&lt;/div&gt;
@@foreach (var childPage in Children) {
if (childPage.IsPrivate) {
continue;
}
&lt;NavLinkComponent Page=childPage&gt;&lt;/NavLinkComponent&gt;
}
&lt;/div&gt;
&lt;style&gt;
.sectionContainer {
display: flex;
flex-direction: column;
gap: 4px;
justify-content: flex-start;
position: relative;
margin-top: 12px;
padding: 18px;
width: 300px;
margin-left: 4px;
}
.sectionHeader {
bottom: 100%;
position: absolute;
top: 0px;
left: -8px;
padding-right: 12px;
padding-left: 4px;
width: 100%;
display: flex;
line-height: 0px;
}
.sectionTitle {
font-weight: bold;
padding-right: 8px;
margin-top: -2px;
white-space: pre;
}
&lt;/style&gt;
@@code {
[Parameter] public WebSectionModel? Section { get; set; }
[Parameter] public List&lt;WebPageModel&gt;? Children { get; set; }
}
</CodeComponent>
</Code>
</MakingOfComponent>