admin: style data source page with sections (#45796)

wcs/admin/data_sources.py

@@ -187,8 +187,6 @@ class NamedDataSourcePage(Directory):
         if not items:
             return ''
         r = TemplateIO(html=True)
-        r += htmltext('<h3>%s</h3>') % _('Preview (first items only)')
-        r += htmltext('<div class="bo-block data-source-preview">')
         r += htmltext('<ul>')
         additional_keys = set()
         for item in items[:10]:
@@ -211,7 +209,6 @@ class NamedDataSourcePage(Directory):
         if additional_keys:
             r += htmltext('<p>%s %s</p>') % (_('Additional keys are available:'),
                     ', '.join(sorted(additional_keys)))
-        r += htmltext('</div>')
         return r.getvalue()
 
     def edit(self):

wcs/qommon/static/css/dc2/admin.css

@@ -1746,17 +1746,17 @@ div.section > dl {
 	padding-bottom: 0;
 }
 
-div.bo-block.data-source-preview ul {
+div.data-source-preview ul {
 	margin: 0;
 	padding: 0;
 	padding-left: 1em;
 }
 
-div.bo-block.data-source-preview ul li {
+div.data-source-preview ul li {
 	margin: 1ex 0;
 }
 
-div.bo-block.data-source-preview tt {
+div.data-source-preview tt {
 	padding-right: 1ex;
 }
 

wcs/templates/wcs/backoffice/data-sources.html

@@ -15,6 +15,7 @@
 {% endif %}
 
 {% if datasource.data_source %}
+<div class="section">
 <h3>{% trans "Configuration" %}</h3>
 <ul>
   <li>{% trans "Type of source:" %} {{ datasource.type_label }}</li>
@@ -27,16 +28,29 @@
   <li>{% trans "Cache Duration:" %} {{ datasource.humanized_cache_duration }}
   {% endif %}
 </ul>
-{{ view.preview_block|safe }}
+</div>
+
+{% with preview_block=view.preview_block %}
+{% if preview_block %}
+  <div class="section">
+  <h3>{% trans "Preview (first items only)" %}</h3>
+  <div class="data-source-preview">
+  {{ view.preview_block|safe }}
+  </div>
+  </div>
+{% endif %}
+{% endwith %}
 
 {% with formdefs=view.usage_in_formdefs %}
   {% if formdefs %}
+  <div class="section">
   <h3>{% trans "Usage in forms" %}</h3>
-  <ul class="biglist">
+  <ul class="objects-list single-links">
   {% for formdef in formdefs %}
     <li><a href="{{ formdef.get_admin_url }}">{{ formdef.name }}</a></li>
   {% endfor %}
   </ul>
+  </div>
   {% endif %}
 {% endwith %}