Mirror/betaflight-configurator
1
0
Fork 0
mirror of https://github.com/betaflight/betaflight-configurator.git synced 2025-07-26 17:55:24 +03:00
Code Issues Wiki Activity

Style: Fix graph layout in Sensors tab (#4122)

Browse source 
* Lint: Fix pre-commit lint issue

* Style: Fix graph layout in Sensors tab

* Style: Add missed styles
This commit is contained in:
Vít Semrád 2024-08-04 09:55:45 +02:00 • committed by GitHub
parent 153ad0ef79
commit af94769b53
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 345 additions and 329 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/css/main.less
View file

@ -1652,6 +1652,12 @@ each(range(12), {
gap: 1rem; gap: 1rem;
} }
} }
.graph-grid {
width: 100%;
display: grid;
gap: 1rem;
grid-template-columns: auto max-content;
}
@media not all and (max-width: 575px) { @media not all and (max-width: 575px) {
.visible-on-phone-only { .visible-on-phone-only {
display: none !important; display: none !important;

664
src/tabs/sensors.html
View file

@ -18,364 +18,374 @@
</div> </div>
</div> </div>
</div> </div>
<div class="wrapper gyro"> <div class="wrapper gyro">
<div class="gui_box grey"> <div class="gui_box grey">
<div class="plot_control"> <div class="graph-grid">
<div class="title" i18n="sensorsGyroTitle"></div> <svg id="gyro">
<dl> <g class="grid x" transform="translate(40, 120)"></g>
<dt i18n="sensorsRefresh"></dt> <g class="grid y" transform="translate(40, 10)"></g>
<dd class="rate"> <g class="data" transform="translate(41, 10)"></g>
<select name="gyro_refresh_rate"> <g class="axis x" transform="translate(40, 120)"></g>
<option value="10">10 ms</option> <g class="axis y" transform="translate(40, 10)"></g>
<option value="20">20 ms</option> </svg>
<option value="30">30 ms</option> <div class="plot_control">
<option value="40">40 ms</option> <div class="title" i18n="sensorsGyroTitle"></div>
<option value="50" selected="selected">50 ms</option> <dl>
<option value="100">100 ms</option> <dt i18n="sensorsRefresh"></dt>
<option value="250">250 ms</option> <dd class="rate">
<option value="500">500 ms</option> <select name="gyro_refresh_rate">
<option value="1000">1000 ms</option> <option value="10">10 ms</option>
</select> <option value="20">20 ms</option>
</dd> <option value="30">30 ms</option>
<dt i18n="sensorsScale"></dt> <option value="40">40 ms</option>
<dd class="scale"> <option value="50" selected="selected">50 ms</option>
<select name="gyro_scale"> <option value="100">100 ms</option>
<option value="1">1</option> <option value="250">250 ms</option>
<option value="2">2</option> <option value="500">500 ms</option>
<option value="3">3</option> <option value="1000">1000 ms</option>
<option value="4">4</option> </select>
<option value="5">5</option> </dd>
<option value="10">10</option> <dt i18n="sensorsScale"></dt>
<option value="25">25</option> <dd class="scale">
<option value="50">50</option> <select name="gyro_scale">
<option value="100">100</option> <option value="1">1</option>
<option value="200">200</option> <option value="2">2</option>
<option value="300">300</option> <option value="3">3</option>
<option value="400">400</option> <option value="4">4</option>
<option value="500">500</option> <option value="5">5</option>
<option value="1000">1000</option> <option value="10">10</option>
<option value="2000" selected="selected">2000</option> <option value="25">25</option>
</select> <option value="50">50</option>
</dd> <option value="100">100</option>
<dt>X:</dt> <option value="200">200</option>
<dd class="x">0</dd> <option value="300">300</option>
<dt>Y:</dt> <option value="400">400</option>
<dd class="y">0</dd> <option value="500">500</option>
<dt>Z:</dt> <option value="1000">1000</option>
<dd class="z">0</dd> <option value="2000" selected="selected">2000</option>
</dl> </select>
</dd>
<dt>X:</dt>
<dd class="x">0</dd>
<dt>Y:</dt>
<dd class="y">0</dd>
<dt>Z:</dt>
<dd class="z">0</dd>
</dl>
</div>
</div> </div>
<svg id="gyro">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
<div class="clear-both"></div>
</div> </div>
</div> </div>
<div class="wrapper accel"> <div class="wrapper accel">
<div class="gui_box grey"> <div class="gui_box grey">
<div class="plot_control"> <div class="graph-grid">
<div class="title" i18n="sensorsAccelTitle"></div> <svg id="accel">
<dl> <g class="grid x" transform="translate(40, 120)"></g>
<dt i18n="sensorsRefresh"></dt> <g class="grid y" transform="translate(40, 10)"></g>
<dd class="rate"> <g class="data" transform="translate(41, 10)"></g>
<select name="accel_refresh_rate"> <g class="axis x" transform="translate(40, 120)"></g>
<option value="10">10 ms</option> <g class="axis y" transform="translate(40, 10)"></g>
<option value="20">20 ms</option> </svg>
<option value="30">30 ms</option> <div class="plot_control">
<option value="40">40 ms</option> <div class="title" i18n="sensorsAccelTitle"></div>
<option value="50" selected="selected">50 ms</option> <dl>
<option value="100">100 ms</option> <dt i18n="sensorsRefresh"></dt>
<option value="250">250 ms</option> <dd class="rate">
<option value="500">500 ms</option> <select name="accel_refresh_rate">
<option value="1000">1000 ms</option> <option value="10">10 ms</option>
</select> <option value="20">20 ms</option>
</dd> <option value="30">30 ms</option>
<dt i18n="sensorsScale"></dt> <option value="40">40 ms</option>
<dd class="scale"> <option value="50" selected="selected">50 ms</option>
<select name="accel_scale"> <option value="100">100 ms</option>
<option value="0.5">0.5</option> <option value="250">250 ms</option>
<option value="1">1</option> <option value="500">500 ms</option>
<option value="2" selected="selected">2</option> <option value="1000">1000 ms</option>
</select> </select>
</dd> </dd>
<dt>X:</dt> <dt i18n="sensorsScale"></dt>
<dd class="x">0</dd> <dd class="scale">
<dt>Y:</dt> <select name="accel_scale">
<dd class="y">0</dd> <option value="0.5">0.5</option>
<dt>Z:</dt> <option value="1">1</option>
<dd class="z">0</dd> <option value="2" selected="selected">2</option>
</dl> </select>
</dd>
<dt>X:</dt>
<dd class="x">0</dd>
<dt>Y:</dt>
<dd class="y">0</dd>
<dt>Z:</dt>
<dd class="z">0</dd>
</dl>
</div>
</div> </div>
<svg id="accel">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
<div class="clear-both"></div>
</div> </div>
</div> </div>
<div class="wrapper mag"> <div class="wrapper mag">
<div class="gui_box grey"> <div class="gui_box grey">
<div class="plot_control"> <div class="graph-grid">
<div class="title" i18n="sensorsMagTitle"></div> <svg id="mag">
<dl> <g class="grid x" transform="translate(40, 120)"></g>
<dt i18n="sensorsRefresh"></dt> <g class="grid y" transform="translate(40, 10)"></g>
<dd class="rate"> <g class="data" transform="translate(41, 10)"></g>
<select name="mag_refresh_rate"> <g class="axis x" transform="translate(40, 120)"></g>
<option value="10">10 ms</option> <g class="axis y" transform="translate(40, 10)"></g>
<option value="20">20 ms</option> </svg>
<option value="30">30 ms</option> <div class="plot_control">
<option value="40">40 ms</option> <div class="title" i18n="sensorsMagTitle"></div>
<option value="50" selected="selected">50 ms</option> <dl>
<option value="100">100 ms</option> <dt i18n="sensorsRefresh"></dt>
<option value="250">250 ms</option> <dd class="rate">
<option value="500">500 ms</option> <select name="mag_refresh_rate">
<option value="1000">1000 ms</option> <option value="10">10 ms</option>
</select> <option value="20">20 ms</option>
</dd> <option value="30">30 ms</option>
<dt i18n="sensorsScale"></dt> <option value="40">40 ms</option>
<dd class="scale"> <option value="50" selected="selected">50 ms</option>
<select name="mag_scale"> <option value="100">100 ms</option>
<option value="100">100</option> <option value="250">250 ms</option>
<option value="200">200</option> <option value="500">500 ms</option>
<option value="500">500</option> <option value="1000">1000 ms</option>
<option value="1000">1000</option> </select>
<option value="2000" selected="selected">2000</option> </dd>
<option value="5000">5000</option> <dt i18n="sensorsScale"></dt>
<option value="10000">10000</option> <dd class="scale">
</select> <select name="mag_scale">
</dd> <option value="100">100</option>
<dt>X:</dt> <option value="200">200</option>
<dd class="x">0</dd> <option value="500">500</option>
<dt>Y:</dt> <option value="1000">1000</option>
<dd class="y">0</dd> <option value="2000" selected="selected">2000</option>
<dt>Z:</dt> <option value="5000">5000</option>
<dd class="z">0</dd> <option value="10000">10000</option>
</dl> </select>
</dd>
<dt>X:</dt>
<dd class="x">0</dd>
<dt>Y:</dt>
<dd class="y">0</dd>
<dt>Z:</dt>
<dd class="z">0</dd>
</dl>
</div>
</div> </div>
<svg id="mag">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
<div class="clear-both"></div>
</div> </div>
</div> </div>
<div class="wrapper altitude"> <div class="wrapper altitude">
<div class="gui_box grey"> <div class="gui_box grey">
<div class="plot_control"> <div class="graph-grid">
<div class="title"> <svg id="altitude">
<span i18n="sensorsAltitudeTitle"></span> <g class="grid x" transform="translate(40, 120)"></g>
<div id="sensorsAltitudeHint" class="helpicon cf_tip" i18n_title="sensorsAltitudeHint"></div> <g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
<div class="plot_control">
<div class="title">
<span i18n="sensorsAltitudeTitle"></span>
<div id="sensorsAltitudeHint" class="helpicon cf_tip" i18n_title="sensorsAltitudeHint"></div>
</div>
<dl>
<dt i18n="sensorsRefresh"></dt>
<dd class="rate">
<select name="altitude_refresh_rate">
<option value="10">10 ms</option>
<option value="20">20 ms</option>
<option value="30">30 ms</option>
<option value="40">40 ms</option>
<option value="50">50 ms</option>
<option value="100" selected="selected">100 ms</option>
<option value="250">250 ms</option>
<option value="500">500 ms</option>
<option value="1000">1000 ms</option>
</select>
</dd>
<dt>X:</dt>
<dd class="x">0</dd>
</dl>
</div> </div>
<dl>
<dt i18n="sensorsRefresh"></dt>
<dd class="rate">
<select name="altitude_refresh_rate">
<option value="10">10 ms</option>
<option value="20">20 ms</option>
<option value="30">30 ms</option>
<option value="40">40 ms</option>
<option value="50">50 ms</option>
<option value="100" selected="selected">100 ms</option>
<option value="250">250 ms</option>
<option value="500">500 ms</option>
<option value="1000">1000 ms</option>
</select>
</dd>
<dt>X:</dt>
<dd class="x">0</dd>
</dl>
</div> </div>
<svg id="altitude">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
<div class="clear-both"></div>
</div> </div>
</div> </div>
<div class="wrapper sonar"> <div class="wrapper sonar">
<div class="gui_box grey"> <div class="gui_box grey">
<div class="plot_control"> <div class="graph-grid">
<div class="title" i18n="sensorsSonarTitle"></div> <svg id="sonar">
<dl> <g class="grid x" transform="translate(40, 120)"></g>
<dt i18n="sensorsRefresh"></dt> <g class="grid y" transform="translate(40, 10)"></g>
<dd class="rate"> <g class="data" transform="translate(41, 10)"></g>
<select name="sonar_refresh_rate"> <g class="axis x" transform="translate(40, 120)"></g>
<option value="10">10 ms</option> <g class="axis y" transform="translate(40, 10)"></g>
<option value="20">20 ms</option> </svg>
<option value="30">30 ms</option> <div class="plot_control">
<option value="40">40 ms</option> <div class="title" i18n="sensorsSonarTitle"></div>
<option value="50">50 ms</option> <dl>
<option value="100" selected="selected">100 ms</option> <dt i18n="sensorsRefresh"></dt>
<option value="250">250 ms</option> <dd class="rate">
<option value="500">500 ms</option> <select name="sonar_refresh_rate">
<option value="1000">1000 ms</option> <option value="10">10 ms</option>
</select> <option value="20">20 ms</option>
</dd> <option value="30">30 ms</option>
<dt>X:</dt> <option value="40">40 ms</option>
<dd class="x">0</dd> <option value="50">50 ms</option>
</dl> <option value="100" selected="selected">100 ms</option>
<option value="250">250 ms</option>
<option value="500">500 ms</option>
<option value="1000">1000 ms</option>
</select>
</dd>
<dt>X:</dt>
<dd class="x">0</dd>
</dl>
</div>
</div> </div>
<svg id="sonar">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
<div class="clear-both"></div>
</div> </div>
</div> </div>
<div class="wrapper debug"> <div class="wrapper debug">
<div class="gui_box grey"> <div class="gui_box grey">
<div class="plot_control debug0"> <div class="graph-grid">
<div class="title"><span i18n="sensorsDebugTitle"></span> 0</div> <svg id="debug0">
<dl> <g class="grid x" transform="translate(40, 120)"></g>
<dt i18n="sensorsRefresh"></dt> <g class="grid y" transform="translate(40, 10)"></g>
<dd class="rate"> <g class="data" transform="translate(41, 10)"></g>
<select name="debug_refresh_rate"> <g class="axis x" transform="translate(40, 120)"></g>
<option value="10">10 ms</option> <g class="axis y" transform="translate(40, 10)"></g>
<option value="20">20 ms</option> </svg>
<option value="30">30 ms</option> <div class="plot_control debug0">
<option value="40">40 ms</option> <div class="title"><span i18n="sensorsDebugTitle"></span> 0</div>
<option value="50">50 ms</option> <dl>
<option value="100">100 ms</option> <dt i18n="sensorsRefresh"></dt>
<option value="250">250 ms</option> <dd class="rate">
<option value="500" selected="selected">500 ms</option> <select name="debug_refresh_rate">
<option value="1000">1000 ms</option> <option value="10">10 ms</option>
</select> <option value="20">20 ms</option>
</dd> <option value="30">30 ms</option>
<dt>X:</dt> <option value="40">40 ms</option>
<dd class="x">0</dd> <option value="50">50 ms</option>
</dl> <option value="100">100 ms</option>
<option value="250">250 ms</option>
<option value="500" selected="selected">500 ms</option>
<option value="1000">1000 ms</option>
</select>
</dd>
<dt>X:</dt>
<dd class="x">0</dd>
</dl>
</div>
<svg id="debug1">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
<div class="plot_control debug1">
<div class="title"><span i18n="sensorsDebugTitle"></span> 1</div>
<dl>
<dt>X:</dt>
<dd class="x">blue</dd>
</dl>
</div>
<svg id="debug2">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
<div class="plot_control debug2">
<div class="title"><span i18n="sensorsDebugTitle"></span> 2</div>
<dl>
<dt>X:</dt>
<dd class="x">0</dd>
</dl>
</div>
<svg id="debug3">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
<div class="plot_control debug3">
<div class="title"><span i18n="sensorsDebugTitle"></span> 3</div>
<dl>
<dt>X:</dt>
<dd class="x">0</dd>
</dl>
</div>
<svg id="debug4">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
<div class="plot_control debug4">
<div class="title"><span i18n="sensorsDebugTitle"></span> 4</div>
<dl>
<dt>X:</dt>
<dd class="x">0</dd>
</dl>
</div>
<svg id="debug5">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
<div class="plot_control debug5">
<div class="title"><span i18n="sensorsDebugTitle"></span> 5</div>
<dl>
<dt>X:</dt>
<dd class="x">0</dd>
</dl>
</div>
<svg id="debug6">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
<div class="plot_control debug6">
<div class="title"><span i18n="sensorsDebugTitle"></span> 6</div>
<dl>
<dt>X:</dt>
<dd class="x">0</dd>
</dl>
</div>
<svg id="debug7">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
<div class="plot_control debug7">
<div class="title"><span i18n="sensorsDebugTitle"></span> 7</div>
<dl>
<dt>X:</dt>
<dd class="x">0</dd>
</dl>
</div>
</div> </div>
<svg id="debug0">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
<div class="clear-both"></div>
<div class="plot_control debug1">
<div class="title"><span i18n="sensorsDebugTitle"></span> 1</div>
<dl>
<dt>X:</dt>
<dd class="x">blue</dd>
</dl>
</div>
<svg id="debug1">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
<div class="clear-both"></div>
<div class="plot_control debug2">
<div class="title"><span i18n="sensorsDebugTitle"></span> 2</div>
<dl>
<dt>X:</dt>
<dd class="x">0</dd>
</dl>
</div>
<svg id="debug2">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
<div class="clear-both"></div>
<div class="plot_control debug3">
<div class="title"><span i18n="sensorsDebugTitle"></span> 3</div>
<dl>
<dt>X:</dt>
<dd class="x">0</dd>
</dl>
</div>
<svg id="debug3">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
<div class="clear-both"></div>
<div class="plot_control debug4">
<div class="title"><span i18n="sensorsDebugTitle"></span> 4</div>
<dl>
<dt>X:</dt>
<dd class="x">0</dd>
</dl>
</div>
<svg id="debug4">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
<div class="clear-both"></div>
<div class="plot_control debug5">
<div class="title"><span i18n="sensorsDebugTitle"></span> 5</div>
<dl>
<dt>X:</dt>
<dd class="x">0</dd>
</dl>
</div>
<svg id="debug5">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
<div class="clear-both"></div>
<div class="plot_control debug6">
<div class="title"><span i18n="sensorsDebugTitle"></span> 6</div>
<dl>
<dt>X:</dt>
<dd class="x">0</dd>
</dl>
</div>
<svg id="debug6">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
<div class="clear-both"></div>
<div class="plot_control debug7">
<div class="title"><span i18n="sensorsDebugTitle"></span> 7</div>
<dl>
<dt>X:</dt>
<dd class="x">0</dd>
</dl>
</div>
<svg id="debug7">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
</div> </div>
</div> </div>
</div> </div>