Layout improvements and packages update

This commit is contained in:
Chrystian Huot 2019-07-08 14:50:52 -04:00
parent ec9243e1ba
commit deb5216f57
10 changed files with 71 additions and 68 deletions

View file

@ -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

View file

@ -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>

View file

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

View file

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

View file

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

View file

@ -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>

View file

@ -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%;
}
}

View file

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

6
package-lock.json generated
View file

@ -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"
}

View file

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