Merge pull request #1403 from chris34/summary-details

Use HTML `<summary>` and `<details>` instead of own JS collapse

Author: chris34

inyoka/forum/jinja2/forum/edit.html

@@ -94,8 +94,10 @@ <h2>{% trans forum=forum.name|e %}New topic in “{{ forum }}”{% endtrans %}</
         <dd class="license_note">{{ storage['license_note_rendered'] }}</dd>
       {%- endif %}
       <dd style="display: none"><input type="submit" value="Absenden" name="send"></dd>
+
       {%- if (isnewtopic or isfirstpost) and can_create_poll %}
-        <dt class="collapse{% if poll_form.errors %} has_errors{% endif %}">Umfragen:</dt>
+        <details {% if poll_form.errors or polls %}open{% endif %}>
+        <summary>{% trans %}Polls{% endtrans %}</summary>
         {%- if polls %}
           <dd>{% trans %}Existing polls:{% endtrans %}
             <ul>
@@ -120,9 +122,12 @@ <h2>{% trans forum=forum.name|e %}New topic in “{{ forum }}”{% endtrans %}</
         <dd>{% trans duration=poll_form.duration %}Duration of the poll: {{ duration }} days{% endtrans %} {{ poll_form.duration.errors }}</dd>
         <dd class="note">{% trans %}Leave that feel empty for an endless duration{% endtrans %}</dd>
         <dd><input type="submit" name="add_poll" value="{% trans %}Add poll{% endtrans %}"></dd>
+        </details>
       {%- endif %}
+
       {%- if can_attach %}
-      <dt class="collapse{% if attach_form.errors %} has_errors{% endif %}">{% trans %}Attachments:{% endtrans %}</dt>
+      <details {% if attach_form.errors or attachments %}open{% endif %}>
+       <summary>{% trans %}Attachments{% endtrans %}</summary>
       <dd>
         {%- if attachments %}
           <ul>
@@ -144,9 +149,10 @@ <h2>{% trans forum=forum.name|e %}New topic in “{{ forum }}”{% endtrans %}</
           Overwrite existing attachment with the same name.{%- endtrans %}</label></p>
         <p><input type="submit" value="{% trans %}upload attachment{% endtrans %}" name="attach"></p>
       </dd>
+        </details>
       {%- endif %}
+
       {%- if can_sticky and (isnewtopic or isfirstpost) %}
-      <dt>Optionen:</dt>
       <dd>{{ form.sticky }} <label for="id_sticky">{% trans %}Mark topic as “Important:”{% endtrans %}</label></dd>
       {%- endif %}
     </dl>

inyoka/static/img/collapsed.png

@@ -8,25 +8,7 @@
  * :license: BSD, see LICENSE for more details.
  */
 
-$(function () { /* collapsable elements for the input forms */
-  $('dt.collapse').each(function () {
-    $(this).nextWhile('dd').addClass('collapse_enabled').toggle($(this).hasClass('has_errors'));
-    $(this).click(function () {
-      $(this).toggleClass('collapsed').nextWhile('dd').toggle();
-    }).addClass('collapse_enabled collapsed');
-  });
-
-  /* poll helpers */
-  (function () {
-    $('#id_add_option').click(function addReply() {
-      count = $('.newtopic_polls_replies').length;
-      $($('.newtopic_polls_replies')[count - 1]).after('<dd class="newtopic_polls_replies collapse_enabled">Antwort ' + (count + 1) + ': <input type="text" name="options" value="" /></dd>');
-      $('#id_add_option').remove();
-      $($('.newtopic_polls_replies')[count]).append(' <input type="submit" name="add_option" value="Weitere Antwort" ' + 'id="id_add_option" />');
-      $('#id_add_option').click(addReply);
-      return false;
-    });
-  })();
+$(function () {
 
   /* expand and collapse button for categories */
   (function () {

inyoka/static/img/expanded.png

@@ -471,22 +471,10 @@ form.post_editor {
       height: 250px;
     }
   }
-  dt.collapse_enabled {
+
+  summary {
     cursor: pointer;
-    padding-left: 20px;
-    background: #eee url(../img/expanded.png) no-repeat 4px center;
-    border: 1px solid #ccc;
-  }
-  dt.collapse_enabled:hover {
-    background-color: #f2f2f2;
-  }
-  dt.collapsed {
-    background: white url(../img/collapsed.png) no-repeat 0 center;
-    border: 1px solid white;
-  }
-  dd.collapse_enabled {
-    margin: 0;
-    padding: 5px 10px 10px 10px;
+    font-weight: bold;
   }
 }