Skip to content

Commit

Permalink
✨ Add shadow to activeStatusCard, change width (#2805)
Browse files Browse the repository at this point in the history
  • Loading branch information
@HerrLevin
HerrLevin authored Aug 2, 2024
1 parent cab0c16 commit 0cf0d41
Show file tree
Hide file tree
Showing 2 changed files with 40 additions and 20 deletions.
46 changes: 31 additions & 15 deletions resources/sass/app-dark.scss
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,22 @@
@import "variables";
@import "mdb-ui-kit/src/scss/free/_variables";

:root.dark {
--mdb-body-color: #{$dm-body};
--mdb-modal-bg: #{$dm-base};

--mdb-link-color: #{$dm-lightblue};
--mdb-btn-hover-color: #{$dm-lightblue};
--mdb-btn-hover-color: #{$dm-lightblue};
--mdb-btn-focus-color: #{$dm-lightblue};
--mdb-btn-active-color: #{$dm-lightblue};

--mdb-nav-tabs-link-color: $dm-lightblue;

$box-shadow: 0 0.5rem 1rem rgba($gray-300, 0.15) !default;
$box-shadow-sm: 0 0.125rem 0.25rem rgba($gray-300, 0.075) !default;
$box-shadow-lg: 0 1rem 3rem rgba($gray-300, 0.175) !default;
$box-shadow-inset: inset 0 1px 2px rgba($gray-300, 0.075) !default;

body {
background-color: $dm-base;
color: $dm-body !important;
Expand Down Expand Up @@ -46,6 +51,7 @@
background-color: lighten($dm-base, 2%);
border-color: lighten($dm-base, 30%) !important;
color: lighten($dm-body, 8%) !important;

&:focus {
background-color: lighten($dm-base, 10%);
}
Expand All @@ -55,6 +61,7 @@
background-color: lighten($dm-base, 2%);
color: $dm-body !important;
border-color: lighten($dm-base, 30%) !important;

&:focus {
background-color: lighten($dm-base, 10%);
}
Expand Down Expand Up @@ -116,6 +123,7 @@
background: lighten($dm-base, 30%) !important;
border-color: $dm-trwlRot-shape;
}

.text-trwl {
color: $dm-trwlRot !important;
}
Expand All @@ -130,16 +138,17 @@
.progress {
.progress-bar {
background: $dm-trwlRot-shape;

&.progress-pride {
background: linear-gradient(
66deg,
hsl(0, 75%, 60%) 0 14.28%,
hsl(39, 75%, 47%) 0 28.57%,
hsl(60, 65%, 50%) 0 42.85%,
hsl(120, 75%, 40%) 0 57.14%,
hsl(181, 75%, 40%) 0 71.42%,
hsl(240, 75%, 60%) 0 85.71%,
hsl(275, 75%, 35%) 0
66deg,
hsl(0, 75%, 60%) 0 14.28%,
hsl(39, 75%, 47%) 0 28.57%,
hsl(60, 65%, 50%) 0 42.85%,
hsl(120, 75%, 40%) 0 57.14%,
hsl(181, 75%, 40%) 0 71.42%,
hsl(240, 75%, 60%) 0 85.71%,
hsl(275, 75%, 35%) 0
);
}
}
Expand Down Expand Up @@ -281,6 +290,7 @@
.list-group-item {
background-color: lighten($dm-base, 15%);
color: $dm-body !important;

&:hover {
background-color: lighten($dm-base, 10%);
}
Expand Down Expand Up @@ -338,6 +348,7 @@
.alert-info {
background-color: hsl(194, 80%, 20%);
color: rgb(238, 238, 238);

i {
color: hsl(195, 63%, 70%);
}
Expand All @@ -362,8 +373,8 @@
background: linear-gradient(
#{rgba(darken($dm-trwlRot, 60%), 0.4)},
#{rgba(darken($dm-trwlRot, 60%), 0.4)}
),
url("/images/covers/profile-background.png");
),
url("/images/covers/profile-background.png");
background-position: center;
}

Expand All @@ -373,18 +384,19 @@
--mdb-pagination-hover-border-color: #{$dm-base-20} !important;
--mdb-pagination-focus-color: #{$dm-body} !important;
--mdb-pagination-focus-bg: #{$dm-base-30} !important;
--mdb-pagination-focus-box-shadow: 0 0 0 0.25rem
rgba(59, 113, 202, 0.25);
--mdb-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(59, 113, 202, 0.25);
--mdb-pagination-active-color: #{$dm-body} !important;
--mdb-pagination-active-bg: #{$dm-base-30} !important;
--mdb-pagination-active-border-color: #{$dm-base-30} !important;
--mdb-pagination-disabled-color: hsl(224, 10%, 67%) !important;
--mdb-pagination-disabled-bg: #{$dm-base} !important;
--mdb-pagination-disabled-border-color: #{$dm-base} !important;
}

a.page-link {
color: #{$dm-body} !important;
}

.page-item {
&.disabled {
.page-link {
Expand Down Expand Up @@ -425,9 +437,9 @@

.leaflet-layer {
&:nth-child(1) .leaflet-tile {
filter: invert(1) grayscale(100%) sepia(100%) hue-rotate(180deg)
saturate(0.7);
filter: invert(1) grayscale(100%) sepia(100%) hue-rotate(180deg) saturate(0.7);
}

&:nth-child(2) .leaflet-tile {
filter: invert(1) hue-rotate(180deg) grayscale(70%) opacity(0.65);
}
Expand All @@ -441,4 +453,8 @@
.leaflet-interactive {
stroke: $dm-trwlRot-shape;
}

.shadow-sm {
box-shadow: $box-shadow-sm !important;
}
}
14 changes: 9 additions & 5 deletions resources/vue/components/ActiveStatusCard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ export default defineComponent({
},
mounted() {
this.fetchState();
setTimeout(this.getNextStation,500);
setTimeout(this.getNextStation, 500);
this.fetchInterval = setInterval(this.fetchState, 30000);
this.nextStationInterval = setInterval(this.getNextStation, 10000);
},
Expand All @@ -81,13 +81,14 @@ export default defineComponent({

<template>
<div v-show="showCard" class="fab-container d-md-none">
<div class="card hover-card w-75 shadow-3" @click="goToStatus">
<div class="card hover-card w-100 shadow-sm" @click="goToStatus">
<div class="card-body py-2 px-3">
<p class="mb-0">{{ state.status?.train?.origin?.name }} <small
class="float-end text-muted">{{ format(departure) }}</small></p>

<p class="ms-2 col-auto align-items-center d-flex my-0" v-show="state.status?.train?.lineName">
<LineIndicator :product-name="state.status?.train?.category" :number="state.status?.train?.lineName ?? ''"/>
<LineIndicator :product-name="state.status?.train?.category"
:number="state.status?.train?.lineName ?? ''"/>
<span class="ms-1" v-show="nextStation">next: {{ nextStation?.name }}</span>
</p>
<p class="mb-0">{{ state.status?.train?.destination?.name }} <small
Expand All @@ -113,7 +114,10 @@ export default defineComponent({
position: fixed;
bottom: 30px;
left: 50%;
width: 400px;
margin-left: -200px;
width: 100%;
max-width: 100%;
margin-left: -50%;
padding-right: calc(var(--mdb-gutter-x) * 0.5);
padding-left: calc(var(--mdb-gutter-x) * 0.5);
}
</style>

0 comments on commit 0cf0d41

Please sign in to comment.