Tech stack stub page and changing project to be just one Web Assembly project for now
This commit is contained in:
@@ -0,0 +1,118 @@
|
||||
@using WebAssembly.Components.Inputs
|
||||
@implements IDisposable;
|
||||
@inject IMyDialogService MyDialogService
|
||||
@inject IJSRuntime JsRuntime
|
||||
|
||||
|
||||
@inject NavigationManager NavigationManager
|
||||
|
||||
@if (MyDialogService.IsVisible)
|
||||
{
|
||||
<div class="confirmDialogBackground" onclick="@CloseDialog">
|
||||
<div class="confirmDialogContainer"
|
||||
@onclick:preventDefault="true"
|
||||
@onclick:stopPropagation="true">
|
||||
|
||||
<div class="confirmDialogHeader">
|
||||
@MyDialogService.GetDialogContents().Title
|
||||
</div>
|
||||
<div class="confirmDialogBody">
|
||||
@MyDialogService.GetDialogContents().Message
|
||||
</div>
|
||||
|
||||
<div class="confirmDialogFooter">
|
||||
<ButtonComponent MyButtonType="MyButtonType.Secondary"
|
||||
OnClick="MyDialogService.GetDialogContents().OnCancel">
|
||||
Cancel
|
||||
</ButtonComponent>
|
||||
<ButtonComponent MyButtonType="MyButtonType.Primary"
|
||||
OnClick="MyDialogService.GetDialogContents().OnConfirm">
|
||||
@MyDialogService.GetDialogContents().ConfirmButtonLabel
|
||||
</ButtonComponent>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.pageContents * {
|
||||
filter: blur(2px);
|
||||
}
|
||||
|
||||
.confirmDialogBackground {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
.confirmDialogContainer {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 64px;
|
||||
width: 800px;
|
||||
height: 600px;
|
||||
|
||||
/**
|
||||
background-color: var(--background);
|
||||
border-width: var(--dialog-border-width);
|
||||
border-style: solid;
|
||||
border-color: var(--dialog-border-color);
|
||||
border-radius: var(--dialog-radius);
|
||||
*/
|
||||
padding: 8px;
|
||||
|
||||
|
||||
box-shadow: 1px 2px 2px black;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
}
|
||||
|
||||
.confirmDialogHeader {
|
||||
font-size: 1.4em;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.confirmDialogBody {
|
||||
padding: 12px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.confirmDialogFooter {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: flex-end;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
</style>
|
||||
}
|
||||
|
||||
|
||||
@code {
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
base.OnInitialized();
|
||||
|
||||
MyDialogService.Subscribe(StateHasChanged);
|
||||
}
|
||||
|
||||
void IDisposable.Dispose()
|
||||
{
|
||||
MyDialogService.Unsubscribe(StateHasChanged);
|
||||
}
|
||||
|
||||
|
||||
public void CloseDialog()
|
||||
{
|
||||
MyDialogService.Hide();
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@@ -0,0 +1,125 @@
|
||||
@using WebAssembly.Components.Inputs
|
||||
@implements IDisposable;
|
||||
@inject IMyDialogService MyDialogService
|
||||
|
||||
@if (MyDialogService.IsVisible && MyDialogService.GetDialogContents().TechStack != null)
|
||||
{
|
||||
var techStack = MyDialogService.GetDialogContents().TechStack;
|
||||
|
||||
<div class="techStackDialogBackground" onclick="@CloseDialog">
|
||||
<div class="techStackDialogContainer"
|
||||
@onclick:preventDefault="true"
|
||||
@onclick:stopPropagation="true">
|
||||
|
||||
<div class="techStackDialogHeader">
|
||||
@techStack.Name
|
||||
</div>
|
||||
<div class="techStackDialogBody">
|
||||
<div class="description">
|
||||
@techStack.Description
|
||||
</div>
|
||||
<hr/>
|
||||
<div class="extendedNotes">
|
||||
@((MarkupString)(techStack.ExtendedNotes?.Replace("\n", "<br />") ?? ""))
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="techStackDialogFooter">
|
||||
<ButtonComponent MyButtonType="MyButtonType.Primary"
|
||||
OnClick="CloseDialog">
|
||||
Close
|
||||
</ButtonComponent>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.pageContents * {
|
||||
filter: blur(2px);
|
||||
}
|
||||
|
||||
.techStackDialogBackground {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.techStackDialogContainer {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 64px;
|
||||
width: 800px;
|
||||
max-height: 80vh;
|
||||
background-color: var(--paper);
|
||||
border-width: var(--dialog-border-width);
|
||||
border-style: solid;
|
||||
border-color: var(--dialog-border-color);
|
||||
border-radius: var(--dialog-radius);
|
||||
padding: 16px;
|
||||
box-shadow: 1px 2px 2px black;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: white;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.techStackDialogHeader {
|
||||
font-size: 1.8em;
|
||||
font-weight: bold;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid var(--paper-border);
|
||||
}
|
||||
|
||||
.techStackDialogBody {
|
||||
padding: 16px 0;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-style: italic;
|
||||
margin-bottom: 16px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.extendedNotes {
|
||||
white-space: pre-wrap;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.techStackDialogFooter {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid var(--paper-border);
|
||||
}
|
||||
|
||||
</style>
|
||||
}
|
||||
|
||||
|
||||
@code {
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
base.OnInitialized();
|
||||
MyDialogService.Subscribe(StateHasChanged);
|
||||
|
||||
Console.WriteLine("TechStackDialogComponent initialized");
|
||||
}
|
||||
|
||||
void IDisposable.Dispose()
|
||||
{
|
||||
MyDialogService.Unsubscribe(StateHasChanged);
|
||||
}
|
||||
|
||||
public void CloseDialog()
|
||||
{
|
||||
Console.WriteLine( "Closing dialog");
|
||||
MyDialogService.Hide();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
@inject IToastService ToastService
|
||||
|
||||
@using WebAssembly.Data
|
||||
@implements IDisposable
|
||||
|
||||
@* ReSharper disable once CSharpWarnings::CS8974 *@
|
||||
@if (Toast == null)
|
||||
{
|
||||
<div>Add toast object...</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div onclick="@Dismiss" style="opacity: @Opacity()" class="toastContainer @Toast.SeverityType.ToLower()">
|
||||
<div class="toastTitle">
|
||||
@Toast.Title
|
||||
</div>
|
||||
<div>
|
||||
@Toast.Message
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<style>
|
||||
.toastContainer {
|
||||
border: 4px solid;
|
||||
border-radius: 4px;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-items: stretch;
|
||||
width: 250px;
|
||||
cursor: pointer;
|
||||
}
|
||||
/**
|
||||
.@SeverityType.Warning.ToLower() {
|
||||
background-color: var(--severity-warning-color);
|
||||
border-color: var(--severity-warning-border-color);
|
||||
}
|
||||
|
||||
.@SeverityType.Error.ToLower() {
|
||||
background-color: var(--severity-error-color);
|
||||
border-color: var(--severity-error-border-color);
|
||||
}
|
||||
|
||||
.@SeverityType.Information.ToLower() {
|
||||
background-color: var(--severity-information-color);
|
||||
border-color: var(--severity-information-border-color);
|
||||
}
|
||||
|
||||
.@SeverityType.Success.ToLower() {
|
||||
background-color: var(--severity-success-color);
|
||||
border-color: var(--severity-success-border-color);
|
||||
}*/
|
||||
|
||||
.toastTitle {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@code {
|
||||
|
||||
[Parameter] public ToastModel? Toast { get; set; }
|
||||
|
||||
private readonly float removalTime = 1300;
|
||||
private readonly float fadeoutTime = 1200;
|
||||
|
||||
private float Opacity()
|
||||
{
|
||||
if (Toast!.Age < fadeoutTime)
|
||||
{
|
||||
return 1;
|
||||
}
|
||||
|
||||
return 1.0f - (Toast.Age - fadeoutTime) / (removalTime - fadeoutTime);
|
||||
}
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
base.OnInitialized();
|
||||
ToastService.Subscribe(OnUpdate);
|
||||
}
|
||||
|
||||
void Dismiss()
|
||||
{
|
||||
ToastService.RemoveToast(Toast!);
|
||||
}
|
||||
|
||||
void IDisposable.Dispose()
|
||||
{
|
||||
ToastService.Unsubscribe(OnUpdate);
|
||||
}
|
||||
|
||||
void OnUpdate()
|
||||
{
|
||||
if (Toast!.Age > removalTime)
|
||||
{
|
||||
ToastService.RemoveToast(Toast);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
<button class="buttonContainer @MyButtonType.ToString().ToLower()" @onclick="ButtonClicked">@ChildContent</button>
|
||||
|
||||
<style>
|
||||
.buttonContainer {
|
||||
padding: 16px;
|
||||
border: 1px solid;
|
||||
border-radius: 8px;
|
||||
font-weight: 800;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.@(MyButtonType.Primary.ToString().ToLower()) {
|
||||
border-color: var(--primary);
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
.@MyButtonType.Secondary.ToString().ToLower() {
|
||||
border-color: var(--secondary);
|
||||
background-color: var(--secondary);
|
||||
}
|
||||
|
||||
.@MyButtonType.Primary.ToString().ToLower():hover {
|
||||
background-color: var(--primary-hover);
|
||||
border-color: var(--primary-border-hover);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.@MyButtonType.Secondary.ToString().ToLower():hover {
|
||||
background-color: var(--secondary-hover);
|
||||
border-color: var(--secondary-border-hover);
|
||||
color: white;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
@code {
|
||||
|
||||
[Parameter] public RenderFragment ChildContent { get; set; } = default!;
|
||||
|
||||
[Parameter] public EventCallback<EventArgs> OnClick { get; set; }
|
||||
|
||||
[Parameter] public MyButtonType MyButtonType { get; set; }
|
||||
|
||||
private void ButtonClicked(EventArgs eventArgs)
|
||||
{
|
||||
OnClick.InvokeAsync(eventArgs);
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
namespace WebAssembly.Components.Inputs;
|
||||
|
||||
public enum MyButtonType
|
||||
{
|
||||
Primary, // Positive Actions
|
||||
Secondary // Destruction Action
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
@using MudBlazor
|
||||
@inherits LayoutComponentBase
|
||||
|
||||
<MudPopoverProvider/>
|
||||
<MudDialogProvider/>
|
||||
<MudSnackbarProvider/>
|
||||
|
||||
<div class="page">
|
||||
<main>
|
||||
<div class="top-row px-4">
|
||||
<a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
|
||||
</div>
|
||||
|
||||
<article class="content px-4">
|
||||
@Body
|
||||
</article>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<div id="blazor-error-ui" data-nosnippet>
|
||||
An unhandled error has occurred.
|
||||
<a href="." class="reload">Reload</a>
|
||||
<span class="dismiss">🗙</span>
|
||||
</div>
|
||||
@@ -0,0 +1,98 @@
|
||||
.page {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
|
||||
}
|
||||
|
||||
.top-row {
|
||||
background-color: #f7f7f7;
|
||||
border-bottom: 1px solid #d6d5d5;
|
||||
justify-content: flex-end;
|
||||
height: 3.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.top-row ::deep a, .top-row ::deep .btn-link {
|
||||
white-space: nowrap;
|
||||
margin-left: 1.5rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.top-row ::deep a:first-child {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
@media (max-width: 640.98px) {
|
||||
.top-row {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.top-row ::deep a, .top-row ::deep .btn-link {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 641px) {
|
||||
.page {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 250px;
|
||||
height: 100vh;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.top-row {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.top-row.auth ::deep a:first-child {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.top-row, article {
|
||||
padding-left: 2rem !important;
|
||||
padding-right: 1.5rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
#blazor-error-ui {
|
||||
color-scheme: light only;
|
||||
background: lightyellow;
|
||||
bottom: 0;
|
||||
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
|
||||
box-sizing: border-box;
|
||||
display: none;
|
||||
left: 0;
|
||||
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
#blazor-error-ui .dismiss {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: 0.75rem;
|
||||
top: 0.5rem;
|
||||
}
|
||||
Reference in New Issue
Block a user