add css transition for adding flex row

guiapp/src/components/nearfield/GetNearFieldColorScale.vue

@@ -63,17 +63,17 @@
           <q-checkbox v-model="moreColors" size="sm">
             use more colors
           </q-checkbox>
-        </div>
-        <div class="col-auto q-px-sm">
-          <q-tooltip anchor="top middle" self="center middle">
-            more on color preception
-            <q-icon name="launch" />
-          </q-tooltip>
-          <a
-            href="https://www.semanticscholar.org/paper/Why-We-Use-Bad-Color-Maps-and-What-You-Can-Do-About-Moreland/028423bb486b2a963ee6a330ea5cceab467a5349"
-          >
-            <q-icon name="o_info" size="sm" />
-          </a>
+          <span class="q-px-sm">
+            <q-tooltip anchor="top middle" self="center middle">
+              more on color preception
+              <q-icon name="launch" />
+            </q-tooltip>
+            <a
+              href="https://www.semanticscholar.org/paper/Why-We-Use-Bad-Color-Maps-and-What-You-Can-Do-About-Moreland/028423bb486b2a963ee6a330ea5cceab467a5349"
+            >
+              <q-icon name="o_info" size="sm" />
+            </a>
+          </span>
         </div>
       </div>
     </div>

guiapp/src/components/nearfield/GetNearFieldSettings.vue

@@ -27,7 +27,7 @@
       <div class="q-ma-xs" />
       <div class="row justify-center items-center">
         <div class="col-auto text-center q-py-xs q-pr-md">
-          <div :style="flexRowTitleStyle">ratio</div>
+          <div :style="flexRowTitleStyle" @click="hover = !hover">ratio</div>
         </div>
         <div class="col-xs-grow col-sm">
           <div class="row justify-xs-center justify-sm-start items-center">
@@ -72,27 +72,37 @@
         </div>
       </div>
 
+      <!--      <transition-->
+      <!--        name="scale-y"-->
+      <!--        @before-enter="beforeScale"-->
+      <!--        @before-leave="beforeScale"-->
+      <!--      >-->
       <div
-        v-if="plotRatioLabel == 'any'"
-        class="row justify-center items-baseline"
+        class="collapsible-wrapper"
+        v-bind:class="{ collapsed: plotRatioLabel != 'any' || hover }"
       >
-        <div class="col-auto text-center q-py-xs q-pr-md">
-          <div :style="flexRowTitleStyle">y-side resolution</div>
-        </div>
-        <div class="col-xs-grow col-sm">
-          <div class="row justify-xs-center justify-sm-start items-center">
-            <input-with-units
-              v-model:input-result="plotYSideResolution"
-              v-model:is-showing-help="isShowingHelpForInputWithUnits"
-              :initial-expression="plotYSideResolution.toString()"
-              :is-info-mode="plotRatioLabel != 'any'"
-              title="points"
-              units=""
-            />
+        <div class="collapsible">
+          <!--        <div v-show="plotRatioLabel == 'any' || hover">-->
+          <div class="row justify-center items-baseline row--slide-transition">
+            <div class="col-auto text-center q-py-xs q-pr-md">
+              <div :style="flexRowTitleStyle">y-side resolution</div>
+            </div>
+            <div class="col-xs-grow col-sm">
+              <div class="row justify-xs-center justify-sm-start items-center">
+                <input-with-units
+                  v-model:input-result="plotYSideResolution"
+                  v-model:is-showing-help="isShowingHelpForInputWithUnits"
+                  :initial-expression="plotYSideResolution.toString()"
+                  :is-info-mode="plotRatioLabel != 'any'"
+                  title="points"
+                  units=""
+                />
+              </div>
+            </div>
           </div>
         </div>
       </div>
-
+      <!--      </transition>-->
       <div class="row justify-center items-baseline">
         <div class="col-auto text-center q-py-xs q-pr-md">
           <div :style="flexRowTitleStyle">relative side length</div>
@@ -147,7 +157,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, watch } from 'vue';
+import { defineComponent, computed, watch, ref } from 'vue';
 import { useStore } from 'src/store';
 import InputWithUnits from 'components/InputWithUnits.vue';
 import { flexRowTitleStyle } from 'components/config';
@@ -237,7 +247,9 @@ export default defineComponent({
       if (plotRatioLabel.value != 'any')
         plotYSideResolution.value = plotRatio.value * plotXSideResolution.value;
     });
