From: Florian Eckert <fe@dev.tdt.de>
Date: Tue, 23 Apr 2024 13:38:54 +0000 (+0200)
Subject: luci-mod-dsl: add missing cbi-section css classes and cbi-section-descr
X-Git-Url: http://git.openwrt.org/?a=commitdiff_plain;ds=sidebyside;h=6c0b9a9abc5b251da100e30b91a1e56b7d99828c;p=project%2Fluci.git

luci-mod-dsl: add missing cbi-section css classes and cbi-section-descr

Signed-off-by: Florian Eckert <fe@dev.tdt.de>
---

diff --git a/modules/luci-mod-dsl/htdocs/luci-static/resources/view/status/dsl/spectrum.js b/modules/luci-mod-dsl/htdocs/luci-static/resources/view/status/dsl/spectrum.js
index 83884daa84..2d7c1ceb3f 100644
--- a/modules/luci-mod-dsl/htdocs/luci-static/resources/view/status/dsl/spectrum.js
+++ b/modules/luci-mod-dsl/htdocs/luci-static/resources/view/status/dsl/spectrum.js
@@ -20,37 +20,50 @@ return view.extend({
 	render: function(data) {
 		window.json = data[0];
 
-		var v = E([], [
+		var v = E('div', {'class': 'cbi-map'}, [
 			E('h2', {'style': "height: 40px"}, [ _('DSL line spectrum') ]),
-			E('p', {}, _('Graphs below show Signal-to-noise ratio, Bit allocation, Quiet line noise and Channel characteristics function (HLOG) per sub-carrier.')),
-			E('div', {'style': "height: 360px; width: 1024px"},
-				E('canvas', {
-					'id': 'dbChart',
-					'height': 360,
-					'width': 1024},
-					["chart"])
-			),
-			E('div', {'style': "height: 360px; width:1024px"},
-				E('canvas', {
-					'id': 'bitsChart',
-					'height': 360,
-					'width': 1024},
-					["chart2"])
-			),
-			E('div', {'style': "height: 360px; width:1024px"},
-				E('canvas', {
-					'id': 'qlnChart',
-					'height': 360,
-					'width': 1024},
-					["chart2"])
-			),
-			E('div', {'style': "height: 360px; width:1024px"},
-				E('canvas', {
-					'id': 'hlogChart',
-					'height': 360,
-					'width': 1024},
-					["chart2"])
+			E('div', {'class': 'cbi-map-descr'}, _('The following diagrams show graphically prepared DSL characteristics that are important for evaluating the DSL connection.')),
+
+			E('div', {'class': 'cbi-section'}, [
+				E('div', {'style': "height: 360px; width: 1024px"},
+					E('canvas', {
+						'id': 'dbChart',
+						'height': 360,
+						'width': 1024},
+						["chart"])
+				),
+				E('div', {'class': 'cbi-section-descr', 'style': 'text-align:center'}, _('The graph shows the signal to noise ratio (SNR) per subcarrier in the uplink and downlink direction')),
+			]),
+			E('div', {'class': 'cbi-section'}, [
+				E('div', {'style': "height: 360px; width:1024px"},
+					E('canvas', {
+						'id': 'bitsChart',
+						'height': 360,
+						'width': 1024},
+						["chart2"])
+				),
+				E('div', {'class': 'cbi-section-descr', 'style': 'text-align:center'}, _('The graph shows th amount of bits actually allocated per subcarrier in the uplink and downlink direction')),
+			]),
+			E('div', {'class': 'cbi-section'}, [
+				E('div', {'style': "height: 360px; width:1024px"},
+					E('canvas', {
+						'id': 'qlnChart',
+						'height': 360,
+						'width': 1024},
+						["chart2"])
+				),
+				E('div', {'class': 'cbi-section-descr', 'style': 'text-align:center'}, _('The diagram shows the quiet line noise (QLN) per subcarrier in uplink and downlink direction')),
+			]),
+			E('div', {'class': 'cbi-section'}, [
+				E('div', {'style': "height: 360px; width:1024px"},
+					E('canvas', {
+						'id': 'hlogChart',
+						'height': 360,
+						'width': 1024},
+						["chart2"])
 				),
+				E('div', {'class': 'cbi-section-descr', 'style': 'text-align:center'}, _('The diagram shows the Channel Characteristics Function (HLOG) per subcarrier in uplink and downlink direction')),
+			]),
 			E('script', {'src':'/luci-static/resources/view/status/dsl/graph.js'}, {})
 		]);