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;
}
}
.graph-grid {
width: 100%;
display: grid;
gap: 1rem;
grid-template-columns: auto max-content;
}
@media not all and (max-width: 575px) {
.visible-on-phone-only {
display: none !important;

144
src/tabs/sensors.html
View file

@ -18,8 +18,17 @@
</div>
</div>
</div>
<div class="wrapper gyro">
<div class="gui_box grey">
<div class="graph-grid">
<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="plot_control">
<div class="title" i18n="sensorsGyroTitle"></div>
<dl>
@ -65,18 +74,21 @@
<dd class="z">0</dd>
</dl>
</div>
<svg id="gyro">
</div>
</div>
</div>
<div class="wrapper accel">
<div class="gui_box grey">
<div class="graph-grid">
<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 class="wrapper accel">
<div class="gui_box grey">
<div class="plot_control">
<div class="title" i18n="sensorsAccelTitle"></div>
<dl>
@ -110,19 +122,20 @@
<dd class="z">0</dd>
</dl>
</div>
<svg id="accel">
</div>
</div>
</div>
<div class="wrapper mag">
<div class="gui_box grey">
<div class="graph-grid">
<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 class="wrapper mag">
<div class="gui_box grey">
<div class="plot_control">
<div class="title" i18n="sensorsMagTitle"></div>
<dl>
@ -160,18 +173,20 @@
<dd class="z">0</dd>
</dl>
</div>
<svg id="mag">
</div>
</div>
</div>
<div class="wrapper altitude">
<div class="gui_box grey">
<div class="graph-grid">
<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 class="wrapper altitude">
<div class="gui_box grey">
<div class="plot_control">
<div class="title">
<span i18n="sensorsAltitudeTitle"></span>
@ -196,19 +211,19 @@
<dd class="x">0</dd>
</dl>
</div>
<svg id="altitude">
</div>
</div>
</div>
<div class="wrapper sonar">
<div class="gui_box grey">
<div class="graph-grid">
<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 class="wrapper sonar">
<div class="gui_box grey">
<div class="plot_control">
<div class="title" i18n="sensorsSonarTitle"></div>
<dl>
@ -230,19 +245,20 @@
<dd class="x">0</dd>
</dl>
</div>
<svg id="sonar">
</div>
</div>
</div>
<div class="wrapper debug">
<div class="gui_box grey">
<div class="graph-grid">
<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>
</div>
<div class="wrapper debug">
<div class="gui_box grey">
<div class="plot_control debug0">
<div class="title"><span i18n="sensorsDebugTitle"></span> 0</div>
<dl>
@ -264,21 +280,7 @@
<dd class="x">0</dd>
</dl>
</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>
@ -286,14 +288,14 @@
<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>
<div class="plot_control debug1">
<div class="title"><span i18n="sensorsDebugTitle"></span> 1</div>
<dl>
<dt>X:</dt>
<dd class="x">0</dd>
<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>
@ -301,14 +303,14 @@
<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>
<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>
@ -316,14 +318,14 @@
<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>
<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>
@ -331,14 +333,14 @@
<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>
<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>
@ -346,14 +348,14 @@
<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>
<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>
@ -361,14 +363,14 @@
<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>
<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>
@ -376,6 +378,14 @@
<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>
</div>
</div>