+    const hover = ref(false);
     return {
+      hover,
       crossSection,
       plotRatioLabel,
       isShowingHelpForInputWithUnits,
@@ -247,7 +259,77 @@ export default defineComponent({
       plotXSideResolution,
       plotYSideResolution,
       nearFieldPlane,
+      beforeScale(el: Element) {
+        let hel = el as HTMLElement;
+        console.log(hel.offsetHeight);
+        // for (let child in hel.childNodes) {
+        //   console.log(child);
+        // }
+
+        // Array.prototype.reduce.call(
+        //   hel.childNodes,
+        //   function (p: number, c: HTMLElement) {
+        //     return p + (c.offsetHeight || 0);
+        //   },
+        //   0
+        // )
+      },
     };
   },
 });
 </script>
+
+<style scoped>
+.scale-y-enter-from,
+.scale-y-leave-to {
+  max-height: 0;
+  transform: scaleY(0);
+  transform-origin: top;
+}
+.scale-y-enter-to,
+.scale-y-leave-from {
+  max-height: 5000px;
+  transform: scaleY(1);
+  transform-origin: top;
+}
+.scale-y-enter-active {
+  transition: max-height 0.5s cubic-bezier(1, 0.01, 1, 0.01);
+}
+.scale-y-leave-active {
+  transition: max-height 0.5s cubic-bezier(0.01, 1, 0.01, 1);
+}
+
+/* based on https://stackoverflow.com/a/43965099 */
+.collapsible-wrapper {
+  display: flex;
+  overflow: hidden;
+}
+.collapsible-wrapper:after {
+  content: '';
+  height: 50px;
+  transition: height 0.3s linear, max-height 0s 0.3s linear;
+  max-height: 0px;
+  opacity: 0;
+}
+.collapsible {
+  transition: margin-bottom 0.3s cubic-bezier(0, 0, 0, 1),
+    opacity 0.3s cubic-bezier(0.9, 0, 1, 1);
+  margin-bottom: 0;
+  max-height: 1000000px;
+  opacity: 1;
+}
+.collapsible-wrapper.collapsed > .collapsible {
+  margin-bottom: -2000px;
+  transition: margin-bottom 0.3s cubic-bezier(1, 0, 1, 1), visibility 0s 0.3s,
+    max-height 0s 0.3s, opacity 0.3s;
+  visibility: hidden;
+  max-height: 0;
+  opacity: 0;
+}
+.collapsible-wrapper.collapsed:after {
+  height: 0;
+  opacity: 0;
+  transition: height 0.3s linear;
+  max-height: 50px;
+}
+</style>

guiapp/src/layouts/MainLayout.vue

@@ -1,9 +1,18 @@
 <template>
-  <q-layout view="lHh lpR fFf">
+  <q-layout view="lHr LpR fFf">
     <!--  <q-layout view="hHh Lpr lFr">-->
     <q-header elevated>
-      <q-toolbar>
+      <q-toolbar class="q-px-xs">
+        <!--        <div class="q-tabs&#45;&#45;faded-end">-->
+        <q-tabs align="left" shrink outside-arrows mobile-arrows>
+          <q-route-tab to="/spectrum" label="Spectrum" name="spectrum" />
+          <q-route-tab to="/nearfield" label="Near-field" name="nearfield" />
+          <!--          <q-route-tab to="/farfield" label="Far-field" name="farfield"/>-->
+        </q-tabs>
+        <!--        </div>-->
+        <q-space />
         <q-btn
+          v-if="!leftDrawerOpen"
           flat
           dense
           round
@@ -11,15 +20,10 @@
           aria-label="Menu"
           @click="toggleLeftDrawer"
         />
-        <q-tabs align="right">
-          <q-route-tab to="/spectrum" label="Spectrum" name="spectrum" />
-          <q-route-tab to="/nearfield" label="Near-field" name="nearfield" />
-          <!--          <q-route-tab to="/farfield" label="Far-field" name="farfield"/>-->
-        </q-tabs>
       </q-toolbar>
     </q-header>
 
-    <q-drawer v-model="leftDrawerOpen" bordered>
+    <q-drawer v-model="leftDrawerOpen" bordered side="right">
       <q-list>
         <q-item clickable @click="toggleLeftDrawer">
           <q-item-section></q-item-section>

guiapp/src/store/simulation-setup/state.ts

@@ -86,7 +86,7 @@ function setupFactory(
       },
     },
   ],
-  numberOfModesToPlot = 4,
+  numberOfModesToPlot = 3,
   plotLabel = '',
 
   nearFieldSetup = {