Layout improvements and packages update

.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

client/imports/app/radio/radio-control/radio-control.component.html

@@ -24,6 +24,7 @@
     <button class="radio-button" (click)="searchCall()">
         SEARCH<br>CALL
     </button>
+    <div class="radio-button-none"></div>
     <button class="radio-button" (click)="selectTalkgroups()">
         SELECT<br>TG
     </button>

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);

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) {

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);
+        }
+    }
 }

client/imports/app/radio/radio.component.html

@@ -8,7 +8,7 @@
         <app-radio-select class="radio-select"></app-radio-select>
     </mat-sidenav>
     <mat-sidenav-content>
-        <div class="radio-body-inner">
+        <div class="radio-bezel">
             <app-radio-led class="radio-led"></app-radio-led>
             <app-radio-display class="radio-display"></app-radio-display>
             <app-radio-control class="radio-control"></app-radio-control>

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;
+    max-width: 640px;
-    width: calc(100% - 48px);
+    overflow: hidden;
+    padding: 24px;
 }
 
 .radio-control,
 .radio-display,
 .radio-led {
-    width: inherit;
+    flex: 100%;
+    max-width: 100%;
 }
 
-.radio-display {
+.radio-display,
-    align-self: center;
+.radio-led {
+    margin-bottom: 24px;
 }
 
-@media (orientation: landscape) {
+@media (orientation: landscape) and (max-width: 640px) {
-
+    .radio-bezel {
-    .radio-body-inner {
+        flex-direction: row;
-        max-width: 720px;
+        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%;
     }
 }

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);
-        }
-    }
 }

package-lock.json

@@ -123,9 +123,9 @@
       }
     },
     "@babel/runtime": {
-      "version": "7.5.0",
+      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.5.1.tgz",
-      "integrity": "sha512-2xsuyZ0R0RBFwjgae5NpXk8FcfH4qovj5cEM5VEeB7KXnKqzaisIu2HSV/mCEISolJJuR4wkViUGYujA8MH9tw==",
+      "integrity": "sha512-g+hmPKs16iewFSmW57NkH9xpPkuYD1RV3UE2BCkXx9j+nhhRb9hsiSxPmEa67j35IecTQdn4iyMtHMbt5VoREg==",
       "requires": {
         "regenerator-runtime": "^0.13.2"
       }

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",