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 83884daa84729aeb72aa9d5779b5027c985365b1..2d7c1ceb3f3a9a7357b64c3acba6bce22d06464a 100644 (file)
--- 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'}, {})
                ]);