Media query start

app.js

@@ -28,6 +28,7 @@ require([
 
   "./modules/goToLocation.js",
   "esri/widgets/Measurement",
+  "./modules/mediaQuery.js"
 ], (
   Conversion,
 
@@ -50,11 +51,15 @@ require([
   initLegend,
   initELevation,
   goToLocation,
-  Measurement
+  Measurement,
+  initMediaQuery
 ) => {
   /************************************************************
    * Init scene (/w layers) and view
    ************************************************************/
+  // const mediaQuery = window.matchMedia('(max-width: 768px)');
+  // initMediaQuery.handleMediaQueryChange(mediaQuery)
+  // mediaQuery.addEventListener(initMediaQuery.handleMediaQueryChange);
 
   const graphicsLayer = initLayers.setupGraphicsLayer();
 
@@ -81,10 +86,15 @@ require([
 
   const view = initScene.setupWebView(scene);
 
+
+
   /**************************************
    * Adding a layer group, expand
    **************************************/
   view.when(() => {
+    // Media query
+
+
     // Going to specified location at runtime
     const locationArray = goToLocation.getLocation();
 

index.html

@@ -33,7 +33,7 @@ <h2 id="header-title">
 
         <calcite-shell-panel slot="panel-start" display-mode="float">
 
-            <calcite-action-bar slot="action-bar">
+            <calcite-action-bar slot="action-bar" class="responsive-action-bar">
                 <calcite-action data-action-id="layers" icon="layers" text="Layers" scale="l"></calcite-action>
                 <calcite-action data-action-id="layers-wms" icon="image-layer" text="WMS" scale="l"></calcite-action>
                 <calcite-action data-action-id="basemaps" icon="layer-basemap" text="Basemaps" scale="l">

modules/mediaQuery.js

@@ -0,0 +1,11 @@
+define([], () => ({
+  handleMediaQueryChange: (mql) => {
+    const calciteActionBars = document.querySelectorAll('calcite-action');
+    if (mql.matches) {
+      calciteActionBars.forEach(bar => {
+          console.log(bar)
+          bar.scale ="m";
+      });
+    }
+  },
+}));

style.css

@@ -214,3 +214,21 @@ img {
   width: 100%; /* Ensure the widget container takes full width */
   height: 100%; /* Ensure the widget container takes full height */
 }
+
+.responsive-action-bar {
+  flex-wrap: wrap;
+}
+
+/*
+@media screen and (max-width: 768px) {
+  .responsive-action-bar .calcite-action {
+    scale: "s";
+  }
+}
+*/
+
+
+
+.calcite-action[data-action-id="layers"]) {
+  --calcite-action-scale: "m";
+}