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

8
src/components/TrainSidebar.vue
View File

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