fix the menu displaying bug on mobiles

ot_templating/Classes/Domain/Repository/MemberRepository.php

@@ -6,8 +6,8 @@ use Opentalent\OtTemplating\Domain\Model\Member;
 
 class MemberRepository extends BaseApiRepository
 {
-    CONST URI = BaseApiRepository::BASE_URI . '/public/members';
-    CONST URI_CA = BaseApiRepository::BASE_URI . '/public/members_ca';
+    CONST URI = BaseApiRepository::BASE_URI . 'public/members';
+    CONST URI_CA = BaseApiRepository::BASE_URI . 'public/members_ca';
     const HYDRA_TYPE = 'PortailMemberBySpeciality';
     const HYDRA_TYPE_CA = 'PortailMemberByRole';
 

ot_templating/Resources/Public/assets/Classic/script/main.js

@@ -27,12 +27,10 @@ $(document).ready(function(){
         elt.children('ul.dropdown-menu').stop(true);
     }
 
-    $('.dropdown').on('mouseenter', function(e) {
+    $('.dropdown').on('mouseenter tap', function(e) {
 
-        // Special: the dropdown is already displayed, this can
-        //           happen on mobile or tablet
-        if ($(this).hasClass('dropdown-displayed')) {
-            hideDropdownsFor($(this));
+        // Special: block this event on mobile and tablet versions
+        if ($('#menu-container .toggle-menu:visible').length > 0) {
             return;
         }
 
@@ -65,6 +63,11 @@ $(document).ready(function(){
         }
 
     }).on('mouseleave', function(e) {
+        // Special: block this event on mobile and tablet versions
+        if ($('#menu-container .toggle-menu:visible').length > 0) {
+            return;
+        }
+
         if ($(this).hasClass('delayed-collapsing')) {
             hideDropdownsFor($(this), collapsingDelay);
         } else {
@@ -93,11 +96,10 @@ $(document).ready(function(){
         $('#menu').toggleClass('show-flex');
     });
 
-    $('.toggle-dropdown').on('click', function() {
+    $('.toggle-dropdown').on('click', function(e) {
         var dropdown = $(this).closest('.dropdown');
         var dropdown_menu = dropdown.find('.dropdown-menu').first();
         dropdown_menu.toggleClass('show-flex');
-
         $(this).toggleClass('fa-plus');
         $(this).toggleClass('fa-minus');
     });

ot_templating/Resources/Public/assets/Classic/style/_states.scss

@@ -105,7 +105,7 @@ $menu-font-color: $menu-font-color;
 }
 
 // Small screen or devices which do not support hovering
-@media not all and (hover: none), screen and (max-width: 900px) {
+@media screen and (hover: none), screen and (max-width: 900px) {
   //  Menu
   #menu {
     display: none;
@@ -129,7 +129,7 @@ $menu-font-color: $menu-font-color;
   #menu li {
     margin: 6px 0;
     flex-direction: column;
-    width: 80%;
+    height: auto;
   }
 
   #menu li .menu-label {
@@ -150,7 +150,12 @@ $menu-font-color: $menu-font-color;
     background: transparent;
     box-shadow: none;
     color: $menu-font-color;
-    padding-left: 12px;
+    margin-left: 16px;
+    border-left: solid 1px $menu-font-color;
+  }
+
+  #menu .dropdown-menu li:hover {
+    background: transparent;
   }
 
   #menu .dropdown-menu a {
@@ -160,8 +165,11 @@ $menu-font-color: $menu-font-color;
     text-align: left;
   }
 
-  #menu .dropdown.dropdown-displayed a {
+  #menu .dropdown-menu li:hover a {
     color: $menu-font-color;
   }
 
+  #menu .dropdown.dropdown-displayed a {
+    color: $menu-font-color;
+  }
 }

ot_templating/Resources/Public/assets/Classic/style/style.css

@@ -1777,7 +1777,7 @@ form button[type=submit]:hover {
     margin: auto;
   }
 }
-@media not all and (hover: none), screen and (max-width: 900px) {
+@media screen and (hover: none), screen and (max-width: 900px) {
   #menu {
     display: none;
     flex-direction: column;
@@ -1817,7 +1817,7 @@ form button[type=submit]:hover {
   #menu li {
     margin: 6px 0;
     flex-direction: column;
-    width: 80%;
+    height: auto;
   }
 
   #menu li .menu-label {
@@ -1847,7 +1847,12 @@ form button[type=submit]:hover {
     background: transparent;
     box-shadow: none;
     color: #ffffff;
-    padding-left: 12px;
+    margin-left: 16px;
+    border-left: solid 1px #ffffff;
+  }
+
+  #menu .dropdown-menu li:hover {
+    background: transparent;
   }
 
   #menu .dropdown-menu a {
@@ -1857,6 +1862,10 @@ form button[type=submit]:hover {
     text-align: left;
   }
 
+  #menu .dropdown-menu li:hover a {
+    color: #ffffff;
+  }
+
   #menu .dropdown.dropdown-displayed a {
     color: #ffffff;
   }

ot_templating/Resources/Public/assets/Classic/style/theme-blue.css

@@ -1777,7 +1777,7 @@ form button[type=submit]:hover {
     margin: auto;
   }
 }
-@media not all and (hover: none), screen and (max-width: 900px) {
+@media screen and (hover: none), screen and (max-width: 900px) {
   #menu {
     display: none;
     flex-direction: column;
@@ -1817,7 +1817,7 @@ form button[type=submit]:hover {
   #menu li {
     margin: 6px 0;
     flex-direction: column;
-    width: 80%;
+    height: auto;
   }
 
   #menu li .menu-label {
@@ -1847,7 +1847,12 @@ form button[type=submit]:hover {
     background: transparent;
     box-shadow: none;
     color: #ffffff;
-    padding-left: 12px;
+    margin-left: 16px;
+    border-left: solid 1px #ffffff;
+  }
+
+  #menu .dropdown-menu li:hover {
+    background: transparent;
   }
 
   #menu .dropdown-menu a {
@@ -1857,6 +1862,10 @@ form button[type=submit]:hover {
     text-align: left;
   }
 
+  #menu .dropdown-menu li:hover a {
+    color: #ffffff;
+  }
+
   #menu .dropdown.dropdown-displayed a {
     color: #ffffff;
   }

ot_templating/Resources/Public/assets/Classic/style/theme-green.css

@@ -1777,7 +1777,7 @@ form button[type=submit]:hover {
     margin: auto;
   }
 }
