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

Fixed sidebar CSS issues for non running trains along with other small issues

Browse Source
This commit is contained in:
J-Lennox10
2023-03-29 09:57:37 +01:00
parent 2d068a0aab
commit 94ef1405c0
5 changed files with 48 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

1
src/components/StationSidebar.vue
View File

@ -86,6 +86,7 @@ export default {
#xButton:hover{
color:red;
cursor: pointer;
}
#typeDiv, #positionDiv, #descriptionDiv{

67
src/components/TrainSidebar.vue
View File

@ -49,19 +49,27 @@
<p id="directionP"><span style="color:grey; font-size: 14px;">Direction:</span><br>{{ store.selectedTrain["Direction"][0] }}</p>
</div>
<div v-if="store.selectedTrain['TrainStatus'][0] != 'N'" id="punctualityDiv">
<div id="punctualityIcon">
<img id="punctualityImage" src="../assets/publicMessageIcon.png">
</div>
<p id="punctualityP"><span style="color:grey; font-size: 14px;">Punctuality:</span><br>{{ store.selectedTrain["Punctuality"][0] }}</p>
</div>
<div id="publicMessageDiv">
<div v-if="isTrainRunning()" id="publicMessageDiv">
<div id="publicMessageIcon">
<img id="publicMessageImage" src="../assets/publicMessageIcon.png">
</div>
<p id="publicMessageP"><span style="color:grey; font-size: 14px;">Public Message:</span><br>Public Message: {{ store.selectedTrain["PublicMessage"][0] }}</p>
</div>
<div v-else id="notRunningPublicMessageDiv">
<div id="publicMessageIcon">
<img id="publicMessageImage" src="../assets/publicMessageIcon.png">
</div>
<p id="publicMessageP"><span style="color:grey; font-size: 14px;">Public Message:</span><br>Public Message: {{ store.selectedTrain["PublicMessage"][0] }}</p>
</div>
<div v-if="store.selectedTrain['TrainStatus'][0] != 'N'" id="punctualityDiv">
<div id="punctualityIcon">
<img id="punctualityImage" src="../assets/punctualityIcon.png">
</div>
<p id="punctualityP"><span style="color:grey; font-size: 14px;">Punctuality:</span><br>{{ store.selectedTrain["Punctuality"][0] }}</p>
</div>
</div>
</div>
</template>
@ -157,6 +165,7 @@ export default {
#xButton:hover{
color:red;
cursor: pointer;
}
#originDiv, #destinationDiv{
@ -177,12 +186,13 @@ export default {
/* Sidebar Section Divs */
#typeDiv, #dateDiv, #positionDiv, #directionDiv, #publicMessageDiv, #punctualityDiv{
#typeDiv, #dateDiv, #positionDiv, #directionDiv, #publicMessageDiv, #notRunningPublicMessageDiv, #punctualityDiv{
background-color: rgb(230, 230, 230);
height: 12%;
position: absolute;
right:0px;
width:100%;
}
#typeIcon, #dateIcon, #positionIcon, #directionIcon, #publicMessageIcon, #punctualityIcon{
@ -195,17 +205,13 @@ export default {
justify-content: center;
}
#publicMessageIcon{
align-items: center;
}
#typeP, #dateP, #longP, #latP, #directionP, #publicMessageP, #punctualityP{
font-size: 16px;
font-size: 15px;
position: relative;
bottom: 2px;
width: 40%;
left: 22%;
text-align: left;
bottom:4px;
}
#positionParagraphDiv{
@ -225,27 +231,24 @@ export default {
width: 70%;
}
#dateImage, #positionImage, #directionImage{
#dateImage, #positionImage, #directionImage, #punctualityImage, #publicMessageImage{
padding-top: 2px;
padding-bottom: 2px;
}
#publicMessageImage{
height: 40%;
position: relative;
top:-10px;
}
/*Positioning rows*/
#dateDiv{top: 60px;}
#positionDiv{top: 110px;}
#directionDiv{top: 160px;}
#punctualityDiv{top: 210px;}
#publicMessageDiv{
top:260px;
height: 40%;
#dateDiv{top: 16%;}
#positionDiv{top: 29%;}
#directionDiv{top: 42%;}
#punctualityDiv{top: 55%;}
#publicMessageDiv, #notRunningPublicMessageDiv{
top:68%;
height: fit-content;
}
#notRunningPublicMessageDiv{top: 55%;}
@media screen and (max-width: 850px) {
.headerImage{
height: 100%;
@ -253,5 +256,9 @@ export default {
padding: 10px;
}
#typeImage{
width: 45%;
}
}
</style>

10
src/pages/AccountPage.vue
View File

@ -21,8 +21,8 @@
<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-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">
<input v-if="showNewPassword" id="newPass" type="text" v-model="newPassword" placeholder="Enter new password">
<input v-else type="password" id="newPass" v-model="newPassword" placeholder="Enter new password">
<button @click="updateUserPassword()" id="passUpdate" type="button" class="btn btn-primary">Update Password</button>
</div>
@ -276,9 +276,6 @@ input {
align-items: center;
}
#imgDiv1:hover, #imgDiv2:hover{
transform: scale(1.1);
}
#eyeImg{
width: 6%;
@ -286,6 +283,9 @@ input {
order: 2;
}
#eyeImg:hover{
transform: scale(1.1);
}
::placeholder{
font-size: 14px;;

5
src/pages/MapPage.vue
View File

@ -16,7 +16,7 @@
<div class="container-fluid" @change="decideShowStations();">
<div class="form-check form-switch">
<input @change="selectAllStations();" class="form-check-input" type="checkbox" role="switch" id="showAllStations" v-model="showAllStations"/>
<label class="form-check-label" for="showAllStations">All Stations</label>
<label class="form-check-label" for="showAllStations">Show Stations</label>
</div>
<hr/>
<div class="form-check form-switch">
@ -33,7 +33,7 @@
<div class="container-fluid" @change="decideShowTrains();">
<div class="form-check form-switch">
<input @change="selectAllTrains();" class="form-check-input" type="checkbox" role="switch" id="showAllTrains" v-model="showAllTrains"/>
<label class="form-check-label" for="showAllTrains">All Trains</label>
<label class="form-check-label" for="showAllTrains">Show Trains</label>
</div>
<hr/>
<div class="form-check form-switch">
@ -656,6 +656,7 @@ export default {
z-index: 3;
position: fixed;
bottom: 0px;
padding: 2px;
width:100%;
background-color: rgb(255, 255, 125);
color: black;