diff options
Diffstat (limited to 'CoreWiki/Pages/Shared/_Layout.cshtml')
| -rw-r--r-- | CoreWiki/Pages/Shared/_Layout.cshtml | 78 |
1 files changed, 42 insertions, 36 deletions
diff --git a/CoreWiki/Pages/Shared/_Layout.cshtml b/CoreWiki/Pages/Shared/_Layout.cshtml index ac74eba..03d8607 100644 --- a/CoreWiki/Pages/Shared/_Layout.cshtml +++ b/CoreWiki/Pages/Shared/_Layout.cshtml @@ -1,59 +1,65 @@ -<!DOCTYPE html> +@using Htmx.TagHelpers +<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> + <meta name="htmx-config" includeAspNetAntiforgeryToken="true"/> <title>@ViewData["Title"] - CoreWiki</title> - <link rel="stylesheet" href="~/lib/bootstrap/css/bootstrap.min.css"/> - <link rel="stylesheet" href="~/css/site.css" asp-append-version="true"/> - <link rel="stylesheet" href="~/CoreWiki.styles.css" asp-append-version="true"/> - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer"/> + <link rel="stylesheet" href="~/css/output.css"/> @await RenderSectionAsync("Styles", required: false) </head> <body> -<header> - <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-light border-bottom box-shadow mb-3"> - <div class="container"> - <a class="navbar-brand" asp-page="Details">CoreWiki</a> - <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent" - aria-expanded="false" aria-label="Toggle navigation"> - <span class="navbar-toggler-icon"></span> - </button> - <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between"> - <ul class="navbar-nav flex-grow-1"> - <li class="nav-item"> - <a class="nav-link" asp-page="Details">Home</a> +<script src="https://unpkg.com/htmx.org@1.9.10"></script> +<script src="//unpkg.com/alpinejs" defer></script> +<div class="flex flex-col min-h-screen"> + <header x-data="{ open: false }"> + <nav class="flex flex-col md:flex-row w-full px-4 py-3 bg-gray-50 border-bottom shadow"> + <div class="flex w-full md:w-fit"> + <a class="text-lg mr-1" asp-page="Details">CoreWiki</a> + <button @@click="open = !open" class="inline md:hidden ml-auto"> + <span class="ml-auto">Toggle</span> + </button> + </div> + <div :class="open || 'hidden'" class="w-full mt-4 md:block md:mt-0 md:w-fit md:ml-auto"> + <ul class="flex flex-col space-y-3 md:flex-row md:space-x-4 md:space-y-0"> + <li> + <a asp-page="Details">Home</a> </li> - <li class="nav-item"> - <a class="nav-link" asp-area="" asp-page="Create">Create</a> + <li> + <a asp-area="" asp-page="Create">Create</a> </li> - <li class="nav-item"> - <a class="nav-link" asp-page="All">All Articles</a> + <li> + <a hx-boost="true" asp-page="All">All Articles</a> </li> - <li class="nav-item"> - <a class="nav-link" asp-page="LatestChanges">Latest Changes</a> + <li> + <a hx-boost="true" asp-page="LatestChanges">Latest Changes</a> </li> </ul> </div> - </div> - </nav> -</header> -<div class="container"> - <main role="main" class="pb-3"> + </nav> + </header> + <main role="main" class="flex-1 flex flex-col px-8 md:px-48 py-8"> @RenderBody() </main> + <footer class="flex justify-center text-gray-500 shadow border-t py-4 px-2"> + <span>© 2023 - CoreWiki - <a asp-area="" asp-page="/Privacy">Privacy</a></span> + </footer> </div> -<footer class="border-top footer text-muted"> - <div class="container"> - © 2023 - CoreWiki - <a asp-area="" asp-page="/Privacy">Privacy</a> - </div> -</footer> - -<script src="~/lib/jquery/dist/jquery.min.js"></script> -<script src="~/lib/bootstrap/js/bootstrap.bundle.min.js"></script> +@Html.HtmxAntiforgeryScript() <script src="~/lib/momentjs/moment.min.js"></script> <script src="~/js/site.js" asp-append-version="true"></script> +<script> + document.addEventListener("htmx:afterRequest", function (e) { + const timeStamps = document.querySelectorAll(".timeStampValue"); + for (const ts of timeStamps) { + const thisTimeStamp = ts.getAttribute("data-value"); + const date = new Date(thisTimeStamp); + ts.textContent = moment(date).format('LLL'); + } + }); +</script> @await RenderSectionAsync("Scripts", required: false) </body> |