From 6ad595141328e23431c64cfeaff53ffaf403eced Mon Sep 17 00:00:00 2001
From: Desy Ayurianti <desii.ayurianti@gmail.com>
Date: Fri, 8 Nov 2024 10:32:18 +0700
Subject: [PATCH] fix: fix copywrite dan responsivenes

---
 .../pages/dashboard/dashboard.component.html  | 74 +++++++++----------
 .../pages/dashboard/dashboard.component.scss  | 44 +++++++++--
 .../dashboard/layouts/layouts.component.scss  |  3 +-
 .../layouts/sidebar/sidebar.component.html    |  3 +-
 .../layouts/sidebar/sidebar.component.scss    | 18 ++++-
 .../dashboard/page/graph/graph.component.scss |  8 ++
 .../historygraph/historygraph.component.scss  |  9 ++-
 7 files changed, 107 insertions(+), 52 deletions(-)

diff --git a/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.html b/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.html
index db1c89f..31c74f1 100644
--- a/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.html
+++ b/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.html
@@ -8,7 +8,7 @@
   </div>
 
   <div>
-    <button [ngClass]="{'active-button': selectedButton === 'dht'}" (click)="selectSensor('dht')">DHT</button>
+    <button [ngClass]="{'active-button': selectedButton === 'dht'}" (click)="selectSensor('dht')">BHT</button>
     <button [ngClass]="{'active-button': selectedButton === 'npk1'}" (click)="selectSensor('npk1')">NPK 1</button>
     <button [ngClass]="{'active-button': selectedButton === 'npk2'}" (click)="selectSensor('npk2')">NPK 2</button>
     <button [ngClass]="{'active-button': selectedButton === 'relay'}" (click)="selectSensor('relay')">Relay</button>
@@ -50,6 +50,24 @@
   <div *ngIf="!isLoaded && selectedButton === 'npk1'">
     <div *ngIf="sensorData.npk1.temperature || sensorData.npk1.moisture || sensorData.npk1.conductivity; else noData">
       <div class="card-container">
+        <div class="card-parameter">
+          <div>
+            <h3>{{sensorData.npk1.nitrogen}} mg/L</h3>
+            <h6>Nitrogen</h6>
+          </div>
+        </div>
+        <div class="card-parameter">
+          <div>
+            <h3>{{sensorData.npk1.phosphorus}} mg/L</h3>
+            <h6>Phosphorus</h6>
+          </div>
+        </div>
+        <div class="card-parameter">
+          <div>
+            <h3>{{sensorData.npk1.potassium}} mg/L</h3>
+            <h6>Kalium</h6>
+          </div>
+        </div>
         <div class="card-parameter">
           <div>
             <h3>{{sensorData.npk1.temperature}} °C</h3>
@@ -74,24 +92,6 @@
             <h6>pH</h6>
           </div>
         </div>
-        <div class="card-parameter">
-          <div>
-            <h3>{{sensorData.npk1.nitrogen}} mg/L</h3>
-            <h6>Nitrogen</h6>
-          </div>
-        </div>
-        <div class="card-parameter">
-          <div>
-            <h3>{{sensorData.npk1.phosphorus}} mg/L</h3>
-            <h6>Phosphorus</h6>
-          </div>
-        </div>
-        <div class="card-parameter">
-          <div>
-            <h3>{{sensorData.npk1.potassium}} mg/L</h3>
-            <h6>Kalium</h6>
-          </div>
-        </div>
       </div>
     </div>
   </div>
@@ -99,6 +99,24 @@
   <div *ngIf="!isLoaded && selectedButton === 'npk2'">
     <div *ngIf="sensorData.npk2.temperature || sensorData.npk2.moisture || sensorData.npk2.conductivity; else noData">
       <div class="card-container">
+        <div class="card-parameter">
+          <div>
+            <h3>{{sensorData.npk2.nitrogen}} mg/L</h3>
+            <h6>Nitrogen</h6>
+          </div>
+        </div>
+        <div class="card-parameter">
+          <div>
+            <h3>{{sensorData.npk2.phosphorus}} mg/L</h3>
+            <h6>Phosphorus</h6>
+          </div>
+        </div>
+        <div class="card-parameter">
+          <div>
+            <h3>{{sensorData.npk2.potassium}} mg/L</h3>
+            <h6>Kalium</h6>
+          </div>
+        </div>
         <div class="card-parameter">
           <div>
             <h3>{{sensorData.npk2.temperature}} °C</h3>
@@ -123,24 +141,6 @@
             <h6>pH</h6>
           </div>
         </div>
-        <div class="card-parameter">
-          <div>
-            <h3>{{sensorData.npk2.nitrogen}} mg/L</h3>
-            <h6>Nitrogen</h6>
-          </div>
-        </div>
-        <div class="card-parameter">
-          <div>
-            <h3>{{sensorData.npk2.phosphorus}} mg/L</h3>
-            <h6>Phosphorus</h6>
-          </div>
-        </div>
-        <div class="card-parameter">
-          <div>
-            <h3>{{sensorData.npk2.potassium}} mg/L</h3>
-            <h6>Kalium</h6>
-          </div>
-        </div>
       </div>
     </div>
   </div>
