move collapisible outside of modal

1 files changed, 60 insertions, 53 deletions

diff --git a/client/templates/client/index.html b/client/templates/client/index.html
index 41f709c..0a4f3a9 100644
--- a/client/templates/client/index.html
+++ b/client/templates/client/index.html
@@ -39,54 +39,56 @@
         <div style="font-size: 0.5em; line-height: normal;">{{data.0.born_date}}</div>
       </span>
 {% if data.1|length > 0 %}
-<ul class="collapsible">
-    {% for doc in data.1 %}
-        {% if doc.status == "autosign" %}
-          <div id="modal{{doc.id}}" class="modal">
-            <div class="modal-content">
-              <h4>Attenzione</h4>
-              <p>Approvo il documento accettando tutte le clausole apposte su di esso. <br>
-              Comprovo come veritieri e completi tutti i dati apposti sul documento.
-              {% if doc.document_type.medical_data %}
-                <br>
-                Autorizzo i capi ad usare i dati medici, in caso d'emergenza, ed intraprendere i passi necessari per dare avvio a cure mediche d’urgenza anche senza essere ulteriormente consultato/a.
-              {% endif %}
-              {% if doc.document_type.custom_message %}
-                <br>
-                <br>
-                Inoltre accetto e prendo nota della seguente clausula aggiuntiva: <br>
-                {{doc.document_type.custom_message_text | linebreaksbr}}
-              {% endif %}
-              <br>
-              <br>
-              <b>Una volta approvata l'iscrizione non potrà più essere modificata o annullata.<br>
-              Sei sicuro di volerla approvare?</b>
-              </p>
-            </div>
-            <div class="modal-footer">
-              <a style="color:red" href="#!" class="modal-close waves-effect waves-green btn-flat">Annulla</a>
-              <a onclick="send('a{{doc.id}}')" class="modal-close waves-effect waves-green btn-flat">Approva</a>
-            </div>
-          </div>
+{% for doc in data.1 %}
+  {% if doc.status == "autosign" %}
+    <div id="modal{{doc.id}}" class="modal">
+      <div class="modal-content">
+        <h4>Attenzione</h4>
+        <p>Approvo il documento accettando tutte le clausole apposte su di esso. <br>
+        Comprovo come veritieri e completi tutti i dati apposti sul documento.
+        {% if doc.document_type.medical_data %}
+          <br>
+          Autorizzo i capi ad usare i dati medici, in caso d'emergenza, ed intraprendere i passi necessari per dare avvio a cure mediche d’urgenza anche senza essere ulteriormente consultato/a.
         {% endif %}
-        {% if doc.status == "autosign" or doc.status == "wait" %}
-          <div id="modal_approve{{doc.id}}" class="modal">
-            <div class="modal-content">
-              <h4>Approva documento</h4>
-              <p>Vuoi approvare ora il documento appena creato?<br>
-                In alternativa puoi farlo in qualsiasi momento selezionando il documento desiderato dalla pagina principale.
-              </p>
-            </div>
-            <div class="modal-footer">
-              <a href="/" class="modal-close waves-effect waves-green btn-flat">In seguito</a>
-              {% if doc.status == "autosign" %}
-                <a style="color:green" class="modal-close waves-effect waves-light btn-flat modal-trigger" href="#modal{{doc.id}}">Approva iscrizione</a>
-              {% else %}
-                <a style="color:green" class="modal-close waves-effect waves-light btn-flat" onclick="send('f{{doc.id}}')">Scarica documento per approvazione</a>
-              {% endif %}
-            </div>
-          </div>
+        {% if doc.document_type.custom_message %}
+          <br>
+          <br>
+          Inoltre accetto e prendo nota della seguente clausula aggiuntiva: <br>
+          {{doc.document_type.custom_message_text | linebreaksbr}}
         {% endif %}
+        <br>
+        <br>
+        <b>Una volta approvata l'iscrizione non potrà più essere modificata o annullata.<br>
+        Sei sicuro di volerla approvare?</b>
+        </p>
+      </div>
+      <div class="modal-footer">
+        <a style="color:red" href="#!" class="modal-close waves-effect waves-green btn-flat">Annulla</a>
+        <a onclick="send('a{{doc.id}}')" class="modal-close waves-effect waves-green btn-flat">Approva</a>
+      </div>
+    </div>
+  {% endif %}
+  {% if doc.status == "autosign" or doc.status == "wait" %}
+    <div id="modal_approve{{doc.id}}" class="modal">
+      <div class="modal-content">
+        <h4>Approva documento</h4>
+        <p>Vuoi approvare ora il documento appena creato?<br>
+          In alternativa puoi farlo in qualsiasi momento selezionando il documento desiderato dalla pagina principale.
+        </p>
+      </div>
+      <div class="modal-footer">
+        <a href="/" class="modal-close waves-effect waves-green btn-flat">In seguito</a>
+        {% if doc.status == "autosign" %}
+          <a style="color:green" class="modal-close waves-effect waves-light btn-flat modal-trigger" href="#modal{{doc.id}}">Approva iscrizione</a>
+        {% else %}
+          <a style="color:green" class="modal-close waves-effect waves-light btn-flat" onclick="send('f{{doc.id}}')">Scarica documento per approvazione</a>
+        {% endif %}
+      </div>
+    </div>
+  {% endif %}
+{% endfor %}
+<ul class="collapsible">
+    {% for doc in data.1 %}
         <li>
         <div class="collapsible-header">
             {% if doc.status == "wait" %}
@@ -468,12 +470,16 @@
 {% endblock %}
 
 {% block script %}
-$(document).ready(function(){
-      $('.collapsible').collapsible();
-      $('.modal').modal();
+var tap_targets;
+document.addEventListener('DOMContentLoaded', function() {
+      var elems = document.querySelectorAll('.collapsible');
+      var instances = M.Collapsible.init(elems, {});
+      elems = document.querySelectorAll('.modal');
+      instances = M.Modal.init(elems, {});
+      elems = document.querySelector('.tap-target');
+      tap_targets = M.TapTarget.init(elems, {});
       {% if no_docs and not all_invalid %}
-        $('.tap-target').tapTarget();
-        $('.tap-target').tapTarget('open');
+        tap_targets.open();
       {% endif %}
       var params = {};
       var prmarr = window.location.search.substr(1).split("&");
@@ -483,7 +489,8 @@ $(document).ready(function(){
       }
       var docid = params['approve_doc'];
       if (docid != undefined) {
-        $('#modal_approve'+docid).modal('open');
+        var instance = M.Modal.getInstance(document.getElementById('modal_approve'+docid));
+        instance.open();
       }
     var lazyLoadInstance = new LazyLoad({
       // Your custom settings go here
@@ -493,7 +500,7 @@ $(document).ready(function(){
   {% if not all_invalid %}
   $('*').click(function(event) {
       if (this === event.target) {
-        $('.tap-target').tapTarget('close');
+        tap_targets.close();
       }
   });
   {% endif %}