Initial Commit
This commit is contained in:
@@ -0,0 +1,26 @@
|
||||
<div class="code">
|
||||
@ChildContent
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.code {
|
||||
font-family: monospace;
|
||||
border: 2px solid white;
|
||||
color: white;
|
||||
padding: 8px;
|
||||
background-color: black;
|
||||
white-space: pre;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
.code::-webkit-scrollbar {
|
||||
height: 0;
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
|
||||
@code {
|
||||
|
||||
[Parameter] public RenderFragment ChildContent { get; set; } = default!;
|
||||
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
@if (isOnDev)
|
||||
{
|
||||
<div class="devOnlyContainer">
|
||||
<div class="devOnlyTitleContainer">
|
||||
<div class="devOnlyTitle">
|
||||
DevOnly UI
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="devOnlyContentContainer">
|
||||
<div class="devOnlyContent">
|
||||
|
||||
@ChildContent
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.devOnlyContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.devOnlyTitle {
|
||||
background-color: rgba(20, 20, 20, 0.75);
|
||||
padding: 10px;
|
||||
color: orange;
|
||||
font-weight: bolder;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.devOnlyContent {
|
||||
background-color: rgba(20, 20, 20, 0.75);
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
|
||||
.devOnlyTitleContainer {
|
||||
background: repeating-linear-gradient(45deg, blue, blue 50px, orange 51px, orange 100px);
|
||||
margin-right: auto;
|
||||
padding: 10px;
|
||||
border-left: 6px dashed orange;
|
||||
border-right: 6px dashed orange;
|
||||
border-top: 6px dashed orange;
|
||||
text-shadow: 4px 4px 1px blue;
|
||||
}
|
||||
|
||||
.devOnlyContentContainer {
|
||||
border: 6px dashed orange;
|
||||
background: repeating-linear-gradient(45deg, blue, blue 50px, orange 51px, orange 100px);
|
||||
box-shadow: 5px 5px 5px blue;
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
||||
|
||||
@code {
|
||||
|
||||
[Inject] NavigationManager NavigationManager { get; set; } = default!;
|
||||
|
||||
[Parameter] public RenderFragment ChildContent { get; set; } = default!;
|
||||
|
||||
bool isOnDev;
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
base.OnInitialized();
|
||||
isOnDev = NavigationManager.BaseUri.Contains("https://localhost");
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
<div class="entityDisplaySection">
|
||||
<div class="entityDisplayHeader">
|
||||
<div class="entityDisplayTitle">
|
||||
@Title
|
||||
</div>
|
||||
<div class="entityDisplayBorder">
|
||||
</div>
|
||||
</div>
|
||||
@ChildContent
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@code {
|
||||
|
||||
[Parameter] public RenderFragment ChildContent { get; set; } = default!;
|
||||
|
||||
[Parameter] public string Title { get; set; } = default!;
|
||||
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
<div class="tooltipWrapper">
|
||||
<div class="tooltipContent">
|
||||
@((MarkupString)InfoText)
|
||||
</div>
|
||||
@ChildContent
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.tooltipWrapper {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tooltipContent {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
width: 520px;
|
||||
max-width: 93vw;
|
||||
bottom: 100%;
|
||||
|
||||
margin-top: 60px;
|
||||
|
||||
margin-left: -60px;
|
||||
margin-bottom: 36px;
|
||||
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
padding-bottom: 20px;
|
||||
padding-top: 20px;
|
||||
white-space: break-spaces;
|
||||
z-index: 2147483647;
|
||||
|
||||
background-color: var(--info-secondary);
|
||||
border: 1px solid var(--info-secondary-border);
|
||||
border-radius: 2px;
|
||||
|
||||
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
|
||||
.tooltipWrapper:hover .tooltipContent {
|
||||
visibility: visible;
|
||||
|
||||
}
|
||||
|
||||
@@media only screen and (max-width: 1025px) {
|
||||
.tooltipContent {
|
||||
margin: auto;
|
||||
margin-bottom: 20px;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@code {
|
||||
|
||||
[Parameter] public RenderFragment ChildContent { get; set; } = default!;
|
||||
|
||||
[Parameter] public string InfoText { get; set; } = default!;
|
||||
|
||||
[Parameter] public int? Margin { get; set; }
|
||||
|
||||
}
|
||||
@@ -0,0 +1,111 @@
|
||||
<div class="makingOfContainer">
|
||||
<div class="makingInfo">
|
||||
<div class="makingTitle">@Title</div>
|
||||
<div class="makingDescription">@Description</div>
|
||||
</div>
|
||||
|
||||
<div class="makingofGrid">
|
||||
<div class="makingofItem">
|
||||
<details open>
|
||||
<summary>Example</summary>
|
||||
|
||||
<div class="shownCode">
|
||||
@Example
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
<div class="makingofItem">
|
||||
<details open>
|
||||
<summary>Usage</summary>
|
||||
<div class="shownCode">
|
||||
@Usage
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
<div class="makingofItem">
|
||||
<details open>
|
||||
<summary>Code</summary>
|
||||
<div class="shownCode">
|
||||
@Code
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.makingInfo {
|
||||
margin-top: 6px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.makingTitle {
|
||||
font-weight: bolder;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.makingOfContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.makingofGrid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
|
||||
}
|
||||
|
||||
.makingofItem {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.makingOfContainer details {
|
||||
border: 2px dashed black;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.makingOfContainer summary {
|
||||
font-weight: bold;
|
||||
padding: 12px;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.shownCode {
|
||||
visibility: hidden;
|
||||
padding: 12px;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.makingOfContainer details[open] .shownCode {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.makingOfContainer details[open] summary {
|
||||
border-bottom: 2px dashed black;
|
||||
}
|
||||
|
||||
@@media only screen and (max-width: 1025px) {
|
||||
.makingofGrid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@code {
|
||||
|
||||
[Parameter] public RenderFragment Title { get; set; } = default!;
|
||||
|
||||
[Parameter] public RenderFragment Description { get; set; } = default!;
|
||||
|
||||
|
||||
[Parameter] public RenderFragment Example { get; set; } = default!;
|
||||
|
||||
[Parameter] public RenderFragment Usage { get; set; } = default!;
|
||||
|
||||
[Parameter] public RenderFragment Code { get; set; } = default!;
|
||||
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
<details class="makingOfSection">
|
||||
<summary>
|
||||
@Title
|
||||
</summary>
|
||||
|
||||
@ChildContent
|
||||
</details>
|
||||
|
||||
<style>
|
||||
.makingOfSection {
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
padding: 25px;
|
||||
border-radius: 8px;
|
||||
border: 2px black dashed;
|
||||
}
|
||||
|
||||
.makingOfSection > summary {
|
||||
font-size: 3.4em;
|
||||
}
|
||||
</style>
|
||||
|
||||
@code {
|
||||
|
||||
[Parameter] public string Title { get; set; } = default!;
|
||||
|
||||
[Parameter] public RenderFragment ChildContent { get; set; } = default!;
|
||||
|
||||
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
<div class="panelDisplay">
|
||||
@ChildContent
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.panelDisplay {
|
||||
border: 2px solid var(--paper-border);
|
||||
padding: 20px;
|
||||
background-color: var(--paper);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
@code {
|
||||
|
||||
[Parameter] public RenderFragment ChildContent { get; set; } = default!;
|
||||
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
<div class="paperDisplay">
|
||||
@ChildContent
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.paperDisplay {
|
||||
padding-top: 24px;
|
||||
padding-left: 24px;
|
||||
padding-right: 24px;
|
||||
padding-bottom: 24px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
border: 4px solid var(--paper-border);
|
||||
background-color: var(--paper);
|
||||
box-shadow: 0px 6px var(--paper-border);
|
||||
}
|
||||
</style>
|
||||
|
||||
@code {
|
||||
|
||||
[Parameter] public RenderFragment ChildContent { get; set; } = default!;
|
||||
|
||||
[Parameter] public string Title { get; set; } = default!;
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user