miawinter/just-short-it
1
0
Fork 0
mirror of https://github.com/miawinter98/just-short-it.git synced 2024-11-10 03:59:53 +00:00
Code Activity

added: tailwindcss&daisyui based style

Browse source
This commit is contained in:
Mia Rose Winter 2023-11-18 03:10:37 +01:00
parent ec999ba46c
commit a7160dbd80
Signed by: miawinter
GPG key ID: 4B6F6A83178F595E
9 changed files with 159 additions and 159 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
Pages/Error.cshtml
View file

@ -4,23 +4,14 @@
ViewData["Title"] = "Error"; ViewData["Title"] = "Error";
} }
<h1 class="text-danger">Error.</h1> <div class="flex flex-col gap-4">
<h2 class="text-danger">An error occurred while processing your request.</h2> <h1 class="text-3xl lg:text-5xl text-error">Error.</h1>
<h2 class="text-2xl lg:text-4xl text-secondary-content">An error occurred while processing your request.</h2>
@if (Model.ShowRequestId) @if (Model.ShowRequestId)
{ {
<p> <p>
<strong>Request ID:</strong> <code>@Model.RequestId</code> <strong>Request ID:</strong> <code>@Model.RequestId</code>
</p> </p>
} }
</div>
<h3>Development Mode</h3>
<p>
Swapping to the <strong>Development</strong> environment displays detailed information about the error that occurred.
</p>
<p>
<strong>The Development environment shouldn't be enabled for deployed applications.</strong>
It can result in displaying sensitive information from exceptions to end users.
For local debugging, enable the <strong>Development</strong> environment by setting the <strong>ASPNETCORE_ENVIRONMENT</strong> environment variable to <strong>Development</strong>
and restarting the app.
</p>

10
Pages/Index.cshtml
View file

@ -4,12 +4,12 @@
ViewData["Title"] = "Startpage"; ViewData["Title"] = "Startpage";
} }
<div class="has-text-centered my-6 px-4"> <div class="text-center flex flex-col items-center gap-4">
@if (Model.Id is null) { @if (Model.Id is null) {
<h1 class="title is-1 is-spaced">Welcome to Just Short It!</h1> <h1 class="text-3xl lg:text-5xl font-bold text-primary-content">Welcome to Just Short It!</h1>
<h2 class="subtitle is-2">The KISS single-user URL shortener!</h2> <h2 class="text-xl lg:text-3xl font-bold text-secondary-content">The KISS single-user URL shortener!</h2>
<a class="button is-primary is-medium" asp-page="Urls">Start shorting URLs</a> <a class="btn btn-primary btn-lg min-h-0 h-12" asp-page="Urls">Start shorting URLs</a>
} else { } else {
<p class="has-text-danger">@Model.ErrorMessage</p> <p class="text-error">@Model.ErrorMessage</p>
} }
</div> </div>

64
Pages/Inspect.cshtml
View file

@ -5,36 +5,40 @@
ViewData["Title"] = "Inspect"; ViewData["Title"] = "Inspect";
} }
<div class="columns is-centered is-multiline my-6 px-4"> <div class="grid place-items-center h-full">
@if (Model.UrlRedirect is null) { <div class="w-full md:max-w-lg flex flex-col gap-4">
@if (!string.IsNullOrEmpty(Model.Message)) { @if (Model.UrlRedirect is null) {
<div class="column is-half-desktop is-two-thirds-tablet is-full-mobile notification is-info"> @if (!string.IsNullOrEmpty(Model.Message)) {
<button class="delete" onclick="this.parentElement.remove()"></button> <div class="alert alert-success rounded-sm">
@Html.Raw(Model.Message) <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
</div> <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
} else { </svg>
<div class="column is-full has-text-centered"> <span>
<h1 class="title is-2 has-text-danger">URL not found</h1> @Html.Raw(Model.Message)
<h2 class="subtitle is-4">The given ID does not exist, it may have expired or been deleted.</h2> </span>
</div> <button class="btn btn-square btn-sm btn-ghost" onclick="this.parentElement.remove()">
} <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
} else { <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd"/>
<div class="column is-half-desktop is-two-thirds-tablet is-full-mobile"> </svg>
<dl class="columns is-multiline mb-3"> </button>
<dt class="column is-half">ID</dt> </div>
<dd class="column is-half">@Model.UrlRedirect.Id</dd> } else {
<dt class="column is-half">URL-Target</dt> <h1 class="text-3xl lg:text-5xl text-error text-center">URL not found</h1>
<dd class="column is-half">@Model.UrlRedirect.Target</dd> <h2 class="text-2xl lg:text-4xl text-secondary-content text-center">The given ID does not exist, it may have expired or been deleted.</h2>
</dl> }
} else {
<dl class="grid grid-cols-2 gap-y-2 text-primary-content">
<dt>ID</dt>
<dd>@Model.UrlRedirect.Id</dd>
<dt>URL-Target</dt>
<dd>@Model.UrlRedirect.Target</dd>
</dl>
<form class="buttons" method="post"> <form class="" method="post">
<input type="hidden" asp-for="Id" /> <input type="hidden" asp-for="Id" />
<button type="submit" class="button is-danger">Delete</button> <button type="submit" class="btn btn-error text-base-content">Delete</button>
</form> </form>
</div> }
<a class="btn btn-primary btn-lg min-h-0 h-12 btn-wide self-center" asp-page="Urls">Back to URLs</a>
}
<div class="column is-full has-text-centered">
<a class="button is-primary is-medium" asp-page="Urls">Back to URLs</a>
</div> </div>
</div> </div>

