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

fix strethed images in TrainSidebar

Browse Source
This commit is contained in:
Aindréas Ó hAodha
2023-07-11 21:21:21 +01:00
parent 47baea86f7
commit 006dc0f21c
1 changed files with 8 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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%;
} }