diff --git a/resources/components/fold.html b/resources/components/fold.html index 0fd6121..2a07059 100644 --- a/resources/components/fold.html +++ b/resources/components/fold.html @@ -1,5 +1,5 @@ -
-
+
+
diff --git a/resources/components/line.html b/resources/components/line.html index bdb7a06..647a2c4 100644 --- a/resources/components/line.html +++ b/resources/components/line.html @@ -1,4 +1,4 @@ - + diff --git a/resources/components/messages.html b/resources/components/messages.html index bf8a1b0..e1af51a 100644 --- a/resources/components/messages.html +++ b/resources/components/messages.html @@ -1,6 +1,15 @@
    -
  • +
  • {{ message.message }} + +
    + + Komunikat ważny od + {{ message.validFrom.format('HH:mm') }} + do + {{ message.validTo.format('HH:mm') }} + +
\ No newline at end of file diff --git a/resources/components/stop-details.html b/resources/components/stop-details.html index ec8ff4a..1432f14 100644 --- a/resources/components/stop-details.html +++ b/resources/components/stop-details.html @@ -1,37 +1,35 @@ -
-
-
- Linie: -
    -
  • - -
    • -
+
+
+ Linie: +
    +
  • + +
    • +
- Na mapie: -
- - - - -
-
+ Trasy: +
    +
  • +
    + +
    +
    + {{ track.description }} +
    + #{{ order }} +
    • +
+ -
- Trasy: -
    -
  • -
    - -
    -
    - {{ track.description }} -
    - #{{ order }} -
    • -
