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

Made station sidebar similar to train, fixed visual alignment issues elsewhere

Browse Source
This commit is contained in:
J-Lennox10
2023-03-28 16:01:07 +01:00
parent 789479cc99
commit abf7f5aef8
4 changed files with 143 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/descriptionIcon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

18
src/components/Navbar.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<nav style="z-index:4 " class="navbar navbar-expand-sm navbar-light bg-light"> <nav style="z-index:4 " class="navbar navbar-expand-sm navbar-light bg-light">
<div class="container-fluid"> <div class="container-fluid">
<router-link tag="a" style="text-decoration: none; color: black; font-weight: 100;" to="/" class="navbar-brand"> <router-link id="logo" 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" id="trainImg" class="d-inline-block align-text-middle">
<b>Irish Rail Tracker</b> <b style="text-align: center;">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"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
@ -78,4 +78,16 @@ a {
color: black; color: black;
font-weight: 100; font-weight: 100;
} }
#trainImg{
position: relative;
bottom: 8px;
}
#logo{
position: relative;
top: 2.5px;
}
</style> </style>

118
src/components/StationSidebar.vue
View File

@ -1,15 +1,36 @@
<template> <template>
<div id="sidebarDiv"> <div id="sidebarDiv">
<div v-on:click="store.setDisplaySelectedStation(false)" id="xButton">X</div>
<h2>Station Code: {{ store.selectedStation["StationCode"][0] }}</h2>
<div id="sidebarHeader"> <div id="sidebarHeader">
<img id="headerImage" src="../assets/station.png" alt="Station Icon"> <img id="headerImage" src="../assets/station.png" alt="Station Icon">
<div v-on:click="store.setDisplaySelectedStation(false)" id="xButton">X</div>
</div> </div>
<div id="sidebarDiv"> <div id="sidebarDiv">
<h2>Station Code: {{ store.selectedStation["StationCode"][0] }}</h2> <div id="typeDiv">
<p id="typeP">Type: {{ store.selectedStation["StationType"][0] }}</p> <div id="typeIcon">
<p id="dateP">Station Position - Long: {{ store.selectedStation["StationLongitude"][0] }} Lat: {{ store.selectedStation["StationLatitude"][0] }}</p> <img id="typeImage" src = "../assets/trainTypeIcon.png">
<p id="directionP">Description: {{ store.selectedStation["StationDesc"][0] }}</p> </div>
<p id="typeP"><span style="color:grey; font-size: 14px;">Station Type:</span><br>{{ store.selectedStation["StationType"][0] }}</p>
</div>
<div id="positionDiv">
<div id="positionIcon">
<img id="positionImage" src = "../assets/locationIcon.png">
</div>
<div id="positionParagraphDiv">
<p id="longP"><span style="color:grey; font-size: 14px;">Longitude:</span><br>{{ store.selectedStation["StationLongitude"][0] }}</p>
<p id="latP"><span style="color:grey; font-size: 14px;">Latitude:</span><br>{{ store.selectedStation["StationLatitude"][0] }}</p>
</div>
</div>
<div id="descriptionDiv">
<div id="descriptionIcon">
<img id="descriptionImage" src="../assets/descriptionIcon.png">
</div>
<p id="descriptionP"><span style="color:grey; font-size: 14px;">Description:</span><br>{{ store.selectedStation["StationDesc"][0] }}</p>
</div>
</div> </div>
</div> </div>
</template> </template>
@ -29,26 +50,29 @@ export default {
<style scoped> <style scoped>
#sidebarHeader{ #sidebarHeader{
position: relative; position: relative;
top:0%; top:0%;
height: 15%; height: 15%;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
display: flex;
justify-content: center;
background-color: rgb(214, 214, 214);
box-shadow: 0 0 5px 2px rgb(190, 190, 190);
} }
#sidebarDiv{ #sidebarDiv{
position: absolute; position: absolute;
height: 80%; height: 80%;
width: 100%; width: 100%;
color: rgb(0, 0, 0); color: rgb(0, 0, 0);
padding-top: 10px;
} }
#headerImage{ .headerImage{
height: 80%; height: 100%;
width: auto; width: 100%;
overflow: hidden; padding: 10px;
position: relative;
top: 10px;
} }
#xButton{ #xButton{
@ -63,4 +87,58 @@ export default {
#xButton:hover{ #xButton:hover{
color:red; color:red;
} }
#typeDiv, #positionDiv, #descriptionDiv{
background-color: rgb(230, 230, 230);
height: 12%;
position: absolute;
right:0px;
width:100%;
}
#typeIcon, #positionIcon, #descriptionIcon{
background-color: rgb(214, 214, 214);
width:20%;
height: 100%;
position: absolute;
left:0px;
display: flex;
justify-content: center;
}
#positionImage, #descriptionImage{
padding-top: 2px;
padding-bottom: 2px;
}
#typeP, #longP, #latP, #descriptionP{
font-size: 16px;
position: relative;
bottom: 3px;
width: 40%;
left: 22%;
text-align: left;
}
#positionParagraphDiv{display: flex;}
#latP{left: 3%;}
#typeImage{width: 70%;}
#positionDiv{top: 16%;}
#descriptionDiv{top: 29.5%;}
@media screen and (max-width: 850px) {
.headerImage{
height: 100%;
width: 100%;
padding: 10px;
}
#typeImage{
width: 50%;
}
}
</style> </style>

