CLARIFICATION & CSS

This commit is contained in:
femsci 2023-11-18 12:01:40 +01:00
parent 1694b35736
commit ae938cee42
Signed by: femsci
GPG key ID: 08F7911F0E650C67
3 changed files with 56 additions and 7 deletions

View file

@ -18,7 +18,7 @@ This project aims to leverage large language models in order to decrease the eff
The core utilizes .NET 8, while the front-end uses ASP.NET Core with Blazor Server. The CLI is written in Rust. The core utilizes .NET 8, while the front-end uses ASP.NET Core with Blazor Server. The CLI is written in Rust.
**_No project has been hurt with javascript or [even more with] n-node js._** **_(ALMOST) no project has been hurt with javascript or [even more with] n-node js._**
- **Umogen.Core**: C#, .NET 8, - **Umogen.Core**: C#, .NET 8,
- **Umogen.Server**: C#, .NET 8, Blazor Server - **Umogen.Server**: C#, .NET 8, Blazor Server

View file

@ -37,13 +37,12 @@
<label for="query" class="form-label">Dane (NLP)</label> <label for="query" class="form-label">Dane (NLP)</label>
<input type="text" class="form-control" id="query" @bind-value="_query"> <input type="text" class="form-control" id="query" @bind-value="_query">
</div> </div>
<button disabled="@disB" type="button" @onclick="Process" class="btn btn-primary">Generuj</button> <div class="container">
</form> <button disabled="@disB" type="button" @onclick="Process" class="btn btn-primary">Rozpocznij</button>
<span hidden="@(!disB)" class="loader"></span>
<span hidden="@(!disB)" class="output-box">@output</span>
</div> </div>
</form>
<div class="form-control">
<div class="text-center"><b>OUT:</b> @output</div>
</div> </div>
@code { @code {

View file

@ -95,3 +95,53 @@ a,
.blazor-error-boundary::after { .blazor-error-boundary::after {
content: "An error has occurred."; content: "An error has occurred.";
} }
.output-box {
top: 0.5em;
position: relative;
max-width: 100%;
min-width: 40%;
height: 2em;
display: inline-block;
margin-left: 1em;
border-radius: 20px;
border: 1px solid #9e9e9e;
width: max-content;
padding: 0.7ch;
overflow: scroll;
}
.loader {
top: 0.5em;
margin-left: 0.5em;
width: 24px;
height: 24px;
border: 3px solid #fff;
border-radius: 50%;
display: inline-block;
position: relative;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}
.loader::after {
content: "";
box-sizing: border-box;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
border-radius: 50%;
border: 3px solid;
border-color: #8e8e8e transparent;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}