Merge pull request #7080 from TDT-AG/pr/20240423-luci-mod-dsl

luci-mod-dsl: improve view for the luci-theme-material

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'}, {})
 		]);
 

modules/luci-mod-dsl/htdocs/luci-static/resources/view/status/dsl/stats.js

@@ -59,7 +59,7 @@ return view.extend({
 			]));
 		}
 
-		return table;
+		return E('div', { 'class': 'cbi-section' }, table);
 	},
 
 	renderTable: function(data) {
@@ -80,7 +80,7 @@ return view.extend({
 			]));
 		}
 
-		return table;
+		return E('div', { 'class': 'cbi-section' }, table);
 	},
 
 	renderContent: function(data) {