feat(studio)(qc-iot)(qc-sensor-details)[PWA]: design mobile view for …

…IoT popup details (#398)

* modified popup for mobile and non mobile view, popup to be moved to click, added necessary functions needed for iot sensor details redesign in .ts

* added text color indicator to the popup which to be made into onclick

* sensor details still on mouseover

* added if condition in mobile, shows sensor details on tap, a graph on double tap, non-mobile view unchanged

* adjusted popup to have space for sensor detail graph, alternative is to double click the plotted sensor to see graph details--for mobile view

* added todo comment

* added graph to popup, made new qcchart function for mobile view

* adjusted default zoom placement of sensor detail popup for mobile view

* updated font family used and font size of sensor details

* reverted popup.removed() for non-mobile screens

* adjusted category text color

src/app/features/noah-playground/components/map-playground/map-playground.component.html

@@ -7,14 +7,17 @@
 <div
   id="graph-dom"
   hidden
-  class="relative overflow-hidden z-0 text-left lh"
-  style="
-    width: 950px;
-    height: 450px;
-    line-height: normal;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-    user-select: none;
+  class="
+    relative
+    overflow-hidden
+    z-100
+    text-left
+    w-full
+    h-auto
+    sm:w-[600px] sm:h-[300px]
+    lg:w-[950px] lg:h-[450px]
   "
+  style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); user-select: none"
 ></div>
 
 <div class="map-icon absolute z-10 right-0 pl-2 h-16 w-16 flex flex-row py-1.5">