aindreas/traintracker
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improved navbar, better UI for mobile

Browse Source
This commit is contained in:
J-Lennox10
2023-03-09 11:01:39 +00:00
parent 7447b0ada6
commit 7e5ab20748
2 changed files with 47 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/components/Navbar.vue
View File

@ -1,25 +1,42 @@
<template> <template>
<nav class="navbar navbar-light bg-light"> <nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid"> <div class="container-fluid">
<router-link to="/" class="navbar-brand"> <router-link tag="a" style="text-decoration: none; color: black; font-weight: 100;" to="/" class="navbar-brand">
<img src="https://cdn.discordapp.com/attachments/1017419092447207436/1063092138029625394/pixil-frame-0.png" alt="mascot" width="55" height="40" class="d-inline-block align-text-middle"> <img src="https://cdn.discordapp.com/attachments/1017419092447207436/1063092138029625394/pixil-frame-0.png" alt="mascot" width="55" height="40" class="d-inline-block align-text-middle">
<b>Irish Rail Tracker</b> <b>Irish Rail Tracker</b>
</router-link> </router-link>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<a class="navbarLink"><router-link to="/">Home</router-link></a> <span class="navbar-toggler-icon"></span>
<a class="navbarLink"><router-link to="/insights">Insights</router-link></a> </button>
<a v-if="isLoggedIn" class="navbarLink"><router-link to="/secure">Secure</router-link></a> <div class="collapse navbar-collapse" id="navbarSupportedContent">
<a v-if="isLoggedIn" class="navbarLink"><router-link @click="logout" to="/">Logout</router-link></a> <ul class="navbar-nav me-auto mb-2 mb-lg-0">
<a v-if="!isLoggedIn" class="navbarLink"><router-link to="/login">Login</router-link></a> <li class="nav-item">
<a v-if="!isLoggedIn" class="navbarLink"><router-link to="/signup">Sign Up</router-link></a> <a class="nav-link"><router-link to="/">Home</router-link></a>
</li>
<li class="nav-item">
<a class="nav-link"><router-link to="/insights">Insights</router-link></a>
</li>
<li class="nav-item">
<a v-if="!isLoggedIn" class="nav-link"><router-link to="/signup">Sign Up</router-link></a>
<a v-if="isLoggedIn" class="nav-link"><router-link to="/secure">Secure</router-link></a>
</li>
<li class="nav-item">
<a v-if="isLoggedIn" class="nav-link"><router-link style="text-decoration: none; color: black; font-weight: 100;" @click="logout" to="/" class="navlink">Logout</router-link></a>
<a v-if="!isLoggedIn" class="nav-link"><router-link to="/login">Login</router-link></a>
</li>
</ul>
</div>
</div> </div>
</nav> </nav>
</template> </template>
<script> <script>
import app from "../api/firebase" import app from "../api/firebase"
import {getAuth, onAuthStateChanged, signOut} from "firebase/auth" import {getAuth, onAuthStateChanged, signOut} from "firebase/auth"
export default { export default {
name: "Navbar", name: "Navbar",
@ -49,8 +66,17 @@ export default {
</script> </script>
<style scoped> <style scoped>
.navbarLink{
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; .router-link-active{
font-size: 150%; color: rgb(0, 0, 0);
font-weight: 600;
cursor: pointer;
} }
a{
text-decoration: none;
color: black;
font-weight: 100;
}
</style> </style>

8
src/pages/MapPage.vue
View File

@ -269,11 +269,19 @@ export default {
width: 1%; width: 1%;
} }
.trainMapIcon { .trainMapIcon {
width: 28px; width: 28px;
height: 32px; height: 32px;
} }
.trainMapIcon:hover{
width:30px;
height:34px;
cursor: pointer;
}
#sidebar{ #sidebar{
position: absolute; position: absolute;
height: 85%; height: 85%;