Moved filters into expansion panels

frontend/src/app/app.module.ts

@@ -49,6 +49,7 @@ import {MatListModule} from "@angular/material/list";
 import {MatAutocompleteModule} from "@angular/material/autocomplete";
 import { NgModelChangeDebouncedDirective } from './directives/ng-model-change-debounced.directive';
 import { FooterComponent } from './components/footer/footer.component';
+import {MatExpansionModule} from "@angular/material/expansion";
 
 @NgModule({
   declarations: [
@@ -69,43 +70,44 @@ import { FooterComponent } from './components/footer/footer.component';
     NgModelChangeDebouncedDirective,
     FooterComponent
   ],
-  imports: [
-    BrowserModule,
-    AppRoutingModule,
-    BrowserAnimationsModule,
-    FormsModule,
-    MatFormFieldModule,
-    MatCardModule,
-    MatTabsModule,
-    MatToolbarModule,
-    MatMenuModule,
-    MatIconModule,
-    HttpClientModule,
-    FormsModule,
-    ReactiveFormsModule,
-    MatDialogModule,
-    MatButtonModule,
-    MatInputModule,
-    FlexModule,
-    MatProgressSpinnerModule,
-    MatTableModule,
-    MatPaginatorModule,
-    MatSortModule,
-    MatSnackBarModule,
-    MatGridListModule,
-    FlexLayoutModule,
-    GridModule,
-    YouTubePlayerModule,
-    MatChipsModule,
-    MatTooltipModule,
-    MatSlideToggleModule,
-    MatCheckboxModule,
-    A11yModule,
-    MatTableFilterModule,
-    MatDividerModule,
-    MatListModule,
-    MatAutocompleteModule
-  ],
+    imports: [
+        BrowserModule,
+        AppRoutingModule,
+        BrowserAnimationsModule,
+        FormsModule,
+        MatFormFieldModule,
+        MatCardModule,
+        MatTabsModule,
+        MatToolbarModule,
+        MatMenuModule,
+        MatIconModule,
+        HttpClientModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MatDialogModule,
+        MatButtonModule,
+        MatInputModule,
+        FlexModule,
+        MatProgressSpinnerModule,
+        MatTableModule,
+        MatPaginatorModule,
+        MatSortModule,
+        MatSnackBarModule,
+        MatGridListModule,
+        FlexLayoutModule,
+        GridModule,
+        YouTubePlayerModule,
+        MatChipsModule,
+        MatTooltipModule,
+        MatSlideToggleModule,
+        MatCheckboxModule,
+        A11yModule,
+        MatTableFilterModule,
+        MatDividerModule,
+        MatListModule,
+        MatAutocompleteModule,
+        MatExpansionModule
+    ],
   providers: [
     {
       provide: HTTP_INTERCEPTORS,

frontend/src/app/components/library-overview/library-overview.component.html

@@ -27,7 +27,7 @@
 
       <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="6px">
         <mat-icon matTooltip="Search for games by title">search</mat-icon>
-        <mat-form-field fxFlex="80" class="filter-category-content">
+        <mat-form-field fxFlex="100" class="filter-category-content">
           <input type="text" matInput [matAutocomplete]="librarySearchAutocomplete" [(ngModel)]="searchTerm" (ngModelChange)="filterGames()">
           <mat-autocomplete #librarySearchAutocomplete="matAutocomplete">
             <mat-option *ngFor="let game of games" [value]="game.title">
@@ -37,12 +37,15 @@
         </mat-form-field>
       </div>
 
-      <div>
-        <div fxLayout="row" fxLayoutAlign="start start" fxLayoutGap="6px">
-          <h3 class="filter-category-title">Gamemodes</h3>
-          <mat-icon matTooltip="Filter may not work correctly, working on a fix" color="warn">error</mat-icon>
-        </div>
-        <div fxLayout="column" class="filter-category-content">
+      <mat-expansion-panel>
+        <mat-expansion-panel-header>
+          <mat-panel-title fxLayout="row" fxLayoutAlign="start start" fxLayoutGap="6px">
+            <h3 class="filter-category-title">Gamemodes</h3>
+            <mat-icon matTooltip="Filter may not work correctly, working on a fix" color="warn">error</mat-icon>
+          </mat-panel-title>
+        </mat-expansion-panel-header>
+
+        <div fxLayout="column">
           <mat-checkbox [(ngModel)]="offlineCoopFilterEnabled" (change)="filterGames()" color="primary">Offline Co-op
           </mat-checkbox>
           <mat-checkbox [(ngModel)]="onlineCoopFilterEnabled" (change)="filterGames()" color="primary">Online Co-op
@@ -50,28 +53,35 @@
           <mat-checkbox [(ngModel)]="lanSupportFilterEnabled" (change)="filterGames()" color="primary">LAN Support
           </mat-checkbox>
         </div>
-      </div>
+      </mat-expansion-panel>
 
-      <div *ngIf="availableGenres.length > 0">
-        <h3 class="filter-category-title">Genres</h3>
-        <div fxLayout="column" class="filter-category-content">
+      <mat-expansion-panel *ngIf="availableGenres.length > 0">
+        <mat-expansion-panel-header>
+          <h3 class="filter-category-title">Genres</h3>
+        </mat-expansion-panel-header>
+
+        <div fxLayout="column">
           <mat-checkbox *ngFor="let genre of availableGenres" (change)="toggleGenreFilter(genre.slug)"
                         [checked]="activeGenreFilters.includes(genre.slug)"
                         color="primary">{{genre.name}}</mat-checkbox>
         </div>
-      </div>
+      </mat-expansion-panel>
 
-      <div *ngIf="availableThemes.length > 0">
-        <h3 class="filter-category-title">Themes</h3>
-        <div fxLayout="column" class="filter-category-content">
+      <mat-expansion-panel *ngIf="availableThemes.length > 0">
+        <mat-expansion-panel-header>
+          <h3 class="filter-category-title">Themes</h3>
+        </mat-expansion-panel-header>
+
+        <div fxLayout="column">
           <mat-checkbox *ngFor="let theme of availableThemes" (change)="toggleThemeFilter(theme.slug)"
                         [checked]="activeThemeFilters.includes(theme.slug)"
                         color="primary">{{theme.name}}</mat-checkbox>
         </div>
-      </div>
-
+      </mat-expansion-panel>
     </div>
 
+    <div fxFlex="0 1 1" fxHide fxShow.gt-lg><!--SPACER--></div>
+
     <div fxFlex fxLayout="row wrap" fxLayoutGap="16px grid">
       <div *ngFor="let game of games">
         <game-cover [game]="game"></game-cover>

frontend/src/app/components/library-overview/library-overview.component.scss

@@ -44,10 +44,6 @@
   margin-bottom: 0;
 }
 
-.filter-category-content {
-  margin-left: 6px;
-}
-
 ::ng-deep .mat-checkbox-frame {
   $config: mat.get-color-config($custom-theme);
   $primary-palette: map.get($config, 'primary');