Merge branch 'redmine-issues/18130' into 'develop'

REDMINE_ISSUE-18130 | Améliorer l'affichage du logo dans la barre de menu

See merge request !626

src/components/AppHeader.vue

@@ -326,9 +326,12 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.menu.container a.header > img {
-  max-width: 140px;
-  max-height: 25px;
+.menu.container a.header {
+  padding-top: 5px !important;
+  padding-bottom: 5px !important;
+  &> img {
+    max-height: 50px;
+  }
 }
 
 .vertical {
@@ -366,13 +369,13 @@ export default {
   }
 }
 
-@media screen and (max-width: 985px) {
+@media screen and (max-width: 1110px) {
   .abstract{
     display: none !important;
   }
 }
 
-@media screen and (min-width: 560px) {
+@media screen and (min-width: 726px) {
   .mobile {
     display: none !important;
   }
@@ -387,27 +390,36 @@ export default {
   }
 }
 
-@media screen and (max-width: 590px) {
+@media screen and (max-width: 725px) {
   .desktop {
     display: none !important;
   }
   div.dropdown-list {
     width: 100vw;
-    left: -70px !important; /* should be the same than belows */
   }
   .menu.container a.header {
-    width: 70px;
-    padding: 0 5px !important;
+    //width: 70px;
+    width: 100%;
+  }
+  #app-header {
+    /*  make the logo disappear on scroll */
+    position: sticky;
+    top: -110px;
+    height: 100px;
+    .menu.container {
+      /*  make the logo disappear on scroll */
+      height: 50px;
+      position: sticky;
+      top: 0;
+    }
   }
-  
   .menu.container a.header > img {
     margin: 0;
     margin: auto;
     max-width: 100%;
   }
   #menu-dropdown {
-    width: calc(100vw - 70px);
-    //justify-content: space-between;
+    width: 100%;
   }
   #menu-dropdown > span {
     text-overflow: ellipsis;
@@ -430,6 +442,8 @@ export default {
   z-index: 1001;
   .menu.container .ui.inverted.icon.menu { /* avoid adding space when messages are displayed */
     margin: 0;
+    display: flex;
+    flex-wrap: wrap;
   }
 }
 .ui.menu .ui.dropdown .menu {