Merge pull request #149 from ioet/140/fix-dashboard-structure

fix: #140 Refactor dashboard structure

Author: enriquezrene

src/app/modules/activities-management/components/activity-list/activity-list.component.html

@@ -1,4 +1,4 @@
-<div class="card-body">
+<div class="card-body pt-0 mt-4">
   <div class="scroll">
     <div class="accordion" id="accordionActivities">
       <div *ngIf="activities?.length > 0; else notShow">

src/app/modules/activities-management/components/create-activity/create-activity.component.html

@@ -1,4 +1,4 @@
-<div class="card">
+<div class="card mt-4">
   <form class="card-body" [formGroup]="activityForm" (ngSubmit)="onSubmit(activityForm.value)">
     <h1 class="card-title">Activity</h1>
     <div class="form-group">

src/app/modules/activities-management/pages/activities-management.component.html

@@ -1,5 +1,10 @@
-<div class="parent">
-  <app-create-activity class="item"> </app-create-activity>
-
-  <app-activity-list class="item"> </app-activity-list>
+<div class="container">
+  <div class="row">
+    <div class="col">
+      <app-create-activity></app-create-activity>
+    </div>
+    <div class="col">
+      <app-activity-list></app-activity-list>
+    </div>
+  </div>
 </div>

src/app/modules/activities-management/pages/activities-management.component.scss

@@ -1,21 +0,0 @@
-.parent {
-    display: flex;
-  }
-
-.item {
-  width: 50%;
-  margin: 2em;
-  min-height: 500px;
-  max-height: 500px;
-}
-
-@media screen and (max-width: 600px){
-  .parent {
-    flex-direction: column-reverse;
-  }
-
-  .item {
-    width: auto;
-    min-height: 200px;
-  }
-}

src/app/modules/shared/components/navbar/navbar.component.html

@@ -1,4 +1,4 @@
-<nav class="navbar navbar-light bg-white border-light border-bottom mt-1">
+<nav class="navbar navbar-fixed-top h-100 border-bottom">
   <div class="col-10 text-center">
     <app-clock></app-clock>
   </div>

src/app/modules/shared/components/sidebar/sidebar.component.html

@@ -1,29 +1,26 @@
 <div class="d-flex" id="wrapper">
   <!-- Sidebar -->
-  <div class="mt-1 ml-1 rounded-lg" id="sidebar-wrapper" *ngIf="itemsSidebar?.length > 0">
-    <div class="text-center mt-5 mb-5">
-      <img
-        src="assets/img/ioet-logo-light.png"
-        width="100"
-        height="100"
-        class="img-fluid text-center"
-        alt="Ioet logo"
-      />
+  <div id="sidebar-wrapper" *ngIf="itemsSidebar?.length > 0">
+    <div class="text-center my-5">
+      <img src="assets/img/ioet-logo-light.png" width="70" height="auto" class="img-fluid" alt="Ioet logo" />
     </div>
-    <div class="list-group list-group-flush rounded-lg">
+    <div class="d-flex flex-column">
       <a
         *ngFor="let item of itemsSidebar"
         [routerLink]="item.route"
         routerLinkActive="background-item-sidebar-active"
-        class="list-group-item list-group-item-action content-sidebar-style item-hover"
-        ><i class="{{ item.icon }} mr-3 ml-3"></i> {{ item.text }}</a
+        class="item-hover text-white p-3 text-decoration-none"
+      >
+        <i class="{{ item.icon }} mr-3 ml-3"></i> {{ item.text }}</a
       >
     </div>
   </div>
   <!-- /#sidebar-wrapper -->
-  <div class="container-fluid mt-1">
-    <app-navbar></app-navbar>
-    <div class="container">
+  <div class="main_app">
+    <div class="header_app">
+      <app-navbar></app-navbar>
+    </div>
+    <div class="content_app">
       <!-- Page Content -->
       <router-outlet></router-outlet>
     </div>

src/app/modules/shared/components/sidebar/sidebar.component.scss

@@ -1,57 +1,44 @@
 @import '../../../../../styles/colors.scss';
 
-body {
-  overflow-x: hidden;
-}
+#wrapper {
+  height: 100vh;
 
-#sidebar-wrapper {
-  min-height: 100vh;
-  margin-left: -15rem;
-  -webkit-transition: margin 0.25s ease-out;
-  -moz-transition: margin 0.25s ease-out;
-  -o-transition: margin 0.25s ease-out;
-  transition: margin 0.25s ease-out;
-  background-image: $background-gradient-pantone;
-}
+  #sidebar-wrapper {
+    flex: 0 0 14.5rem;
+    box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.3);
+    background-image: $background-gradient-pantone;
+    z-index: 1;
+    margin-left: -15rem;
+    -webkit-transition: margin 0.25s ease-out;
+    -moz-transition: margin 0.25s ease-out;
+    -o-transition: margin 0.25s ease-out;
+    transition: margin 0.25s ease-out;
+  }
 
-#sidebar-wrapper .sidebar-heading {
-  padding: 0.875rem 1.25rem;
-  font-size: 1.2rem;
-}
+  .main_app {
+    flex: 1;
+  }
 
-#sidebar-wrapper .list-group {
-  width: 15rem;
-}
+  .header_app {
+    height: 8%;
+  }
 
-#page-content-wrapper {
-  min-width: 100vw;
-}
+  .content_app {
+    height: 92%;
+    padding: 1rem 3rem;
+    overflow-y: auto;
+  }
 
-#wrapper.toggled #sidebar-wrapper {
-  margin-left: 0;
+  .background-item-sidebar-active,
+  .item-hover:hover {
+    background-color: $item-background;
+  }
 }
 
 @media (min-width: 768px) {
-  #sidebar-wrapper {
-    margin-left: 0;
-  }
-  #page-content-wrapper {
-    min-width: 0;
-    width: 100%;
-  }
-  #wrapper.toggled #sidebar-wrapper {
-    margin-left: -15rem;
+  #wrapper {
+    #sidebar-wrapper {
+      margin-left: 0;
+    }
   }
 }
-
-.content-sidebar-style {
-  background-color: transparent;
-  color: white;
-  font-weight: bold;
-  border: 0px;
-}
-
-.background-item-sidebar-active,
-.item-hover:hover {
-  background-color: $item-background;
-}

src/styles.scss

@@ -1,4 +1,14 @@
 /* You can add global styles to this file, and also import other style files */
 
-@import "styles/themes/orange-theme";
-@import "~bootstrap/scss/bootstrap";
+@import 'styles/themes/orange-theme';
+@import '~bootstrap/scss/bootstrap';
+
+html,
+body {
+  font-family: 'Roboto', sans-serif;
+  height: 100vh;
+  width: 100vw;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+}