Alexander/FitTrackee
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Client - display static map and no map placeholder with dark mode

Browse Source
This commit is contained in:
Sam
2023-12-17 11:29:46 +01:00
parent 816296c976
commit 910531e6bd
6 changed files with 24 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
fittrackee_client/src/components/Common/StaticMap.vue
View File

@@ -51,6 +51,12 @@
width: 400px; width: 400px;
height: 225px; height: 225px;
z-index: 100; z-index: 100;
filter: var(--map-display-hover-filter);
.map-attribution-text {
color: var(--map-display-hover-attribution-text);
background-color: var(--map-attribution-bg-color);
}
} }
.bg-map-image { .bg-map-image {
@@ -59,6 +65,7 @@
opacity: 0.6; opacity: 0.6;
height: 200px; height: 200px;
width: 100%; width: 100%;
filter: var(--map-filter);
} }
.map-attribution { .map-attribution {
@@ -69,7 +76,8 @@
} }
.map-attribution-text { .map-attribution-text {
background-color: var(--map-attribution-text); color: var(--map-attribution-text);
background-color: var(--map-attribution-bg-color);
} }
} }
</style> </style>

1
fittrackee_client/src/components/Workout/WorkoutCard.vue
View File

@@ -238,6 +238,7 @@
height: 150px; height: 150px;
.no-map { .no-map {
line-height: 150px; line-height: 150px;
filter: var(--no-map-filter);
} }
::v-deep(.bg-map-image) { ::v-deep(.bg-map-image) {
height: 150px; height: 150px;

1
fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutMap/index.vue
View File

@@ -213,6 +213,7 @@
} }
.no-map { .no-map {
line-height: 400px; line-height: 400px;
filter: var(--no-map-filter);
} }
.leaflet-container { .leaflet-container {
.map { .map {

2
fittrackee_client/src/components/Workouts/WorkoutsList.vue
View File

@@ -354,7 +354,7 @@
} }
.static-map { .static-map {
display: none; display: none;
box-shadow: 3px 3px 3px 1px var(--app-shadow-color); box-shadow: 3px 3px 3px 1px var(--workout-static-map-shadow-color);
} }
} }
.workout-title:hover .static-map { .workout-title:hover .static-map {

7
fittrackee_client/src/scss/colors-dark.scss
View File

@@ -84,10 +84,15 @@
--map-control-color: #000000; --map-control-color: #000000;
--map-control-bg-color: #ffffff; --map-control-bg-color: #ffffff;
--map-control-border-color: #bfc0ab; --map-control-border-color: #bfc0ab;
--map-attribution-text: rgba(255, 255, 255, 0.7); --map-attribution-text: #e8e8e8;
--map-display-hover-attribution-text: #444444;
--map-attribution-bg-color: none;
--map-filter: invert(1) hue-rotate(180deg) brightness(0.8) contrast(0.8); --map-filter: invert(1) hue-rotate(180deg) brightness(0.8) contrast(0.8);
--map-display-hover-filter: invert(1) hue-rotate(180deg) brightness(1.5) contrast(0.6);
--map-layers-overlays: var(--app-color); --map-layers-overlays: var(--app-color);
--map-control-bar: var(--app-color); --map-control-bar: var(--app-color);
--no-map-filter: invert(1) brightness(1.5) contrast(.9);
--workout-static-map-shadow-color: #d2d2d2;
--mountains-filter: invert(90%) sepia(19%) saturate(0%) hue-rotate(39deg) --mountains-filter: invert(90%) sepia(19%) saturate(0%) hue-rotate(39deg)
brightness(86%) contrast(102%); brightness(86%) contrast(102%);

7
fittrackee_client/src/scss/colors.scss
View File

@@ -81,10 +81,15 @@
--map-control-color: #000000; --map-control-color: #000000;
--map-control-bg-color: #ffffff; --map-control-bg-color: #ffffff;
--map-control-border-color: #bfc0ab; --map-control-border-color: #bfc0ab;
--map-attribution-text: rgba(255, 255, 255, 0.7); --map-attribution-text: var(--app-color);
--map-display-hover-attribution-text: initial;
--map-attribution-bg-color: rgba(255, 255, 255, 0.7);
--map-filter: initial; --map-filter: initial;
--map-display-hover-filter: initial;
--map-layers-overlays: initial; --map-layers-overlays: initial;
--map-control-bar: #bfc0ab; --map-control-bar: #bfc0ab;
--no-map-filter: initial;
--workout-static-map-shadow-color: var(--app-shadow-color);
--mountains-filter: invert(19%) sepia(9%) saturate(2921%) hue-rotate(169deg) --mountains-filter: invert(19%) sepia(9%) saturate(2921%) hue-rotate(169deg)
brightness(85%) contrast(80%); brightness(85%) contrast(80%);