Do some cosmetics and code style

app/templates/corpora/analyse_corpus.html.j2

@@ -36,6 +36,7 @@
 }
 </style>
 
+<!-- Query Form -->
 <form id="query-form">
   <div class="col s12">
     <ul class="collapsible expandable">
@@ -43,14 +44,25 @@
         <!-- <div class="collapsible-header">
           <i class="material-icons">search</i>CQP Query
         </div> -->
-        <div class="collapsible-body" style="padding: 0px 2rem;">
+        <!-- Div element above is part of valid materialize collapsible.
+        Commented out to prevent the user from collapsing it and also to save
+        space -->
+        <div class="collapsible-body" style="padding-top: 10px;
+                                             padding-right: 2rem;
+                                             padding-bottom: 0px;
+                                             padding-left: 2rem;">
           <div class="row">
             <div class="col s12 m11">
               <div class="input-field">
                 <i class="material-icons prefix">search</i>
                 {{ query_form.query() }}
                 {{ query_form.query.label }}
-                <span class="helper-text" data-error="wrong" data-success="right"><a href="http://cwb.sourceforge.net/files/CQP_Tutorial/"><i class="material-icons" style="font-size: inherit;">help</i> CQP query language tutorial</a></span>
+                <span class="helper-text" data-error="wrong" data-success="right">
+                  <a href="http://cwb.sourceforge.net/files/CQP_Tutorial/">
+                    <i class="material-icons" style="font-size: inherit;">help
+                    </i> CQP query language tutorial
+                  </a>
+                </span>
                 {% for error in query_form.query.errors %}
                   <span class="helper-text red-text">{{ error }}</span>
                 {% endfor %}
@@ -59,7 +71,10 @@
             <div class="col s12 m1">
               <p class="hide-on-small-only" style="
       margin: 0px;">&nbsp;</p>
-              <button class="waves-effect waves-light btn-small right" type="submit">Send<i class="material-icons right">send</i></button>
+              <button class="waves-effect waves-light btn-small right"
+                      type="submit">Send
+                <i class="material-icons right">send</i>
+              </button>
             </div>
           </div>
         </div>
@@ -106,7 +121,9 @@
   </div>
 </form>
 
-<div id="export-query-results-modal" class="modal modal-fixed-footer no-autoinit">
+<!-- Export query results modal -->
+<div id="export-query-results-modal"
+     class="modal modal-fixed-footer no-autoinit">
   <div class="modal-content">
     {{ query_download_form.hidden_tag() }}
     <h4>Download current query Results</h4>
@@ -114,26 +131,44 @@
     <table>
       <tr>
         <td>JSON</td>
-        <td><a class="btn waves-effect waves-light" id="download-results">Download</a></td>
+        <td>
+          <a class="btn waves-effect waves-light" id="download-results">Download
+            <i class="material-icons right">file_download</i>
+          </a>
+        </td>
       </tr>
       <tr>
         <td>CSV</td>
-        <td><a class="btn waves-effect waves-light disabled">Download</a></td>
+        <td>
+          <a class="btn waves-effect waves-light disabled">Download
+            <i class="material-icons right">file_download</i>
+          </a>
+        </td>
       </tr>
       <tr>
         <td>EXCEL</td>
-        <td><a class="btn waves-effect waves-light disabled">Download</a></td>
+        <td>
+          <a class="btn waves-effect waves-light disabled">Download
+            <i class="material-icons right">file_download</i>
+          </a>
+        </td>
       </tr>
       <tr>
         <td>HTML</td>
-        <td><a class="btn waves-effect waves-light disabled">Download</a></td>
+        <td>
+          <a class="btn waves-effect waves-light disabled">Download
+            <i class="material-icons right">file_download</i>
+          </a>
+        </td>
       </tr>
     </table>
   </div>
   <div class="modal-footer">
+    <a href="#!" class="modal-close waves-effect waves-green red btn">Close</a>
   </div>
 </div>
 
+<!-- Loading animation card when query results are being loaded -->
 <div class="row">
   <div class="col s12 hide" id="getting-query-results">
     <div class="card">
@@ -149,6 +184,7 @@
   </div>
 </div>
 
+<!-- table showing the query results -->
 <div class="row">
   <div class="col s12" id="recieved-query-results">
     <div class="card">
@@ -175,6 +211,8 @@
   </div>
 </div>
 
+<!-- Loding animation modal that waits for the CQP server container to be ready
+-->
 <div id="loading-modal" class="modal no-autoinit">
   <div class="modal-content">
     <h4>Waiting for analysis software</h4>
@@ -184,6 +222,7 @@
   </div>
 </div>
 
+<!-- Context modal used for detailed information about one match -->
 <div id="context-modal" class="modal modal-fixed-footer">
   <div class="modal-content">
     <h4>Match context and information</h4>