JonathanMcCaffrey/IGP-Fan-Reference
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

style(Navigation) Style changes to desktop navigation

Browse Source
This commit is contained in:
Jonathan McCaffrey
2022-04-15 14:13:58 -04:00
parent 2ea7d67706
commit b3234c447e
6 changed files with 54 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Components/Navigation/DesktopNavComponent.razor
+27 -8
View File
@@ -18,15 +18,21 @@
@foreach (var webSection in WebSections)
{
var isSelected = navigationService.GetNavigationSectionId().Equals(webSection.Id);
var sectionButtonStyle = "sectionButton";
if (isSelected)
{
sectionButtonStyle += " sectionButtonSelected";
}
<div>
<button onclick="@(() => MenuClicked(webSection.Id))" class="sectionButton">@webSection.Name</button>
<button onclick="@(() => { MenuClicked(webSection.Id); })" class="@sectionButtonStyle">@webSection.Name</button>
@if (webSection.Id.Equals(navigationService.GetNavigationSectionId()))
@if (isSelected)
{
<div class="navMenuPosition">
<div class="navMenuContainer">
<DesktopNavSectionComponent Section=webSection> </DesktopNavSectionComponent>
<DesktopNavSectionComponent Section=webSection />
</div>
</div>
}
@@ -51,6 +57,12 @@
.sectionButton {
cursor: pointer;
padding-left: 12px;
padding-right: 12px;
padding-top: 10px;
top: -11px;
position: relative;
z-index: 50000;
}
.desktopNavContainer {
@@ -69,7 +81,7 @@
padding: 12px;
display: flex;
justify-content: center;
gap: 32px;
gap: 8px;
height: 50px;
background-color: var(--accent);
}
@@ -78,13 +90,13 @@
.websiteTitle {
font-weight: bold;
color: white;
margin-right: 32px;
}
.navMenuPosition {
position: relative;
top: calc(100% - 18px);
left: -64px;
top: calc(100% - 36px);
left: calc(50% + -330px / 2);
width: 0;
height: 0;
}
@@ -106,6 +118,13 @@
display: flex;
}
.sectionButtonSelected {
padding-bottom: 14px;
box-shadow: 0 2px 3px black;
background-color: var(--info);
transform: translateY(-1px) scale(1.08);
}
@@media only screen and (max-width: 1025px) {
.desktopNavContainer {
display: none;
Components/Navigation/DesktopNavLinkComponent.razor
+3 -1
View File
@@ -11,7 +11,9 @@
}
else
{
<NavLink @onclick="() => navigationService.ChangeNavigationState(NavigationStateType.Default)" href="@Page.Href" class="desktopNavLink">
<NavLink @onclick="() => {
navigationService.ChangeNavigationState(NavigationStateType.Default);
navigationService.ChangeNavigationSectionId(-1); }" href="@Page.Href" class="desktopNavLink">
<div class="navName">
@Page.Name
</div>
IGP/Database.db
BIN
View File
Binary file not shown.
IGP/Pages/EconomyComparison.razor
+21
View File
@@ -0,0 +1,21 @@
@page "/economy-comparison"
@layout PageLayout
<LayoutMediumContentComponent>
<AlertComponent>
<Title>Not Implemented</Title>
<Message></Message>
</AlertComponent>
<PaperComponent>
TODO
</PaperComponent>
<ContentDividerComponent/>
<PaperComponent>
</PaperComponent>
</LayoutMediumContentComponent>
IGP/wwwroot/generated/AgileTaskModels.json
+1 -1
View File
File diff suppressed because one or more lines are too long
IGP/wwwroot/generated/WebPageModels.json
+1 -1
View File
@@ -1 +1 @@
[{"Id":1,"WebSectionModelId":2,"Name":"Database","Description":"Database of game information","Href":"database","IsPrivate":"False"},{"Id":2,"WebSectionModelId":1,"Name":"Build Calculator","Description":"Build order calculator for determining army timings","Href":"build-calculator","IsPrivate":"False"},{"Id":3,"WebSectionModelId":1,"Name":"Harass Calculator","Description":"Alloy harassment calculator","Href":"harass-calculator","IsPrivate":"False"},{"Id":4,"WebSectionModelId":1,"Name":"Memory Tester","Description":"Testing memory","Href":"memory-tester","IsPrivate":"False"},{"Id":5,"WebSectionModelId":1,"Name":"Comparion Charts","Description":"Ecnomy charts to compare build orders","Href":"comparison-charts","IsPrivate":"True"},{"Id":6,"WebSectionModelId":2,"Name":"Notes","Description":"General player notes","Href":"notes","IsPrivate":"False"},{"Id":7,"WebSectionModelId":2,"Name":"Key Mapping","Description":"General key mapping info","Href":"keymapping","IsPrivate":"True"},{"Id":8,"WebSectionModelId":4,"Name":"Road Map","Description":"Plans for this website","Href":"roadmap","IsPrivate":"False"},{"Id":9,"WebSectionModelId":4,"Name":"Change Log","Description":"Past updates to the website","Href":"changelog","IsPrivate":"False"},{"Id":10,"WebSectionModelId":4,"Name":"Agile","Description":"Showing agile view of this website","Href":"agile","IsPrivate":"False"},{"Id":11,"WebSectionModelId":4,"Name":"Making Of","Description":"Explaining development details of this website","Href":"makingof","IsPrivate":"False"},{"Id":12,"WebSectionModelId":2,"Name":"Documentation","Description":"Explaining how to use this website","Href":"documentation","IsPrivate":"True"},{"Id":13,"WebSectionModelId":3,"Name":"About","Description":"Answering general questions on the website","Href":"about","IsPrivate":"False"},{"Id":14,"WebSectionModelId":3,"Name":"Contact","Description":"My contact info","Href":"contact","IsPrivate":"False"},{"Id":15,"WebSectionModelId":3,"Name":"Streams","Description":"Stream info","Href":"streams","IsPrivate":"False"},{"Id":16,"WebSectionModelId":4,"Name":"Documentation","Description":"Development information","Href":"docs","IsPrivate":"False"},{"Id":17,"WebSectionModelId":5,"Name":"Permissions","Description":"Permission Settings","Href":"permissions","IsPrivate":"False"},{"Id":18,"WebSectionModelId":5,"Name":"Analytics","Description":"Analytics Settings","Href":"analytics","IsPrivate":"False"},{"Id":19,"WebSectionModelId":5,"Name":"Storage","Description":"Storage Settings","Href":"storage","IsPrivate":"False"}]
[{"Id":1,"WebSectionModelId":2,"Name":"Database","Description":"Database of game information","Href":"database","IsPrivate":"False"},{"Id":2,"WebSectionModelId":1,"Name":"Build Calculator","Description":"Build order calculator for determining army timings","Href":"build-calculator","IsPrivate":"False"},{"Id":3,"WebSectionModelId":1,"Name":"Harass Calculator","Description":"Alloy harassment calculator","Href":"harass-calculator","IsPrivate":"False"},{"Id":4,"WebSectionModelId":1,"Name":"Memory Tester","Description":"Testing memory","Href":"memory-tester","IsPrivate":"False"},{"Id":5,"WebSectionModelId":1,"Name":"Comparion Charts","Description":"Ecnomy charts to compare build orders","Href":"comparison-charts","IsPrivate":"True"},{"Id":6,"WebSectionModelId":2,"Name":"Notes","Description":"General player notes","Href":"notes","IsPrivate":"False"},{"Id":7,"WebSectionModelId":2,"Name":"Key Mapping","Description":"General key mapping info","Href":"keymapping","IsPrivate":"True"},{"Id":8,"WebSectionModelId":4,"Name":"Road Map","Description":"Plans for this website","Href":"roadmap","IsPrivate":"False"},{"Id":9,"WebSectionModelId":4,"Name":"Change Log","Description":"Past updates to the website","Href":"changelog","IsPrivate":"False"},{"Id":10,"WebSectionModelId":4,"Name":"Agile","Description":"Showing agile view of this website","Href":"agile","IsPrivate":"False"},{"Id":11,"WebSectionModelId":4,"Name":"Making Of","Description":"Explaining development details of this website","Href":"makingof","IsPrivate":"False"},{"Id":12,"WebSectionModelId":2,"Name":"Documentation","Description":"Explaining how to use this website","Href":"documentation","IsPrivate":"True"},{"Id":13,"WebSectionModelId":3,"Name":"About","Description":"Answering general questions on the website","Href":"about","IsPrivate":"False"},{"Id":14,"WebSectionModelId":3,"Name":"Contact","Description":"My contact info","Href":"contact","IsPrivate":"False"},{"Id":15,"WebSectionModelId":3,"Name":"Streams","Description":"Stream info","Href":"streams","IsPrivate":"False"},{"Id":16,"WebSectionModelId":4,"Name":"Documentation","Description":"Development information","Href":"docs","IsPrivate":"False"},{"Id":17,"WebSectionModelId":5,"Name":"Permissions","Description":"Permission Settings","Href":"permissions","IsPrivate":"False"},{"Id":18,"WebSectionModelId":5,"Name":"Analytics","Description":"Analytics Settings","Href":"analytics","IsPrivate":"False"},{"Id":19,"WebSectionModelId":5,"Name":"Storage","Description":"Storage Settings","Href":"storage","IsPrivate":"False"},{"Id":20,"WebSectionModelId":1,"Name":"Economy Comparison","Description":"Compare economies","Href":"economy-comparison","IsPrivate":"False"}]