Позиция CSS не работает должным образом при развертывании Angular PWA на страницах GitHub - PullRequest
Новая
       6

Позиция CSS не работает должным образом при развертывании Angular PWA на страницах GitHub

0 голосов
/ 09 января 2020

Вчера я начал работать над Po C для PWA, построенного с использованием Angular (Материал). Для быстрого тестирования я развертываю приложение на страницах GitHub, но у меня возникает странная проблема CSS.

При запуске приложения локально или на моем собственном VPS отображается боковая навигация и Меню гамбургера работает как положено: оно открывается и закрывается при нажатии. Все идет нормально. Теперь, когда я развертываю приложение на страницах GH, боковой навигации нигде не найти. Когда я возился с инспектором, я сузил его до: 

.mat-drawer-container {
  position: relative;
}

Когда я отключаю свойство position, появляется боковая навигация, но она перекрывает панель инструментов. Что и следовало ожидать. Но я нахожу очень странным, что страницы GitHub почему-то не учитывают «относительную» позицию.

Код для компонента навигации: 

    <mat-toolbar color="primary">
      <button
        type="button"
        aria-label="Toggle sidenav"
        mat-icon-button
        (click)="drawer.toggle()"
        *ngIf="isHandset$ | async">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <span>kangoeroes-poef</span>
    </mat-toolbar><mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav"
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [mode]="(isHandset$ | async) ? 'over' : 'side'"
      [opened]="(isHandset$ | async) === false">
   <!-- <mat-toolbar>Menu</mat-toolbar>-->
    <mat-nav-list>
      <a mat-list-item href="#">Link Een</a>
      <a mat-list-item href="#">Link 2</a>
      <a mat-list-item href="#">Link 3</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <router-outlet></router-outlet>

  </mat-sidenav-content>
</mat-sidenav-container>

S CSS для компонент навигации: 

.sidenav-container {
  height: 100%;
}

.sidenav {
  width: 200px;
}

.sidenav .mat-toolbar {
  background: inherit;
}

Кто-нибудь имел это раньше? Я что-то упускаю из виду или это может быть проблемой со страницами GitHub?

Вы можете увидеть живое приложение здесь: https://poef.dekangoeroes.be

Код можно найти здесь : https://github.com/fosdekangoeroes/kangoeroes.poef

Спасибо!

1 Ответ

0 голосов
/ 09 января 2020

После еще нескольких поисков и прочтения документов Angular Материала я сам нашел решение:

HTML: 

<div class="container" [class.is-mobile]="isHandset$ | async">
  <mat-toolbar color="primary">
    <button
      type="button"
      aria-label="Toggle sidenav"
      mat-icon-button
      (click)="drawer.toggle()"
      *ngIf="isHandset$ | async"

    >
      <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
    </button>
    <span>kangoeroes-poef</span>
  </mat-toolbar>
  <mat-sidenav-container
    class="sidenav-container"
    [style.marginTop.px]="(isHandset$ | async) ? 56 : 0"
  >
    <mat-sidenav
      #drawer
      class="sidenav"
      [fixedInViewport]="isHandset$ | async"
      [mode]="(isHandset$ | async) ? 'over' : 'side'"
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      fixedTopGap="56"
      [opened]="(isHandset$ | async) === false"
    >
      <!--<mat-toolbar>Menu</mat-toolbar>-->
      <mat-nav-list>
        <a mat-list-item href="#">Link Een</a>
        <a mat-list-item href="#">Link 2</a>
        <a mat-list-item href="#">Link 3</a>
      </mat-nav-list>
    </mat-sidenav>
    <mat-sidenav-content>
      <router-outlet></router-outlet>
      <!-- Add Content Here -->
    </mat-sidenav-content>
  </mat-sidenav-container>
</div>

CSS: 

.container {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}


.sidenav {
  width:200px;
}
.is-mobile .toolbar {
  position: fixed;
  /* Make sure the toolbar will stay on top of the content as it scrolls past. */
  z-index: 2;
}

.sidenav-container {
  /* When the sidenav is not fixed, stretch the sidenav container to fill the available space. This
     causes `<mat-sidenav-content>` to act as our scrolling element for desktop layouts. */
  flex: 1;
}

.is-mobile .sidenav-container {
  /* When the sidenav is fixed, don't constrain the height of the sidenav container. This allows the
     `<body>` to be our scrolling element for mobile layouts. */
  flex: 1 0 auto;
}
...