ZMI: monotonized paging buttons

zopefoundation · Jul 14, 2020 · a00e073 · a00e073
1 parent 4c0d577
commit a00e073
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 25 deletions.
diff --git a/src/Shared/DC/ZRDB/dtml/advanced.dtml b/src/Shared/DC/ZRDB/dtml/advanced.dtml
@@ -14,9 +14,8 @@
       <label for="connection_hook"
              class="form-label col-sm-3 col-xl-2">Connection Hook</label>
       <div class=" col-sm-9 col-xl-10">
-          <input type="text" class="form-control" name="connection_hook"
-                 id="connection_hook" size="40"
-				 value="<dtml-var connection_hook null="" missing="" html_quote>"/>
+          <input type="text" class="form-control" name="connection_hook" id="connection_hook" 
+            value="<dtml-var connection_hook null="" missing="" html_quote>" />
       </div>
     </div> 
 

diff --git a/src/Shared/DC/ZRDB/dtml/test.dtml b/src/Shared/DC/ZRDB/dtml/test.dtml
@@ -104,7 +104,7 @@
             <dtml-let res="this().manage_zmi_test(REQUEST)"
                       res_size="_.len(res)">
 
-              <p class="zmi-form-title font-weight-bold">
+              <p id="query_results" class="zmi-form-title font-weight-bold">
                   <dtml-if "res_size == 0">
                     <span class="badge badge-danger">0</span>
                   <dtml-else>
@@ -121,31 +121,29 @@
 
               <dtml-in "res" size=num_rows start=query_start orphan=3>
                 <dtml-if sequence-start>
-                  <ul class="pagination">
+                  <nav class="zmi-find-results nav row mb-3"><div class="col-6">
                     <dtml-if previous-sequence-size>
-                      <li class="page-item">
-                        <a class="page-link" href="&dtml-URL;&dtml-sequence-query;query_start=&dtml-previous-sequence-start-number;">
-                          <i class="fas fa-angle-double-left mr-2"></i> Previous <dtml-var previous-sequence-size> results
+                        <a class="btn btn-primary" href="&dtml-URL;&dtml-sequence-query;query_start=&dtml-previous-sequence-start-number;">
+                          <i class="fas fa-chevron-left mr-2"></i> Previous <dtml-var previous-sequence-size> results
                         </a>
-                      </li>
                     </dtml-if previous-sequence-size>
                     <dtml-if next-sequence-size>
-                      <li class="page-item">
-                        <a class="page-link" href="&dtml-URL;&dtml-sequence-query;query_start=&dtml-next-sequence-start-number;">
-                          Next <dtml-var next-sequence-size> results <i class="fas fa-angle-double-right ml-2"></i>
+                        </div><div class="col-6 text-right">
+                        <a class="btn btn-primary" href="&dtml-URL;&dtml-sequence-query;query_start=&dtml-next-sequence-start-number;">
+                          Next <dtml-var next-sequence-size> results <i class="fas fa-chevron-right ml-2"></i>
                         </a>
-                      </li>
                     </dtml-if next-sequence-size>
-                  </ul>
+                  </div></nav>
 
-                  <table class="table table-sm table-responsive table-striped table-hover table-bordered mb-5">
+                  <table class="table table-sm table-responsive table-striped table-hover table-bordered mb-3">
                     <thead>
                     <tr>
                       <dtml-in "res.names()">
                         <th>&dtml-sequence-item;</th>
                       </dtml-in>
                     </tr>
                     </thead>
+
                 </dtml-if sequence-start>
 
                 <tr>
@@ -159,22 +157,19 @@
                 <dtml-if sequence-end>
                   </table>
 
-                  <ul class="pagination">
+                  <nav class="zmi-find-results nav row mb-5"><div class="col-6">
                     <dtml-if previous-sequence-size>
-                      <li class="page-item">
-                        <a class="page-link" href="&dtml-URL;&dtml-sequence-query;query_start=&dtml-previous-sequence-start-number;">
-                          <i class="fas fa-angle-double-left mr-2"></i> Previous <dtml-var previous-sequence-size> results
+                        <a class="btn btn-primary" href="&dtml-URL;&dtml-sequence-query;query_start=&dtml-previous-sequence-start-number;">
+                          <i class="fas fa-chevron-left mr-2"></i> Previous <dtml-var previous-sequence-size> results
                         </a>
-                      </li>
                     </dtml-if previous-sequence-size>
                     <dtml-if next-sequence-size>
-                      <li class="page-item">
-                        <a class="page-link" href="&dtml-URL;&dtml-sequence-query;query_start=&dtml-next-sequence-start-number;">
-                          Next <dtml-var next-sequence-size> results <i class="fas fa-angle-double-right ml-2"></i>
+                      </div><div class="col-6 text-right">
+                        <a class="btn btn-primary" href="&dtml-URL;&dtml-sequence-query;query_start=&dtml-next-sequence-start-number;">
+                          Next <dtml-var next-sequence-size> results <i class="fas fa-chevron-right ml-2"></i>
                         </a>
-                      </li>
                     </dtml-if next-sequence-size>
-                  </ul>
+                  </div></nav>
                 </dtml-if sequence-end>
 
               </dtml-in>
@@ -232,4 +227,14 @@
 
 </main>
 
+<dtml-if "REQUEST.get('query_start',None)">
+  <script>
+    //<!--
+    document.addEventListener("DOMContentLoaded", function(event) { 
+      document.location.href="#query_results";
+    });
+    //-->
+  </script>
+</dtml-if>
+
 <dtml-var manage_page_footer>