-
Notifications
You must be signed in to change notification settings - Fork 71
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Moved Waterfall UI and pinned headers (#100)
- Loading branch information
1 parent
c82e97f
commit 6e3a8c8
Showing
15 changed files
with
316 additions
and
103 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -25,7 +25,6 @@ public void OnGet() | |
| Tags.Add(item.Key); | ||
| } | ||
|
|
||
|
|
||
| } | ||
|
|
||
| public IActionResult OnPost() | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| <footer class="border-top footer text-muted"> | ||
| <div class="container"> | ||
| © 2023 - TagzApp.Web - <a asp-area="" asp-page="/Privacy">Privacy</a> | ||
| </div> | ||
| </footer> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| @using Microsoft.AspNetCore.Authorization; | ||
| @inject IAuthorizationService AuthorizationService | ||
|
|
||
| <header> | ||
| <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3"> | ||
| <div class="container"> | ||
| <a class="navbar-brand" asp-area="" asp-page="/Index">TagzApp.Web</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 text-dark" asp-area="" asp-page="/Index">Home</a> | ||
| </li> | ||
|
|
||
| <li class="nav-item"> | ||
| <a class="nav-link text-dark" asp-area="" asp-page="/Waterfall">Waterfall</a> | ||
| </li> | ||
|
|
||
| @if ((await AuthorizationService.AuthorizeAsync(User, Security.Policy.Moderator)).Succeeded) | ||
| { | ||
| <li class="nav-item"> | ||
| <a class="nav-link text-dark" asp-area="" asp-page="/Moderation">Moderation</a> | ||
| </li> | ||
| } | ||
| <li class="nav-item"> | ||
| <a class="nav-link text-dark" asp-area="" asp-page="/Overlay">Overlay</a> | ||
| </li> | ||
| <li class="nav-item"> | ||
| <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a> | ||
| </li> | ||
| </ul> | ||
|
|
||
| <partial name="_LoginPartial" /> | ||
|
|
||
| </div> | ||
| </div> | ||
| </nav> | ||
| </header> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| @using Microsoft.AspNetCore.Authorization; | ||
| @inject IAuthorizationService AuthorizationService | ||
|
|
||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>@ViewData["Title"] - TagzApp.Web</title> | ||
| <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" /> | ||
| <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" /> | ||
| <link rel="stylesheet" href="~/TagzApp.Web.styles.css" asp-append-version="true" /> | ||
| <link rel="stylesheet" href="~/lib/bootstrap-icons/font/bootstrap-icons.min.css" /> | ||
| </head> | ||
| <body style="overflow-y: hidden;"> | ||
|
|
||
| <div id="floatingHeader" class="scrollOut"> | ||
| <partial name="_Header" /> | ||
| </div> | ||
|
|
||
| <div id="headerButton" class="btn"> | ||
| <i class="bi bi-three-dots"></i> | ||
| </div> | ||
|
|
||
| <div class="container" style="max-width: 1800px"> | ||
| <main role="main" class="pb-3"> | ||
| @RenderBody() | ||
| </main> | ||
| </div> | ||
|
|
||
| <script src="~/lib/jquery/dist/jquery.min.js"></script> | ||
| <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script> | ||
| <script src="~/lib/microsoft-signalr/signalr.min.js"></script> | ||
| <script src="~/js/site.js" asp-append-version="true"></script> | ||
|
|
||
| <script> | ||
| $(document).ready(function () { | ||
| const floatingHeader = document.getElementById("floatingHeader"); | ||
| // $(floatingHeader).hover(() => console.log("in"), () => console.log("out")); | ||
| document.getElementById("headerButton").addEventListener("click", function () { | ||
| window.setTimeout(() => { | ||
| floatingHeader.addEventListener("mouseleave", (el) => { | ||
| floatingHeader.classList.remove("scrollIn"); | ||
| }); | ||
| floatingHeader.addEventListener("click", (el) => { | ||
| floatingHeader.classList.remove("scrollIn"); | ||
| }); | ||
| }, 3000); | ||
| floatingHeader.classList.add("scrollIn"); | ||
| }); | ||
| }); | ||
| </script> | ||
|
|
||
| @await RenderSectionAsync("Scripts", required: false) | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,96 @@ | ||
| /* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification | ||
| for details on configuring this project to bundle and minify static web assets. */ | ||
|
|
||
| a.navbar-brand { | ||
| white-space: normal; | ||
| text-align: center; | ||
| word-break: break-all; | ||
| } | ||
|
|
||
| a { | ||
| color: #0077cc; | ||
| } | ||
|
|
||
| .btn-primary { | ||
| color: #fff; | ||
| background-color: #1b6ec2; | ||
| border-color: #1861ac; | ||
| } | ||
|
|
||
| .nav-pills .nav-link.active, .nav-pills .show > .nav-link { | ||
| color: #fff; | ||
| background-color: #1b6ec2; | ||
| border-color: #1861ac; | ||
| } | ||
|
|
||
| .border-top { | ||
| border-top: 1px solid #e5e5e5; | ||
| } | ||
| .border-bottom { | ||
| border-bottom: 1px solid #e5e5e5; | ||
| } | ||
|
|
||
| .box-shadow { | ||
| box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); | ||
| } | ||
|
|
||
| button.accept-policy { | ||
| font-size: 1rem; | ||
| line-height: inherit; | ||
| } | ||
|
|
||
| .footer { | ||
| position: absolute; | ||
| bottom: 0; | ||
| width: 100%; | ||
| white-space: nowrap; | ||
| line-height: 60px; | ||
| } | ||
|
|
||
| #floatingHeader { | ||
| position: fixed; | ||
| top: 0; | ||
| width: 100%; | ||
| z-index: 1000; | ||
| } | ||
|
|
||
| .scrollOut { | ||
| animation-name: scrollUp; | ||
| animation-duration: 2s; | ||
| animation-fill-mode: forwards; | ||
| } | ||
|
|
||
| .scrollIn { | ||
| animation-name: scrollIn; | ||
| animation-duration: 1s; | ||
| animation-fill-mode: forwards; | ||
| } | ||
|
|
||
| #headerButton { | ||
| position: fixed; | ||
| top: 10px; | ||
| right: 10px; | ||
| z-index: 900; | ||
| } | ||
|
|
||
| @keyframes scrollUp { | ||
| from { | ||
| top: 0; | ||
| } | ||
|
|
||
| to { | ||
| top: -200px; | ||
| } | ||
| } | ||
|
|
||
| @keyframes scrollIn { | ||
| from { | ||
| top: -200px; | ||
| } | ||
|
|
||
| to { | ||
| top: 0; | ||
| } | ||
| } | ||
|
|
||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| @page | ||
| @model TagzApp.Web.Pages.WaterfallModel | ||
| @{ | ||
| Layout = "_WaterfallLayout"; | ||
| } | ||
| <div class="row"> | ||
| <div class="col-md-12"> | ||
| <h1 class="text-center">Welcome to TagzApp</h1> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div id="taggedContent" class=""> | ||
|
|
||
| @* <div class=" d-flex justify-content-center" style="width:100%;"> | ||
| <div class="spinner-border" role="status"> | ||
| <span class="visually-hidden">Loading...</span> | ||
| </div> | ||
| </div> | ||
| *@ | ||
| </div> | ||
|
|
||
|
|
||
| <div class="modal fade show" id="contentModal" tabindex="-1" aria-labelledby="contentModalLabel" aria-hidden="true"> | ||
| <div class="modal-dialog modal-dialog-centered modal-lg"> | ||
| <div class="modal-content"> | ||
| <div class="modal-header"> | ||
| <div class="row"> | ||
| <h5 class="modal-title" id="modalTitle"></h5> | ||
| <div class="modal-time"> | ||
| </div> | ||
| </div> | ||
| <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> | ||
| </div> | ||
|
|
||
| <div class="modal-body"> | ||
| </div> | ||
| @* <div class="modal-footer"> | ||
| <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> | ||
| </div> | ||
| *@ | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| @section Scripts { | ||
|
|
||
| <script src="~/js/masonry.js" asp-append-version="true"></script> | ||
| <script> | ||
| window.TagzApp.ListenForTags("@string.Join(',', Model.Tags)"); | ||
| window.onload = window.Masonry.resizeAllGridItems(); | ||
| window.addEventListener("resize", Masonry.resizeAllGridItems); | ||
| </script> | ||
|
|
||
| } | ||
|
|
Oops, something went wrong.