From 808f644bee0557e29c21096a885deb6db6c12cbf Mon Sep 17 00:00:00 2001 From: Espen Boman Fosseide Date: Wed, 19 Jan 2022 17:45:51 +0100 Subject: [PATCH 1/8] feat: rework badges file structure --- SpeiderappPWA/Pages/Badges.razor | 180 ------------------ SpeiderappPWA/Pages/Badges.razor.cs | 31 --- SpeiderappPWA/Pages/Badges/Badges.razor | 53 ++++++ SpeiderappPWA/Pages/Badges/Badges.razor.cs | 61 ++++++ SpeiderappPWA/Pages/Badges/Badges.razor.css | 93 +++++++++ .../Pages/Badges/Components/Badge.razor | 65 +++++++ .../Pages/Badges/Components/Badge.razor.cs | 65 +++++++ .../Components/Badge.razor.css} | 126 +++--------- 8 files changed, 361 insertions(+), 313 deletions(-) delete mode 100644 SpeiderappPWA/Pages/Badges.razor delete mode 100644 SpeiderappPWA/Pages/Badges.razor.cs create mode 100644 SpeiderappPWA/Pages/Badges/Badges.razor create mode 100644 SpeiderappPWA/Pages/Badges/Badges.razor.cs create mode 100644 SpeiderappPWA/Pages/Badges/Badges.razor.css create mode 100644 SpeiderappPWA/Pages/Badges/Components/Badge.razor create mode 100644 SpeiderappPWA/Pages/Badges/Components/Badge.razor.cs rename SpeiderappPWA/Pages/{Badges.razor.css => Badges/Components/Badge.razor.css} (68%) diff --git a/SpeiderappPWA/Pages/Badges.razor b/SpeiderappPWA/Pages/Badges.razor deleted file mode 100644 index 647d7ca..0000000 --- a/SpeiderappPWA/Pages/Badges.razor +++ /dev/null @@ -1,180 +0,0 @@ -@page "/badges" - -

Badges

- -

This component demonstrates fetching data from the API.

- - - -
- - -
-
-
- @collapsed - Option 1 -
- -
-
- Option 2 -
- -
-
- Option 3 -
- -
-
- - - - -
- -
-
-@if (badges == null) -{ -

Loading...

-} -else -{ -
- @{ - var random = new Random(); - string border_color = ""; - string color = ""; - int numRequirements; - int numGreen; - double fraction; - } - @foreach (var badge in badges) - { - -
- - -
- @badge.Name -
-
- @badge.Description -
-
- @{ - numRequirements = random.Next(0, 14); - numGreen = 0; - } - @for (var i = 0; i < numRequirements; i++) - { - @if (random.Next(0, 2) == 0) - { - color = "red"; - } - else - { - color = "green"; - numGreen++; - } - var taskList = new List {"Gi Espen penger", "Gi Espen et kompliment", "Bytt til python", "Si til Espen hvor vakker han er"}; - var tooltip = taskList[i % taskList.Count]; - -
- } -
-
-
- badge @badge.Id logo -
-
-
- - @{ fraction = (double) numGreen / (double) numRequirements; } - - - - @if (fraction > 0.5f) - { - - } - -
-
- - @if (badge.IsComplete) - { -
- } -
- - } -
-@code -{ - private string collapsed = "collapsed"; - private string gridSelected = "selected"; - private string listSelected = ""; - private string list = ""; - private void ToggleFilter() - { - if (collapsed == "") - { - collapsed = "collapsed"; - } - else - { - collapsed = ""; - } - } - - private void ListView() - { - list = "list"; - gridSelected = ""; - listSelected = "selected"; - } - - private void GridView() - { - list = ""; - gridSelected = "selected"; - listSelected = ""; - } - - private double RightBorderY(double deg) - { - if (deg >= 0.5) - { - return 75.0; - } - return Math.Sin(-deg * Math.PI * 2+Math.PI)*75+75; - } - private double RightBorderX(double deg) - { - if (deg >= 0.5) - { - return 150; - } - return Math.Cos(-deg * Math.PI * 2+Math.PI)*75+75; - } - private double LeftBorderY(double deg) - { - if (deg <= 0.5) - { - return 150.0; - } - return Math.Sin(-deg * Math.PI * 2+Math.PI)*75+75; - } - private double LeftBorderX(double deg) - { - if (deg <= 0.5) - { - return 0; - } - return Math.Cos(-deg * Math.PI * 2+Math.PI)*75+75; - } -} -} \ No newline at end of file diff --git a/SpeiderappPWA/Pages/Badges.razor.cs b/SpeiderappPWA/Pages/Badges.razor.cs deleted file mode 100644 index 0444a61..0000000 --- a/SpeiderappPWA/Pages/Badges.razor.cs +++ /dev/null @@ -1,31 +0,0 @@ -using Microsoft.AspNetCore.Components; -using System.Net.Http; -using System.Net.Http.Json; -using System.Threading.Tasks; - -namespace SpeiderappPWA.Pages -{ - public partial class Badges : ComponentBase - { - [Inject] - private HttpClient Http {get; set; } - private Models.Badge[] badges; - - protected override async Task OnInitializedAsync() - { - badges = await Http.GetFromJsonAsync("sample-data/badges.json"); - } - - private string BadgeLogo(string img) - { - if (img != null) - { - return img; - } - else - { - return "https://via.placeholder.com/150"; - } - } - } -} diff --git a/SpeiderappPWA/Pages/Badges/Badges.razor b/SpeiderappPWA/Pages/Badges/Badges.razor new file mode 100644 index 0000000..0dbac47 --- /dev/null +++ b/SpeiderappPWA/Pages/Badges/Badges.razor @@ -0,0 +1,53 @@ +@page "/badges" +@using SpeiderappPWA.Pages.Badges.Components + +

