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

Merge commit 'refs/pull/70/head' of https://github.com/0hAodha/traintracker into addingLegend

Browse Source
This commit is contained in:
J-Lennox10
2023-03-27 17:14:28 +01:00
parent f6077d95d5 88ee22da1f
commit 02e56df4f5
9 changed files with 331 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/pages/MapPage.vue
View File

@ -71,6 +71,22 @@
</div>
</div>
<div id="legendDropdown" class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Legend
</button>
<div style="padding-bottom: 7px; padding-left:7px;" id="dropMenu" class="dropdown-menu" aria-labelledby="dropdownMenuButton1" v-on:click.stop="handleClick">
<dl>
<dt style="color:red;">Red</dt>
<dd>Late Train</dd>
<dt style="color:green;">Green</dt>
<dd>Early/On Time Train</dd>
<dt style="color:black;">Black</dt>
<dd>Terminated/Not Yet Running Train</dd>
</dl>
</div>
</div>
<transition id="sidebar" name="slideLeft">
<div v-if="store.displaySelectedTrain && store.selectedTrain">
<TrainSidebar />
@ -547,24 +563,28 @@ export default {
#searchContainer{
position: absolute;
top: 11%;
background-color: #ffffff;
background-color: #6e757d;
width: 190px;
height: 40px;
z-index: 3;
display: flex;
justify-content: center;
align-items: center;
color: black;
box-shadow: 0 0 5px 2px #6e757dbe;
box-shadow: 0 0 5px 2px #6e757d;
border-radius: 6%;
}
::placeholder{
color: white;
}
#searchBar{
text-align: center;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
color: white;
background-color: #6e757d;
border: none;
border-bottom: 1px solid black;
border-bottom: 1px solid rgb(255, 255, 255);
z-index: 3;
outline: none;
}
@ -575,6 +595,13 @@ export default {
top: 11%;
}
#legendDropdown {
position: absolute;
z-index: 2;
right: 1%;
top: 18%;
}
#prefHeader {
font-size: 18px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
@ -585,7 +612,7 @@ export default {
#sidebar {
position: absolute;
height: 80%;
width: 20%;
width: 30%;
left: 2%;
top: 14%;
z-index: 2;
@ -605,8 +632,8 @@ export default {
position: relative;
}
.slideLeft-enter-active, .slideLeft-leave-active {
transition: opacity .5s;
transition: all 0.8s;
transition: opacity .8s;
transition: all 1.2s;
}
.slideLeft-enter-from, .slideLeft-leave-to {
@ -635,7 +662,8 @@ export default {
color: black;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
text-align: bottom;
font-size: 16px;
font-size: 18px;
height: 4.2vh;
}
/* Phone Screen CSS */
@ -653,26 +681,26 @@ export default {
display: flex;
justify-content: left;
z-index: 3;
}
}
#searchBar{
width: 100px;
color: white;
}
#searchContainer{
position: absolute;
top: 11%;
left: 10px;
background-color: #ffffff;
width: 120px;
height: 40px;
z-index: 3;
display: flex;
justify-content: center;
align-items: center;
color: black;
box-shadow: 0 0 5px 2px #6e757dbe;
border-radius: 6%;
}
}
.slideLeft-enter-from, .slideLeft-leave-to {
opacity: 0;
transform: translateX(-750px);
}
}
</style>