+
+ Na mapie: +
+ + + +
-
+
diff --git a/resources/components/stop.html b/resources/components/stop.html index 08d3553..550718c 100644 --- a/resources/components/stop.html +++ b/resources/components/stop.html @@ -16,7 +16,7 @@
- + diff --git a/resources/styles/_controls.scss b/resources/styles/_controls.scss index f188090..3e8a722 100644 --- a/resources/styles/_controls.scss +++ b/resources/styles/_controls.scss @@ -3,6 +3,10 @@ @extend .btn-link; color: black; + + &:focus { + outline: 2px solid rgba($blue, .2); + } } &.btn-outline-action { diff --git a/resources/styles/_line.scss b/resources/styles/_line.scss index 48ef102..6a80024 100644 --- a/resources/styles/_line.scss +++ b/resources/styles/_line.scss @@ -8,9 +8,25 @@ padding: 0 .2rem; } - &.line--#{$type} .icon { - background-color: $color; - color: color-yiq($color); + &.line--#{$type} { + .icon { + background-color: $color; + color: color-yiq($color); + } + + .badge { + background-color: transparent; + color: $color; + border: 1px solid $color; + } + } + + &.line--night { + .badge { + background-color: $dark; + color: $white; + border: none; + } } } } diff --git a/resources/styles/_stop.scss b/resources/styles/_stop.scss index 222382a..9cc288b 100644 --- a/resources/styles/_stop.scss +++ b/resources/styles/_stop.scss @@ -15,7 +15,7 @@ display: flex; } -.stop__details { +.stop__details-fold { flex-basis: 100%; .fold__inner { padding-bottom: .75rem; } } @@ -29,4 +29,21 @@ .stop__tracks .line__symbol .badge { flex-grow: 1; +} + +.stop__details { + display: flex; + flex-wrap: wrap; + margin: 0 (-$grid-gutter-width/2); + + section { + flex: 0 0 100%; + padding: 0 $grid-gutter-width/2; + } + + &.size-lg { + section { + flex: 0 0 50%; + } + } } \ No newline at end of file diff --git a/resources/styles/main.scss b/resources/styles/main.scss index 32e2bfd..f0456a7 100644 --- a/resources/styles/main.scss +++ b/resources/styles/main.scss @@ -15,6 +15,11 @@ $line-types: ( 'unknown': $dark ); +$default-spacing: .5rem; + +$alert-margin-bottom: $default-spacing; +$headings-margin-bottom: $default-spacing; + @import "~bootstrap/scss/bootstrap"; @import "common"; diff --git a/resources/ts/components/messages.ts b/resources/ts/components/messages.ts index bcc3eb8..745bcdd 100644 --- a/resources/ts/components/messages.ts +++ b/resources/ts/components/messages.ts @@ -4,6 +4,8 @@ import { Message } from "../model/message"; import urls from "../urls"; import { faInfoCircle, faExclamationTriangle, faQuestionCircle } from "@fortawesome/pro-light-svg-icons"; +import { Jsonified } from "../utils"; +import moment = require("moment"); @Component({ template: require("../../components/messages.html") }) export class MessagesComponent extends Vue { @@ -18,7 +20,15 @@ export class MessagesComponent extends Vue { const response = await fetch(urls.prepare(urls.messages)); if (response.ok) { - this.messages = await response.json(); + const messages = (await response.json()) as Jsonified[]; + this.messages = messages.map(m => { + const message = m as Message; + + message.validFrom = moment(m.validFrom); + message.validTo = moment(m.validTo); + + return message; + }); } this.$emit('update', this.messages); diff --git a/resources/ts/decorators.ts b/resources/ts/decorators.ts index 0974d26..4f229a8 100644 --- a/resources/ts/decorators.ts +++ b/resources/ts/decorators.ts @@ -1,11 +1,11 @@ -export interface Decorator { - decorate(f: (...farg: FArgs) => FRet, ...args: TArgs): (...farg: FArgs) => TRet; +export interface Decorator { + decorate(f: (...farg: FArgs) => any, ...args: TArgs): (...farg: FArgs) => TRet; (...args: TArgs): (target, name: string | symbol, descriptor: TypedPropertyDescriptor<(...farg: FArgs) => FRet>) => void; } -export function decorator - (decorate: (f: (...fargs: FArgs) => FRet, ...args: TArgs) => (...fargs: FArgs) => TRet) +export function decorator + (decorate: (f: (...farg: FArgs) => FRet, ...args: TArgs) => (...farg: FArgs) => TRet) : Decorator { const factory = function (this: Decorator, ...args: TArgs) { @@ -43,3 +43,11 @@ export const debounce = decorator(function (decorated, time: number, max: number }, time); } }); + +export const condition = decorator(function (decorated: (...args: Args) => Ret, predicate: (...args: Args) => boolean) { + return function (this: any, ...args: Args) { + if (predicate(...args)) { + return decorated(...args); + } + } +}); diff --git a/resources/ts/filters.ts b/resources/ts/filters.ts index babb82b..1051cc5 100644 --- a/resources/ts/filters.ts +++ b/resources/ts/filters.ts @@ -1,5 +1,6 @@ import { signed } from "./utils"; import Vue from 'vue'; +import { condition } from "./decorators"; Vue.filter('signed', signed); @@ -18,6 +19,40 @@ Vue.directive('hover', (el, binding, node) => { } }; - el.addEventListener('mouseenter', e => update(true, e)); - el.addEventListener('mouseleave', e => update(false, e)); -}); \ No newline at end of file + const activate = event => update(true, event); + const deactivate = event => update(false, event); + + el.addEventListener('mouseenter', activate); + el.addEventListener('click', activate); + el.addEventListener('keydown', condition.decorate(deactivate, e => e.keyCode == 27)); + el.addEventListener('mouseleave', deactivate); + el.addEventListener('blur', deactivate); +}); + +Vue.directive('responsive', (el, binding) => { + const breakpoints = typeof binding.value === 'object' ? binding.value : { + 'xs': 0, + 'sm': 576, + 'md': 768, + 'lg': 1024, + 'xl': 1200, + }; + + const resize = () => { + const width = el.scrollWidth; + el.classList.remove(...Object.keys(breakpoints).map(breakpoint => `size-${breakpoint}`)); + + for (let [ breakpoint, size ] of Object.entries(breakpoints)) { + if (width < size) { + break; + } + + el.classList.add(`size-${breakpoint}`); + } + }; + + resize(); + if (!binding.modifiers['once']) { + window.addEventListener('resize', resize); + } +});