Fix layout for mobile

UniCT-WebDevelopment · Aug 6, 2022 · 6c75723 · 6c75723
1 parent b1a779d
commit 6c75723
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 12 deletions.
diff --git a/noSpotify-Frontend/src/app/app.component.ts b/noSpotify-Frontend/src/app/app.component.ts
@@ -131,12 +131,22 @@ export class AppComponent implements OnInit {
     return this.accountService.userValue.id;
   }
 
+
   clickEvent() {
     this.status = !this.status;
+
+    if (this.screenWidth < 800) {
+      if (this.status) document.getElementById("page-content-wrapper").style.display = "none"
+      else document.getElementById("page-content-wrapper").style.display = "block"
+
+    }
+
   }
+
+
   logout() {
-    if(this.screenWidth<800)
-    this.clickEvent();
+    if (this.screenWidth < 800)
+      this.clickEvent();
     this.accountService.logout();
 
     this.snotifyService.success("Logout effettuato", {
@@ -179,18 +189,18 @@ export class AppComponent implements OnInit {
   }
 
   search() {
-    if(this.screenWidth<800)
-    this.clickEvent();
-        setTimeout(() => {
+    if (this.screenWidth < 800)
+      this.clickEvent();
+    setTimeout(() => {
       let searchTitle = (document.getElementById("searchBox") as HTMLInputElement).value
       this.router.navigate(['search', searchTitle]);
     }, 100);
 
   }
 
   onKeyDownEvent(event: any) {
-    if(this.screenWidth<800)
-    this.clickEvent();
+    if (this.screenWidth < 800)
+      this.clickEvent();
     let searchTitle = (document.getElementById("searchBox") as HTMLInputElement).value
 
     this.router.navigate(['search', searchTitle]);
@@ -208,8 +218,8 @@ export class AppComponent implements OnInit {
 
 
   openPlaylistList() {
-    if(this.screenWidth<800)
-    this.clickEvent();
+    if (this.screenWidth < 800)
+      this.clickEvent();
 
     const modalRef = this.modalService.open(PlaylistListComponent, { size: 'xl' });
     // modalRef.componentInstance.name = 'World';

diff --git a/noSpotify-Frontend/src/app/home/home.component.html b/noSpotify-Frontend/src/app/home/home.component.html
@@ -1,7 +1,7 @@
 <div class="p-4 wrapHome">
   <div class="containerHome filterBrightness" style="background-image: url('../../assets//img/backgroundcover.jpg')">
 
-    <div class="d-flex justify-content-center align-items-center flex-column h-100 w-100 ">
+    <div class="d-flex mt-3 justify-content-start align-items-center flex-column h-100 w-100 ">
       <!-- <div class=" d-flex justify-content-center"> -->
       <img src="../../assets/img/nospotifylogo.png" class="filterShadow wLogoMobile">
 

diff --git a/noSpotify-Frontend/src/styles.less b/noSpotify-Frontend/src/styles.less
@@ -34,7 +34,7 @@ body {
 #sidebar-wrapper {
   border-right: 3px solid #bfbaba !important;
   min-height: 100vh;
-  margin-left: -22rem;
+  margin-left: -21.5rem;
   -webkit-transition: margin .25s ease-out;
   -moz-transition: margin .25s ease-out;
   -o-transition: margin .25s ease-out;
@@ -164,7 +164,7 @@ body {
   }
 
   .hide {
-    margin-left: -22rem !important;
+    margin-left: -21.5rem !important;
   }
 }