fixed mobile view

OpenCovenant · Oct 9, 2024 · 4629865 · 4629865
1 parent 8dd249d
commit 4629865
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 17 deletions.
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
@@ -390,6 +390,6 @@ <h5 id="side-menu-start-label">penda</h5>
                 >
             }
         </div>
-            <app-dark-mode-buttons />
+        <app-dark-mode-buttons />
     </div>
 </div>
diff --git a/src/app/settings/dark-mode-buttons/dark-mode-buttons.component.css b/src/app/settings/dark-mode-buttons/dark-mode-buttons.component.css
@@ -161,18 +161,9 @@
 }
 
 @media (max-width: 800px) {
-    .theme-selector-settings-dark-mode {
+    .settings-page .theme-selector,
+    .settings-page .theme-selector-dark-mode {
+        width: auto;
         flex-direction: column;
     }
-
-    .theme-selector-settings {
-        flex-direction: column;
-    }
-
-    .theme-mode-info {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-    }
 }
diff --git a/src/app/settings/dark-mode-buttons/dark-mode-buttons.component.ts b/src/app/settings/dark-mode-buttons/dark-mode-buttons.component.ts
@@ -1,11 +1,12 @@
-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { DarkModeService } from '../../services/dark-mode.service';
 
 @Component({
     selector: 'app-dark-mode-buttons',
     standalone: true,
     imports: [CommonModule],
+    encapsulation: ViewEncapsulation.Emulated,
     templateUrl: './dark-mode-buttons.component.html',
     styleUrl: './dark-mode-buttons.component.css'
 })

diff --git a/src/app/settings/settings.component.css b/src/app/settings/settings.component.css
@@ -156,3 +156,12 @@
     cursor: not-allowed;
     pointer-events: all;
 }
+
+@media (max-width: 800px) {
+    .theme-mode-info {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+}
diff --git a/src/app/settings/settings.component.html b/src/app/settings/settings.component.html
@@ -36,13 +36,15 @@ <h5>Pamja e Zgjedhur</h5>
                                 }
                             </div>
                             <div
-                                class="theme-selector-settings"
+                                class="theme-selector"
                                 [ngClass]="{
-                                    'theme-selector-settings-dark-mode':
+                                    'theme-selector-dark-mode':
                                         darkModeService.isDarkMode
                                 }"
                             >
-                                <app-dark-mode-buttons />
+                                <div class="settings-page">
+                                    <app-dark-mode-buttons />
+                                </div>
                             </div>
                         </div>
                     </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -390,6 +390,6 @@ <h5 id="side-menu-start-label">penda</h5> @@
                     >
                 }
             </div>
-                <app-dark-mode-buttons />
+            <app-dark-mode-buttons />
         </div>
     </div>