re-arrange demodulator buttons in a dynamic grid

This commit is contained in:
Jakob Ketterl 2020-08-12 19:44:33 +02:00
parent 08ba0c7b02
commit ccb322016e
2 changed files with 16 additions and 14 deletions

View File

@ -445,7 +445,7 @@ input[type=range]:disabled {
.openwebrx-demodulator-button .openwebrx-demodulator-button
{ {
width: 38px; min-width: 38px;
height: 19px; height: 19px;
font-size: 12pt; font-size: 12pt;
text-align: center; text-align: center;
@ -620,6 +620,18 @@ img.openwebrx-mirror-img
padding-top: 0; padding-top: 0;
} }
.openwebrx-modes-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
grid-gap: 5px;
}
.openwebrx-modes-grid .openwebrx-demodulator-button {
margin: 0;
overflow: hidden;
white-space: nowrap;
}
#openwebrx-smeter-outer #openwebrx-smeter-outer
{ {
border-color: #888; border-color: #888;

View File

@ -57,19 +57,9 @@ DemodulatorPanel.prototype.render = function() {
); );
}); });
var index = 0; var $modegrid = $('<div class="openwebrx-modes-grid"></div>');
var arrayLength = buttons.length; $modegrid.append.apply($modegrid, buttons);
var chunks = []; html.push($modegrid);
for (index = 0; index < arrayLength; index += 5) {
chunks.push(buttons.slice(index, index + 5));
}
html.push.apply(html, chunks.map(function(chunk){
$line = $('<div class="openwebrx-panel-line openwebrx-panel-flex-line"></div>');
$line.append.apply($line, chunk);
return $line
}));
html.push($( html.push($(
'<div class="openwebrx-panel-line openwebrx-panel-flex-line">' + '<div class="openwebrx-panel-line openwebrx-panel-flex-line">' +