This commit is contained in:
BOTAlex 2024-07-14 16:24:54 +02:00
parent 88f78e2723
commit 78bf114130
7 changed files with 47 additions and 12 deletions

View File

@ -6,17 +6,17 @@
<MudSnackbarProvider /> <MudSnackbarProvider />
<MudLayout> <MudLayout>
<MudAppBar Elevation="1"> <MudAppBar Elevation="1">
<MudImage Width="50" Height="50" ObjectFit=ObjectFit.Fill Src="images/fi478h5fj45d1.webp" Alt="Logo" Elevation="25" Class="rounded-lg" /> <NavLink ActiveClass="d-flex align-center" href="/">
<MudImage Width="50" Height="50" ObjectFit=ObjectFit.Fill Src="images/fi478h5fj45d1.webp" Alt="Logo" Elevation="25" Class="rounded-lg" />
</NavLink>
<MudText Typo="Typo.h5" Class="ml-3">OpenBirch</MudText> <MudText Typo="Typo.h5" Class="ml-3">OpenBirch</MudText>
<MudSpacer /> <MudSpacer />
<MudButton Variant="Variant.Text" Href="/eval" Class="pr-4">Eval demo</MudButton>
<MudButton Variant="Variant.Text" Href="/download" Class="pr-4">Download</MudButton> <MudButton Variant="Variant.Text" Href="/download" Class="pr-4">Download</MudButton>
<MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => DrawerToggle())" /> <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => DrawerToggle())" />
</MudAppBar> </MudAppBar>
<MudDrawer @bind-Open="_drawerOpen" Anchor="Anchor.End" ClipMode="DrawerClipMode.Always" Breakpoint="Breakpoint.None" Elevation="2"> <MudDrawer @bind-Open="_drawerOpen" Anchor="Anchor.End" ClipMode="DrawerClipMode.Always" Breakpoint="Breakpoint.None" Elevation="2">
<NavMenu />
</MudDrawer> </MudDrawer>
<MudMainContent Class="mt-16 pa-4"> <MudMainContent Style="height: 100vh;">
@Body @Body
</MudMainContent> </MudMainContent>
</MudLayout> </MudLayout>

View File

@ -1,5 +1,6 @@
@page "/" @page "/"
@inject IJSRuntime jsRuntime @inject IJSRuntime jsRuntime
@inject NavigationManager nav
<PageTitle>Home</PageTitle> <PageTitle>Home</PageTitle>
@ -15,7 +16,7 @@
<MudText Align="Align.Start"> @((consoleHistory[temp].source == ConsoleSource.User) ? ">" : "#") @consoleHistory[temp].text</MudText> <MudText Align="Align.Start"> @((consoleHistory[temp].source == ConsoleSource.User) ? ">" : "#") @consoleHistory[temp].text</MudText>
} }
</div> </div>
<MudTextField Class="" Style="color: #e0def4;" @bind-Value="inputField" OnKeyDown="OnKeyDown" Variant="Variant.Outlined" @onclick="()=>hasInteracted = true"></MudTextField> <MudTextField Class="" Style="color: #e0def4;" @bind-Value="inputField" OnKeyDown="OnKeyDown" Variant="Variant.Outlined" @onclick='()=>nav.NavigateTo("openbirch")'></MudTextField>
</MudPaper> </MudPaper>
</div> </div>
</div> </div>

View File

@ -13,10 +13,4 @@
.input-field { .input-field {
max-width: 400px; max-width: 400px;
min-width: 300px; min-width: 300px;
}
.reverse-stack-direction {
display: flex;
justify-content: flex-end;
flex-direction: column;
} }

View File

@ -0,0 +1,20 @@
@page "/openbirch"
<div class="console-container reverse-stack-direction pa-4">
<div class="px-2 reverse-scroll-start overflow-auto">
<div>
@for (int i = 0; i < 100; i++)
{
int temp = i;
<MudText>test @temp</MudText>
}
</div>
</div>
<div>
<MudTextField @bind-Value="test" Variant="Variant.Outlined"></MudTextField>
</div>
</div>
@code {
public string test = "";
}

View File

@ -0,0 +1,13 @@
.console-container {
height: 100%;
padding: 0;
}
.console-container > div:first-child {
background-color: #191724;
}
.reverse-scroll-start {
display: flex;
flex-direction: column-reverse;
}

View File

@ -101,3 +101,10 @@ a, .btn-link {
code { code {
color: #c02d76; color: #c02d76;
} }
.reverse-stack-direction {
display: flex;
justify-content: flex-end;
flex-direction: column;
}

View File

@ -17,7 +17,7 @@
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" /> <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
</head> </head>
<body style="background-color: #1a1a27"> <body style="background-color: #1a1a27; padding: 0;">
<div id="app"> <div id="app">
<svg class="loading-progress"> <svg class="loading-progress">
<circle r="40%" cx="50%" cy="50%" /> <circle r="40%" cx="50%" cy="50%" />