86
src/pages/AccountPage.vue
View File

@ -6,28 +6,26 @@
<p style="text-align:center" v-if="this.user">Your email: <b>{{ this.user.email }}</b><br><span id="passReset" @click="resetPasswordEmail()">Send password reset email</span></p> <p style="text-align:center" v-if="this.user">Your email: <b>{{ this.user.email }}</b><br><span id="passReset" @click="resetPasswordEmail()">Send password reset email</span></p>
<h3>Enter your current password to edit the below settings</h3> <h3>Enter your current password to edit the below settings</h3>
<div id="imgDiv1"> <div id="currentPassword">
<img v-if="!showCurrentPassword" id="eyeImg" src="../assets/314858_hidden_eye_icon.png" @click="this.showCurrentPassword = !this.showCurrentPassword" alt="show"> <img v-if="showCurrentPassword" id="eyeImg" src="../assets/314858_hidden_eye_icon.png" @click="this.showCurrentPassword = !this.showCurrentPassword" alt="show">
<img v-else id = "eyeImg" src="../assets/315220_eye_icon.png" @click="this.showCurrentPassword = !this.showCurrentPassword"> <img v-else id = "eyeImg" src="../assets/315220_eye_icon.png" @click="this.showCurrentPassword = !this.showCurrentPassword">
<input v-if="showCurrentPassword" type="text" v-model="currentPassword" placeholder="Enter existing password">
<input v-else type="password" v-model="currentPassword" placeholder="Enter existing password">
</div> </div>
<input v-if="!showCurrentPassword" type="text" v-model="currentPassword" placeholder="Enter existing password">
<input v-else type="password" v-model="currentPassword" placeholder="Enter existing password">
<h3>Change email</h3> <h3>Change email</h3>
<input type="email" v-model="newEmail" aria-describedby="emailHelp" placeholder="Enter new email"> <input type="email" v-model="newEmail" aria-describedby="emailHelp" placeholder="Enter new email">
<button @click="updateUserEmail()" id="emailUpdate" type="button" class="btn btn-primary" value="Update Email">Update email</button> <button @click="updateUserEmail()" id="emailUpdate" type="button" class="btn btn-primary" value="Update Email">Update email</button>
<h3>Change password</h3> <h3>Change password</h3>
<div id="imgDiv2"> <div id="newPassword">
<img v-if="!showNewPassword" id="eyeImg" src="../assets/314858_hidden_eye_icon.png" @click="this.showNewPassword = !this.showNewPassword" alt="show"> <img v-if="showNewPassword" id="eyeImg" src="../assets/314858_hidden_eye_icon.png" @click="this.showNewPassword = !this.showNewPassword" alt="show">
<img v-else id = "eyeImg" src="../assets/315220_eye_icon.png" @click="this.showNewPassword = !this.showNewPassword"> <img v-else id = "eyeImg" src="../assets/315220_eye_icon.png" @click="this.showNewPassword = !this.showNewPassword">
<input v-if="showNewPassword" id="newPass" type="text" v-model="newPassword" placeholder="Enter existing password">
<input v-else type="password" id="newPass" v-model="newPassword" placeholder="Enter existing password">
<button @click="updateUserPassword()" id="passUpdate" type="button" class="btn btn-primary">Update Password</button>
</div> </div>
<input v-if="!showNewPassword" type="text" v-model="newPassword" placeholder="Enter existing password">
<input v-else type="password" v-model="newPassword" placeholder="Enter existing password">
<button @click="updateUserPassword()" id="passUpdate" type="button" class="btn btn-primary">Update Password</button>
<button @click="deleteUserPreferences()" id="delPref" type="button" class="btn btn-danger">Delete Map Preferences</button> <button @click="deleteUserPreferences()" id="delPref" type="button" class="btn btn-danger">Delete Map Preferences</button>
<button @click="deleteUserAccount()" id="delAcc" type="button" class="btn btn-danger" value="Delete Account">Delete Account</button> <button @click="deleteUserAccount()" id="delAcc" type="button" class="btn btn-danger" value="Delete Account">Delete Account</button>
@ -211,18 +209,15 @@ h1 {
color:black; color:black;
text-align: center; text-align: center;
} }
h3 { h3 {
font-size: 18px; font-size: 18px;
padding-top: 20px; padding-top: 20px;
} }
#passReset { #passReset {
font-size: 17px; font-size: 17px;
text-decoration: underline; text-decoration: underline;
color: #39d3fa; color: #39d3fa;
} }
#passReset:hover { #passReset:hover {
color: #3993fa; color: #3993fa;
cursor: pointer; cursor: pointer;
@ -238,7 +233,6 @@ h3 {
align-items: flex-start; align-items: flex-start;
justify-content: center; justify-content: center;
} }
#mainDiv{ #mainDiv{
position: inherit; position: inherit;
padding: 15px; padding: 15px;
@ -248,12 +242,13 @@ h3 {
top: 14%; top: 14%;
text-align: left; text-align: left;
box-shadow: 0 0 4px 4px #b6b6b6; box-shadow: 0 0 4px 4px #b6b6b6;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
} }
#emailUpdate, #passUpdate { #emailUpdate, #passUpdate {
position: relative; position: absolute;
left:40px; right: 20%;
width: 26%; width: 26%;
order: 3;
} }
input { input {
@ -261,6 +256,7 @@ input {
border-bottom: 1px solid #000000; border-bottom: 1px solid #000000;
background: transparent; background: transparent;
outline: none; outline: none;
width: 40%;
} }
#delAcc { #delAcc {
@ -275,20 +271,9 @@ input {
left:160px; left:160px;
} }
#imgDiv1{ #newPassword, #currentPassword{
position: absolute; display:flex;
width: 40px; align-items: center;
height: 40px;
top:180px;
left: 195px;
}
#imgDiv2{
position: absolute;
width: 40px;
height: 40px;
bottom:165px;
left: 195px;
} }
#imgDiv1:hover, #imgDiv2:hover{ #imgDiv1:hover, #imgDiv2:hover{
@ -296,11 +281,19 @@ input {
} }
#eyeImg{ #eyeImg{
width: 100%; width: 6%;
height: 10%;
order: 2;
}
::placeholder{
font-size: 14px;;
} }
@media screen and (max-width: 786px) { @media screen and (max-width: 786px) {
#mainDiv{ #mainDiv{
position: inherit; position: inherit;
padding: 15px; padding: 15px;
@ -327,32 +320,9 @@ input {
} }
button{ button{
font-size: 12px; font-size: 12px;
} }
#imgDiv1{
position: absolute;
width: 60px;
height: 40px;
top:175px;
left: 195px;
}
#imgDiv2{
position: absolute;
width: 60px;
height: 40px;
bottom:194px;
left: 195px;
}
#eyeImg{
width:60%;
}
} }
@media screen and (max-width: 786px) {
}
</style> </style>