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

feat(Icons) Added font awesome icons (#29)

Browse Source
This commit is contained in:
Jonathan McCaffrey
2022-05-02 01:03:04 -04:00
committed by GitHub
parent a64d59bb46
commit 2465433b5f
18 changed files with 110 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Components/Inputs/CodeLinkComponent.razor
+4 -4
View File
@@ -1,16 +1,16 @@
<a href="@Href" class="codeLinkButton">
View on GitHub
<a href="@Href" target="_blank" class="codeLinkButton">
View on GitHub <i class="fa-brands fa-github" style="font-size: 24px; margin-left: 5px;"></i>
</a>
<style>
.codeLinkButton {
color: white;
background-color: var(--info);
border: 1px solid var(--info-border);
border: 2px solid var(--info-border);
padding: 16px;
border-radius: 3px;
display: block;
width: 180px;
width: 200px;
text-align: center;
}
Components/Inputs/EditLinkComponent.razor
+1 -1
View File
@@ -1,4 +1,4 @@
<a href="@Href" class="editLinkButton">
<a href="@Href" target="_blank" class="editLinkButton">
Edit on GitHub
</a>
Components/Inputs/LinkButtonComponent.razor
+35
View File
@@ -0,0 +1,35 @@
<a href="@Href" class="linkButtonContainer" >
@ChildContent
</a>
<style>
.linkButtonContainer {
padding: 16px;
border: 1px solid;
border-radius: 8px;
font-weight: 800;
font-size: 1.2rem;
border-color: var(--primary);
background-color: var(--primary);
}
.linkButtonContainer:hover {
background-color: var(--primary-hover);
border-color: var(--primary-border-hover);
color: white;
}
</style>
@code {
[Parameter]
public RenderFragment ChildContent { get; set; } = default!;
[Parameter]
public string Href { get; set; } = "";
}
Components/Inputs/SearchButtonComponent.razor
+17 -9
View File
@@ -4,10 +4,18 @@
<button id="@Id" class="searchButtonContainer" @onclick="ButtonClicked">
<div class="searchText">
Search...
<i class="fa-solid fa-magnifying-glass" style="margin-left: 3px; margin-right: 6px;"></i> Search...
</div>
<div class="searchHotkey">
@CommandKey + K
@if (IsMac)
{
<span><i class="fa-solid fa-command"></i>K</span>
}
else
{
<span>CTRL + K</span>
}
</div>
</button>
@@ -28,10 +36,10 @@
}
.searchHotkey {
padding: 2px;
background-color: var(--info);
border: 2px solid var(--primary-border);
padding: 4px;
background-color: rgba(255,255,255,0.05);
border: 2px solid rgba(255,255,255,0.25);
border-radius: 4px;
}
</style>
@@ -42,9 +50,9 @@
[Parameter]
public string Id { get; set; } = default!;
private string userAgent = "";
private string _userAgent = "";
string CommandKey => userAgent.Contains("Mac OS") ? "CMD" : "Ctrl";
bool IsMac => _userAgent.Contains("Mac OS");
private void ButtonClicked(EventArgs eventArgs)
{
@@ -53,7 +61,7 @@
protected override async Task OnInitializedAsync()
{
userAgent = await JsRuntime.InvokeAsync<string>("getUserAgent");
_userAgent = await JsRuntime.InvokeAsync<string>("getUserAgent");
}
}
Components/Inputs/SearchIconButtonComponent.razor
+9 -5
View File
@@ -3,24 +3,28 @@
@inject IJSRuntime JsRuntime
<button id="@Id" class="searchIconButtonContainer" @onclick="ButtonClicked">
<div class="searchText">
S
<div class="searchIcon">
<i class="fa-solid fa-magnifying-glass"></i>
</div>
</button>
<style>
.searchIconButtonContainer {
background-color: var(--primary);
border: 2px solid var(--primary-border);
border-radius: 8px;
font-weight: 800;
width: 32px;
width: 100%;
padding: 5px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.searchIcon {
font-size: 28px;
text-align: center;
margin: auto;
}
</style>
@code {
Components/Navigation/DesktopNavComponent.razor
+10 -3
View File
@@ -13,7 +13,7 @@
<div class="desktopNavContainer">
<div class="menuHeader">
<NavLink id="desktop-homeLink" href="/" class="websiteTitle">
IGP Fan Reference
<i class="fa-solid fa-house" style="margin-right: 4px;"></i> IGP Fan Reference
</NavLink>
<div class="sectionNavs">
@@ -27,7 +27,13 @@
}
<div class="sectionNav">
<button onclick="@(() => { MenuClicked(webSection.Id); })" class="@sectionButtonStyle">@webSection.Name</button>
<button onclick="@(() => { MenuClicked(webSection.Id); })" class="@sectionButtonStyle"><i class="fa-solid @webSection.Icon"></i>
@if (!webSection.OnlyIcon)
{
<span style="margin-left: 12px">@webSection.Name</span>
}
</button>
@if (isSelected)
{
<div class="navMenuPosition">
@@ -95,7 +101,7 @@
.sectionNavs {
display: flex;
gap: 8px;
gap: 16px;
align-items: center;
}
@@ -140,6 +146,7 @@
box-shadow: 0 2px 3px black;
background-color: var(--info);
transform: translateY(-1px) scale(1.08);
border-radius: 12px;
}
@@media only screen and (max-width: 1025px) {
Components/Navigation/MobileNavComponent.razor
+3 -2
View File
@@ -7,7 +7,7 @@
{
<div class="mobileNavSectionButton" @onclick="() => OnSectionClicked(webSection)" @onclick:preventDefault="true" @onclick:stopPropagation="true">
<div class="mobileNavSectionButtonText">
@webSection?.Name
<i class="fa-solid @webSection.Icon" style="font-size: 28px;"></i>
</div>
</div>
}
@@ -96,6 +96,7 @@
border: 1px solid var(--primary);
width: 100%;
height: 64px;
border-radius: 2px;
display: flex;
background-color: var(--primary);
cursor: pointer;
@@ -146,7 +147,7 @@
@code {
#if NO_SQL
[Parameter]
public List<WebSectionModel?> WebSections { get; set; } = default!;
public List<WebSectionModel> WebSections { get; set; } = default!;
[Parameter]
public List<WebPageModel> WebPages { get; set; } = default!;
Components/Navigation/TabletNavComponent.razor
+1 -1
View File
@@ -10,7 +10,7 @@
<SearchButtonComponent/>
<div class="tabletButton">
<div class="tabletMenuTitle">
Menu
<i class="fa-solid fa-bars" style="font-size: 32px; margin:auto"></i>
</div>
</div>
</div>