Merge pull request #14806 from opf/bug/52671-work-package-title-not-r…

…eadable-on-smaller-screens [52671] Collapse the sidebar earlier
opf · Feb 20, 2024 · 467923f · 467923f
2 parents d611f32 + 68f556e
commit 467923f
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 19 deletions.
diff --git a/app/views/layouts/base.html.erb b/app/views/layouts/base.html.erb
@@ -158,8 +158,8 @@ See COPYRIGHT and LICENSE files for more details.
     var savedMainMenuWidth = window.OpenProject.guardedLocalStorage("openProject-mainMenuWidth");
     var mainMenuCollapsed =  window.OpenProject.guardedLocalStorage("openProject-mainMenuCollapsed");
 
-    if (window.innerWidth < 768) {
-      // force hide on load for tablet
+    if (window.innerWidth < 1012) {
+      // force hide on load for small desktops
       $('.can-hide-navigation').addClass('hidden-navigation');
     }
 

diff --git a/frontend/src/app/core/browser/device.service.ts b/frontend/src/app/core/browser/device.service.ts
@@ -2,14 +2,14 @@ import { Injectable } from '@angular/core';
 
 @Injectable({ providedIn: 'root' })
 export class DeviceService {
-  public mobileWidthTreshold = 544;
-  public tabletWidthTreshold = 768;
+  public mobileWidthThreshold = 544;
+  public smallDesktopWidthThreshold = 1012;
 
   public get isMobile():boolean {
-    return (window.innerWidth < this.mobileWidthTreshold);
+    return (window.innerWidth < this.mobileWidthThreshold);
   }
 
-  public get isTablet():boolean {
-    return (window.innerWidth < this.tabletWidthTreshold);
+  public get isSmallDesktop():boolean {
+    return (window.innerWidth < this.smallDesktopWidthThreshold);
   }
 }
diff --git a/frontend/src/app/core/main-menu/main-menu-toggle.component.ts b/frontend/src/app/core/main-menu/main-menu-toggle.component.ts
@@ -55,7 +55,8 @@ export class MainMenuToggleComponent extends UntilDestroyedMixin implements OnIn
     readonly topMenu:TopMenuService,
     readonly toggleService:MainMenuToggleService,
     readonly cdRef:ChangeDetectorRef,
-    readonly injector:Injector) {
+    readonly injector:Injector,
+  ) {
     super();
   }
 

diff --git a/frontend/src/app/core/main-menu/main-menu-toggle.service.ts b/frontend/src/app/core/main-menu/main-menu-toggle.service.ts
@@ -67,9 +67,11 @@ export class MainMenuToggleService {
 
   public changeData$ = this.changeData.asObservable();
 
-  constructor(protected I18n:I18nService,
+  constructor(
+    protected I18n:I18nService,
     public injector:Injector,
-    readonly deviceService:DeviceService) {
+    readonly deviceService:DeviceService,
+  ) {
   }
 
   public initializeMenu():void {
@@ -93,8 +95,8 @@ export class MainMenuToggleService {
       this.saveWidth(this.defaultWidth);
     }
 
-    // tablet version default: hide menu on initialization
-    this.closeWhenOnTablet();
+    // small desktop version default: hide menu on initialization
+    this.closeWhenOnSmallDesktop();
   }
 
   // click on arrow or hamburger icon
@@ -105,7 +107,7 @@ export class MainMenuToggleService {
     }
 
     if (!this.showNavigation) { // sidebar is hidden -> show menu
-      if (this.deviceService.isTablet) { // tablet version
+      if (this.deviceService.isSmallDesktop) { // small desktop version
         this.setWidth(window.innerWidth);
       } else { // desktop version
         const savedWidth = parseInt(window.OpenProject.guardedLocalStorage(this.localStorageKey) as string);
@@ -131,8 +133,8 @@ export class MainMenuToggleService {
     jQuery('.searchable-menu--search-input').blur();
   }
 
-  public closeWhenOnTablet():void {
-    if (this.deviceService.isTablet) {
+  public closeWhenOnSmallDesktop():void {
+    if (this.deviceService.isSmallDesktop) {
       this.closeMenu();
       window.OpenProject.guardedLocalStorage(this.localStorageStateKey, 'false');
     }
@@ -147,7 +149,7 @@ export class MainMenuToggleService {
   public setWidth(width?:any):void {
     if (width !== undefined) {
       // Leave a minimum amount of space for space for the content
-      const maxMenuWidth = this.deviceService.isTablet ? window.innerWidth - 120 : window.innerWidth - 520;
+      const maxMenuWidth = this.deviceService.isSmallDesktop ? window.innerWidth - 120 : window.innerWidth - 520;
       if (width > maxMenuWidth) {
         this.elementWidth = maxMenuWidth;
       } else {

diff --git a/frontend/src/global_styles/layout/_main_menu_mobile.sass b/frontend/src/global_styles/layout/_main_menu_mobile.sass
@@ -26,12 +26,10 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-@media screen and (max-width: $breakpoint-md)
+@media screen and (max-width: $breakpoint-lg)
   .main-menu
     @include spot-z-index("main-menu")
-    width: var(--breakpoint-sm)
     position: fixed
-    border-bottom: 1px solid var(--main-menu-border-color)
     border: none
     box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.15)
     min-width: 75vw