cdn @ d3c9dec6

-Subproject commit 748732de9b2c397c98dd310be7a995749530d386
+Subproject commit d3c9dec6034f009445db2fd0d60dd44e9c55dcd2

views/trainer/templates/trainer/folder_show.html

@@ -76,43 +76,17 @@
             
             var onMove = function( e, percentage )
             {
-                zoom_level = 100 +  5 * percentage;
-                updateZoom();
-            }
-            var updateZoom = function()
-            {
+                var zoom_level = 100 +  5 * percentage;
                 document.documentElement.style.setProperty( "--imgsize", zoom_level + "px" );
             }
             var zoomslider = new RangeSlider( $( "#zoom_slider" ), {
+                fgColour: "#647180",
                 percentage: 40,
                 onMove: onMove,
                 onDown: onMove,
                 pollLimit: 50
             } );
             
-            $( "#zoom_slider" ).on( "mousewheel", function( event )
-            {
-                if( mouse_zoom_enable )
-                {
-                    mouse_zoom_enable = false;
-                    setTimeout( function(){
-                        mouse_zoom_enable = true;
-                    }, 10 );
-                    
-                    var crancks = Math.sign( event.originalEvent.wheelDelta );
-                    
-                    zoom_level += 10 * crancks;
-                    zoom_level = Math.max( zoom_level, 100 );
-                    zoom_level = Math.min( zoom_level, 600 );
-
-                    zoomslider.setPercentage( ( zoom_level - 100 ) / 5 );
-                    updateZoom();
-                }
-            } );
-            
-            mouse_zoom_enable = true;
-            zoom_level = 300;
-
             $( "#icnml_navigation_exercises" )
                 .addClass( "activated" );
         </script>

views/trainer/templates/trainer/search.html

@@ -12,6 +12,10 @@
         <link type="text/css" rel="stylesheet" href="{{ url_for( 'files.send_app_files', subpath = 'app.css' ) }}">
         
         <style type="text/css">
+            :root {
+                --imgsize: 200px;
+            }
+
             .mark_listing {
                 display: grid;
                 grid-gap: 10px;
@@ -19,6 +23,7 @@
             }
             .mark_outer {
                 position: relative;
+                
                 border: 1px solid #AAAAAA;
                 border-radius: 10px;
                 background-color: #fff;
@@ -29,11 +34,11 @@
                 overflow-x: hidden;
                 
                 width: 100%;
-                height: 200px;
+                height: auto;
                 
                 display: grid;
                 grid-gap: 10px;
-                grid-template-columns: 200px 1fr;
+                grid-template-columns: var( --imgsize ) 1fr;
             }
             
             .icnml_mark_info {
@@ -59,7 +64,13 @@
                 height: 100%;
             }
 
-            .icnml_img,
+            .icnml_img {
+                height: var( --imgsize );
+                width: var( --imgsize );
+                background-size: contain;
+                background-position: center;
+                background-repeat: no-repeat;
+            }
             #icnml_mark_detail_left,
             #icnml_mark_detail_right {
                 height: 100%;
@@ -67,6 +78,13 @@
                 background-position: center;
                 background-repeat: no-repeat;
             }
+            #zoom_slider {
+                position: fixed;
+                width: 200px;
+                max-width:100%;
+                bottom: 5px;
+                right: 15px;
+            }
         </style>
         
         <script type="text/javascript">
@@ -380,6 +398,7 @@
                     </div>
                 {% endfor %}
             </div>
+            <div id="zoom_slider"></div>
         </div>
         
         <script type="text/javascript">
@@ -397,6 +416,23 @@
                     .html( marks[ "{{ mark[ 'uuid' ] }}" ][ "dt" ].join( "<br>" ) );
             {% endfor %}
 
+            var onMove = function( e, percentage )
+            {
+                zoom_level = 100 +  5 * percentage;
+                updateZoom();
+            }
+            var updateZoom = function()
+            {
+                document.documentElement.style.setProperty( "--imgsize", zoom_level + "px" );
+            }
+            var zoomslider = new RangeSlider( $( "#zoom_slider" ), {
+                fgColour: "#647180",
+                percentage: 40,
+                onMove: onMove,
+                onDown: onMove,
+                pollLimit: 50
+            } );
+            
             $( "#filter_search" ).on( "keyup", update_filter_search );
             $( "#filter_search" ).focus();