views/submission/templates/shared/mark_list.html

@@ -47,27 +47,20 @@
         </script>
         
         <style type="text/css">
-            .icnml_lp_list {
-                margin: 10px;
+            .icnml_list_of_boxes {
                 display: grid;
                 grid-gap: 10px;
-                grid-template-columns: repeat( auto-fit, 320px );
+                grid-template-columns: repeat( auto-fit, 220px );
+                grid-auto-rows: min-content;
+                margin-bottom: 10px;
             }
-            .icnml_lp_list > div {
-                height: 347px;
-            }
-            
-            .icnml_box_content {
-                height: 300px;
-            }
-            
-            .icnml_img > a > img {
-                display: block;
-                width: auto;
-                height: auto;
-                max-width: 300px;
-                max-height: 300px;
-                margin: auto;
+            .icnml_mark {
+                height: 200px;
+                width: 200px;
+                background-size: contain;
+                background-position: center;
+                background-repeat: no-repeat;
+                cursor: pointer;
             }
             .icnml_search_bar {
                 margin-left: 10px;
@@ -85,15 +78,15 @@
                 <input id="search_bar" placeholder="Search for a file..."/>
             </div>
             
-            <div class="icnml_lp_list">
+            <div class="icnml_list_of_boxes">
                 {% for file in files %}
                     <div id="mark_{{ file[ 'uuid' ] }}">
                         <div class="ui-widget-header ui-corner-top icnml_box_top" id="mark_{{ file[ 'uuid' ] }}_filename">-</div>
                         <div class="ui-widget-content ui-corner-bottom icnml_box_content">
-                            <div class="icnml_img">
-                                <a id="edit_{{ file[ 'id' ] }}" href="{{ url_for( 'submission.submission_mark', submission_id = submission_id, mark_id = file[ 'uuid' ] ) }}">
-                                    <img src="{{ url_for( 'image.image_file_serve', file_id = file[ 'uuid' ] ) }}" loading="lazy">
-                                </a>
+                            <div
+                                class="icnml_mark"
+                                id="mark_{{ file[ 'uuid' ] }}"
+                                style="background-image: url( {{ url_for( 'image.image_file_serve', file_id = file[ 'uuid' ] ) }} )">
                             </div>
                         </div>
                     </div>
@@ -101,10 +94,15 @@
             </div>
         </div>
         <script type="text/javascript">
-            
             $( "#search_bar" ).on( "keyup", update_search_result );
             $( "#search_bar" ).focus();
             
+            {% for file in files %}
+                $( "#mark_{{ file[ 'uuid' ] }}" ).on( "click", function()
+                {
+                    window.location.href = "{{ url_for( 'submission.submission_mark', submission_id = submission_id, mark_id = file[ 'uuid' ] ) }}";
+                } );
+            {% endfor %}
             //
             
             $( "#icnml_navigation_updatedonor" )