From deb5216f5767a0cdeeedb9aa8db4133cc19af97d Mon Sep 17 00:00:00 2001 From: Chrystian Huot Date: Mon, 8 Jul 2019 14:50:52 -0400 Subject: [PATCH] Layout improvements and packages update --- .meteor/versions | 2 +- .../radio-control.component.html | 1 + .../radio-display/radio-display.component.ts | 4 +- .../radio/radio-led/radio-led.component.scss | 1 + .../radio-select/radio-select.component.scss | 26 ++++++++++ client/imports/app/radio/radio.component.html | 2 +- client/imports/app/radio/radio.component.scss | 52 +++++++++---------- client/imports/app/radio/radio.scss | 43 ++++----------- package-lock.json | 6 +-- package.json | 2 +- 10 files changed, 71 insertions(+), 68 deletions(-) diff --git a/.meteor/versions b/.meteor/versions index 0f5574a..d7079c6 100644 --- a/.meteor/versions +++ b/.meteor/versions @@ -41,7 +41,7 @@ mobile-status-bar@1.0.14 modern-browsers@0.1.4 modules@0.13.0 modules-runtime@0.10.3 -mongo@1.6.2 +mongo@1.6.3 mongo-decimal@0.1.1 mongo-dev-server@1.1.0 mongo-id@1.0.7 diff --git a/client/imports/app/radio/radio-control/radio-control.component.html b/client/imports/app/radio/radio-control/radio-control.component.html index 62c784e..52b2bff 100644 --- a/client/imports/app/radio/radio-control/radio-control.component.html +++ b/client/imports/app/radio/radio-control/radio-control.component.html @@ -24,6 +24,7 @@ +
diff --git a/client/imports/app/radio/radio-display/radio-display.component.ts b/client/imports/app/radio/radio-display/radio-display.component.ts index a6619ed..3408eb5 100644 --- a/client/imports/app/radio/radio-display/radio-display.component.ts +++ b/client/imports/app/radio/radio-display/radio-display.component.ts @@ -67,10 +67,10 @@ export class AppRadioDisplayComponent implements OnDestroy, OnInit { private _handleRadioTimeEvent(event: RadioEvent): void { if ('time' in event) { const currentFreq = this.currentCall.freqList - .reduce((cur: RadioCallFreq, freq: RadioCallFreq) => freq.pos <= event.time ? freq : cur, null); + .reduce((cur: RadioCallFreq, freq: RadioCallFreq) => freq.pos < event.time ? freq : cur, null); const currentSrc = this.currentCall.srcList - .reduce((cur: RadioCallSrc, src: RadioCallSrc) => src.pos <= event.time ? src : cur, null); + .reduce((cur: RadioCallSrc, src: RadioCallSrc) => src.pos < event.time ? src : cur, null); const currentError = currentFreq && currentFreq.errorCount; const currentFrequency = (currentFreq && currentFreq.freq); diff --git a/client/imports/app/radio/radio-led/radio-led.component.scss b/client/imports/app/radio/radio-led/radio-led.component.scss index 8c6001a..7f84773 100644 --- a/client/imports/app/radio/radio-led/radio-led.component.scss +++ b/client/imports/app/radio/radio-led/radio-led.component.scss @@ -11,6 +11,7 @@ $color-on: rgb(100, 230, 50); background: $color-off; border-radius: 2px; height: 12px; + margin: 6px; width: 24px; &:not(:last-child) { diff --git a/client/imports/app/radio/radio-select/radio-select.component.scss b/client/imports/app/radio/radio-select/radio-select.component.scss index 0dc446a..0cd85e9 100644 --- a/client/imports/app/radio/radio-select/radio-select.component.scss +++ b/client/imports/app/radio/radio-select/radio-select.component.scss @@ -45,4 +45,30 @@ opacity: .8; padding: 0 12px; } +} + +@media (min-width: 720px) { + .radio-button-group { + .radio-button, + .radio-button-none { + width: calc(20% - 8px); + } + + .radio-button-mini { + width: calc(10% - 8px); + } + } +} + +@media (min-width: 1200px) { + .radio-button-group { + .radio-button, + .radio-button-none { + width: calc(10% - 8px); + } + + .radio-button-mini { + width: calc(5% - 8px); + } + } } \ No newline at end of file diff --git a/client/imports/app/radio/radio.component.html b/client/imports/app/radio/radio.component.html index 8210852..1956f93 100644 --- a/client/imports/app/radio/radio.component.html +++ b/client/imports/app/radio/radio.component.html @@ -8,7 +8,7 @@ -
+
diff --git a/client/imports/app/radio/radio.component.scss b/client/imports/app/radio/radio.component.scss index 19fa46b..5587e6a 100644 --- a/client/imports/app/radio/radio.component.scss +++ b/client/imports/app/radio/radio.component.scss @@ -18,61 +18,57 @@ .mat-sidenav-content { align-items: center; - box-sizing: border-box; display: flex; - flex-direction: column; + flex-direction: row; justify-content: center; } -.radio-body-inner { +.radio-bezel { + box-sizing: border-box; display: flex; flex-direction: row; flex-wrap: wrap; - margin: 24px; - width: calc(100% - 48px); + max-width: 640px; + overflow: hidden; + padding: 24px; } .radio-control, .radio-display, .radio-led { - width: inherit; + flex: 100%; + max-width: 100%; } -.radio-display { - align-self: center; +.radio-display, +.radio-led { + margin-bottom: 24px; } -@media (orientation: landscape) { - - .radio-body-inner { - max-width: 720px; +@media (orientation: landscape) and (max-width: 640px) { + .radio-bezel { + flex-direction: row; + flex-wrap: wrap; + } + + .radio-control { + flex: calc(50% - 24px); + max-width: calc(50% - 24px); + margin-left: 24px; } - .radio-control, .radio-display { flex: 50%; max-width: 50%; } - .radio-led { - flex: 100%; - } -} - -@media (orientation: portrait) { - - .radio-body-inner { - max-width: 480px; - } - - .radio-control, .radio-display, .radio-led { - flex: 100%; + margin: 0; } - .radio-display, .radio-led { - margin-bottom: 48px; + flex: 100%; + max-width: 100%; } } \ No newline at end of file diff --git a/client/imports/app/radio/radio.scss b/client/imports/app/radio/radio.scss index cbb6125..a5d7f14 100644 --- a/client/imports/app/radio/radio.scss +++ b/client/imports/app/radio/radio.scss @@ -4,6 +4,12 @@ color: rgb(255, 255, 255); } +.radio-button, +.radio-button-mini, +.radio-button-none { + margin: 4px; +} + .radio-button, .radio-button-mini { background: rgb(45, 45, 45); @@ -17,7 +23,6 @@ font-weight: 500; height: 40px; line-height: 40px; - margin: 4px; overflow: hidden; position: relative; text-overflow: ellipsis; @@ -57,7 +62,8 @@ } } -.radio-button { +.radio-button, +.radio-button-none { min-width: 64px; } @@ -67,9 +73,10 @@ flex: auto; flex-direction: row; flex-wrap: wrap; - justify-content: space-evenly; + justify-content: space-between; - .radio-button { + .radio-button, + .radio-button-none { width: calc(25% - 8px); } @@ -81,32 +88,4 @@ .radio-button-mini { font-size: 10px; min-width: 30px; -} - -.radio-button-spacer { - flex: 1; -} - -@media (min-width: 720px) { - .radio-button-group { - .radio-button { - width: calc(20% - 8px); - } - - .radio-button-mini { - width: calc(10% - 8px); - } - } -} - -@media (min-width: 1200px) { - .radio-button-group { - .radio-button { - width: calc(10% - 8px); - } - - .radio-button-mini { - width: calc(5% - 8px); - } - } } \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 0bd006b..5a7674a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -123,9 +123,9 @@ } }, "@babel/runtime": { - "version": "7.5.0", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.5.0.tgz", - "integrity": "sha512-2xsuyZ0R0RBFwjgae5NpXk8FcfH4qovj5cEM5VEeB7KXnKqzaisIu2HSV/mCEISolJJuR4wkViUGYujA8MH9tw==", + "version": "7.5.1", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.5.1.tgz", + "integrity": "sha512-g+hmPKs16iewFSmW57NkH9xpPkuYD1RV3UE2BCkXx9j+nhhRb9hsiSxPmEa67j35IecTQdn4iyMtHMbt5VoREg==", "requires": { "regenerator-runtime": "^0.13.2" } diff --git a/package.json b/package.json index 4249b3c..8f33c8e 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "@angular/platform-browser": "8.1.0", "@angular/platform-browser-dynamic": "8.1.0", "@angular/router": "8.1.0", - "@babel/runtime": "7.5.0", + "@babel/runtime": "7.5.1", "bcrypt": "^3.0.6", "core-js": "3.1.4", "hammerjs": "^2.0.8",