42
Pages/Login.cshtml
View file

@ -4,31 +4,31 @@
ViewData["Title"] = "Login"; ViewData["Title"] = "Login";
} }
<div class="columns is-centered my-6 px-4"> <div class="grid place-items-center h-full">
<form class="column is-one-third-desktop is-half-tablet is-full-mobile" method="post"> <form class="text-primary-content w-full md:max-w-md" method="post">
<h1 class="title is-2">Login</h1> <h1 class="text-2xl lg:text-4xl mb-6">Login</h1>
<div class="field"> <div class="form-control w-full">
<label class="label" asp-for="UserModel!.Username">Username</label> <span class="label">
<div class="control"> <label class="label-text text-primary-content" asp-for="UserModel!.Username">Username</label>
<input required class="input" type="text" asp-for="UserModel!.Username" autocomplete="username" /> </span>
</div> <input required class="input input-bordered w-full" type="text" asp-for="UserModel!.Username" autocomplete="username" />
<span class="help is-danger" asp-validation-for="UserModel!.Username"></span> <span class="label">
<span class="label-text-alt text-error" asp-validation-for="UserModel!.Username"></span>
</span>
</div> </div>
<div class="field"> <div class="form-control w-full">
<label class="label" asp-for="UserModel!.Password">Password</label> <span class="label">
<div class="control"> <label class="label-text text-primary-content" asp-for="UserModel!.Password">Password</label>
<input required class="input" type="password" asp-for="UserModel!.Password" autocomplete="current-password" /> </span>
</div> <input required class="input input-bordered w-full" type="password" asp-for="UserModel!.Password" autocomplete="current-password" />
<span class="help is-danger" asp-validation-for="UserModel!.Password"></span> <span class="label">
<span class="label-text-alt text-error" asp-validation-for="UserModel!.Password"></span>
</span>
</div> </div>
<div class="has-text-danger" asp-validation-summary="ModelOnly" class="text-danger"></div> <div class="text-error pb-3" asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="field is-grouped is-grouped-right"> <button class="btn btn-primary w-full" type="submit">Login</button>
<div class="control">
<button class="button is-primary" type="submit">Login</button>
</div>
</div>
</form> </form>
</div> </div>

2
Pages/Logout.cshtml
View file

@ -4,5 +4,5 @@
ViewData["Title"] = "Logout"; ViewData["Title"] = "Logout";
} }
<p>How did you get here?</p> <p class="text-xl text-error">How did you get here?</p>

32
Pages/Shared/_Layout.cshtml
View file

@ -5,35 +5,29 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - JustShortIt</title> <title>@ViewData["Title"] - JustShortIt</title>
<link rel="stylesheet" href="/css/index.min.css" asp-append-version="true" /> <link rel="stylesheet" href="/css/main.min.css" asp-append-version="true" />
</head> </head>
<body> <body class="flex flex-col min-h-screen">
<nav class="navbar is-primary has-shadow" aria-label="main navigation"> <nav class="navbar bg-primary text-primary-content p-0 min-h-0" aria-label="main navigation">
<div class="navbar-brand"> <div class="flex-1">
<a class="navbar-item" href="https://github.com/miawinter98/just-short-it" target="_blank">Just Short It!</a> <a class="btn btn-ghost rounded-none px-6" href="https://github.com/miawinter98/just-short-it" target="_blank">Just Short It!</a>
</div> </div>
<div class="navbar-menu"> <div class="flex-none mr-6">
<partial name="_LoginPartial"/>
<div class="navbar-end">
<div class="navbar-item">
<partial name="_LoginPartial"/>
</div>
</div>
</div> </div>
</nav> </nav>
<main style="margin-bottom: 12rem" class="container"> <main class="flex-1 container mx-auto px-8 py-8 grid">
@RenderBody() @RenderBody()
</main> </main>
<footer style="position: fixed; bottom: 0; left: 0; right: 0" class="footer has-background-primary "> <footer class="footer footer-center py-10 bg-primary text-secondary-content">
<div class="has-text-centered"> <aside class="">
<p> <p>
<a href="https://github.com/miawinter98/just-short-it" target="_blank">Just Short it!</a> <a class="hover:link" href="https://github.com/miawinter98/just-short-it" target="_blank">Just Short it!</a>
by <a href="https://miawinter.de/" target="_blank">Mia Winter</a>. by <a class="hover:link" href="https://miawinter.de/" target="_blank">Mia Winter</a>.
Styled with <a href="https://bulma.io" target="_blank">Bulma</a>.
</p> </p>
</div> </aside>
</footer> </footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script> <script src="~/lib/jquery/dist/jquery.min.js"></script>

