diff --git a/htdocs/css/openwebrx.css b/htdocs/css/openwebrx.css index fd81097..caf5b44 100644 --- a/htdocs/css/openwebrx.css +++ b/htdocs/css/openwebrx.css @@ -445,7 +445,7 @@ input[type=range]:disabled { .openwebrx-demodulator-button { - width: 38px; + min-width: 38px; height: 19px; font-size: 12pt; text-align: center; @@ -620,6 +620,18 @@ img.openwebrx-mirror-img 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 { border-color: #888; diff --git a/htdocs/lib/DemodulatorPanel.js b/htdocs/lib/DemodulatorPanel.js index 439a8e5..c276392 100644 --- a/htdocs/lib/DemodulatorPanel.js +++ b/htdocs/lib/DemodulatorPanel.js @@ -57,19 +57,9 @@ DemodulatorPanel.prototype.render = function() { ); }); - var index = 0; - var arrayLength = buttons.length; - var chunks = []; - - for (index = 0; index < arrayLength; index += 5) { - chunks.push(buttons.slice(index, index + 5)); - } - - html.push.apply(html, chunks.map(function(chunk){ - $line = $('
'); - $line.append.apply($line, chunk); - return $line - })); + var $modegrid = $('
'); + $modegrid.append.apply($modegrid, buttons); + html.push($modegrid); html.push($( '
' +