diff --git a/src/assets/punctualityIcon.png b/src/assets/punctualityIcon.png new file mode 100644 index 0000000..a9feb10 Binary files /dev/null and b/src/assets/punctualityIcon.png differ diff --git a/src/components/StationSidebar.vue b/src/components/StationSidebar.vue index 87ca5f3..05c2847 100644 --- a/src/components/StationSidebar.vue +++ b/src/components/StationSidebar.vue @@ -86,6 +86,7 @@ export default { #xButton:hover{ color:red; + cursor: pointer; } #typeDiv, #positionDiv, #descriptionDiv{ diff --git a/src/components/TrainSidebar.vue b/src/components/TrainSidebar.vue index 20d1359..07fb815 100644 --- a/src/components/TrainSidebar.vue +++ b/src/components/TrainSidebar.vue @@ -49,20 +49,28 @@

Direction:
{{ store.selectedTrain["Direction"][0] }}

-
-
- -
-

Punctuality:
{{ store.selectedTrain["Punctuality"][0] }}

-
- -
+

Public Message:
Public Message: {{ store.selectedTrain["PublicMessage"][0] }}

-
+ +
+
+ +
+

Public Message:
Public Message: {{ store.selectedTrain["PublicMessage"][0] }}

+
+ +
+
+ +
+

Punctuality:
{{ store.selectedTrain["Punctuality"][0] }}

+
+ + @@ -157,6 +165,7 @@ export default { #xButton:hover{ color:red; + cursor: pointer; } #originDiv, #destinationDiv{ @@ -177,12 +186,13 @@ export default { /* Sidebar Section Divs */ -#typeDiv, #dateDiv, #positionDiv, #directionDiv, #publicMessageDiv, #punctualityDiv{ +#typeDiv, #dateDiv, #positionDiv, #directionDiv, #publicMessageDiv, #notRunningPublicMessageDiv, #punctualityDiv{ background-color: rgb(230, 230, 230); height: 12%; position: absolute; right:0px; width:100%; + } #typeIcon, #dateIcon, #positionIcon, #directionIcon, #publicMessageIcon, #punctualityIcon{ @@ -195,17 +205,13 @@ export default { justify-content: center; } -#publicMessageIcon{ - align-items: center; -} - #typeP, #dateP, #longP, #latP, #directionP, #publicMessageP, #punctualityP{ - font-size: 16px; + font-size: 15px; position: relative; - bottom: 2px; width: 40%; left: 22%; text-align: left; + bottom:4px; } #positionParagraphDiv{ @@ -225,27 +231,24 @@ export default { width: 70%; } -#dateImage, #positionImage, #directionImage{ +#dateImage, #positionImage, #directionImage, #punctualityImage, #publicMessageImage{ padding-top: 2px; padding-bottom: 2px; } - -#publicMessageImage{ - height: 40%; - position: relative; - top:-10px; -} - /*Positioning rows*/ -#dateDiv{top: 60px;} -#positionDiv{top: 110px;} -#directionDiv{top: 160px;} -#punctualityDiv{top: 210px;} -#publicMessageDiv{ - top:260px; - height: 40%; +#dateDiv{top: 16%;} +#positionDiv{top: 29%;} +#directionDiv{top: 42%;} +#punctualityDiv{top: 55%;} +#publicMessageDiv, #notRunningPublicMessageDiv{ + top:68%; + height: fit-content; } +#notRunningPublicMessageDiv{top: 55%;} + + + @media screen and (max-width: 850px) { .headerImage{ height: 100%; @@ -253,5 +256,9 @@ export default { padding: 10px; } + #typeImage{ + width: 45%; + } + } diff --git a/src/pages/AccountPage.vue b/src/pages/AccountPage.vue index d3d6310..c7d3f50 100644 --- a/src/pages/AccountPage.vue +++ b/src/pages/AccountPage.vue @@ -21,8 +21,8 @@
show - - + +
@@ -276,9 +276,6 @@ input { align-items: center; } -#imgDiv1:hover, #imgDiv2:hover{ - transform: scale(1.1); -} #eyeImg{ width: 6%; @@ -286,6 +283,9 @@ input { order: 2; } +#eyeImg:hover{ + transform: scale(1.1); +} ::placeholder{ font-size: 14px;; diff --git a/src/pages/MapPage.vue b/src/pages/MapPage.vue index 0e632ea..cf38ea6 100644 --- a/src/pages/MapPage.vue +++ b/src/pages/MapPage.vue @@ -16,7 +16,7 @@
- +

@@ -33,7 +33,7 @@
- +

@@ -660,7 +660,8 @@ export default { #publicMessageTicker { z-index: 3; position: fixed; - bottom:0px; + bottom: 0px; + padding: 2px; width:100%; background-color: rgb(255, 255, 125); color: black;