Add the "toggle view" on the trainer search page

views/trainer/templates/trainer/search.html

@@ -14,12 +14,14 @@
         <style type="text/css">
             :root {
                 --imgsize: 200px;
+                --imgmargin: 10px;
+                --gt: "";
             }
 
             .mark_listing {
                 display: grid;
                 grid-gap: 10px;
-                grid-template-columns: repeat( auto-fill, minmax( 600px, 1fr ) );
+                grid-template-columns: var( --gt );
             }
             .mark_outer {
                 position: relative;
@@ -90,6 +92,7 @@
         <script type="text/javascript">
             baseurl = "{{ baseurl }}";
             current_exercise_folder = "{{ current_exercise_folder }}";
+            current_view = "full";
             
             var surfaces = {};
             {% for s in surfaces %}
@@ -340,7 +343,20 @@
                     }
                 } );
             }
-            
+
+            var view_toggle_to_full = function()
+            {
+                current_view = "full";
+                document.documentElement.style.setProperty( "--gt", "repeat( auto-fill, minmax( 600px, 1fr ) )" );
+                $( ".icnml_mark_info_outer" ).show();
+            }
+            var view_toggle_to_mini = function()
+            {
+                current_view = "mini";
+                document.documentElement.style.setProperty( "--gt", "repeat( auto-fill, calc( var( --imgsize ) + 2 * var( --imgmargin ) ) )" );
+                $( ".icnml_mark_info_outer" ).hide();
+            }
+           
             var refs = {};
             {% for submission_id, value in refs.iteritems() %}
                 var tmp = {};
@@ -362,13 +378,18 @@
                 <div id="filter_notes" style="width: 500px;">
                     <input id="filter_search" placeholder="Search in all fields...">
                 </div>
+                <div style="max-width: 200px">
+                    <a class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" id="toggle_view_button" role="button" aria-disabled="false">
+                        <span class="ui-button-text" id="toggle_view_button">Toggle view</span>
+                    </a>
+                </div>
             </div>
             
             <div class="mark_listing">
                 {% for mark in marks %}
                     <div id="outer_div_mark_{{ mark[ 'uuid' ] }}" class="mark_outer">
                         <div class="icnml_img" style="background-image:url( {{ url_for( 'image.image_file_serve', file_id = mark[ 'uuid' ] ) }} )"></div>
-                        <div>
+                        <div class="icnml_mark_info_outer">
                             <div class="icnml_mark_info">
                                 <div>Name</div>
                                 <div>Mark {{ mark[ 'id' ] }}</div>
@@ -433,11 +454,21 @@
                 pollLimit: 50
             } );
             
+            $( "#toggle_view_button" ).on( "click", function()
+            {
+                if( current_view === "full" )
+                    view_toggle_to_mini();
+                else
+                    view_toggle_to_full();
+            } );
+            
             $( "#filter_search" ).on( "keyup", update_filter_search );
             $( "#filter_search" ).focus();
             
             $( ".mark_outer" ).on( "click", mark_details );
             
+            setTimeout( view_toggle_to_full, 0 );
+            
             $( "#icnml_navigation_trainersearch" )
                 .addClass( "activated" );
         </script>