4
Pages/Shared/_LoginPartial.cshtml
View file

@ -1,6 +1,6 @@
@if (User.Identity?.IsAuthenticated is true) { @if (User.Identity?.IsAuthenticated is true) {
<span class="mx-3">@User.Identity.Name</span> <span class="mx-3">@User.Identity.Name</span>
<a class="button is-ghost" asp-page="Logout">Logout</a> <a class="btn btn-link text-secondary-content" asp-page="Logout">Logout</a>
} else { } else {
<a class="button is-ghost" asp-page="Login">Login</a> <a class="hover:link text-secondary-content" asp-page="Login">Login</a>
} }

129
Pages/Urls.cshtml
View file

@ -4,81 +4,92 @@
ViewData["Title"] = "Urls"; ViewData["Title"] = "Urls";
} }
<div class="columns is-centered is-multiline my-6 px-4"> <div class="grid place-items-center h-full text-primary-content">
@if (!string.IsNullOrEmpty(Model.Message)) { <div class="w-full md:max-w-lg">
<div class="column is-half-desktop is-two-thirds-tablet is-full-mobile notification is-info"> @if (!string.IsNullOrEmpty(Model.Message)) {
<button class="delete" onclick="this.parentElement.remove()"></button> <!--
@Html.Raw(Model.Message) btn-success
</div> /\
} this just tells tailwind to generate it, since new uses this class for the link copy button
I know there is a safe-class thingie in the config, but this was just easier bc it's only needed here
-->
<div class="alert alert-info rounded-sm">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
</svg>
<span>
@Html.Raw(Model.Message)
</span>
<button class="btn btn-square btn-sm btn-ghost" onclick="this.parentElement.remove()">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd"/>
</svg>
</button>
</div>
}
<div class="column is-full has-text-centered"> <h1 class="text-2xl lg:text-4xl my-6 text-center">Urls Administration</h1>
<h1 class="title is-2">Urls Administration</h1>
</div>
<div class="column is-half-desktop is-two-thirds-tablet is-full-mobile">
<form class="mb-6" method="post" asp-page="Urls" asp-page-handler="Inspect"> <form class="mb-6" method="post" asp-page="Urls" asp-page-handler="Inspect">
<h2 class="title is-3">Inspect URL</h2> <h2 class="text-xl lg:text-2xl mb-3">Inspect URL</h2>
<div class="field has-addons"> <div class="join w-full">
<div class="control"> <label class="join-item btn btn-outline no-animation text-primary-content border-white">ID</label>
<label class="button is-static">ID</label> <div class="join-item flex-1">
<input required type="text" class="input input-bordered w-full border-white" name="Inspect_Id" autocomplete="off" />
</div> </div>
<div class="control is-expanded"> <div class="join-item">
<input required type="text" class="input" name="Inspect_Id" autocomplete="off" /> <button class="btn btn-primary border-1" type="submit">Inspect</button>
</div>
<div class="control">
<button class="button is-primary" type="submit">Inspect</button>
</div> </div>
</div> </div>
<div class="field"> <span class="text-error">@ModelState["Inspect_Id"]?.Errors.FirstOrDefault()?.ErrorMessage</span>
<span class="help is-danger">@ModelState["Inspect_Id"]?.Errors.FirstOrDefault()?.ErrorMessage</span>
</div>
</form> </form>
<form method="post"> <form method="post" asp-page-handler="New">
<h2 class="title is-3">New URL</h2> <h2 class="text-xl lg:text-2xl mb-3">New URL</h2>
<div class="field"> <div class="form-control w-full">
<label class="label" asp-for="Model!.Id">ID</label> <span class="label">
<div class="control"> <label class="label-text text-primary-content" asp-for="Model!.Id">ID</label>
<input required class="input" type="text" asp-for="Model!.Id" autocomplete="off" /> </span>
</div> <input required class="input input-bordered w-full" type="text" asp-for="Model!.Id" autocomplete="off" />
<span class="help is-danger" asp-validation-for="Model!.Id"></span> <span class="label">
<span class="label-text-alt text-error" asp-validation-for="Model!.Id"></span>
</span>
</div> </div>
<div class="field"> <div class="form-control w-full">
<label class="label" asp-for="Model!.Target">Target</label> <div class="label">
<div class="control"> <label class="label-text text-primary-content" asp-for="Model!.Target">Target</label>
<input required class="input" type="url" asp-for="Model!.Target" autocomplete="off" />
</div> </div>
<span class="help is-danger" asp-validation-for="Model!.Target"></span> <input required class="input input-bordered w-full" type="url" asp-for="Model!.Target" autocomplete="off" />
</div> <div class="label">
<span class="label-text-alt text-error" asp-validation-for="Model!.Target"></span>
<div class="field">
<label class="label" asp-for="Model!.ExpirationDate">Expiration</label>
<div class="control">
<div class="select">
@Html.DropDownListFor(m => m.Model!.ExpirationDate, new List<SelectListItem> {
new("1 Day", DateTime.UtcNow.AddDays(1).ToBinary().ToString()),
new("1 Week", DateTime.UtcNow.AddDays(7).ToBinary().ToString()),
new("4 Weeks", DateTime.UtcNow.AddDays(4 * 7).ToBinary().ToString()),
new("1 Year", DateTime.UtcNow.AddYears(1).ToBinary().ToString()),
new("Never", DateTime.UtcNow.AddYears(1000).ToBinary().ToString())
}, "Select Expiration")
</div>
</div>
<span class="help is-danger" asp-validation-for="Model!.ExpirationDate"></span>
</div>
<div class="has-text-danger" asp-validation-summary="ModelOnly"></div>
<div class="field is-grouped is-grouped-right">
<div class="control">
<button class="button is-primary" type="submit">Create</button>
</div> </div>
</div> </div>
<div class="form-control w-full">
<span class="label">
<label class="label-text text-primary-content" asp-for="Model!.ExpirationDate">Expiration</label>
</span>
@Html.DropDownListFor(m => m.Model!.ExpirationDate, new List<SelectListItem> {
new("1 Day", DateTime.UtcNow.AddDays(1).ToBinary().ToString()),
new("1 Week", DateTime.UtcNow.AddDays(7).ToBinary().ToString()),
new("4 Weeks", DateTime.UtcNow.AddDays(4 * 7).ToBinary().ToString()),
new("1 Year", DateTime.UtcNow.AddYears(1).ToBinary().ToString()),
new("Never", DateTime.UtcNow.AddYears(1000).ToBinary().ToString())
}, "Select Expiration", new {
@class = "select select-bordered w-full"
})
<div class="label">
<span class="label-text-alt text-error" asp-validation-for="Model!.ExpirationDate"></span>
</div>
</div>
<div class="text-error pb-3" asp-validation-summary="ModelOnly"></div>
<button class="btn btn-primary w-full" type="submit">Create</button>
</form> </form>
</div> </div>
</div> </div>

