From b2b8e5a4275fa08941628e817421da39e920b876 Mon Sep 17 00:00:00 2001 From: "Jeffrey T. Fritz" Date: Tue, 15 Aug 2023 11:04:47 -0400 Subject: [PATCH 1/6] WIP --- src/TagzApp.Web/Pages/Index.cshtml | 48 ----------------- src/TagzApp.Web/Pages/Index.cshtml.cs | 1 - src/TagzApp.Web/Pages/Shared/_Layout.cshtml | 4 ++ src/TagzApp.Web/Pages/Waterfall.cshtml | 60 +++++++++++++++++++++ src/TagzApp.Web/Pages/Waterfall.cshtml.cs | 26 +++++++++ src/TagzApp.Web/wwwroot/js/site.js | 2 + src/TagzApp.WebTest/TagzAppNavigator.cs | 2 +- 7 files changed, 93 insertions(+), 50 deletions(-) create mode 100644 src/TagzApp.Web/Pages/Waterfall.cshtml create mode 100644 src/TagzApp.Web/Pages/Waterfall.cshtml.cs diff --git a/src/TagzApp.Web/Pages/Index.cshtml b/src/TagzApp.Web/Pages/Index.cshtml index c723d7b3..be3a100b 100644 --- a/src/TagzApp.Web/Pages/Index.cshtml +++ b/src/TagzApp.Web/Pages/Index.cshtml @@ -26,51 +26,3 @@ - -
- - @*
- - - -
- *@ -
- - - - - -@section Scripts { - - - - -} diff --git a/src/TagzApp.Web/Pages/Index.cshtml.cs b/src/TagzApp.Web/Pages/Index.cshtml.cs index 11ec3435..a649382b 100644 --- a/src/TagzApp.Web/Pages/Index.cshtml.cs +++ b/src/TagzApp.Web/Pages/Index.cshtml.cs @@ -25,7 +25,6 @@ public void OnGet() Tags.Add(item.Key); } - } public IActionResult OnPost() diff --git a/src/TagzApp.Web/Pages/Shared/_Layout.cshtml b/src/TagzApp.Web/Pages/Shared/_Layout.cshtml index 15e53b56..c14ec425 100644 --- a/src/TagzApp.Web/Pages/Shared/_Layout.cshtml +++ b/src/TagzApp.Web/Pages/Shared/_Layout.cshtml @@ -27,6 +27,10 @@ Home +
  • + Waterfall +
    • + @if ((await AuthorizationService.AuthorizeAsync(User, Security.Policy.Moderator)).Succeeded) {
  • diff --git a/src/TagzApp.Web/Pages/Waterfall.cshtml b/src/TagzApp.Web/Pages/Waterfall.cshtml new file mode 100644 index 00000000..6dbffa5d --- /dev/null +++ b/src/TagzApp.Web/Pages/Waterfall.cshtml @@ -0,0 +1,60 @@ +@page +@model TagzApp.Web.Pages.WaterfallModel +@{ +} +
    +
    +

    Welcome to TagzApp

    +
    +
    + +
    +
    + + @*
    + + + +
    + *@ +
    + +
    + + + +@section Scripts { + + + + +} + diff --git a/src/TagzApp.Web/Pages/Waterfall.cshtml.cs b/src/TagzApp.Web/Pages/Waterfall.cshtml.cs new file mode 100644 index 00000000..d4be11b3 --- /dev/null +++ b/src/TagzApp.Web/Pages/Waterfall.cshtml.cs @@ -0,0 +1,26 @@ +using Microsoft.AspNetCore.Mvc.RazorPages; +using TagzApp.Web.Services; + +namespace TagzApp.Web.Pages; + +public class WaterfallModel : PageModel +{ + private readonly InMemoryMessagingService _Service; + + public WaterfallModel(InMemoryMessagingService service) + { + _Service = service; + } + + public List Tags { get; } = new List(); + + public void OnGet() + { + + foreach (var item in _Service.Content) + { + Tags.Add(item.Key); + } + + } +} diff --git a/src/TagzApp.Web/wwwroot/js/site.js b/src/TagzApp.Web/wwwroot/js/site.js index 05a71c3b..9f223049 100644 --- a/src/TagzApp.Web/wwwroot/js/site.js +++ b/src/TagzApp.Web/wwwroot/js/site.js @@ -47,6 +47,8 @@ taggedContent.querySelector(".spinner-border").remove(); } + if (document.querySelector("[data-url='" + content.sourceUri + "']")) return; + const newMessage = document.createElement("article"); newMessage.setAttribute("data-url", content.sourceUri); newMessage.setAttribute("data-provider", content.provider); diff --git a/src/TagzApp.WebTest/TagzAppNavigator.cs b/src/TagzApp.WebTest/TagzAppNavigator.cs index 6308a41c..9728e2e7 100644 --- a/src/TagzApp.WebTest/TagzAppNavigator.cs +++ b/src/TagzApp.WebTest/TagzAppNavigator.cs @@ -29,7 +29,7 @@ public static async Task SearchForHashtag(this IPage page, string hashtag public static async Task GotoWaterfallPage(this IPage page) { - if (page.Url != "/") await page.GotoAsync("/"); + if (page.Url != "/waterfall") await page.GotoAsync("/waterfall"); return page; From 97e65c65bab70419fe728a254b0a0874f9b612ec Mon Sep 17 00:00:00 2001 From: "Jeffrey T. Fritz" Date: Tue, 15 Aug 2023 11:45:01 -0400 Subject: [PATCH 2/6] Moved pages and updated tests --- src/TagzApp.Web/Pages/Shared/_Footer.cshtml | 5 ++ src/TagzApp.Web/Pages/Shared/_Header.cshtml | 41 ++++++++++++++++ src/TagzApp.Web/Pages/Shared/_Layout.cshtml | 43 +---------------- .../Pages/Shared/_WaterfallLayout.cshtml | 34 +++++++++++++ .../Pages/Shared/_WaterfallLayout.cshtml.css | 48 +++++++++++++++++++ src/TagzApp.Web/Pages/Waterfall.cshtml | 1 + src/TagzApp.WebTest/TagzAppNavigator.cs | 9 ++++ src/TagzApp.WebTest/Tests/ModalWebTests.cs | 10 ++-- src/TagzApp.WebTest/Tests/MyFirstTests.cs | 3 +- src/TagzApp.WebTest/Tests/OverlayTests.cs | 18 +++---- 10 files changed, 155 insertions(+), 57 deletions(-) create mode 100644 src/TagzApp.Web/Pages/Shared/_Footer.cshtml create mode 100644 src/TagzApp.Web/Pages/Shared/_Header.cshtml create mode 100644 src/TagzApp.Web/Pages/Shared/_WaterfallLayout.cshtml create mode 100644 src/TagzApp.Web/Pages/Shared/_WaterfallLayout.cshtml.css diff --git a/src/TagzApp.Web/Pages/Shared/_Footer.cshtml b/src/TagzApp.Web/Pages/Shared/_Footer.cshtml new file mode 100644 index 00000000..e5909cd4 --- /dev/null +++ b/src/TagzApp.Web/Pages/Shared/_Footer.cshtml @@ -0,0 +1,5 @@ +
    +
    + © 2023 - TagzApp.Web - Privacy +
    +
    diff --git a/src/TagzApp.Web/Pages/Shared/_Header.cshtml b/src/TagzApp.Web/Pages/Shared/_Header.cshtml new file mode 100644 index 00000000..7aed1087 --- /dev/null +++ b/src/TagzApp.Web/Pages/Shared/_Header.cshtml @@ -0,0 +1,41 @@ +@using Microsoft.AspNetCore.Authorization; +@inject IAuthorizationService AuthorizationService + +
    + +
    diff --git a/src/TagzApp.Web/Pages/Shared/_Layout.cshtml b/src/TagzApp.Web/Pages/Shared/_Layout.cshtml index c14ec425..a69e24bd 100644 --- a/src/TagzApp.Web/Pages/Shared/_Layout.cshtml +++ b/src/TagzApp.Web/Pages/Shared/_Layout.cshtml @@ -13,55 +13,16 @@ -
    - -
    @RenderBody()
    -
    -
    - © 2023 - TagzApp.Web - Privacy -
    -
    + diff --git a/src/TagzApp.Web/Pages/Shared/_WaterfallLayout.cshtml b/src/TagzApp.Web/Pages/Shared/_WaterfallLayout.cshtml new file mode 100644 index 00000000..720831d9 --- /dev/null +++ b/src/TagzApp.Web/Pages/Shared/_WaterfallLayout.cshtml @@ -0,0 +1,34 @@ +@using Microsoft.AspNetCore.Authorization; +@inject IAuthorizationService AuthorizationService + + + + + + + @ViewData["Title"] - TagzApp.Web + + + + + + + + + +
    +
    + @RenderBody() +
    +
    + + + + + + + + + @await RenderSectionAsync("Scripts", required: false) + + \ No newline at end of file diff --git a/src/TagzApp.Web/Pages/Shared/_WaterfallLayout.cshtml.css b/src/TagzApp.Web/Pages/Shared/_WaterfallLayout.cshtml.css new file mode 100644 index 00000000..a72cbeaf --- /dev/null +++ b/src/TagzApp.Web/Pages/Shared/_WaterfallLayout.cshtml.css @@ -0,0 +1,48 @@ +/* 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; +} diff --git a/src/TagzApp.Web/Pages/Waterfall.cshtml b/src/TagzApp.Web/Pages/Waterfall.cshtml index 6dbffa5d..261e307a 100644 --- a/src/TagzApp.Web/Pages/Waterfall.cshtml +++ b/src/TagzApp.Web/Pages/Waterfall.cshtml @@ -1,6 +1,7 @@ @page @model TagzApp.Web.Pages.WaterfallModel @{ + Layout = "_WaterfallLayout"; }
    diff --git a/src/TagzApp.WebTest/TagzAppNavigator.cs b/src/TagzApp.WebTest/TagzAppNavigator.cs index 9728e2e7..142f33b1 100644 --- a/src/TagzApp.WebTest/TagzAppNavigator.cs +++ b/src/TagzApp.WebTest/TagzAppNavigator.cs @@ -35,4 +35,13 @@ public static async Task GotoWaterfallPage(this IPage page) } + public static async Task GotoOverlayPage(this IPage page) + { + + if (page.Url != "/overlay") await page.GotoAsync("/overlay"); + + return page; + + } + } diff --git a/src/TagzApp.WebTest/Tests/ModalWebTests.cs b/src/TagzApp.WebTest/Tests/ModalWebTests.cs index ace40446..a4634a7f 100644 --- a/src/TagzApp.WebTest/Tests/ModalWebTests.cs +++ b/src/TagzApp.WebTest/Tests/ModalWebTests.cs @@ -66,12 +66,12 @@ public async Task CanLaunchModal() Skip.If(_Webapp.SkipTest, "Previous test failed"); _Webapp.SkipTest = true; - // await using var trace = await page.TraceAsync("Can Launch Modal", true, true, true); + // await using var trace = await page.TraceAsync("Can Launch Modal", true, true, true); - await Page.GotoAsync("/"); - await Page.GetByPlaceholder("New Hashtag").FillAsync("dotnet"); - await Page.GetByRole(AriaRole.Button, new() { Name = "Add" }).ClickAsync(); + await Page.GotoHashtagSearchPage(); + await Page.SearchForHashtag("dotnet"); + await Page.GotoWaterfallPage(); // Get first article element await Page.Locator("article").WaitForAsync(new() @@ -115,7 +115,7 @@ public async Task CloseModal() // Modal should be in a state of being displayed // find modal - await Page.GotoAsync("/"); + await Page.GotoWaterfallPage(); var isModalVisible = await Page.Locator("#contentModal").IsVisibleAsync(); if (!isModalVisible) { diff --git a/src/TagzApp.WebTest/Tests/MyFirstTests.cs b/src/TagzApp.WebTest/Tests/MyFirstTests.cs index 535a0e1a..f7a030e8 100644 --- a/src/TagzApp.WebTest/Tests/MyFirstTests.cs +++ b/src/TagzApp.WebTest/Tests/MyFirstTests.cs @@ -16,8 +16,7 @@ public async Task CanAddHashtags() await page .GotoHashtagSearchPage().Result - .SearchForHashtag("dotnet").Result - .GotoWaterfallPage(); + .SearchForHashtag("dotnet"); string? firstHashtagContent = await page.Locator(".hashtags").First.TextContentAsync(); Assert.Equal("dotnet", firstHashtagContent); diff --git a/src/TagzApp.WebTest/Tests/OverlayTests.cs b/src/TagzApp.WebTest/Tests/OverlayTests.cs index 2d2f3b11..fccf303f 100644 --- a/src/TagzApp.WebTest/Tests/OverlayTests.cs +++ b/src/TagzApp.WebTest/Tests/OverlayTests.cs @@ -23,26 +23,26 @@ public async Task ClickMessageOnWaterfallShowsOverlay() var mainPage = context1.Page; var overlayPage = context2.Page; - // If required 2 browser instances can be setup instead + // If required 2 browser instances can be setup instead - //await using var browser1 = await WebApp.CreateCustomPlaywrightBrowserPageAsync(); - //await using var browser2 = await WebApp.CreateCustomPlaywrightBrowserPageAsync(); - //var mainPage = browser1.Page; - //var overlayPage = browser2.Page; + //await using var browser1 = await WebApp.CreateCustomPlaywrightBrowserPageAsync(); + //await using var browser2 = await WebApp.CreateCustomPlaywrightBrowserPageAsync(); + //var mainPage = browser1.Page; + //var overlayPage = browser2.Page; - await mainPage.GotoAsync("/"); + await mainPage.GotoHashtagSearchPage(); - await mainPage.GetByPlaceholder("New Hashtag").FillAsync(TAG); + await mainPage.SearchForHashtag(TAG); - await mainPage.GetByRole(AriaRole.Button, new() { Name = "Add" }).ClickAsync(); + await mainPage.GotoWaterfallPage(); await mainPage.Locator("article").WaitForAsync(new() { Timeout = 5000 }); - await overlayPage.GotoAsync($"/overlay"); + await overlayPage.GotoOverlayPage(); var overlayContents = await overlayPage.Locator("#overlayDisplay").AllTextContentsAsync(); Assert.All(overlayContents, o => string.IsNullOrWhiteSpace(o)); From d53f93e81bc8dd331482f3ec2b76925110be67ae Mon Sep 17 00:00:00 2001 From: "Jeffrey T. Fritz" Date: Tue, 15 Aug 2023 13:01:53 -0400 Subject: [PATCH 3/6] Added slide in menu and pinned the title to the top of the screen --- .../Pages/Shared/_WaterfallLayout.cshtml | 32 +++++++++++-- .../Pages/Shared/_WaterfallLayout.cshtml.css | 48 +++++++++++++++++++ src/TagzApp.Web/Pages/Waterfall.cshtml | 16 +++---- src/TagzApp.Web/wwwroot/css/site.css | 2 + src/TagzApp.Web/wwwroot/js/site.js | 2 +- 5 files changed, 86 insertions(+), 14 deletions(-) diff --git a/src/TagzApp.Web/Pages/Shared/_WaterfallLayout.cshtml b/src/TagzApp.Web/Pages/Shared/_WaterfallLayout.cshtml index 720831d9..c2cf6698 100644 --- a/src/TagzApp.Web/Pages/Shared/_WaterfallLayout.cshtml +++ b/src/TagzApp.Web/Pages/Shared/_WaterfallLayout.cshtml @@ -12,9 +12,15 @@ - + - +
    + +
    + +
    + +
    @@ -22,13 +28,31 @@
    - - + + @await RenderSectionAsync("Scripts", required: false) \ No newline at end of file diff --git a/src/TagzApp.Web/Pages/Shared/_WaterfallLayout.cshtml.css b/src/TagzApp.Web/Pages/Shared/_WaterfallLayout.cshtml.css index a72cbeaf..b0498453 100644 --- a/src/TagzApp.Web/Pages/Shared/_WaterfallLayout.cshtml.css +++ b/src/TagzApp.Web/Pages/Shared/_WaterfallLayout.cshtml.css @@ -46,3 +46,51 @@ button.accept-policy { 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; + } +} + + diff --git a/src/TagzApp.Web/Pages/Waterfall.cshtml b/src/TagzApp.Web/Pages/Waterfall.cshtml index 261e307a..f3023a95 100644 --- a/src/TagzApp.Web/Pages/Waterfall.cshtml +++ b/src/TagzApp.Web/Pages/Waterfall.cshtml @@ -9,21 +9,19 @@
    -
    -
    - - @*
    +
    - + @*
    -
    - *@ + +
    + *@
    +