Badges

+ +

This component demonstrates fetching data from the API.

+ + + +
+ + +
+
+
+ @collapsed + Option 1 +
+ +
+
+ Option 2 +
+ +
+
+ Option 3 +
+ +
+
+ + + + +
+ +
+
+@if (badges == null) +{ +

Loading...

+} +else +{ +
+ + @foreach (var badge in badges) + { + + } +
+} \ No newline at end of file diff --git a/SpeiderappPWA/Pages/Badges/Badges.razor.cs b/SpeiderappPWA/Pages/Badges/Badges.razor.cs new file mode 100644 index 0000000..07317f8 --- /dev/null +++ b/SpeiderappPWA/Pages/Badges/Badges.razor.cs @@ -0,0 +1,61 @@ +using Microsoft.AspNetCore.Components; +using System.Net.Http; +using System.Net.Http.Json; +using System.Threading.Tasks; + +namespace SpeiderappPWA.Pages.Badges +{ + public partial class Badges : ComponentBase + { + [Inject] + private HttpClient Http {get; set; } + private Models.Badge[] badges; + + protected override async Task OnInitializedAsync() + { + badges = await Http.GetFromJsonAsync("sample-data/badges.json"); + } + + private string BadgeLogo(string img) + { + if (img != null) + { + return img; + } + else + { + return "https://via.placeholder.com/150"; + } + } + + private string collapsed = "collapsed"; + private string gridSelected = "selected"; + private string listSelected = ""; + private string list = ""; + private void ToggleFilter() + { + if (collapsed == "") + { + collapsed = "collapsed"; + } + else + { + collapsed = ""; + } + } + + private void ListView() + { + list = "list"; + gridSelected = ""; + listSelected = "selected"; + } + + private void GridView() + { + list = ""; + gridSelected = "selected"; + listSelected = ""; + } + } +} diff --git a/SpeiderappPWA/Pages/Badges/Badges.razor.css b/SpeiderappPWA/Pages/Badges/Badges.razor.css new file mode 100644 index 0000000..b764dff --- /dev/null +++ b/SpeiderappPWA/Pages/Badges/Badges.razor.css @@ -0,0 +1,93 @@ +.badge-table { + display: flex; + flex-wrap: wrap; + align-content: flex-start; +} + +.badge-table.list { + flex-wrap: nowrap; + flex-direction: column; +} + + + +.separator { + height: 4px; + width: 100%; +} + +.inline-line { + width: 100%; +} + +.fa-th { + margin-right: 10px; +} + +.fa-list { + +} + +.selected { + color: #3a0647; +} + + +.search-bar { + width: 100%; + height: 30px; +} + +.filter { + float: left; + line-height: 180%; + margin: 0 10px 0 0; + padding: 2px; +} + +.filter:hover { + background-color: #e4e4e4; +} + +.search-form { + margin: auto; + max-height: 100%; +} + +.search-input { + margin: auto; + max-height: 100%; +} + +.search-button { + background-color: #e4e4e4; + border: none; + padding: 6px 10px; + font-size: 16px; + margin-right: 16px; + max-height: 100%; +} + +.filter-options { + display: flex; + flex-wrap: wrap; + height: 75px; + overflow: hidden; +} + +.collapsed { + height: 0; +} + +.filter-option { + width: 200px; + margin-right: 5px; + background-color: #dbdbdb; + overflow: hidden; +} + +@supports (-moz-appearance:none) { + .badge-element:hover .badge-description { + transition: all 2s ease; + } +} \ No newline at end of file diff --git a/SpeiderappPWA/Pages/Badges/Components/Badge.razor b/SpeiderappPWA/Pages/Badges/Components/Badge.razor new file mode 100644 index 0000000..2ae9ebe --- /dev/null +++ b/SpeiderappPWA/Pages/Badges/Components/Badge.razor @@ -0,0 +1,65 @@ +@{ + var random = new Random(); + string border_color = ""; + string color = ""; + int numRequirements; + int numGreen; + double fraction; +} + +
+ + +
+ @name +
+
+ @description +
+
+ @{ + numRequirements = random.Next(0, 14); + numGreen = 0; + } + @for (var i = 0; i < numRequirements; i++) + { + @if (random.Next(0, 2) == 0) + { + color = "red"; + } + else + { + color = "green"; + numGreen++; + } + var taskList = new List {"Gi Espen penger", "Gi Espen et kompliment", "Bytt til python", "Si til Espen hvor vakker han er"}; + var tooltip = taskList[i % taskList.Count]; + +
+ } +
+
+
+ badge @id logo +
+
+
+ + @{ fraction = (double) numGreen / (double) numRequirements; } + + + + @if (fraction > 0.5f) + { + + } + +
+
+ + @if (complete) + { +
+ } +
+ \ No newline at end of file diff --git a/SpeiderappPWA/Pages/Badges/Components/Badge.razor.cs b/SpeiderappPWA/Pages/Badges/Components/Badge.razor.cs new file mode 100644 index 0000000..d39fffa --- /dev/null +++ b/SpeiderappPWA/Pages/Badges/Components/Badge.razor.cs @@ -0,0 +1,65 @@ +using Microsoft.AspNetCore.Components; +using System; + +namespace SpeiderappPWA.Pages.Badges.Components +{ + public partial class Badge : ComponentBase + { + [Parameter] + public string name { get; set; } = ""; + + [Parameter] + public long id { get; set; } = 0; + + + [Parameter] + public string description { get; set; } = ""; + + [Parameter] + public string image { get; set; } = ""; + + [Parameter] + public string list { get; set; } = ""; + + [Parameter] + public string logo { get; set; } = ""; + + + [Parameter] + public bool complete { get; set; } = false; + + + private double RightBorderY(double deg) + { + if (deg >= 0.5) + { + return 75.0; + } + return Math.Sin(-deg * Math.PI * 2+Math.PI)*75+75; + } + private double RightBorderX(double deg) + { + if (deg >= 0.5) + { + return 150; + } + return Math.Cos(-deg * Math.PI * 2+Math.PI)*75+75; + } + private double LeftBorderY(double deg) + { + if (deg <= 0.5) + { + return 150.0; + } + return Math.Sin(-deg * Math.PI * 2+Math.PI)*75+75; + } + private double LeftBorderX(double deg) + { + if (deg <= 0.5) + { + return 0; + } + return Math.Cos(-deg * Math.PI * 2+Math.PI)*75+75; + } + } +} \ No newline at end of file diff --git a/SpeiderappPWA/Pages/Badges.razor.css b/SpeiderappPWA/Pages/Badges/Components/Badge.razor.css similarity index 68% rename from SpeiderappPWA/Pages/Badges.razor.css rename to SpeiderappPWA/Pages/Badges/Components/Badge.razor.css index 5295053..6ffe532 100644 --- a/SpeiderappPWA/Pages/Badges.razor.css +++ b/SpeiderappPWA/Pages/Badges/Components/Badge.razor.css @@ -1,16 +1,4 @@ -.badge-table { - display: flex; - flex-wrap: wrap; - align-content: flex-start; -} - -a:link { - text-decoration: none; -} -.badge-table.list { - flex-wrap: nowrap; - flex-direction: column; -} + .red { background-color: #acacac; } @@ -18,40 +6,11 @@ a:link { .green { background-color: #5b9765; } -.dot { - height: 25px; - width: 25px; - border-radius: 50%; - display: inline-block; -} - -.dot.list { - border-radius: 5%; -} -.separator { - height: 4px; - width: 100%; -} -.inline-line { - width: 100%; -} - -.fa-th { - margin-right: 10px; -} - -.fa-list { - -} - -.selected { - color: #3a0647; -} .badge-element { position: relative; transition: all 0s ease; - color:black; + color: black; margin: 5px; display: grid; width: 200px; @@ -65,6 +24,7 @@ a:link { "requirements requirements"; } + .badge-element.list { transition-duration: 0s; display: grid; @@ -78,6 +38,7 @@ a:link { ". requirements"; } + .badge-background { border-radius: 5px; background-color: #E2E2E2; @@ -86,6 +47,7 @@ a:link { height: 100%; z-index: -3; } + .badge-image-container { position: absolute; width: 100%; @@ -96,7 +58,7 @@ a:link { .badge-image-container.list { width: 150px; - height:150px; + height: 150px; top: 0; } @@ -108,6 +70,7 @@ a:link { .badge-element.list:hover .badge-image-container { opacity: 1; } + .badge-image { padding: 3px; grid-area: image; @@ -124,18 +87,19 @@ a:link { visibility: hidden; } -.badge-image-background svg path{ +.badge-image-background svg path { stroke: transparent; fill: transparent; } -.badge-image-background svg path{ + +.badge-image-background svg path { fill: #5b9765;; stroke: #5b9765;; } .badge-image-background.list { width: 150px; - height:150px; + height: 150px; top: 0; visibility: visible; } @@ -143,8 +107,8 @@ a:link { .badge-image img { display: block; margin: auto; - max-width:100%; - max-height:100%; + max-width: 100%; + max-height: 100%; border-radius: 50%; } @@ -176,12 +140,10 @@ a:link { overflow: hidden; } -.badge-requirements.list { - justify-content: flex-end; -} -.badge-requirements.list .dot{ +.badge-requirements.list .dot { margin-left: 1px; } + .badge-description { opacity: 0; padding: 4px; @@ -193,6 +155,7 @@ a:link { .badge-description.list { margin: 0; } + .badge-description.list { opacity: 1; overflow: hidden; @@ -220,7 +183,7 @@ a:link { .badge-checkmark.list { height: 20px; width: 20px; - left:calc(100% - 30px); + left: calc(100% - 30px); } .badge-element:hover { @@ -237,55 +200,14 @@ a:link { opacity: 1; } -.search-bar{ - width:100%; - height: 30px; -} -.filter{ - float: left; - line-height: 180%; - margin: 0 10px 0 0; - padding: 2px; -} -.filter:hover{ - background-color: #e4e4e4; -} - -.search-form{ - margin: auto; - max-height:100%; -} -.search-input{ - margin: auto; - max-height:100%; -} -.search-button{ - background-color: #e4e4e4; - border: none; - padding: 6px 10px; - font-size: 16px; - margin-right: 16px; - max-height:100%; -} +.dot { + height: 25px; + width: 25px; -.filter-options{ - display: flex; - flex-wrap: wrap; - height: 75px; - overflow:hidden; -} -.collapsed{ - height:0; -} -.filter-option{ - width: 200px; - margin-right: 5px; - background-color: #dbdbdb; - overflow: hidden; + border-radius: 50%; + display: inline-block; } -@supports (-moz-appearance:none) { - .badge-element:hover .badge-description { - transition: all 2s ease; - } +.dot.list { + border-radius: 5%; } \ No newline at end of file From 0f358330df60c66d28f06e5548585260e8eb9c1a Mon Sep 17 00:00:00 2001 From: Espen Boman Fosseide Date: Sun, 23 Jan 2022 16:39:50 +0100 Subject: [PATCH 2/8] fix: resolve merge errors --- SpeiderappPWA/Pages/Badges/Components/Badge.razor.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/SpeiderappPWA/Pages/Badges/Components/Badge.razor.css b/SpeiderappPWA/Pages/Badges/Components/Badge.razor.css index 6ffe532..39fb4f7 100644 --- a/SpeiderappPWA/Pages/Badges/Components/Badge.razor.css +++ b/SpeiderappPWA/Pages/Badges/Components/Badge.razor.css @@ -7,6 +7,10 @@ background-color: #5b9765; } +a:link { + text-decoration: none; +} + .badge-element { position: relative; transition: all 0s ease; @@ -135,7 +139,7 @@ display: flex; flex-wrap: wrap; align-content: space-around; - justify-content: space-around; + justify-content: end; grid-area: requirements; overflow: hidden; } From ab616604fc48c3f3366e978eb3a63dde85854325 Mon Sep 17 00:00:00 2001 From: Espen Boman Fosseide Date: Sun, 23 Jan 2022 16:40:48 +0100 Subject: [PATCH 3/8] feat: remove example pages --- SpeiderappPWA/Pages/Counter.razor | 16 --------- SpeiderappPWA/Pages/FetchData.razor | 55 ----------------------------- SpeiderappPWA/Shared/NavMenu.razor | 10 ------ 3 files changed, 81 deletions(-) delete mode 100644 SpeiderappPWA/Pages/Counter.razor delete mode 100644 SpeiderappPWA/Pages/FetchData.razor diff --git a/SpeiderappPWA/Pages/Counter.razor b/SpeiderappPWA/Pages/Counter.razor deleted file mode 100644 index 8641f78..0000000 --- a/SpeiderappPWA/Pages/Counter.razor +++ /dev/null @@ -1,16 +0,0 @@ -@page "/counter" - -

Counter

- -

Current count: @currentCount

- - - -@code { - private int currentCount = 0; - - private void IncrementCount() - { - currentCount++; - } -} diff --git a/SpeiderappPWA/Pages/FetchData.razor b/SpeiderappPWA/Pages/FetchData.razor deleted file mode 100644 index 5824082..0000000 --- a/SpeiderappPWA/Pages/FetchData.razor +++ /dev/null @@ -1,55 +0,0 @@ -@page "/fetchdata" -@inject HttpClient Http - -

Weather forecast

- -

This component demonstrates fetching data from the server.

- -@if (forecasts == null) -{ -

Loading...

-} -else -{ - - - - - - - - - - - @foreach (var forecast in forecasts) - { - - - - - - - } - -
DateTemp. (C)Temp. (F)Summary
@forecast.Date.ToShortDateString()@forecast.TemperatureC@forecast.TemperatureF@forecast.Summary
-} - -@code { - private WeatherForecast[] forecasts; - - protected override async Task OnInitializedAsync() - { - forecasts = await Http.GetFromJsonAsync("sample-data/weather.json"); - } - - public class WeatherForecast - { - public DateTime Date { get; set; } - - public int TemperatureC { get; set; } - - public string Summary { get; set; } - - public int TemperatureF => 32 + (int)(TemperatureC / 0.5556); - } -} diff --git a/SpeiderappPWA/Shared/NavMenu.razor b/SpeiderappPWA/Shared/NavMenu.razor index bd067fb..869814e 100644 --- a/SpeiderappPWA/Shared/NavMenu.razor +++ b/SpeiderappPWA/Shared/NavMenu.razor @@ -12,21 +12,11 @@ Home -
  • - - Counter - -
  • Badges
    • -
  • - - Fetch data - -
    • From 0b66cee7213eb38b4de676853f4d5b8e820f0a5b Mon Sep 17 00:00:00 2001 From: Espen Boman Fosseide Date: Sun, 23 Jan 2022 16:57:13 +0100 Subject: [PATCH 4/8] refactor: shared components --- SpeiderappPWA/Pages/Index.razor | 7 ------- SpeiderappPWA/Pages/Index/Index.razor | 5 +++++ .../{ => MainLayout/Components}/NavMenu.razor | 0 .../Components}/NavMenu.razor.css | 0 .../Shared/{ => MainLayout}/MainLayout.razor | 1 + .../Shared/{ => MainLayout}/MainLayout.razor.css | 0 SpeiderappPWA/Shared/SurveyPrompt.razor | 16 ---------------- SpeiderappPWA/_Imports.razor | 2 +- 8 files changed, 7 insertions(+), 24 deletions(-) delete mode 100644 SpeiderappPWA/Pages/Index.razor create mode 100644 SpeiderappPWA/Pages/Index/Index.razor rename SpeiderappPWA/Shared/{ => MainLayout/Components}/NavMenu.razor (100%) rename SpeiderappPWA/Shared/{ => MainLayout/Components}/NavMenu.razor.css (100%) rename SpeiderappPWA/Shared/{ => MainLayout}/MainLayout.razor (87%) rename SpeiderappPWA/Shared/{ => MainLayout}/MainLayout.razor.css (100%) delete mode 100644 SpeiderappPWA/Shared/SurveyPrompt.razor diff --git a/SpeiderappPWA/Pages/Index.razor b/SpeiderappPWA/Pages/Index.razor deleted file mode 100644 index e54d914..0000000 --- a/SpeiderappPWA/Pages/Index.razor +++ /dev/null @@ -1,7 +0,0 @@ -@page "/" - -

    Hello, world!

    - -Welcome to your new app. - - diff --git a/SpeiderappPWA/Pages/Index/Index.razor b/SpeiderappPWA/Pages/Index/Index.razor new file mode 100644 index 0000000..73d0d8b --- /dev/null +++ b/SpeiderappPWA/Pages/Index/Index.razor @@ -0,0 +1,5 @@ +@page "/" + +

    Hello, world!

    + +Welcome to your new app. \ No newline at end of file diff --git a/SpeiderappPWA/Shared/NavMenu.razor b/SpeiderappPWA/Shared/MainLayout/Components/NavMenu.razor similarity index 100% rename from SpeiderappPWA/Shared/NavMenu.razor rename to SpeiderappPWA/Shared/MainLayout/Components/NavMenu.razor diff --git a/SpeiderappPWA/Shared/NavMenu.razor.css b/SpeiderappPWA/Shared/MainLayout/Components/NavMenu.razor.css similarity index 100% rename from SpeiderappPWA/Shared/NavMenu.razor.css rename to SpeiderappPWA/Shared/MainLayout/Components/NavMenu.razor.css diff --git a/SpeiderappPWA/Shared/MainLayout.razor b/SpeiderappPWA/Shared/MainLayout/MainLayout.razor similarity index 87% rename from SpeiderappPWA/Shared/MainLayout.razor rename to SpeiderappPWA/Shared/MainLayout/MainLayout.razor index 9acf498..051dfcd 100644 --- a/SpeiderappPWA/Shared/MainLayout.razor +++ b/SpeiderappPWA/Shared/MainLayout/MainLayout.razor @@ -1,4 +1,5 @@ @inherits LayoutComponentBase +@using SpeiderappPWA.Shared.MainLayout.Components
    diff --git a/SpeiderappPWA/Shared/MainLayout.razor.css b/SpeiderappPWA/Shared/MainLayout/MainLayout.razor.css similarity index 100% rename from SpeiderappPWA/Shared/MainLayout.razor.css rename to SpeiderappPWA/Shared/MainLayout/MainLayout.razor.css diff --git a/SpeiderappPWA/Shared/SurveyPrompt.razor b/SpeiderappPWA/Shared/SurveyPrompt.razor deleted file mode 100644 index 0271409..0000000 --- a/SpeiderappPWA/Shared/SurveyPrompt.razor +++ /dev/null @@ -1,16 +0,0 @@ - - -@code { - // Demonstrates how a parent component can supply parameters - [Parameter] - public string Title { get; set; } -} diff --git a/SpeiderappPWA/_Imports.razor b/SpeiderappPWA/_Imports.razor index c481318..856cde5 100644 --- a/SpeiderappPWA/_Imports.razor +++ b/SpeiderappPWA/_Imports.razor @@ -7,4 +7,4 @@ @using Microsoft.AspNetCore.Components.WebAssembly.Http @using Microsoft.JSInterop @using SpeiderappPWA -@using SpeiderappPWA.Shared +@using SpeiderappPWA.Shared.MainLayout From 8cb7cb0084dd3fac87b4c44c615500a95d917e13 Mon Sep 17 00:00:00 2001 From: Espen Boman Fosseide Date: Sun, 23 Jan 2022 17:05:03 +0100 Subject: [PATCH 5/8] refactor: add NavItem as a component --- .../MainLayout/Components/NavItem.razor | 15 +++++++ .../MainLayout/Components/NavItem.razor.css | 39 +++++++++++++++++++ .../MainLayout/Components/NavMenu.razor | 12 +----- .../MainLayout/Components/NavMenu.razor.css | 39 ------------------- 4 files changed, 56 insertions(+), 49 deletions(-) create mode 100644 SpeiderappPWA/Shared/MainLayout/Components/NavItem.razor create mode 100644 SpeiderappPWA/Shared/MainLayout/Components/NavItem.razor.css diff --git a/SpeiderappPWA/Shared/MainLayout/Components/NavItem.razor b/SpeiderappPWA/Shared/MainLayout/Components/NavItem.razor new file mode 100644 index 0000000..c06c7c4 --- /dev/null +++ b/SpeiderappPWA/Shared/MainLayout/Components/NavItem.razor @@ -0,0 +1,15 @@ +
  • + + @ChildContent + +
    • + +@code { + + [Parameter] + public RenderFragment ChildContent { get; set; } + + [Parameter] + public string Icon { get; set; } + +} \ No newline at end of file diff --git a/SpeiderappPWA/Shared/MainLayout/Components/NavItem.razor.css b/SpeiderappPWA/Shared/MainLayout/Components/NavItem.razor.css new file mode 100644 index 0000000..e7f5106 --- /dev/null +++ b/SpeiderappPWA/Shared/MainLayout/Components/NavItem.razor.css @@ -0,0 +1,39 @@ +.oi { + width: 2rem; + font-size: 1.1rem; + vertical-align: text-top; + top: -2px; +} + + +.nav-item { + font-size: 0.9rem; + padding-bottom: 0.5rem; +} + +.nav-item:first-of-type { + padding-top: 1rem; +} + +.nav-item:last-of-type { + padding-bottom: 1rem; +} + +.nav-item ::deep a { + color: #d7d7d7; + border-radius: 4px; + height: 3rem; + display: flex; + align-items: center; + line-height: 3rem; +} + +.nav-item ::deep a.active { + background-color: rgba(255,255,255,0.25); + color: white; +} + +.nav-item ::deep a:hover { + background-color: rgba(255,255,255,0.1); + color: white; +} \ No newline at end of file diff --git a/SpeiderappPWA/Shared/MainLayout/Components/NavMenu.razor b/SpeiderappPWA/Shared/MainLayout/Components/NavMenu.razor index 869814e..d41c985 100644 --- a/SpeiderappPWA/Shared/MainLayout/Components/NavMenu.razor +++ b/SpeiderappPWA/Shared/MainLayout/Components/NavMenu.razor @@ -7,16 +7,8 @@
      -
    • - - Home - -
      • -
    • - - Badges - -
      • + Home + Badges
    diff --git a/SpeiderappPWA/Shared/MainLayout/Components/NavMenu.razor.css b/SpeiderappPWA/Shared/MainLayout/Components/NavMenu.razor.css index ab2d3e2..b11b7bc 100644 --- a/SpeiderappPWA/Shared/MainLayout/Components/NavMenu.razor.css +++ b/SpeiderappPWA/Shared/MainLayout/Components/NavMenu.razor.css @@ -11,45 +11,6 @@ font-size: 1.1rem; } -.oi { - width: 2rem; - font-size: 1.1rem; - vertical-align: text-top; - top: -2px; -} - -.nav-item { - font-size: 0.9rem; - padding-bottom: 0.5rem; -} - - .nav-item:first-of-type { - padding-top: 1rem; - } - - .nav-item:last-of-type { - padding-bottom: 1rem; - } - - .nav-item ::deep a { - color: #d7d7d7; - border-radius: 4px; - height: 3rem; - display: flex; - align-items: center; - line-height: 3rem; - } - -.nav-item ::deep a.active { - background-color: rgba(255,255,255,0.25); - color: white; -} - -.nav-item ::deep a:hover { - background-color: rgba(255,255,255,0.1); - color: white; -} - @media (min-width: 768px) { .navbar-toggler { display: none; From a272442a78a5c38788f4b4a5f10b6915c9f2154f Mon Sep 17 00:00:00 2001 From: Espen Boman Fosseide Date: Sun, 23 Jan 2022 17:21:35 +0100 Subject: [PATCH 6/8] refactor: split NavMenu into 3 components --- .../Shared/MainLayout/Components/NavMenu.razor | 7 +------ .../MainLayout/Components/NavMenu.razor.css | 17 ----------------- .../MainLayout/Components/NavTitle.razor | 12 ++++++++++++ .../MainLayout/Components/NavTitle.razor.css | 18 ++++++++++++++++++ 4 files changed, 31 insertions(+), 23 deletions(-) create mode 100644 SpeiderappPWA/Shared/MainLayout/Components/NavTitle.razor create mode 100644 SpeiderappPWA/Shared/MainLayout/Components/NavTitle.razor.css diff --git a/SpeiderappPWA/Shared/MainLayout/Components/NavMenu.razor b/SpeiderappPWA/Shared/MainLayout/Components/NavMenu.razor index d41c985..d2b39a5 100644 --- a/SpeiderappPWA/Shared/MainLayout/Components/NavMenu.razor +++ b/SpeiderappPWA/Shared/MainLayout/Components/NavMenu.razor @@ -1,9 +1,4 @@ -
    - SpeiderappPWA - -
    +
      diff --git a/SpeiderappPWA/Shared/MainLayout/Components/NavMenu.razor.css b/SpeiderappPWA/Shared/MainLayout/Components/NavMenu.razor.css index b11b7bc..4c47de5 100644 --- a/SpeiderappPWA/Shared/MainLayout/Components/NavMenu.razor.css +++ b/SpeiderappPWA/Shared/MainLayout/Components/NavMenu.razor.css @@ -1,21 +1,4 @@ -.navbar-toggler { - background-color: rgba(255, 255, 255, 0.1); -} - -.top-row { - height: 3.5rem; - background-color: rgba(0,0,0,0.4); -} - -.navbar-brand { - font-size: 1.1rem; -} - @media (min-width: 768px) { - .navbar-toggler { - display: none; - } - .collapse { /* Never collapse the sidebar for wide screens */ display: block; diff --git a/SpeiderappPWA/Shared/MainLayout/Components/NavTitle.razor b/SpeiderappPWA/Shared/MainLayout/Components/NavTitle.razor new file mode 100644 index 0000000..36576a9 --- /dev/null +++ b/SpeiderappPWA/Shared/MainLayout/Components/NavTitle.razor @@ -0,0 +1,12 @@ +
      + SpeiderappPWA + +
      + +@code { + [Parameter] + public Action ToggleNavMenu { get; set; } + +} \ No newline at end of file diff --git a/SpeiderappPWA/Shared/MainLayout/Components/NavTitle.razor.css b/SpeiderappPWA/Shared/MainLayout/Components/NavTitle.razor.css new file mode 100644 index 0000000..51f323f --- /dev/null +++ b/SpeiderappPWA/Shared/MainLayout/Components/NavTitle.razor.css @@ -0,0 +1,18 @@ +.navbar-toggler { + background-color: rgba(255, 255, 255, 0.1); +} + +.top-row { + height: 3.5rem; + background-color: rgba(0,0,0,0.4); +} + +.navbar-brand { + font-size: 1.1rem; +} + +@media (min-width: 768px) { + .navbar-toggler { + display: none; + } +} \ No newline at end of file From e7f05d19781cb06d5d6c5df8f6a3a46b12611154 Mon Sep 17 00:00:00 2001 From: Espen Boman Fosseide Date: Sun, 23 Jan 2022 17:22:41 +0100 Subject: [PATCH 7/8] refactor: collapse NavTitle Component --- SpeiderappPWA/Shared/MainLayout/Components/NavMenu.razor | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/SpeiderappPWA/Shared/MainLayout/Components/NavMenu.razor b/SpeiderappPWA/Shared/MainLayout/Components/NavMenu.razor index d2b39a5..f748a44 100644 --- a/SpeiderappPWA/Shared/MainLayout/Components/NavMenu.razor +++ b/SpeiderappPWA/Shared/MainLayout/Components/NavMenu.razor @@ -1,4 +1,4 @@ - +
        From c12d6812e0f578fce59a8dd2aae135c54edbc45f Mon Sep 17 00:00:00 2001 From: Espen Boman Fosseide Date: Sun, 23 Jan 2022 17:25:24 +0100 Subject: [PATCH 8/8] fix: add href parameter to NavItem --- SpeiderappPWA/Shared/MainLayout/Components/NavItem.razor | 4 +++- SpeiderappPWA/Shared/MainLayout/Components/NavMenu.razor | 4 ++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/SpeiderappPWA/Shared/MainLayout/Components/NavItem.razor b/SpeiderappPWA/Shared/MainLayout/Components/NavItem.razor index c06c7c4..e131829 100644 --- a/SpeiderappPWA/Shared/MainLayout/Components/NavItem.razor +++ b/SpeiderappPWA/Shared/MainLayout/Components/NavItem.razor @@ -1,5 +1,5 @@ 
      • - + @ChildContent
        • @@ -12,4 +12,6 @@ [Parameter] public string Icon { get; set; } + [Parameter] + public string Href { get; set; } } \ No newline at end of file diff --git a/SpeiderappPWA/Shared/MainLayout/Components/NavMenu.razor b/SpeiderappPWA/Shared/MainLayout/Components/NavMenu.razor index f748a44..f8b88f9 100644 --- a/SpeiderappPWA/Shared/MainLayout/Components/NavMenu.razor +++ b/SpeiderappPWA/Shared/MainLayout/Components/NavMenu.razor @@ -2,8 +2,8 @@
          - Home - Badges + Home + Badges