backoffice: use gadjo sections (#21829)

tests/test_backoffice_pages.py

@@ -2893,11 +2893,11 @@ def test_backoffice_resume_folded(pub):
 
     # first access: summary is not folded
     resp = app.get('/backoffice/management/form-title/%s/' % number31.id)
-    assert '<h2 class="foldable">Summary</h2>' in resp.body
+    assert '<div class="section foldable" id="summary">' in resp.body
     # do something: summary is folded
     resp = resp.form.submit('button_commentable')
     resp = resp.follow()
-    assert '<h2 class="foldable folded">Summary</h2>' in resp.body
+    assert '<div class="section foldable folded" id="summary">' in resp.body
 
 def test_backoffice_backoffice_submission_in_listings(pub):
     create_superuser(pub)

wcs/admin/settings.py

@@ -401,14 +401,14 @@ class SettingsDirectory(QommonSettingsDirectory):
         r += htmltext('<div class="splitcontent-left">')
 
         if get_publisher().has_site_option('postgresql') or get_cfg('postgresql', {}):
-            r += htmltext('<div class="bo-block">')
+            r += htmltext('<div class="section">')
             r += htmltext('<h2>%s</h2>') % _('Storage')
             r += htmltext('<dl> <dt><a href="postgresql">%s</a></dt> <dd>%s</dd> </dl>') % (
                             _('PostgreSQL Settings'),
                             _('Configure access to PostgreSQL database'))
             r += htmltext('</div>')
 
-        r += htmltext('<div class="bo-block">')
+        r += htmltext('<div class="section">')
         r += htmltext('<h2>%s</h2>') % _('Security')
 
         r += htmltext('<dl> <dt><a href="identification/">%s</a></dt> <dd>%s</dd>') % (
@@ -434,7 +434,7 @@ class SettingsDirectory(QommonSettingsDirectory):
 
         r += htmltext('</dl></div>')
 
-        r += htmltext('<div class="bo-block">')
+        r += htmltext('<div class="section">')
         r += htmltext('<h2>%s</h2>') % _('Import / Export')
 
         r += htmltext('<dl>')
@@ -445,7 +445,7 @@ class SettingsDirectory(QommonSettingsDirectory):
         r += htmltext('</dl>')
         r += htmltext('</div>')
 
-        r += htmltext('<div class="bo-block">')
+        r += htmltext('<div class="section">')
         r += htmltext('<h2>%s</h2>') % _('Misc')
         r += htmltext('<dl>')
         r += htmltext('<dt><a href="misc">%s</a></dt> <dd>%s</dd>') % (
@@ -462,8 +462,9 @@ class SettingsDirectory(QommonSettingsDirectory):
         r += htmltext('</div>')
 
         r += htmltext('<div class="splitcontent-right">')
-        r += htmltext('<div class="bo-block">')
+        r += htmltext('<div class="section">')
         r += htmltext('<h2>%s</h2>') % _('Customisation')
+        r += htmltext('<div>')
 
         if not get_cfg('misc', {}).get('charset'):
             r += htmltext('<div class="infonotice">')
@@ -504,6 +505,7 @@ class SettingsDirectory(QommonSettingsDirectory):
                     _('Webservice calls'), _('Configure webservice calls'))
         r += htmltext('</dl>')
         r += htmltext('</div>')
+        r += htmltext('</div>')
 
         r += htmltext('</div>')
         return r.getvalue()

wcs/forms/common.py

@@ -289,12 +289,11 @@ class FormStatusPage(Directory):
                 break
 
         r = TemplateIO(html=True)
-        r += htmltext('<div class="bo-block" id="summary">')
         klasses = 'foldable'
         if folded:
             klasses += ' folded'
-        r += htmltext('<h2 class="%s">' % klasses)
-        r += htmltext('%s</h2>') % _('Summary')
+        r += htmltext('<div class="section %s" id="summary">' % klasses)
+        r += htmltext('<h2>%s</h2>') % _('Summary')
         r += htmltext('<div class="dataview">')
 
         if user:
@@ -311,7 +310,7 @@ class FormStatusPage(Directory):
                 r += htmltext('<span class="value">%s</span></div>') % wf_status.name
 
         r += htmltext('</div>') # .dataview
-        r += htmltext('</div>') # .bo-block
+        r += htmltext('</div>') # .section
 
         return r.getvalue()
 
@@ -400,8 +399,8 @@ class FormStatusPage(Directory):
         if not len(content):
             return
         r = TemplateIO(html=True)
-        r += htmltext('<div class="bo-block">')
-        r += htmltext('<h2 class="foldable">%s</h2>') % _('Backoffice Data')
+        r += htmltext('<div class="section foldable">')
+        r += htmltext('<h2>%s</h2>') % _('Backoffice Data')
         r += htmltext('<div class="dataview">')
         r += content
         r += htmltext('</div>')

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

@@ -957,11 +957,11 @@ svg #current_status polygon {
 	stroke-width: 2px;
 }
 
-.foldable {
+h4.foldable {
 	cursor: pointer;
 }
 
-.foldable:after {
+h4.foldable:after {
 	content: "▼";
 	font-size: 80%;
 	text-align: right;
@@ -969,7 +969,7 @@ svg #current_status polygon {
 	transition: transform ease 0.1s;
 }
 
-.foldable.folded:after {
+h4.foldable.folded:after {
 	transform: rotate(-90deg);
 }
 
@@ -1559,6 +1559,10 @@ ul#evolutions li div.msg li::after {
 	content: none;
 }
 
+div.section > dl {
+	padding-bottom: 0;
+}
+
 div.bo-block.data-source-preview ul {
 	margin: 0;
 	padding: 0;

wcs/qommon/static/js/qommon.admin.js

@@ -1,9 +1,11 @@
 $(function() {
-    $('.foldable').click(function() {
-       $(this).toggleClass('folded').next().toggle();
-       $(this).next().find('.qommon-map').trigger('qommon:invalidate');
+    $('.section.foldable > h2').click(function() {
+       $(this).parent().find('.qommon-map').trigger('qommon:invalidate');
     });
-    $('.foldable.folded').next().hide();
+    $('h4.foldable').click(function() {
+       $(this).toggleClass('folded').next().toggle();
+    });
+    $('h4.foldable.folded').next().hide();
 
     /* insert variable code in textarea when clicking on them */
     $('#substvars td:nth-child(2)').css('cursor', 'pointer').click(function() {

wcs/templates/wcs/formdata_history.html

@@ -1,6 +1,7 @@
 {% load i18n %}
-<div class="bo-block" id="evolution-log">
- <h2 class="foldable">{% trans "Log" %}</h2>
+<div class="section foldable" id="evolution-log">
+ <h2>{% trans "Log" %}</h2>
+ <div>
  <ul id="evolutions">
   {% for evolution in formdata.get_visible_evolution_parts %}
     {% with status=evolution.get_status display_parts=evolution.display_parts %}
@@ -38,4 +39,5 @@
     {% endwith %}
   {% endfor %}
  </ul>
+ </div>
 </div>