refactor: #dev styling changes

theImmortalCoders · Sep 28, 2024 · 0d4da5c · 0d4da5c
1 parent 06ffade
commit 0d4da5c
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 14 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/app/game/components/data-menu/data-menu.component.ts b/src/app/game/components/data-menu/data-menu.component.ts
@@ -12,17 +12,17 @@ import { DataDownloadComponent } from './components/data-download/data-download.
   template: `
     <button
       (click)="toggleDataMenu()"
-      class="side-menu-right-button top-0 w-12 h-52 {{
-        isDataMenuVisible ? 'right-64' : 'right-0'
+      class="side-menu-right-button top-40 w-12 h-64 {{
+        isDataMenuVisible ? 'right-72' : 'right-0'
       }}">
       <span
         class="[writing-mode:vertical-rl] [text-orientation:upright] tracking-[0.45em]"
         >DATA</span
       >
     </button>
     <div
-      class="w-64 h-52 overflow-y-auto p-5 bg-lightGray font-mono text-sm side-menu-container top-0 {{
-        isDataMenuVisible ? 'right-0' : '-right-64'
+      class="w-72 h-64 overflow-y-auto p-5 bg-lightGray font-mono text-sm side-menu-container top-40 {{
+        isDataMenuVisible ? 'right-0' : '-right-72'
       }}">
       <span class="font-black">Select data to persist:</span>
       @for (variable of dataPossibleToPersist | keyvalue; track variable.key) {
@@ -32,7 +32,7 @@ import { DataDownloadComponent } from './components/data-download/data-download.
           [dataToPersist]="dataToPersist"
           [updateDataToPersist]="updateDataToPersist" />
       }
-      <span class="font-black mt-2 border-t-[1px] border-mainOrange"
+      <span class="font-black mt-2 pt-2 border-t-[1px] border-mainOrange"
         >Data saving interval limit:</span
       >
       <input

diff --git a/src/app/game/components/game-menu/game-menu.component.ts b/src/app/game/components/game-menu/game-menu.component.ts
@@ -7,17 +7,17 @@ import { Component, EventEmitter, Output } from '@angular/core';
   template: `
     <button
       (click)="toggleGameMenu()"
-      class="side-menu-right-button top-56 w-12 h-36 {{
-        isGameMenuVisible ? 'right-64' : 'right-0'
+      class="side-menu-right-button top-0 w-12 h-36 {{
+        isGameMenuVisible ? 'right-72' : 'right-0'
       }}">
       <span
         class="[writing-mode:vertical-rl] [text-orientation:upright] tracking-[0.45em]"
         >GAME</span
       >
     </button>
     <div
-      class="w-64 h-36 overflow-y-auto p-5 bg-lightGray font-mono text-sm side-menu-container top-56 {{
-        isGameMenuVisible ? 'right-0' : '-right-64'
+      class="w-72 h-36 overflow-y-auto p-5 bg-lightGray font-mono text-sm side-menu-container top-0 {{
+        isGameMenuVisible ? 'right-0' : '-right-72'
       }}">
       <button
         (click)="onPauseClick()"

diff --git a/src/app/game/game.page.component.ts b/src/app/game/game.page.component.ts
@@ -45,13 +45,13 @@ import { GameMenuComponent } from './components/game-menu/game-menu.component';
             }
           </div>
           <div class="absolute top-20 right-0 flex flex-col">
+            <app-game-menu
+              (pauseEmitter)="gamePauseSubject.next($event)"
+              (restartEmitter)="gameRestartSubject.next()" />
             <app-data-menu
               *appAuthRequired
               [gameName]="game.name"
               [setDataPossibleToPersist]="gameStateData" />
-            <app-game-menu
-              (pauseEmitter)="gamePauseSubject.next($event)"
-              (restartEmitter)="gameRestartSubject.next()" />
           </div>
         </div>
         <div class="flex w-full items-center justify-center py-12">

diff --git a/src/app/shared/components/notification/notification.component.ts b/src/app/shared/components/notification/notification.component.ts
@@ -8,7 +8,7 @@ import { Subscription } from 'rxjs';
   standalone: true,
   template: `
     <div
-      class="fixed text-sm xs:text-base w-3/5 xs:w-1/2 sm:w-2/5 md:w-1/3 lg:w-1/4 xl:w-1/6 bottom-0 left-0 z-50 font-mono">
+      class="fixed text-sm xs:text-base w-3/5 xs:w-1/2 sm:w-2/5 md:w-1/3 lg:w-1/4 xl:w-1/5 bottom-0 left-0 z-50 font-mono">
       @for (notification of notifications; track notification.id) {
         <div
           [id]="'notification-' + notification.id"