Refactoring of the tenprint list page for admins

views/submission/templates/admin/tenprint_list.html

@@ -16,19 +16,8 @@
         </script>
         
         <style type="text/css">
-            #icnml_donor_list {
-                margin: 10px;
-                display: grid;
-                grid-gap: 10px;
-                grid-template-columns: repeat( auto-fit, 270px );
-                grid-auto-rows: min-content;
-            }
-            img {
-                display: block;
-                max-width: 250px;
-                max-height: 350px;
-                width: auto;
-                height: auto;
+            :root {
+                --imgsize: 300px;
             }
         </style>
     </head>
@@ -37,16 +26,14 @@
         {% include navigation %}
         
         <div class="icnml_content">
-            <div id="icnml_donor_list">
+            <div class="icnml_list_of_boxes">
                 {% for tenprint in tenprint_cards %}
                     <div style="margin-bottom: 20px">
-                        <div class="ui-widget-header ui-corner-top icnml_box_top" id="tenprint_{{ tenprint[ 'uuid' ] }}_filename">{{ tenprint[ 'username' ] }}</div>
+                        <div class="ui-widget-header ui-corner-top icnml_box_top">{{ tenprint[ 'username' ] }}</div>
                         <div class="ui-widget-content ui-corner-bottom icnml_box_content">
-                            <div class="icnml_button">
-                                <a id="edit_{{ tenprint[ 'id' ] }}" href="{{ url_for( 'submission.admin_tenprint', submission_id = tenprint[ 'submission_uuid' ], tenprint_id = tenprint[ 'uuid' ] ) }}">
-                                    <img src="{{ url_for( 'image.image_file_serve', file_id = tenprint[ 'uuid' ] ) }}" loading="lazy">
-                                </a>
-                            </div>
+                            <div id="edit_{{ tenprint[ 'id' ] }}"
+                                 class="icnml_pointer"
+                                 style="background-image: url( {{ url_for( 'image.image_file_serve', file_id = tenprint[ 'uuid' ] ) }} )"></div>
                         </div>
                     </div>
                 {% endfor %}
@@ -57,6 +44,13 @@
             $( "#icnml_navigation_submissions" )
                 .addClass( "activated" );
             
+            {% for tenprint in tenprint_cards %}
+                $( "#edit_{{ tenprint[ 'id' ] }}" ).on( "click", function()
+                {
+                    window.location.href = "{{ url_for( 'submission.admin_tenprint', submission_id = tenprint[ 'submission_uuid' ], tenprint_id = tenprint[ 'uuid' ] ) }}";
+                })
+            {% endfor %}
+            
             $( "#navloc" ).append(
                 $( "<a />" )
                     .attr( "href", "{{ url_for( 'submission.admin_submission_list' ) }}" )