|
31 | 31 | } |
32 | 32 | .toggle-button { |
33 | 33 | display: inline-block; |
34 | | - background: url("/bundles/framework/images/toggler.png") no-repeat top left; |
| 34 | + background: url("/bundles/framework/images/toggler.png") no-repeat top left #ccc; |
35 | 35 | } |
36 | 36 | .toggle-button.closed { |
37 | 37 | background-position: bottom left; |
38 | 38 | } |
| 39 | + .toggle-button.empty { |
| 40 | + background-image: url("/bundles/framework/images/toggler_empty.png"); |
| 41 | + } |
39 | 42 | .tree { |
40 | 43 | width: 230px; |
41 | 44 | padding: 10px; |
|
75 | 78 | top: 50%; |
76 | 79 | margin-top: -5px; |
77 | 80 | margin-left: -15px; |
78 | | - } |
79 | | - .tree a.toggle-button { |
80 | 81 | background-size: 10px 20px; |
81 | 82 | } |
82 | | - .tree img.toggle-button { |
83 | | - background: none; |
| 83 | + .tree .toggle-button.empty { |
| 84 | + background-size: 10px 10px; |
84 | 85 | } |
85 | 86 | .tree ul ul .tree-inner { |
86 | 87 | padding-left: 37px; |
|
102 | 103 | font-weight: bold; |
103 | 104 | color: #313131; |
104 | 105 | } |
| 106 | + .tree .tree-inner.active .toggle-button, .tree .tree-inner:hover .toggle-button, .tree .tree-inner.active:hover .toggle-button { |
| 107 | + background-image: url("/bundles/framework/images/toggler_hover.png"); |
| 108 | + background-color: #aaa; |
| 109 | + } |
| 110 | + .tree .tree-inner.active .toggle-button.empty, .tree .tree-inner:hover .toggle-button.empty, .tree .tree-inner.active:hover .toggle-button.empty { |
| 111 | + background-image: url("/bundles/framework/images/toggler_hover_empty.png"); |
| 112 | + } |
105 | 113 | .tree-details { |
106 | 114 | border-left: 1px solid #dfdfdf; |
107 | 115 | background: white; |
|
133 | 141 | color: #fff; |
134 | 142 | padding: 1px 4px; |
135 | 143 | font-size: 10px; |
| 144 | + font-weight: bold; |
136 | 145 | vertical-align: middle; |
137 | 146 | border-radius: 6px; |
138 | 147 | } |
139 | | - .table-error th { |
| 148 | + .errors h3 { |
| 149 | + color: #800; |
| 150 | + } |
| 151 | + .errors th, .errors td { |
| 152 | + border: 1px solid #800; |
| 153 | + } |
| 154 | + .errors th { |
140 | 155 | background: #a33; |
141 | 156 | color: #fff; |
142 | 157 | } |
| 158 | + .errors .toggle-button { |
| 159 | + background-color: #a33; |
| 160 | + } |
143 | 161 | </style> |
144 | 162 |
|
145 | 163 | {% if collector.data.forms|length %} |
|
308 | 326 | {% if data.children is not empty %} |
309 | 327 | <a class="toggle-button" data-toggle-target-id="{{ data.id }}-children" href="#"></a> |
310 | 328 | {% else %} |
311 | | - <img class="toggle-button" src="{{ asset('bundles/framework/images/toggler_empty.png') }}"> |
| 329 | + <div class="toggle-button empty"></div> |
312 | 330 | {% endif %} |
313 | 331 | {{ name }} |
314 | 332 | {% if data.errors is defined and data.errors|length > 0 %} |
|
336 | 354 | </h2> |
337 | 355 |
|
338 | 356 | {% if data.errors is defined and data.errors|length > 0 %} |
339 | | - <h3>Errors</h3> |
340 | | - |
341 | | - <table class="table-error"> |
342 | | - <tr> |
343 | | - <th width="50%">Message</th> |
344 | | - <th>Cause</th> |
345 | | - </tr> |
346 | | - {% for error in data.errors %} |
347 | | - <tr> |
348 | | - <td>{{ error.message }}</td> |
349 | | - <td><em>Unknown.</em></td> |
350 | | - </tr> |
351 | | - {% endfor %} |
352 | | - </table> |
| 357 | + <div class="errors"> |
| 358 | + <h3> |
| 359 | + <a class="toggle-button" data-toggle-target-id="{{ data.id }}-errors" href="#"></a> |
| 360 | + Errors |
| 361 | + </h3> |
| 362 | + |
| 363 | + <table id="{{ data.id }}-errors"> |
| 364 | + <tr> |
| 365 | + <th width="50%">Message</th> |
| 366 | + <th>Cause</th> |
| 367 | + </tr> |
| 368 | + {% for error in data.errors %} |
| 369 | + <tr> |
| 370 | + <td>{{ error.message }}</td> |
| 371 | + <td><em>Unknown.</em></td> |
| 372 | + </tr> |
| 373 | + {% endfor %} |
| 374 | + </table> |
| 375 | + </div> |
353 | 376 | {% endif %} |
354 | 377 |
|
355 | 378 | {% if data.default_data is defined %} |
|
0 commit comments