diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/frontend/.gitignore | 258 | ||||
| -rw-r--r-- | src/frontend/src/Layout.css | 39 | ||||
| -rw-r--r-- | src/frontend/src/Layout.tsx | 34 | ||||
| -rw-r--r-- | src/frontend/src/main.tsx | 2 | ||||
| -rw-r--r-- | src/frontend/src/styles/Pages.css | 18 |
5 files changed, 308 insertions, 43 deletions
diff --git a/src/frontend/.gitignore b/src/frontend/.gitignore new file mode 100644 index 0000000..156a181 --- /dev/null +++ b/src/frontend/.gitignore @@ -0,0 +1,258 @@ +# User-specific files +*.suo +*.user +*.userosscache +*.sln.docstates + +# User-specific files (MonoDevelop/Xamarin Studio) +*.userprefs + +# Build results +[Dd]ebug/ +[Dd]ebugPublic/ +[Rr]elease/ +[Rr]eleases/ +x64/ +x86/ +bld/ +[Bb]in/ +[Oo]bj/ +[Ll]og/ + +# Visual Studio 2015 cache/options directory +.vs/ +# Uncomment if you have tasks that create the project's static files in wwwroot +#wwwroot/ + +# MSTest test Results +[Tt]est[Rr]esult*/ +[Bb]uild[Ll]og.* + +# NUNIT +*.VisualState.xml +TestResult.xml + +# Build Results of an ATL Project +[Dd]ebugPS/ +[Rr]eleasePS/ +dlldata.c + +# DNX +project.lock.json +project.fragment.lock.json +artifacts/ + +*_i.c +*_p.c +*_i.h +*.ilk +*.meta +*.obj +*.pch +*.pdb +*.pgc +*.pgd +*.rsp +*.sbr +*.tlb +*.tli +*.tlh +*.tmp +*.tmp_proj +*.log +*.vspscc +*.vssscc +.builds +*.pidb +*.svclog +*.scc + +# Chutzpah Test files +_Chutzpah* + +# Visual C++ cache files +ipch/ +*.aps +*.ncb +*.opendb +*.opensdf +*.sdf +*.cachefile +*.VC.db +*.VC.VC.opendb + +# Visual Studio profiler +*.psess +*.vsp +*.vspx +*.sap + +# TFS 2012 Local Workspace +$tf/ + +# Guidance Automation Toolkit +*.gpState + +# ReSharper is a .NET coding add-in +_ReSharper*/ +*.[Rr]e[Ss]harper +*.DotSettings.user + +# JustCode is a .NET coding add-in +.JustCode + +# TeamCity is a build add-in +_TeamCity* + +# DotCover is a Code Coverage Tool +*.dotCover + +# NCrunch +_NCrunch_* +.*crunch*.local.xml +nCrunchTemp_* + +# MightyMoose +*.mm.* +AutoTest.Net/ + +# Web workbench (sass) +.sass-cache/ + +# Installshield output folder +[Ee]xpress/ + +# DocProject is a documentation generator add-in +DocProject/buildhelp/ +DocProject/Help/*.HxT +DocProject/Help/*.HxC +DocProject/Help/*.hhc +DocProject/Help/*.hhk +DocProject/Help/*.hhp +DocProject/Help/Html2 +DocProject/Help/html + +# Click-Once directory +publish/ + +# Publish Web Output +*.[Pp]ublish.xml +*.azurePubxml +# TODO: Comment the next line if you want to checkin your web deploy settings +# but database connection strings (with potential passwords) will be unencrypted +#*.pubxml +*.publishproj + +# Microsoft Azure Web App publish settings. Comment the next line if you want to +# checkin your Azure Web App publish settings, but sensitive information contained +# in these scripts will be unencrypted +PublishScripts/ + +# NuGet Packages +*.nupkg +# The packages folder can be ignored because of Package Restore +**/packages/* +# except build/, which is used as an MSBuild target. +!**/packages/build/ +# Uncomment if necessary however generally it will be regenerated when needed +#!**/packages/repositories.config +# NuGet v3's project.json files produces more ignoreable files +*.nuget.props +*.nuget.targets + +# Microsoft Azure Build Output +csx/ +*.build.csdef + +# Microsoft Azure Emulator +ecf/ +rcf/ + +# Windows Store app package directories and files +AppPackages/ +BundleArtifacts/ +Package.StoreAssociation.xml +_pkginfo.txt + +# Visual Studio cache files +# files ending in .cache can be ignored +*.[Cc]ache +# but keep track of directories ending in .cache +!*.[Cc]ache/ + +# Others +ClientBin/ +~$* +*~ +*.dbmdl +*.dbproj.schemaview +*.jfm +*.pfx +*.publishsettings +node_modules/ +orleans.codegen.cs + +# Since there are multiple workflows, uncomment next line to ignore bower_components +# (https://github.com/github/gitignore/pull/1529#issuecomment-104372622) +#bower_components/ + +# RIA/Silverlight projects +Generated_Code/ + +# Backup & report files from converting an old project file +# to a newer Visual Studio version. Backup files are not needed, +# because we have git ;-) +_UpgradeReport_Files/ +Backup*/ +UpgradeLog*.XML +UpgradeLog*.htm + +# SQL Server files +*.mdf +*.ldf + +# Business Intelligence projects +*.rdl.data +*.bim.layout +*.bim_*.settings + +# Microsoft Fakes +FakesAssemblies/ + +# GhostDoc plugin setting file +*.GhostDoc.xml + +# Node.js Tools for Visual Studio +.ntvs_analysis.dat + +# Visual Studio 6 build log +*.plg + +# Visual Studio 6 workspace options file +*.opt + +# Visual Studio LightSwitch build output +**/*.HTMLClient/GeneratedArtifacts +**/*.DesktopClient/GeneratedArtifacts +**/*.DesktopClient/ModelManifest.xml +**/*.Server/GeneratedArtifacts +**/*.Server/ModelManifest.xml +_Pvt_Extensions + +# Paket dependency manager +.paket/paket.exe +paket-files/ + +# FAKE - F# Make +.fake/ + +# JetBrains Rider +.idea/ +*.sln.iml + +# CodeRush +.cr/ + +# Python Tools for Visual Studio (PTVS) +__pycache__/ +*.pyc diff --git a/src/frontend/src/Layout.css b/src/frontend/src/Layout.css index 601794b..f90c5de 100644 --- a/src/frontend/src/Layout.css +++ b/src/frontend/src/Layout.css @@ -9,38 +9,43 @@ .main-content { flex: 1; overflow: auto; - padding-bottom: 60px; /* Extra padding to ensure content isn't hidden behind navbar */ } -.nav-bar { - position: fixed; - bottom: 0; - left: 0; - right: 0; - z-index: 5; - - background-color: var(--background-color); +.navigation-bar { display: flex; justify-content: space-around; align-items: center; - height: 60px; + padding: 0.5rem 0; + + background-color: var(--background-color); border-top: 1px solid var(--border-color); - box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); } -.nav-item { +.navigation-bar__link { + flex: 1 0; display: flex; flex-direction: column; align-items: center; - justify-content: center; - padding: 8px; - color: #616161; text-decoration: none; - width: 33.3%; + color: #333; + padding: .25rem 0; + border-radius: .5rem; +} + +.navigation-bar__link svg { + width: 1.75rem; + height: 1.75rem; + margin-bottom: 5px; + fill: none; + stroke-width: 2; +} + +.navigation-bar__link span { font-size: 14px; + line-height: 1; } -.nav-item.active { +.navigation-bar__link.active { color: var(--button-background-color); } diff --git a/src/frontend/src/Layout.tsx b/src/frontend/src/Layout.tsx index f933ddc..c361adb 100644 --- a/src/frontend/src/Layout.tsx +++ b/src/frontend/src/Layout.tsx @@ -33,23 +33,25 @@ export function Layout({ children }: LayoutProps) { <main className="main-content"> {children} </main> - <nav className="nav-bar"> - {navItems.map(item => { - const Icon = item.icon; - const isActive = location.pathname.startsWith(item.path); + <footer> + <nav className="navigation-bar"> + {navItems.map(item => { + const Icon = item.icon; + const isActive = location.pathname.startsWith(item.path); - return ( - <Link - key={item.name} - to={item.path} - className={`nav-item ${isActive ? 'active' : ''}`} - > - <Icon size={24} /> - <span>{item.name}</span> - </Link> - ); - })} - </nav> + return ( + <Link + key={item.name} + to={item.path} + className={`navigation-bar__link ${isActive ? 'active' : ''}`} + > + <Icon size={24} /> + <span>{item.name}</span> + </Link> + ); + })} + </nav> + </footer> </> ); } diff --git a/src/frontend/src/main.tsx b/src/frontend/src/main.tsx index 48ff63c..a4afa37 100644 --- a/src/frontend/src/main.tsx +++ b/src/frontend/src/main.tsx @@ -1,4 +1,4 @@ -import '@fontsource-variable/outfit' +import '@fontsource-variable/roboto' import './styles/Pages.css' import { createRoot } from 'react-dom/client' diff --git a/src/frontend/src/styles/Pages.css b/src/frontend/src/styles/Pages.css index 90ffad2..2a8943b 100644 --- a/src/frontend/src/styles/Pages.css +++ b/src/frontend/src/styles/Pages.css @@ -9,7 +9,7 @@ --star-color: #ffcc00; --message-background-color: #f8f9fa; - font-family: 'Outfit Variable', Roboto, Arial, sans-serif; + font-family: 'Roboto Variable', Roboto, Arial, Inter, sans-serif; } [data-theme='dark'] { @@ -318,33 +318,33 @@ body { max-width: 768px; margin: 0 auto; } - + .page-title { font-size: 2.2rem; } - + .search-form { display: flex; align-items: flex-end; gap: 1rem; } - + .form-group { flex: 1; margin-bottom: 0; } - + .form-button { width: auto; margin-top: 0; } - + .list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; } - + .list-item { border: 1px solid var(--border-color); border-radius: 8px; @@ -357,8 +357,8 @@ body { .page-container { max-width: 1024px; } - + .list { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } -}
\ No newline at end of file +} |