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>
IGP/Database.db
BIN
View File
Binary file not shown.
IGP/Dialog/SearchDialogComponent.razor
+10
View File
@@ -116,8 +116,18 @@
.searchLink {
text-decoration: underline;
}
@@media only screen and (max-width: 1025px) {
.searchContainer {
height: 300px;
}
.searchBox {
height: 230px;
}
}
</style>
}
IGP/Index.razor
+3 -2
View File
@@ -6,7 +6,8 @@
@layout PageLayout
<DevOnlyComponent>
<PermissionsPage/>
<LinkButtonComponent Href="https://github.com/JonathanMcCaffrey/IGP-Fan-Reference/blob/main/IGP/Pages/HarassCalculatorPage.razor">
View on GitHub <i class="fa-brands fa-github" style="font-size: 24px; margin-left: 5px;"></i>
</LinkButtonComponent>
</DevOnlyComponent>
<HomePage/>
IGP/Pages/Documentation/Parts/DocumentComponent.razor
+3 -1
View File
@@ -16,7 +16,9 @@ else
</div>
<div class="docContent">@((MarkupString)Markdown.ToHtml(content, Pipeline))</div>
<div class="docFooter">
<EditLinkComponent Href="@GitUrl"></EditLinkComponent>
<LinkButtonComponent Href="@GitUrl">
Edit on GitHub <i class="fa-brands fa-github" style="font-size: 24px; margin-left: 5px;"></i>
</LinkButtonComponent>
</div>
</div>
}
IGP/Pages/HarassCalculatorPage.razor
+4 -1
View File
@@ -180,7 +180,10 @@
Can I see the code for the calculation?
</InfoQuestionComponent>
<InfoAnswerComponent>
<CodeLinkComponent Href="https://github.com/JonathanMcCaffrey/IGP-Fan-Reference/blob/main/IGP/Pages/HarassCalculatorPage.razor"/>
<br/>
<LinkButtonComponent Href="https://github.com/JonathanMcCaffrey/IGP-Fan-Reference/blob/main/IGP/Pages/HarassCalculatorPage.razor">
View on GitHub <i class="fa-brands fa-github" style="font-size: 24px; margin-left: 5px;"></i>
</LinkButtonComponent>
</InfoAnswerComponent>
</InfoBodyComponent>
</PaperComponent>
IGP/Pages/Notes/Parts/NoteComponent.razor
+3 -1
View File
@@ -16,7 +16,9 @@ else
</div>
<div class="noteContent">@((MarkupString)Markdown.ToHtml(content, Pipeline))</div>
<div class="noteFooter">
<EditLinkComponent Href="@GitUrl"></EditLinkComponent>
<LinkButtonComponent Href="@GitUrl">
Edit on GitHub <i class="fa-brands fa-github" style="font-size: 24px; margin-left: 5px;"></i>
</LinkButtonComponent>
</div>
</div>
}
IGP/wwwroot/generated/WebSectionModels.json
+1 -1
View File
@@ -1 +1 @@
[{"Id":1,"Name":"Tools","Description":"Tools Stuff","Order":1,"IsPrivate":"False","WebPageModels":[]},{"Id":2,"Name":"Resources","Description":"Resources Stuff","Order":2,"IsPrivate":"False","WebPageModels":[]},{"Id":3,"Name":"General","Description":"About Stuff","Order":3,"IsPrivate":"False","WebPageModels":[]},{"Id":4,"Name":"Development","Description":"Development Stuff","Order":4,"IsPrivate":"False","WebPageModels":[]},{"Id":5,"Name":"Settings","Description":"Settings Stuff","Order":5,"IsPrivate":"False","WebPageModels":[]}]
[{"Id":1,"Name":"Tools","Description":"Tools Stuff","Order":1,"IsPrivate":"False","Icon":"fa-screwdriver-wrench","OnlyIcon":false,"WebPageModels":[]},{"Id":2,"Name":"Resources","Description":"Resources Stuff","Order":2,"IsPrivate":"False","Icon":"fa-toolbox","OnlyIcon":false,"WebPageModels":[]},{"Id":3,"Name":"General","Description":"About Stuff","Order":3,"IsPrivate":"False","Icon":"fa-circle-info","OnlyIcon":false,"WebPageModels":[]},{"Id":4,"Name":"Development","Description":"Development Stuff","Order":4,"IsPrivate":"False","Icon":"fa-code","OnlyIcon":false,"WebPageModels":[]},{"Id":5,"Name":"Settings","Description":"Settings Stuff","Order":5,"IsPrivate":"False","Icon":"fa-gear","OnlyIcon":false,"WebPageModels":[]}]
IGP/wwwroot/index.html
+1
View File
@@ -32,6 +32,7 @@
src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js"></script>
<script src="javascript/download.js"></script>
<script src="_content/Blazor-Analytics/blazor-analytics.js"></script>
<script src="https://kit.fontawesome.com/c77aa98347.js" crossorigin="anonymous"></script>
<script>
Blazor.start({
applicationCulture: 'en-US'
Model/Website/WebPageModel.cs
+1
View File
@@ -8,4 +8,5 @@ public class WebPageModel
public string Description { get; set; } = "Add description";
public string Href { get; set; } = null;
public string IsPrivate { get; set; } = "True";
}
Model/Website/WebSectionModel.cs
+3
View File
@@ -11,5 +11,8 @@ public class WebSectionModel
public int Order { get; set; } = 0;
public string IsPrivate { get; set; } = "True";
public string Icon { get; set; } = "fa-icons";
public bool OnlyIcon { get; set; } = false;
[NotMapped] public List<WebPageModel> WebPageModels { get; set; } = new();
}