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

change train icon + fix icon positioning

Browse Source
This commit is contained in:
Andrew
2023-02-23 07:44:56 +00:00
parent 25aaefede7
commit fd7b124687
2 changed files with 11 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/Map.vue
View File

@ -7,7 +7,7 @@
<div v-if="this.display" id= "sidebarDiv">
<div id = "sidebarHeader">
<img id = "headerImage" src="https://cdn.discordapp.com/attachments/1017419092447207436/1063092138029625394/pixil-frame-0.png">
<img id = "headerImage" src="../assets/train-solid.svg" alt="Train Icon">
<div v-on:click="this.display = false" id="xButton">X</div>
</div>
@ -30,11 +30,12 @@
</ol-tile-layer>
<template v-for="coordinate, i in coordinates" :position="inline-block">
<ol-overlay :position="coordinate">
<!-- overlay offset is the size of the image so that it is centered-->
<ol-overlay :position="coordinate" :positioning="center-center" :offset="[-16,-16]">
<div class="overlay-content" @click="getSelectedTrain(i)">
<img src="https://cdn.discordapp.com/attachments/1017419092447207436/1063092138029625394/pixil-frame-0.png" class="trainMapIcon">
<img src="../assets/train-solid.svg" class="trainMapIcon" alt="Train Icon">
</div>
</ol-overlay>
</template>
</ol-map>
@ -140,14 +141,14 @@ export default {
}
.trainMapIcon {
height: 5.5vh;
width: 3.5vw;
height: 32px;
width: 32px;
}
.slideLeft-enter-active, .slideLeft-leave-active {
transition: opacity .5s;
transition: all 0.8s;
}
.slideLeft-enter-from, .slideLeft-leave-to{
opacity: 0;
@ -198,7 +199,7 @@ export default {
#headerImage{
height: 100%;
width: auto;
overflow: hidden;
overflow: hidden;
}
#xButton{
@ -271,4 +272,4 @@ export default {
left: 50%;
z-index: 0;
}
</style>
</style>