diff options
| -rw-r--r-- | .vscode/extensions.json | 6 | ||||
| -rw-r--r-- | Costasdev.Busurbano.slnx | 2 | ||||
| -rw-r--r-- | README.md | 21 | ||||
| -rw-r--r-- | package-lock.json | 12 | ||||
| -rw-r--r-- | package.json | 5 | ||||
| -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 |
10 files changed, 337 insertions, 60 deletions
diff --git a/.vscode/extensions.json b/.vscode/extensions.json deleted file mode 100644 index bb76300..0000000 --- a/.vscode/extensions.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "recommendations": [ - "ms-azuretools.vscode-azurefunctions", - "ms-dotnettools.csharp" - ] -}
\ No newline at end of file diff --git a/Costasdev.Busurbano.slnx b/Costasdev.Busurbano.slnx index 65f771d..9b409a6 100644 --- a/Costasdev.Busurbano.slnx +++ b/Costasdev.Busurbano.slnx @@ -1,4 +1,4 @@ <Solution> - <Project Path="src\frontend\frontend.esproj" /> <Project Path="src\Costasdev.Busurbano.Backend\Costasdev.Busurbano.Backend.csproj" /> + <Project Path="src\frontend\frontend.esproj" /> </Solution> @@ -12,15 +12,15 @@ Busurbano is a web application designed to help users find bus stops and arrival ## Technologies Used - **Frontend**: React 19, react-router, TypeScript, Vite -- **Backend**: - - ASP.NET Core 9 Web API - - [Costasdev.VigoTransitApi](https://github.com/arielcostas/VigoTransitApi) -- **Mapping**: - - [Leaflet](https://leafletjs.com/) via [React-Leaflet](https://react-leaflet.js.org/) - - [Leaflet Locate Control](https://github.com/domoritz/leaflet-locatecontrol) - - [Leaflet Marker Cluster](https://github.com/Leaflet/Leaflet.markercluster) +- **Backend**: + - ASP.NET Core 9 Web API + - [Costasdev.VigoTransitApi](https://github.com/arielcostas/VigoTransitApi) +- **Mapping**: + - [Leaflet](https://leafletjs.com/) via [React-Leaflet](https://react-leaflet.js.org/) + - [Leaflet Locate Control](https://github.com/domoritz/leaflet-locatecontrol) + - [Leaflet Marker Cluster](https://github.com/Leaflet/Leaflet.markercluster) - **Styling**: Good old CSS -- **Fonts**: [Outfit Variable](https://fonts.google.com/specimen/Outfit) from Google Fonts via [@fontsource](https://fontsource.org/fonts/outfit) +- **Fonts**: [Roboto Variable](https://fonts.google.com/specimen/Roboto) via [@fontsource](https://fontsource.org/fonts/outfit) ## Getting Started @@ -32,12 +32,14 @@ Busurbano is a web application designed to help users find bus stops and arrival ### Installation 1. Clone the repository: + ```sh git clone https://github.com/arielcostas/busurbano.git cd busurbano ``` 2. Install dependencies: + ```sh npm i dotnet restore @@ -46,6 +48,7 @@ Busurbano is a web application designed to help users find bus stops and arrival ### Running the Application 1. Start the entire application: + ```sh npm run dev ``` @@ -62,6 +65,6 @@ Contributions are welcome! Please open an issue or submit a pull request. ## License -This project is licensed under the BSD 3-Clause licence, meaning you can do whatever you want with it as long as you include the original copyright and license notice. +This project is licenced under the BSD 3-Clause licence, meaning you can do whatever you want with it as long as you include the original copyright and license notice. Note that the data served by the application is obtained from [datos.vigo.org](https://datos.vigo.org) under the [Open Data Commons Attribution License](https://opendefinition.org/licenses/odc-by/), so you must comply with the terms of that license if you use the data in your own projects. diff --git a/package-lock.json b/package-lock.json index 22edc9f..8defa71 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,9 @@ "workspaces": [ "src/frontend" ], + "dependencies": { + "@fontsource-variable/roboto": "^5.2.6" + }, "devDependencies": { "concurrently": "^9.1.2", "prettier": "^3.5.3" @@ -604,6 +607,15 @@ "url": "https://github.com/sponsors/ayuhito" } }, + "node_modules/@fontsource-variable/roboto": { + "version": "5.2.6", + "resolved": "https://registry.npmjs.org/@fontsource-variable/roboto/-/roboto-5.2.6.tgz", + "integrity": "sha512-bKgCwHdRcUcHPmypU5oih+OnTQUnZ7XBoztJ0W2X+m7WRYITTWnnnQBDPAKbOwiemU/yJHGg+lD03M60BGuuGg==", + "license": "OFL-1.1", + "funding": { + "url": "https://github.com/sponsors/ayuhito" + } + }, "node_modules/@humanfs/core": { "version": "0.19.1", "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz", diff --git a/package.json b/package.json index 81ba10f..e78abab 100644 --- a/package.json +++ b/package.json @@ -18,5 +18,8 @@ }, "workspaces": [ "src/frontend" - ] + ], + "dependencies": { + "@fontsource-variable/roboto": "^5.2.6" + } } 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 +} |