diff --git a/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.scss b/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.scss
index f0d512d..ad03ede 100644
--- a/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.scss
+++ b/agrilink_vocpro/src/app/pages/dashboard/dashboard.component.scss
@@ -1,5 +1,10 @@
 .container {
     font-family: "Onest", sans-serif;
+
+    .active-button {
+        background-color: #cad849;
+        color: white;
+    }
 }
 
 .title {
@@ -80,17 +85,45 @@
         flex: 1 1 45%; 
     }
 
-    .card-container{
+    .active-button {
+        background-color: #cad849;
+        color: white;
+    }
+
+    button {
+        color: black;
+        margin-bottom: 20px;
+    }
+
+    .card-container {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 30px;
+        margin-top: 20px;
         justify-content: center;
     }
 }
 
-@media (max-width: 576px) {
+@media (max-width: 344px) {
     .card-parameter{
         flex: 1 1 100%;
     }
 
-    .card-container{
+    button {
+        color: black;
+        margin-bottom: 20px;
+    }
+
+    .active-button {
+        background-color: #cad849;
+        color: white;
+    }
+
+    .card-container {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 30px;
+        margin-top: 20px;
         justify-content: center;
     }
 }
@@ -104,11 +137,6 @@ button {
     margin-right: 20px;
 }
 
-.active-button {
-    background-color: #cad849;
-    color: white;
-}
-
 .loading{
     font-size: 18px;
     text-align: center;
diff --git a/agrilink_vocpro/src/app/pages/dashboard/layouts/layouts.component.scss b/agrilink_vocpro/src/app/pages/dashboard/layouts/layouts.component.scss
index 956b52f..b3f4195 100644
--- a/agrilink_vocpro/src/app/pages/dashboard/layouts/layouts.component.scss
+++ b/agrilink_vocpro/src/app/pages/dashboard/layouts/layouts.component.scss
@@ -9,11 +9,12 @@
     bottom: 0;
     left: 0;
     width: 16.67%; 
-    z-index: 1000;
+    z-index: 1;
     overflow-y: auto; 
 }
 
 .content-area {
+    z-index: 0;
     margin-left: 16.67%; 
     overflow-y: auto; 
     padding-left: 1rem;
diff --git a/agrilink_vocpro/src/app/pages/dashboard/layouts/sidebar/sidebar.component.html b/agrilink_vocpro/src/app/pages/dashboard/layouts/sidebar/sidebar.component.html
index 879e7fa..6e2623d 100644
--- a/agrilink_vocpro/src/app/pages/dashboard/layouts/sidebar/sidebar.component.html
+++ b/agrilink_vocpro/src/app/pages/dashboard/layouts/sidebar/sidebar.component.html
@@ -22,6 +22,5 @@
     <ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1">
         <li><a class="dropdown-item" (click)="onLogout()">Sign out</a></li>
     </ul>
-</div>
-
+    </div>
 </div>
\ No newline at end of file
diff --git a/agrilink_vocpro/src/app/pages/dashboard/layouts/sidebar/sidebar.component.scss b/agrilink_vocpro/src/app/pages/dashboard/layouts/sidebar/sidebar.component.scss
index 4784aa9..64b23d8 100644
--- a/agrilink_vocpro/src/app/pages/dashboard/layouts/sidebar/sidebar.component.scss
+++ b/agrilink_vocpro/src/app/pages/dashboard/layouts/sidebar/sidebar.component.scss
@@ -21,8 +21,24 @@
     color: white;
     font-size: 15px;
     padding-left: 10px;
+    z-index: 9999;
 }
 
 .container-sidebar{
     display: block;
-}
\ No newline at end of file
+}
+
+@media (max-width: 430px) {
+    .dropdown-menu{
+        position: absolute; 
+        z-index: 9999;
+        overflow: visible;
+    }
+
+    .dropdown-menu{
+       a{
+        font-size: 11.5px;
+        padding: 0px 0px 0px 10px
+       }
+    }
+}
diff --git a/agrilink_vocpro/src/app/pages/dashboard/page/graph/graph.component.scss b/agrilink_vocpro/src/app/pages/dashboard/page/graph/graph.component.scss
index 0571895..4fa00d6 100644
--- a/agrilink_vocpro/src/app/pages/dashboard/page/graph/graph.component.scss
+++ b/agrilink_vocpro/src/app/pages/dashboard/page/graph/graph.component.scss
@@ -64,6 +64,14 @@
   }
 }
 
+@media (max-width: 344px) {
+  canvas {
+    height: auto; 
+    width: 100%;
+    max-width: 100%; 
+  }
+}
+
 .loading {
   font-size: 18px;
   text-align: center;
diff --git a/agrilink_vocpro/src/app/pages/dashboard/page/historygraph/historygraph.component.scss b/agrilink_vocpro/src/app/pages/dashboard/page/historygraph/historygraph.component.scss
index 5f1aca4..ca447bb 100644
--- a/agrilink_vocpro/src/app/pages/dashboard/page/historygraph/historygraph.component.scss
+++ b/agrilink_vocpro/src/app/pages/dashboard/page/historygraph/historygraph.component.scss
@@ -85,16 +85,19 @@
     }
 }
 
-@media (max-width: 576px) {
+@media (min-width: 344px) {
     .card-parameter{
         flex: 1 1 100%;
     }
 
-    .card-container{
-        justify-content: center;
+    button {
+        color: #49473C;
+        margin-right: 20px;
+        margin-bottom: 20px;
     }
 }
 
+
 button {
     border: none;
     border-radius: 10px;