6
Pages/Urls.cshtml.cs
View file

@ -45,7 +45,7 @@ public class UrlsModel : PageModel {
return RedirectToPage("Inspect", new { Id = id }); return RedirectToPage("Inspect", new { Id = id });
} }
public async Task<IActionResult> OnPostAsync() { public async Task<IActionResult> OnPostNewAsync() {
if (!ModelState.IsValid) return Page(); if (!ModelState.IsValid) return Page();
string id = HttpUtility.UrlEncode(Model.Id); string id = HttpUtility.UrlEncode(Model.Id);
@ -66,8 +66,8 @@ public class UrlsModel : PageModel {
ModelState.Clear(); ModelState.Clear();
ModelState.SetModelValue(nameof(UrlRedirect.Id), GenerateNewId(), GenerateNewId()); ModelState.SetModelValue(nameof(UrlRedirect.Id), GenerateNewId(), GenerateNewId());
Message = $"URL Generated! <a href='{link}'>{link}</a>. " + Message = $"URL Generated! <a class=link href='{link}'>{link}</a>. " +
$"<button class='button is-link is-small' onclick='navigator.clipboard.writeText(\"{link}\")'>Copy</button>"; $"<button class='btn btn-sm btn-success' onclick='navigator.clipboard.writeText(\"{link}\")'>Copy</button>";
return OnGet(Message); return OnGet(Message);
} }