cyteen
/
openrowingmonitor
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Update button layout styling for the GUI 

Restyle the button layout to be responsive and fix potential overflows
This commit is contained in:
Abász 2022-12-22 14:20:20 +01:00
parent cd1ff3d001
commit a0686150a2
1 changed files with 38 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
app/client/components/DashboardActions.js
View File

@ -14,28 +14,44 @@ import './AppDialog.js'
export class DashboardActions extends AppElement {
static styles = css`
button {
position: relative;
outline:none;
background-color: var(--theme-button-color);
border: 0;
border-radius: var(--theme-border-radius);
color: var(--theme-font-color);
margin: 0.2em 0;
margin: 0.2em 4px;
font-size: 60%;
text-decoration: none;
display: inline-flex;
width: 3.5em;
height: 2.5em;
width: 3.2em;
min-width: 3.2em;
height: 2.2em;
justify-content: center;
align-items: center;
}
button:hover {
filter: brightness(150%);
}
button > div.text {
position: absolute;
left: 2px;
bottom: 2px;
font-size: 40%;
}
#fullscreen-icon {
display: inline-flex;
}
.top-button-group {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#windowed-icon {
display: none;
}
@ -45,7 +61,7 @@ export class DashboardActions extends AppElement {
}
.peripheral-mode {
font-size: 80%;
font-size: 50%;
}
@media (display-mode: fullscreen) {
@ -63,14 +79,22 @@ export class DashboardActions extends AppElement {
render () {
return html`
<button @click=${this.reset}>${icon_undo}</button>
${this.renderOptionalButtons()}
<button @click=${this.switchBlePeripheralMode}>${icon_bluetooth}</button>
<div class="peripheral-mode">${this.blePeripheralMode()}</div>
<button @click=${this.switchHrmPeripheralMode}>${icon_heartbeat}</button>
<div class="peripheral-mode">${this.appState?.config?.hrmPeripheralMode}</div>
<button @click=${this.switchAntPeripheralMode}>${icon_antplus}</button>
<div class="peripheral-mode">${this.appState?.config?.antPeripheralMode}</div>
<div class="top-button-group">
<button @click=${this.reset}>${icon_undo}</button>
${this.renderOptionalButtons()}
<button @click=${this.switchHrmPeripheralMode}>
${icon_heartbeat}
<div class="text">${this.appState?.config?.hrmPeripheralMode}</div>
</button>
<button @click=${this.switchAntPeripheralMode}>
${icon_antplus}
<div class="text">${this.appState?.config?.antPeripheralMode}</div>
</button>
</div>
<div class="text-button">
<button @click=${this.switchBlePeripheralMode}>${icon_bluetooth}</button>
<div class="peripheral-mode">${this.blePeripheralMode()}</div>
</div>
${this.dialog ? this.dialog : ''}
`
}
@ -114,9 +138,9 @@ export class DashboardActions extends AppElement {
case 'FTMSBIKE':
return 'FTMS Bike'
case 'CSC':
return 'BLE Bike Speed + Cadence'
return 'Bike Speed + Cadence'
case 'CPS':
return 'BLE Bike Power'
return 'Bike Power'
case 'FTMS':
return 'FTMS Rower'
default: