Use bootstrap accordion in admin interface

Avoid conflicts with jquery-ui

diff --git a/template/confsponsor/admin_sponsor.html b/template/confsponsor/admin_sponsor.html
index aaadde5fb0b406cbb6eb17b89e56a6d8d61a893b..a6ae60f5497a11faa93b9cfc4e1203664e594ec0 100644 (file)
--- a/template/confsponsor/admin_sponsor.html
+++ b/template/confsponsor/admin_sponsor.html
@@ -2,24 +2,14 @@
 {%load markup%}
 {%block title%}Conference Sponsorship - {{sponsor}}{%endblock%}
 {%block extrahead%}
-<link rel="stylesheet" href="/media/jq/jquery-ui.min.css" />
-<script type="text/javascript" src="/media/jq/jquery-ui.min.js"></script>
 <script type="text/javascript">
   function confirmConfirm() {
     return confirm('Are you sure you want to confirm this sponsor?\n\nThis should *only* be done if the sponsor contract is both signed and countersigned!');
   }
-
-  $(function() {
-    $(".benefit_list").accordion({
-      collapsible: true,
-      active: false,
-      animate: false,
-    });
-  });
 </script>
 <style>
-div.benefit_list div {
-   height: auto !important;
+div.panelwrap {
+   padding: 10px;
 }
 </style>
 {%endblock%}
@@ -89,26 +79,35 @@ div.benefit_list div {
 
 <h2>Claimed benefits</h2>
 {%if claimedbenefits%}
-<div class="benefit_list">
+<div class="panel-group" id="claimedbenefits" role="tablist" role="tablist" aria-multiselectable="true">
 {%for b in claimedbenefits%}
-<h2>{{b.benefit}}{%if not b.confirmed%} <i>NOT CONFIRMED</i>{%endif%}{%if b.declined%} <b>DECLINED!</b>{%endif%}</h2>
-<div>
-  {{b.declined|yesno:"Declined,Claimed"}} by <i>{{b.claimedby}}</i> on <i>{{b.claimedat}}</i><br/>
-  <p>{{b.benefit.benefitdescription|markdown}}</p>
+  <div class="panel panel-default">
+    <div class="panel-heading" role="tab" id="claimed_h_{{b.id}}">
+      <h4 class="panel-title">
+       <a class="collapsed" role="button" data-toggle="collapse" data-parent="#claimedbenefits" href="#claimed_{{b.id}}" aria-expanded="false" aria-controls="claimed_{{b.id}}">{{b.benefit}}{%if not b.confirmed%} <i>NOT CONFIRMED</i>{%endif%}{%if b.declined%} <b>DECLINED!</b>{%endif%}</a>
+      </h4>
+    </div>
+    <div id="claimed_{{b.id}}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="claimed_h_{{b.id}}">
+      <div class="panelwrap">
+      {{b.declined|yesno:"Declined,Claimed"}} by <i>{{b.claimedby}}</i> on <i>{{b.claimedat}}</i><br/>
+      {{b.benefit.benefitdescription|markdown}}
 {%if b.claimhtml%}
-  <div style="border: 1px solid black">{{b.claimhtml|safe}}</div>
+      <div style="border: 1px solid black">{{b.claimhtml|safe}}</div>
 {%endif%}
+      <br/>
 {%if not b.confirmed%}
-<form method="post" action=".">{% csrf_token %}
-<input type="hidden" name="confirm" value="1">
-<input type="hidden" name="claimid" value="{{b.id}}">
-<input type="submit" class="btn btn-default" value="Confirm this benefit">
-</form>
+      <form method="post" action=".">{% csrf_token %}
+       <input type="hidden" name="confirm" value="1">
+       <input type="hidden" name="claimid" value="{{b.id}}">
+       <input type="submit" class="btn btn-default" value="Confirm this benefit">
+      </form>
 {%else%}
-<span class="label label-success">Confirmed</span>
+      <span class="label label-success">Confirmed</span>
 {%endif%}
-</div>
+      </div>
+    </div>
 {%endfor%}
+  </div>
 </div>
 {%else%}
 <p>There are no claimed benefits for this sponsor.</p>
@@ -116,12 +115,20 @@ div.benefit_list div {
 
 <h2>Pending benefits</h2>
 {%if unclaimedbenefits%}
-<div class="benefit_list">
+<div class="panel-group" id="unclaimedbenefits" role="tablist" role="tablist" aria-multiselectable="true">
 {%for b in unclaimedbenefits%}
-<h2>{{b}}</h2>
-<div>
-  <p>{{b.benefitdescription|markdown}}</p>
-</div>
+  <div class="panel panel-default">
+    <div class="panel-heading" role="tab" id="unclaimed_h_{{b.id}}">
+      <h4 class="panel-title">
+       <a class="collapsed" role="button" data-toggle="collapse" data-parent="#unclaimedbenefits" href="#unclaimed_{{b.id}}" aria-expanded="false" aria-controls="unclaimed_{{b.id}}">{{b}}</a>
+      </h4>
+    </div>
+    <div id="unclaimed_{{b.id}}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="unclaimed_h_{{b.id}}">
+      <div class="panelwrap">
+       {{b.benefitdescription|markdown|default:"No description"}}
+      </div>
+    </div>
+  </div>
 {%endfor%}
 </div>
 {%else%}
@@ -131,12 +138,20 @@ div.benefit_list div {
 {%if noclaimbenefits%}
 <h2>Automatic benefits</h2>
 <p>The following benefits have been auto-claimed for this sponsor:</p>
-<div class="benefit_list">
-{%for b in  noclaimbenefits%}
-<h2>{{b}}</h2>
-<div>
-  <p>{{b.benefitdescription|markdown}}</p>
-</div>
+<div class="panel-group" id="noclaimbenefits" role="tablist" role="tablist" aria-multiselectable="true">
+{%for b in noclaimbenefits%}
+  <div class="panel panel-default">
+    <div class="panel-heading" role="tab" id="noclaim_h_{{b.id}}">
+      <h4 class="panel-title">
+       <a class="collapsed" role="button" data-toggle="collapse" data-parent="#noclaimbenefits" href="#noclaim_{{b.id}}" aria-expanded="false" aria-controls="noclaim_{{b.id}}">{{b}}</a>
+      </h4>
+    </div>
+    <div id="noclaim_{{b.id}}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="noclaim_h_{{b.id}}">
+      <div class="panelwrap">
+       {{b.benefitdescription|markdown|default:"No description"}}
+      </div>
+    </div>
+  </div>
 {%endfor%}
 </div>
 {%endif%}