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

Fixed sizing of image at sidebar top, changed sidebar colour to white. Dropdown menu not included

Browse Source
This commit is contained in:
J-Lennox10
2023-03-16 17:58:55 +00:00
parent 2cdf7888c9
commit 33c2bbb832
3 changed files with 27 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/StationSidebar.vue
View File

@ -40,7 +40,7 @@ export default {
position: absolute; position: absolute;
height: 80%; height: 80%;
width: 100%; width: 100%;
color: white; color: rgb(0, 0, 0);
} }
#headerImage{ #headerImage{
@ -54,7 +54,7 @@ export default {
#xButton{ #xButton{
font-size: 80%; font-size: 80%;
font-family: Georgia; font-family: Georgia;
color: white; color: rgb(0, 0, 0);
position: absolute; position: absolute;
top:10px; top:10px;
right:10px; right:10px;

38
src/components/TrainSidebar.vue
View File

@ -1,15 +1,16 @@
<template> <template>
<div id="sidebarDiv"> <div id="sidebarDiv">
<div id="sidebarHeader"> <div id="sidebarHeader">
<div v-if="getTrainType() === 'DART'">
<img v-if="isTrainRunning() && isTrainLate()" src="../assets/red-train-tram-solid.png" class="trainMapIcon" alt="Late DART Icon"> <div id = "imageDiv" v-if="getTrainType() === 'DART'">
<img v-else-if="isTrainRunning() && !isTrainLate()" src="../assets/green-train-tram-solid.png" class="trainMapIcon" alt="On-Time DART Icon"> <img v-if="isTrainRunning() && isTrainLate()" src="../assets/red-train-tram-solid.png" class="headerImage" alt="Late DART Icon">
<img v-else src="../assets/train-tram-solid.svg" class="trainMapIcon" alt="Not Running DART Icon"> <img v-else-if="isTrainRunning() && !isTrainLate()" src="../assets/green-train-tram-solid.png" class="headerImage" alt="On-Time DART Icon">
<img v-else src="../assets/train-tram-solid.svg" class="headerImage" alt="Not Running DART Icon">
</div> </div>
<div v-else> <div id = "imageDiv" v-else>
<img v-if="isTrainRunning() && isTrainLate()" src="../assets/red-train-solid.png" class="trainMapIcon" alt="Late Train Icon"> <img v-if="isTrainRunning() && isTrainLate()" src="../assets/red-train-solid.png" class="headerImage" alt="Late Train Icon">
<img v-else-if="isTrainRunning() && !isTrainLate()" src="../assets/green-train-solid.png" class="trainMapIcon" alt="On-Time Train Icon"> <img v-else-if="isTrainRunning() && !isTrainLate()" src="../assets/green-train-solid.png" class="headerImage" alt="On-Time Train Icon">
<img v-else src="../assets/train-solid.svg" class="trainMapIcon" alt="Not Running Train Icon"> <img v-else src="../assets/train-solid.svg" class="headerImage" alt="Not Running Train Icon">
</div> </div>
<div v-on:click="store.setDisplaySelectedTrain(false)" id="xButton">X</div> <div v-on:click="store.setDisplaySelectedTrain(false)" id="xButton">X</div>
</div> </div>
@ -84,21 +85,26 @@ export default {
position: absolute; position: absolute;
height: 80%; height: 80%;
width: 100%; width: 100%;
color: white; color: rgb(0, 0, 0);
} }
#headerImage{
height: 80%; .headerImage{
width: auto; height: 100%;
overflow: hidden; width: 40px;
position: relative; padding-top: 10px;
top: 10px;
}
.imageDiv{
display: flex;
justify-content: center;
} }
#xButton{ #xButton{
font-size: 80%; font-size: 80%;
font-family: Georgia; font-family: Georgia;
color: white; color: rgb(0, 0, 0);
position: absolute; position: absolute;
top:10px; top:10px;
right:10px; right:10px;

6
src/pages/MapPage.vue
View File

@ -422,9 +422,9 @@ export default {
z-index: 2; z-index: 2;
text-align: center; text-align: center;
animation: gradient 15s ease infinite; animation: gradient 15s ease infinite;
background: linear-gradient(45deg, #000000, #111111, #222222, #333333, #444444, #555555); background: linear-gradient(45deg, #ffffff, #fef3f3, #ffffff, #f2f2f2);
background-size: 400%, 400%; background-size: 100%, 100%;
box-shadow: 0 0 4px 2px #333333; box-shadow: 0 0 4px 2px #cccccc;
overflow: hidden; overflow: hidden;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif
} }