Option to disable container and use full page width

LittleBigRefresh · Nov 6, 2023 · 681ae26 · 681ae26
1 parent cc031e5
commit 681ae26
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 8 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -10,8 +10,9 @@
     </ng-container>
 </ng-container>
 
-<div class="bg-header-background text-header-foreground border-b-backdrop default:border-b-2 h-[59px] flex items-center flex-col">
-  <div class="container items-center flex h-[59px]">
+<div class="bg-header-background text-header-foreground border-b-backdrop default:border-b-2 h-[59px] items-center flex-col"
+    [ngClass]="themeService.GetUseFullPageWidth() ? '' : 'flex'">
+  <div class="items-center flex h-[59px]" [ngClass]="themeService.GetUseFullPageWidth() ? 'px-5' : 'container'">
     <div class="flex mr-2.5">
       <a class="bg-logo bg-cover cursor-pointer w-12 h-12 drop-shadow-lg" *ngIf="getTheme() != 'hotdogStand'" routerLink="/" title="Home"></a>
       <a class="bg-cover cursor-pointer w-12 h-12 drop-shadow-lg text-5xl leading-[3rem]" *ngIf="getTheme() == 'hotdogStand'" routerLink="/" title="Home">🌭</a>
@@ -38,7 +39,7 @@
 </div>
 
 <div class="w-full flex justify-center">
-  <div class="flex container h-0 z-50">
+  <div class="flex h-0 z-50" [ngClass]="themeService.GetUseFullPageWidth() ? 'w-full px-5' : 'container'">
     <div class="flex-grow"></div> <!-- force all menus to be on the right -->
     <div class="drop-shadow-lg" #login [hidden]="true" *ngIf="!user">
       <app-login></app-login>
@@ -80,7 +81,9 @@
             [id]="bannerService.banners.indexOf(n)"
 />
 
-<div class="container mx-auto bg-backdrop p-5 grid min-h-full h-full mb-10 text-foreground lighthouse:border-x border-divider"
-     [@routeAnimations]="o.isActivated ? o.activatedRoute : ''">
-  <router-outlet #o="outlet"></router-outlet>
+<div [ngClass]="themeService.GetUseFullPageWidth() ? '' : 'container mx-auto'">
+    <div class="bg-backdrop p-5 grid min-h-full h-full mb-10 text-foreground lighthouse:border-x border-divider"
+         [@routeAnimations]="o.isActivated ? o.activatedRoute : ''">
+        <router-outlet #o="outlet"></router-outlet>
+    </div>
 </div>
diff --git a/src/app/pages/settings/settings.component.html b/src/app/pages/settings/settings.component.html
@@ -33,6 +33,8 @@
   <div class="justify-self-end" *ngIf="themingSupported">
     <page-header class="text-3xl">Appearance <span-gentle>(beta)</span-gentle></page-header>
     <form-dropdown name="Theme" [options]="themes" (change)="themeChanged()" [(value)]="theme"></form-dropdown>
+    <br>
+    <form-checkbox [icon]="faLeftRight" name="Use full page width" (change)="themeChanged()" [(value)]="useFullPageWidth"></form-checkbox>
   </div>
 </div>
 

diff --git a/src/app/pages/settings/settings.component.ts b/src/app/pages/settings/settings.component.ts
@@ -7,7 +7,7 @@ import {
     faEnvelope,
     faFloppyDisk,
     faGamepad,
-    faKey,
+    faKey, faLeftRight,
     faPencil,
     faTrash
 } from "@fortawesome/free-solid-svg-icons";
@@ -69,10 +69,12 @@ export class SettingsComponent implements OnInit {
     ]
 
     theme: string;
+    useFullPageWidth: boolean;
 
     constructor(private authService: AuthService, private themeService: ThemeService) {
         this.themingSupported = themeService.IsThemingSupported();
         this.theme = themeService.GetTheme();
+        this.useFullPageWidth = themeService.GetUseFullPageWidth();
     }
 
     ngOnInit(): void {
@@ -108,6 +110,7 @@ export class SettingsComponent implements OnInit {
 
     themeChanged() {
         this.themeService.SetTheme(this.theme);
+        this.themeService.SetUseFullPageWidth(this.useFullPageWidth);
     }
 
     protected readonly faPencil = faPencil;
@@ -119,4 +122,5 @@ export class SettingsComponent implements OnInit {
     protected readonly faCamera = faCamera;
     protected readonly faFloppyDisk = faFloppyDisk;
     protected readonly faCancel = faCancel;
+    protected readonly faLeftRight = faLeftRight;
 }
diff --git a/src/app/theme.service.ts b/src/app/theme.service.ts
@@ -5,23 +5,37 @@ import {isPlatformBrowser} from "@angular/common";
     providedIn: 'root'
 })
 export class ThemeService {
+    private readonly themeKey: string = "theme";
+    private readonly themeWidthKey: string = "theme-width";
     private readonly isBrowser: boolean;
 
+    private useFullPageWidth: boolean = false;
+
     constructor(@Inject(PLATFORM_ID) platformId: Object) {
         this.isBrowser = isPlatformBrowser(platformId);
+        this.useFullPageWidth = this.GetUseFullPageWidth();
     }
 
     public IsThemingSupported(): boolean {
         return this.isBrowser;
     }
 
     public SetTheme(theme: string): void {
-        localStorage.setItem("theme", theme);
+        localStorage.setItem(this.themeKey, theme);
 
         // @ts-ignore
         return document.getRootNode().children[0].className = theme;
     }
 
+    public SetUseFullPageWidth(value: boolean): void {
+        this.useFullPageWidth = value;
+        localStorage.setItem(this.themeWidthKey, String(this.useFullPageWidth));
+    }
+
+    public GetUseFullPageWidth(): boolean {
+        return JSON.parse(localStorage.getItem(this.themeWidthKey) ?? 'false');
+    }
+
     public GetTheme(): string {
         // @ts-ignore
         return document.getRootNode().children[0].className ?? "default";