about_sys.html revision 21d179b334e59e9a3bfcaed4c4430bef1bc5759d 
1<!DOCTYPE HTML>
2<html i18n-values="dir:textdirection;"><head>
3<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4<title i18n-content="title"></title>
5
6<style>
7body {
8  font-size: 84%;
9  font-family: Arial, Helvetica, sans-serif;
10  padding: 0.75em;
11  margin: 0;
12  min-width: 45em;
13}
14
15h1, h2 {
16 font-size: 120%;
17 letter-spacing: -1px;
18 margin: 0;
19}
20
21h1 {
22  font-weight: bold;
23  color: #4a8ee6;
24  padding: 0;
25}
26
27h2 {
28  font-weight: normal;
29  padding: 0.5em 1em;
30  color: #3a75bd;
31  -webkit-margin-start: -38px;
32  -webkit-padding-start: 38px;
33  border-top: 1px solid #3a75bd;
34  padding-top: 0.5em;
35}
36
37h2:first-child {
38  border-top: 0;
39  padding-top: 0;
40  float: left;
41  vertical-align: text-bottom;
42}
43
44#header {
45  padding: 0.6em 1em 0.75em 0;
46  margin-bottom: 0.75em;
47  position: relative;
48  overflow: hidden;
49  background: #5296de;
50  background-size: 100%;
51  border: 1px solid #3a75bd;
52  border-radius: 6px;
53  color: white;
54  text-shadow: 0 0 2px black;
55}
56
57html[dir='rtl'] #header {
58  padding: 0.6em 0 0.75em 1em;
59}
60
61#header h1 {
62  -webkit-padding-start: 3em;
63  margin: 0;
64  display: inline;
65  background: url('shared/images/gear.png') no-repeat;
66  background-position: 12px 60%;
67  color: white;
68}
69
70html[dir='rtl'] #header h1 {
71  background-position-left: auto;
72  backgroun-position-right: 12px;
73}
74
75#header p {
76  font-size: 84%;
77  font-style: italic;
78  padding: 0;
79  margin: 0;
80  color: white;
81  -webkit-padding-start: 0.4em;
82  display: inline;
83}
84
85.list {
86  line-height: 200%;
87  border-collapse: collapse;
88  font-size: 84%;
89  table-layout: fixed;
90  width: 100%;
91}
92.list:not(.filtered) tr:nth-child(odd) td {
93  background: #eff3ff;
94}
95
96.list td {
97  padding: 0 0.5em;
98  vertical-align: top;
99  line-height: 1.4em;
100  padding-top: 0.35em;
101  font-family: 'Courier New', monospace;
102  white-space: pre;
103}
104
105.list tr td:nth-last-child(1),
106.list tr th:nth-last-child(1) {
107  -webkit-padding-end: 1em;
108}
109
110.list:not(.filtered) .tab .name {
111  -webkit-padding-start: 1.5em;
112}
113
114.list .name {
115  width: 20%;
116}
117
118.list .button_cell {
119  width: 7%;
120}
121
122.list .name div {
123  height: 1.6em;
124  overflow: hidden;
125  white-space: nowrap;
126  text-overflow: ellipsis;
127}
128
129.button_hidden {
130  display: none;
131}
132
133.number_expanded, .number_collapsed  {
134  text-align: left;
135  width: 80%;
136}
137
138html[dir='rtl'] .number_expanded, html[dir='rtl'] .number_collapsed  {
139  text-align: right;
140}
141
142tr:not(.firstRow) > *:nth-child(1),
143tr:not(.firstRow) > *:nth-child(2),
144tr.firstRow th:nth-child(1),
145tr.firstRow th:nth-child(2) {
146  -webkit-border-end: 1px solid #b5c6de;
147}
148
149.name {
150  background-position: 5em center;
151  background-repeat: no-repeat;
152}
153
154html[dir='rtl'] #details .name {
155  background-position-left: auto;
156  background-position-right: 5em;
157}
158
159.number_collapsed .stat_value {
160  display: none;
161}
162
163.number_expanded .stat_value {
164  display: auto;
165}
166
167#anchor {
168  display: none;
169}
170
171.globalButton {
172  float: left;
173  margin: 1px 5px;
174}
175
176html[dir='rtl'] .globalButton {
177  float: right;
178}
179</style>
180<script src="shared/js/local_strings.js"></script>
181<script>
182var localStrings;
183
184function getValueDivForButton(button) {
185  return document.getElementById(button.id.substr(0, button.id.length - 4));
186}
187
188function getButtonForValueDiv(valueDiv) {
189  return document.getElementById(valueDiv.id + '-btn');
190}
191
192function changeCollapsedStatus() {
193  var valueDiv = getValueDivForButton(this);
194  if (valueDiv.parentNode.className == 'number_collapsed') {
195    valueDiv.parentNode.className = 'number_expanded';
196    this.textContent = localStrings.getString('collapse_btn');
197  } else {
198    valueDiv.parentNode.className = 'number_collapsed';
199    this.textContent = localStrings.getString('expand_btn');
200  }
201}
202
203function collapseAll() {
204  var valueDivs = document.getElementsByClassName('stat_value');
205  for(var i = 0; i < valueDivs.length; i++) {
206    var button = getButtonForValueDiv(valueDivs[i]);
207    if (button && button.className != 'button_hidden') {
208      button.textContent = localStrings.getString('expand_btn');
209      valueDivs[i].parentNode.className = 'number_collapsed';
210    }
211  }
212}
213
214function expandAll() {
215  var valueDivs = document.getElementsByClassName('stat_value');
216  for(var i = 0; i < valueDivs.length; i++) {
217    var button = getButtonForValueDiv(valueDivs[i]);
218    if (button && button.className != 'button_hidden') {
219      button.textContent = localStrings.getString('collapse_btn');
220      valueDivs[i].parentNode.className = 'number_expanded';
221    }
222  }
223}
224
225document.addEventListener('DOMContentLoaded', function() {
226  localStrings = new LocalStrings();    
227    
228  var collapseAllBtn = document.getElementById('collapseAll');
229  collapseAllBtn.onclick = collapseAll;
230  
231  var expandAllBtn = document.getElementById('expandAll');
232  expandAllBtn.onclick = expandAll;
233  
234  var anchorName = document.getElementById('anchor').textContent;
235  var valueDivs = document.getElementsByClassName('stat_value');
236  for(var i = 0; i < valueDivs.length; i++) {
237    var button = getButtonForValueDiv(valueDivs[i]);
238    button.onclick = changeCollapsedStatus;
239    if (valueDivs[i].textContent.split('\n').length > 1) {
240      button.textContent = localStrings.getString('expand_btn');
241      valueDivs[i].parentNode.className = 'number_collapsed';
242    } else {
243      button.className = 'button_hidden';
244    }
245  }    
246});
247</script>
248
249</head>
250<body id="t">
251  <div id="header">
252    <h1 i18n-content="title"></h1>
253    <p i18n-content="description"></p>
254  </div>
255  <div id="content">
256    <h2 i18n-content="table_title"></h2>
257    <div id="anchor" jscontent="anchor"></div>
258    <button id="expandAll" class="globalButton" i18n-content="expand_all_btn">
259    </button>
260    <button id="collapseAll" class="globalButton" 
261        i18n-content="collapse_all_btn"></button>
262    <table class="list" id="details">
263      <tr jsselect="details">
264        <td class="name"><a jsvalues="name:anchor_value"><div
265            jscontent="stat_name"></div></a></td>
266        <td class="button_cell"><button jsvalues="id:stat_name + '-value-btn'"
267            class="expand_status"></button></td>
268        <td class="number"><div class="stat_value" jscontent="stat_value"
269            jsvalues="id:stat_name + '-value'"></div></td>
270      </tr>
271    </table>
272  </div>
273</body>
274</html>
275