소스 검색

refactor(ui): Use matchMedia for desktop breakpoint detection

Replace hardcoded width check with Bootstrap's lg breakpoint (992px)
using matchMedia API. Adds constant with comment linking to navbar
configuration for maintainability.
Martin Hauser 18 시간 전
부모
커밋
105e58a433
3개의 변경된 파일4개의 추가작업 그리고 1개의 파일을 삭제
  1. 0 0
      netbox/project-static/dist/netbox.js
  2. 0 0
      netbox/project-static/dist/netbox.js.map
  3. 4 1
      netbox/project-static/src/sidenav.ts

파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 0 - 0
netbox/project-static/dist/netbox.js


파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 0 - 0
netbox/project-static/dist/netbox.js.map


+ 4 - 1
netbox/project-static/src/sidenav.ts

@@ -4,6 +4,9 @@ import { getElements, isElement } from './util';
 type NavState = { pinned: boolean };
 type NavState = { pinned: boolean };
 type BodyAttr = 'show' | 'hide' | 'hidden' | 'pinned';
 type BodyAttr = 'show' | 'hide' | 'hidden' | 'pinned';
 
 
+// Keep in sync with Bootstrap's `lg` breakpoint and `navbar-expand-lg` in base/layout.html.
+const SIDENAV_DESKTOP_MEDIA = '(min-width: 992px)';
+
 class SideNav {
 class SideNav {
   /**
   /**
    * Sidenav container element.
    * Sidenav container element.
@@ -63,7 +66,7 @@ class SideNav {
       toggler.addEventListener('click', event => this.onMobileToggle(event));
       toggler.addEventListener('click', event => this.onMobileToggle(event));
     }
     }
 
 
-    if (window.innerWidth >= 1200) {
+    if (window.matchMedia(SIDENAV_DESKTOP_MEDIA).matches) {
       if (this.state.get('pinned')) {
       if (this.state.get('pinned')) {
         this.pin();
         this.pin();
       } else {
       } else {

이 변경점에서 너무 많은 파일들이 변경되어 몇몇 파일들은 표시되지 않았습니다.