-@media not all and (hover: none), screen and (max-width: 900px) {
+@media screen and (hover: none), screen and (max-width: 900px) {
   #menu {
     display: none;
     flex-direction: column;
@@ -1817,7 +1817,7 @@ form button[type=submit]:hover {
   #menu li {
     margin: 6px 0;
     flex-direction: column;
-    width: 80%;
+    height: auto;
   }
 
   #menu li .menu-label {
@@ -1847,7 +1847,12 @@ form button[type=submit]:hover {
     background: transparent;
     box-shadow: none;
     color: #ffffff;
-    padding-left: 12px;
+    margin-left: 16px;
+    border-left: solid 1px #ffffff;
+  }
+
+  #menu .dropdown-menu li:hover {
+    background: transparent;
   }
 
   #menu .dropdown-menu a {
@@ -1857,6 +1862,10 @@ form button[type=submit]:hover {
     text-align: left;
   }
 
+  #menu .dropdown-menu li:hover a {
+    color: #ffffff;
+  }
+
   #menu .dropdown.dropdown-displayed a {
     color: #ffffff;
   }

ot_templating/Resources/Public/assets/Classic/style/theme-grey.css

@@ -1777,7 +1777,7 @@ form button[type=submit]:hover {
     margin: auto;
   }
 }
-@media not all and (hover: none), screen and (max-width: 900px) {
+@media screen and (hover: none), screen and (max-width: 900px) {
   #menu {
     display: none;
     flex-direction: column;
@@ -1817,7 +1817,7 @@ form button[type=submit]:hover {
   #menu li {
     margin: 6px 0;
     flex-direction: column;
-    width: 80%;
+    height: auto;
   }
 
   #menu li .menu-label {
@@ -1847,7 +1847,12 @@ form button[type=submit]:hover {
     background: transparent;
     box-shadow: none;
     color: #ffffff;
-    padding-left: 12px;
+    margin-left: 16px;
+    border-left: solid 1px #ffffff;
+  }
+
+  #menu .dropdown-menu li:hover {
+    background: transparent;
   }
 
   #menu .dropdown-menu a {
@@ -1857,6 +1862,10 @@ form button[type=submit]:hover {
     text-align: left;
   }
 
+  #menu .dropdown-menu li:hover a {
+    color: #ffffff;
+  }
+
   #menu .dropdown.dropdown-displayed a {
     color: #ffffff;
   }

ot_templating/Resources/Public/assets/Classic/style/theme-light-blue.css

@@ -1777,7 +1777,7 @@ form button[type=submit]:hover {
     margin: auto;
   }
 }
-@media not all and (hover: none), screen and (max-width: 900px) {
+@media screen and (hover: none), screen and (max-width: 900px) {
   #menu {
     display: none;
     flex-direction: column;
@@ -1817,7 +1817,7 @@ form button[type=submit]:hover {
   #menu li {
     margin: 6px 0;
     flex-direction: column;
-    width: 80%;
+    height: auto;
   }
 
   #menu li .menu-label {
@@ -1847,7 +1847,12 @@ form button[type=submit]:hover {
     background: transparent;
     box-shadow: none;
     color: #ffffff;
-    padding-left: 12px;
+    margin-left: 16px;
+    border-left: solid 1px #ffffff;
+  }
+
+  #menu .dropdown-menu li:hover {
+    background: transparent;
   }
 
   #menu .dropdown-menu a {
@@ -1857,6 +1862,10 @@ form button[type=submit]:hover {
     text-align: left;
   }
 
+  #menu .dropdown-menu li:hover a {
+    color: #ffffff;
+  }
+
   #menu .dropdown.dropdown-displayed a {
     color: #ffffff;
   }

