manage resize use-case on shift exchange view

members_space/static/css/members-space-shifts-exchange.css

@@ -193,5 +193,5 @@ td{
 
 #calendar_explaination_button {
     max-width: 60%;
-    margin: 2rem auto -1rem auto;
+    margin: 2rem auto 0.5rem auto;
 }
\ No newline at end of file

members_space/static/js/members-space-shifts-exchange.js

@@ -178,7 +178,7 @@ function init_shifts_list() {
 function init_calendar_page() {
     let template_explanations = $("#calendar_explaination_template");
 
-    if (vw <= 768) {
+    if (vw <= 992) {
         $(".loading-calendar").show();
 
         $("#calendar_explaination_area").hide();
@@ -188,10 +188,10 @@ function init_calendar_page() {
                 closeModal,
                 "J'ai compris"
             );
-        });
+        }).show();
     } else {
         $("#calendar_explaination_button").hide();
-        $("#calendar_explaination_area").html(template_explanations.html());
+        $("#calendar_explaination_area").html(template_explanations.html()).show();
     }
 
     if (incoming_shifts !== null) {
@@ -209,11 +209,18 @@ function init_calendar_page() {
     let default_initial_view = "";
     let header_toolbar = {};
 
-    if (vw <=768) {
+    if (vw <= 768) {
+        default_initial_view = 'listWeek';
+        header_toolbar = {
+            left: 'title',
+            center: 'listWeek,timeGridDay',
+            right: 'prev,next today'
+        };
+    } else if (vw <=992) {
         default_initial_view = 'listWeek';
         header_toolbar = {
             left: 'title',
-            center: '',
+            center: 'dayGridMonth,listWeek,timeGridDay',
             right: 'prev,next today'
         };
     } else {
@@ -313,12 +320,14 @@ function init_calendar_page() {
             }
         },
         eventDidMount: function() {
-            if (vw <= 768) {
-                $(".fc .fc-header-toolbar").addClass("resp-header-toolbar");
+            // Calendar is hidden at first on mobile to hide header change when data is loaded
+            $(".loading-calendar").hide();
+            $("#calendar").show();
 
-                // Calendar is hidden at first on mobile to hide header change when data is loaded
-                $(".loading-calendar").hide();
-                $("#calendar").show();
+            if (vw <= 992) {
+                $(".fc .fc-header-toolbar").addClass("resp-header-toolbar");
+            } else {
+                $(".fc .fc-header-toolbar").removeClass("resp-header-toolbar");
             }
         }
     });
@@ -379,4 +388,9 @@ function init_shifts_exchange() {
         $("#shifts_exchange_content").show();
         init_calendar_page();
     }
-}
+
+    $(window).smartresize(function(){
+        vw = window.innerWidth;
+        init_calendar_page();
+    });
+}  
\ No newline at end of file

members_space/static/js/members-space.js

@@ -251,3 +251,30 @@ $(document).ready(function() {
         update_dom();
     };
 });
+
+(function($,sr){
+    // debouncing function from John Hann
+    // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
+    var debounce = function (func, threshold, execAsap) {
+        var timeout;
+  
+        return function debounced () {
+            var obj = this, args = arguments;
+            function delayed () {
+                if (!execAsap)
+                    func.apply(obj, args);
+                timeout = null;
+            };
+  
+            if (timeout)
+                clearTimeout(timeout);
+            else if (execAsap)
+                func.apply(obj, args);
+  
+            timeout = setTimeout(delayed, threshold || 100);
+        };
+    }
+    // smartresize 
+    jQuery.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
+  
+  })(jQuery,'smartresize');
\ No newline at end of file