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

Merge pull request #90 from 0hAodha/css

Browse Source 
partial fix for issue #82
This commit is contained in:
Aindréas Ó hAodha
2023-07-11 21:27:56 +01:00
committed by GitHub
parent dfb09dde4a 7fe10ebe5b
commit ea87ee98dd
2 changed files with 19 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/StationSidebar.vue
View File

@ -3,7 +3,7 @@
<div v-on:click="store.setDisplaySelectedStation(false)" id="xButton">🗙</div>
<h2>Station Code: {{ store.selectedStation["StationCode"][0] }}</h2>
<div id="sidebarHeader">
<img id="headerImage" src="../assets/station.png" alt="Station Icon">
<img id="headerImage" src="../assets/station.png" alt="Station Icon" style="object-fit: contain;">
</div>
<div id="sidebarDiv">
@ -70,6 +70,7 @@ export default {
}
.headerImage{
object-fit: contain;
height: 100%;
width: 100%;
padding: 10px;
@ -90,6 +91,7 @@ export default {
}
#typeDiv, #positionDiv, #descriptionDiv{
object-fit: contain;
background-color: rgb(230, 230, 230);
height: 12%;
position: absolute;
@ -98,6 +100,7 @@ export default {
}
#typeIcon, #positionIcon, #descriptionIcon{
object-fit: contain;
background-color: rgb(214, 214, 214);
width:20%;
height: 100%;
@ -108,6 +111,7 @@ export default {
}
#positionImage, #descriptionImage{
object-fit: contain;
padding-top: 2px;
padding-bottom: 2px;
}
@ -125,19 +129,24 @@ export default {
#latP{left: 3%;}
#typeImage{width: 70%;}
#typeImage{
object-fit: contain;
width: 70%;
}
#positionDiv{top: 16%;}
#descriptionDiv{top: 29.5%;}
@media screen and (max-width: 850px) {
.headerImage{
object-fit: contain;
height: 100%;
width: 100%;
padding: 10px;
}
#typeImage{
object-fit: contain;
width: 50%;
}

8
src/components/TrainSidebar.vue
View File

@ -142,12 +142,14 @@ export default {
}
.headerImage{
object-fit: contain;
height: 100%;
width: 100%;
padding: 10px;
}
#imageDiv{
object-fit: contain;
background-color: rgb(230, 230, 230);
border-radius: 50%;
order:1;
@ -196,6 +198,7 @@ export default {
}
#typeIcon, #dateIcon, #positionIcon, #directionIcon, #publicMessageIcon, #punctualityIcon{
object-fit: contain;
background-color: rgb(214, 214, 214);
width:20%;
height: 100%;
@ -228,16 +231,19 @@ export default {
/*Different Icons CSS*/
#typeImage{
object-fit: contain;
width: 70%;
}
#dateImage, #positionImage, #directionImage, #punctualityImage, #publicMessageImage{
object-fit: contain;
padding-top: 2px;
padding-bottom: 2px;
}
#publicMessageImage{
object-fit: contain;
max-width: 70%;
max-height: 70%;
margin-left: auto;
@ -262,12 +268,14 @@ export default {
@media screen and (max-width: 850px) {
.headerImage{
object-fit: contain;
height: 100%;
width: 100%;
padding: 10px;
}
#typeImage{
object-fit: contain;
width: 45%;
}