ot_templating/Resources/Public/assets/Classic/style/theme-light-red.css

@@ -1777,7 +1777,7 @@ form button[type=submit]:hover {
     margin: auto;
   }
 }
-@media not all and (hover: none), screen and (max-width: 900px) {
+@media screen and (hover: none), screen and (max-width: 900px) {
   #menu {
     display: none;
     flex-direction: column;
@@ -1817,7 +1817,7 @@ form button[type=submit]:hover {
   #menu li {
     margin: 6px 0;
     flex-direction: column;
-    width: 80%;
+    height: auto;
   }
 
   #menu li .menu-label {
@@ -1847,7 +1847,12 @@ form button[type=submit]:hover {
     background: transparent;
     box-shadow: none;
     color: #ffffff;
-    padding-left: 12px;
+    margin-left: 16px;
+    border-left: solid 1px #ffffff;
+  }
+
+  #menu .dropdown-menu li:hover {
+    background: transparent;
   }
 
   #menu .dropdown-menu a {
@@ -1857,6 +1862,10 @@ form button[type=submit]:hover {
     text-align: left;
   }
 
+  #menu .dropdown-menu li:hover a {
+    color: #ffffff;
+  }
+
   #menu .dropdown.dropdown-displayed a {
     color: #ffffff;
   }

ot_templating/Resources/Public/assets/Classic/style/theme-orange.css

@@ -1777,7 +1777,7 @@ form button[type=submit]:hover {
     margin: auto;
   }
 }
-@media not all and (hover: none), screen and (max-width: 900px) {
+@media screen and (hover: none), screen and (max-width: 900px) {
   #menu {
     display: none;
     flex-direction: column;
@@ -1817,7 +1817,7 @@ form button[type=submit]:hover {
   #menu li {
     margin: 6px 0;
     flex-direction: column;
-    width: 80%;
+    height: auto;
   }
 
   #menu li .menu-label {
@@ -1847,7 +1847,12 @@ form button[type=submit]:hover {
     background: transparent;
     box-shadow: none;
     color: #ffffff;
-    padding-left: 12px;
+    margin-left: 16px;
+    border-left: solid 1px #ffffff;
+  }
+
+  #menu .dropdown-menu li:hover {
+    background: transparent;
   }
 
   #menu .dropdown-menu a {
@@ -1857,6 +1862,10 @@ form button[type=submit]:hover {
     text-align: left;
   }
 
+  #menu .dropdown-menu li:hover a {
+    color: #ffffff;
+  }
+
   #menu .dropdown.dropdown-displayed a {
     color: #ffffff;
   }

ot_templating/Resources/Public/assets/Classic/style/theme-purple.css

@@ -1777,7 +1777,7 @@ form button[type=submit]:hover {
     margin: auto;
   }
 }
-@media not all and (hover: none), screen and (max-width: 900px) {
+@media screen and (hover: none), screen and (max-width: 900px) {
   #menu {
     display: none;
     flex-direction: column;
@@ -1817,7 +1817,7 @@ form button[type=submit]:hover {
   #menu li {
     margin: 6px 0;
     flex-direction: column;
-    width: 80%;
+    height: auto;
   }
 
   #menu li .menu-label {
@@ -1847,7 +1847,12 @@ form button[type=submit]:hover {
     background: transparent;
     box-shadow: none;
     color: #ffffff;
-    padding-left: 12px;
+    margin-left: 16px;
+    border-left: solid 1px #ffffff;
+  }
+
+  #menu .dropdown-menu li:hover {
+    background: transparent;
   }
 
   #menu .dropdown-menu a {
@@ -1857,6 +1862,10 @@ form button[type=submit]:hover {
     text-align: left;
   }
 
+  #menu .dropdown-menu li:hover a {
+    color: #ffffff;
+  }
+
   #menu .dropdown.dropdown-displayed a {
     color: #ffffff;
   }

ot_templating/Resources/Public/assets/Classic/style/theme-red.css

@@ -1777,7 +1777,7 @@ form button[type=submit]:hover {
     margin: auto;
   }
 }
-@media not all and (hover: none), screen and (max-width: 900px) {
+@media screen and (hover: none), screen and (max-width: 900px) {
   #menu {
     display: none;
     flex-direction: column;
@@ -1817,7 +1817,7 @@ form button[type=submit]:hover {
   #menu li {
     margin: 6px 0;
     flex-direction: column;
-    width: 80%;
+    height: auto;
   }
 
   #menu li .menu-label {
@@ -1847,7 +1847,12 @@ form button[type=submit]:hover {
     background: transparent;
     box-shadow: none;
     color: #ffffff;
-    padding-left: 12px;
+    margin-left: 16px;
+    border-left: solid 1px #ffffff;
+  }
+
+  #menu .dropdown-menu li:hover {
+    background: transparent;
   }
 
   #menu .dropdown-menu a {
@@ -1857,6 +1862,10 @@ form button[type=submit]:hover {
     text-align: left;
   }
 
+  #menu .dropdown-menu li:hover a {
+    color: #ffffff;
+  }
+
   #menu .dropdown.dropdown-displayed a {
     color: #ffffff;
   }