📱 add responsive design on main template

marcode24 · marcode24 · commit cf401680c325 · 2023-05-01T00:02:02.000-06:00
diff --git a/src/app/core/components/header/header.component.html b/src/app/core/components/header/header.component.html
@@ -1,14 +1,14 @@
 <header>
   <div class="options">
+    <div class="burger" (click)="changeVisibilitySidebar()">
+      <i class="bx bx-menu"></i>
+    </div>
     <div class="search">
       <div class="input-group">
         <input type="text" class="icon" #txtSearch
           placeholder="Search...">
         <i class="bx bx-search"></i>
       </div>
-      <button class="btn btn-primary filter">
-        <i class="bx bx-equalizer"></i>
-      </button>
     </div>
     <div class="user">
       here's user
diff --git a/src/app/core/components/header/header.component.scss b/src/app/core/components/header/header.component.scss
@@ -1,20 +1,28 @@
 @import 'elements/_buttons.scss';
+@import 'settings/_media.scss';
+@import 'settings/_typography.scss';
 
 header {
   position: fixed;
   margin-left: 250px;
   height: 75px;
-  padding: 1rem 0.8rem;
   width: -webkit-fill-available;
   background: var(--bg);
   border-bottom: 2px solid #e0e0e0;
-  z-index: 100;
+  z-index: 90;
+
+  @include width-medium {
+    margin-left: 0;
+    height: 70px;
+  }
 
   & .options {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 1rem;
+    padding: 0 1rem;
+    height: 100%;
 
     & .search {
       flex: 1;
@@ -64,14 +72,31 @@ header {
   }
 }
 
-.btn {
-  &.filter {
-    & i {
-      @include fs-4;
-    }
+.burger {
+  display: none;
+  color: var(--fc-primary);
+  transition: 0.5s;
+  border-radius: 50%;
+  background: transparent;
+  padding: 0.5rem;
+  width: 45px;
+  height: 45px;
+
+  &:hover {
+    background: var(--bg-hover-2);
+    cursor: pointer;
   }
-}
 
+  & i {
+    @include fs-1;
+  }
+
+  @include width-medium {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
 
 .user {
   flex: 1;
diff --git a/src/app/core/components/header/header.component.ts b/src/app/core/components/header/header.component.ts
@@ -5,4 +5,9 @@ import { Component } from '@angular/core';
   templateUrl: './header.component.html',
   styleUrls: ['./header.component.scss']
 })
-export class HeaderComponent {}
+export class HeaderComponent {
+  changeVisibilitySidebar(): void {
+    const sidebarElement = document.querySelector('.sidebar') as HTMLElement;
+    sidebarElement.classList.toggle('closed');
+  }
+}
diff --git a/src/app/core/components/sidebar/sidebar.component.html b/src/app/core/components/sidebar/sidebar.component.html
@@ -1,8 +1,9 @@
-<nav class="sidebar">
+<nav class="sidebar closed">
   <div class="logo">
-    <i class="bx bx-folder"></i>
-    <!-- <img src="" alt="cloud_box_image"> -->
     <span class="name">Cloud Box</span>
+    <div class="close">
+      <i class="bx bx-x" (click)="changeVisibilitySidebar()"></i>
+    </div>
   </div>
   <ul class="items">
     <li class="item">
@@ -11,18 +12,6 @@
         <span class="name">Home</span>
       </a>
     </li>
-    <li class="item">
-      <a href="#">
-        <i class='bx bx-cog'></i>
-        <span class="name">Settings</span>
-      </a>
-    </li>
-    <li class="item">
-      <a href="#">
-        <i class='bx bx-trash'></i>
-        <span class="name">Deleted</span>
-      </a>
-    </li>
     <li class="item space">
       <div class="used-space">
         <span class="name">Espacio utilizado</span>
diff --git a/src/app/core/components/sidebar/sidebar.component.scss b/src/app/core/components/sidebar/sidebar.component.scss
@@ -1,23 +1,34 @@
 @import 'settings/_typography.scss';
+@import 'settings/_media.scss';
 
 nav {
   position: fixed;
   height: 100%;
   width: 250px;
   padding: 1rem 0.8rem;
   z-index: 100;
-  transition: 0.5s ease;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   background: var(--bg-sidebar);
   gap: 2rem;
+  transition: margin-left 0.3s ease-in-out;
+
+  &.closed {
+    margin-left: -250px;
+  }
+
+  @media (min-width: 769px) {
+    margin-left: 0 !important;
+  }
 }
 
 .logo {
   display: flex;
   align-items: center;
+  justify-content: space-between;
   gap: 1rem;
+  width: 100%;
 
   & .name {
     @include fs-1;
@@ -110,3 +121,26 @@ nav {
   }
 }
 
+.close {
+  display: none;
+  color: var(--fc-primary);
+  transition: 0.5s;
+  border-radius: 50%;
+  background: var(--bg-hover-2);
+  width: 45px;
+  height: 45px;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  & i {
+    @include fs-1;
+  }
+
+  @include width-medium {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
diff --git a/src/app/core/components/sidebar/sidebar.component.ts b/src/app/core/components/sidebar/sidebar.component.ts
@@ -32,4 +32,9 @@ export class SidebarComponent implements OnDestroy, OnInit {
     const percentage = this.userActive.usedSpace / this.userActive.totalSpace * 100;
     return `${percentage}%`;
   }
+
+  changeVisibilitySidebar(): void {
+    const sidebarElement = document.querySelector('.sidebar') as HTMLElement;
+    sidebarElement.classList.toggle('closed');
+  }
 }
diff --git a/src/app/features/features.component.scss b/src/app/features/features.component.scss
@@ -1,4 +1,10 @@
+@import 'settings/_media.scss';
+
 .content {
   padding-top: 75px;
   height: 100%;
+
+  @include width-medium {
+    padding-top: 70px;
+  }
 }
diff --git a/src/app/features/folder/components/table-files/table-files.component.scss b/src/app/features/folder/components/table-files/table-files.component.scss
@@ -1,5 +1,6 @@
 @import 'settings/_colors.scss';
 @import 'settings/_typography.scss';
+@import 'settings/_media.scss';
 
 .item {
   display: flex;
@@ -12,6 +13,10 @@
   transition: 0.3s ease;
   cursor: pointer;
 
+  @include width-medium {
+    padding: 0.5rem 0.2rem;
+  }
+
   &:hover {
     background: var(--bg-hover-3);
   }
@@ -24,6 +29,10 @@
     max-width: 80%;
     flex: 1;
 
+    @include width-medium {
+      gap: 0.5rem;
+    }
+
     & .icon {
       @include fs-2;
       width: 2.5rem;
@@ -32,6 +41,12 @@
       display: flex;
       align-items: center;
       justify-content: center;
+
+      @include width-medium {
+        width: 2rem;
+        height: 2rem;
+        @include fs-3;
+      }
     }
 
     & .name, & .type, & .size {
@@ -45,12 +60,29 @@
       @include fw-400;
       flex: 2;
       color: var(--fc-primary);
+
+      @include width-medium {
+        @include fs-6;
+        flex: 3;
+      }
     }
 
     & .type, & .size {
       @include fs-6;
       flex: 1;
       color: var(--fc-secondary);
+      text-transform: uppercase;
+
+      @include width-medium {
+        @include fs-7;
+      }
+    }
+
+    & .type {
+
+      @include width-medium {
+        display: none;
+      }
     }
   }
 
diff --git a/src/app/shared/breadcrumbs/breadcrumb/breadcrumb.component.scss b/src/app/shared/breadcrumbs/breadcrumb/breadcrumb.component.scss
@@ -1,5 +1,6 @@
 @import 'settings/_colors.scss';
 @import 'settings/_typography.scss';
+@import 'settings/_media.scss';
 
 .items {
   display: flex;
@@ -17,6 +18,14 @@
     align-items: center;
     max-width: 300px;
 
+    @include width-medium {
+      @include fs-4;
+    }
+
+    @include width-small {
+      @include fs-5;
+    }
+
     & a {
       color: var(--fc-primary);
       text-decoration: none;
diff --git a/src/app/shared/headers/actions/actions.component.html b/src/app/shared/headers/actions/actions.component.html
@@ -2,7 +2,7 @@
   <app-breadcrumb></app-breadcrumb>
   <div class="new">
     <button #btnDrop class="btn btn-primary btn-select" (click)="openDrop(btnDrop)">
-      Nuevo
+      <span class="title">Nuevo</span>
       <i class="bx bx-plus"></i>
     </button>
     <ul class="list-items">
diff --git a/src/app/shared/headers/actions/actions.component.scss b/src/app/shared/headers/actions/actions.component.scss
@@ -1,5 +1,18 @@
 @import 'settings/_colors.scss';
 @import 'settings/_typography.scss';
+@import 'settings/_media.scss';
+
+.btn-select {
+  & .title {
+    @include width-small {
+      display: none;
+    }
+  }
+
+  @include width-small {
+    width: 40px;
+  }
+}
 
 .btn-select.open ~ .list-items {
   display: block;
diff --git a/src/app/shared/modals/new-folder/new-folder.component.html b/src/app/shared/modals/new-folder/new-folder.component.html
@@ -1,7 +1,7 @@
 <div class="modal dialog" #modalFolder>
   <div class="modal-content">
     <div class="header">
-      <span class="title">Cambiar nombre</span>
+      <span class="title">Nueva carpeta</span>
       <div class="i-wrapper">
         <i class="bx bx-x" (click)="closeModal()"></i>
       </div>
diff --git a/src/assets/scss/settings/_colors.scss b/src/assets/scss/settings/_colors.scss
@@ -1,6 +1,6 @@
 $purple: #6A4BFF;
 $purple-rgba: rgb(106, 75, 255, 0.8);
-$purple-light: #694bff1a;
+$purple-light: #efebff;
 $dark: #171725;
 $black-accent: #1D2335;
 
diff --git a/src/styles.scss b/src/styles.scss
@@ -46,6 +46,10 @@ body.modal-open {
     min-height: 100vh;
     margin-left: 250px;
     width: auto;
+
+    @include width-medium {
+      margin-left: 0;
+    }
   }
 }
 
@@ -70,6 +74,10 @@ body.modal-open {
   flex-direction: column;
   gap: 1rem;
   min-height: calc(100vh - 75px);
+
+  @include width-medium {
+    padding: 0.6rem 0.4rem;
+  }
 }
 
 

Original file line number	Diff line number	Diff line change
`@@ -32,4 +32,9 @@ export class SidebarComponent implements OnDestroy, OnInit {`
`32`	`32`	`const percentage = this.userActive.usedSpace / this.userActive.totalSpace * 100;`
`33`	`33`	return `${percentage}%`;
`34`	`34`	`}`
	`35`	`+`
	`36`	`+ changeVisibilitySidebar(): void {`
	`37`	`+ const sidebarElement = document.querySelector('.sidebar') as HTMLElement;`
	`38`	`+ sidebarElement.classList.toggle('closed');`
	`39`	`+ }`
`35`	`40`	`}`