added info page

guiapp/src/layouts/MainLayout.vue

@@ -1,5 +1,6 @@
 <template>
-  <q-layout view="hHh lpr lFf">
+  <q-layout view="lHh lpR fFf">
+<!--  <q-layout view="hHh Lpr lFr">-->
     <q-header elevated>
       <q-toolbar>
         <q-btn
@@ -10,23 +11,27 @@
           aria-label="Menu"
           @click="toggleLeftDrawer"
         />
-        <q-tabs align="left">
-          <q-route-tab to="/" label="Spectrum" />
-          <q-route-tab to="/page2" label="Near-field" />
-          <q-route-tab to="/page3" label="Far-field" />
+        <q-tabs align="right" v-model="tab">
+          <q-route-tab to="/spectrum" label="Spectrum" name="spectrum"/>
+          <q-route-tab to="/page2" label="Near-field" name="nearfield"/>
+          <q-route-tab to="/page3" label="Far-field" name="farfield"/>
         </q-tabs>
       </q-toolbar>
     </q-header>
 
     <q-drawer
       v-model="leftDrawerOpen"
-      show-if-above
       bordered
     >
       <q-list>
-
+        <q-item clickable @click="toggleLeftDrawer">
+          <q-item-section></q-item-section>
+          <q-item-section avatar side> <q-icon name="close" /> </q-item-section>
+        </q-item>
         <q-item
             clickable
+            to="/info"
+            @click="toggleLeftDrawer"
         >
           <q-item-section
               avatar
@@ -40,13 +45,13 @@
         </q-item>
         <q-separator inset spaced/>
         <q-item> <q-item-section> <q-item-label> External links</q-item-label> </q-item-section> </q-item>
-        <q-item clickable tag="a" target="_blank" :href="`https://github.com/ovidiopr/scattnlay`" >
+        <q-item clickable tag="a" target="_blank" href="https://github.com/ovidiopr/scattnlay" >
           <q-item-section avatar > <q-icon name="code" /> </q-item-section>
           <q-item-section> <q-item-label>Project at GitHub</q-item-label>
             <q-item-label caption> Open-source software </q-item-label>
           </q-item-section>
         </q-item>
-        <q-item clickable tag="a" target="_blank" :href="`https://github.com/ovidiopr/scattnlay/issues/new?title=[webapp]`" >
+        <q-item clickable tag="a" target="_blank" href="https://github.com/ovidiopr/scattnlay/issues/new?title=[webapp]" >
           <q-item-section avatar > <q-icon name="support" /> </q-item-section>
           <q-item-section> <q-item-label>Support</q-item-label>
             <q-item-label caption> Requires a GitHub account</q-item-label></q-item-section>
@@ -130,7 +135,7 @@ export default defineComponent({
 
   setup () {
     const leftDrawerOpen = ref(false)
-
+    const tab = ref('')
     return {
       // essentialLinks: linksList,
       leftDrawerOpen,

guiapp/src/pages/Info.vue

@@ -0,0 +1,58 @@
+<template>
+  <q-page padding>
+    <!-- content -->
+    <q-card class="q-mt-sm q-mx-sm">
+      <q-card-section>
+        <div class="text-h6">Usage:</div>
+<!--        <div class="text-subtitle2">by John Doe</div>-->
+      </q-card-section>
+      <q-card-section>
+      Feel free to use provided software, however, use it at your own risk. We made our best effort to verify
+      it is correct, however, we do not provide any warranty.
+      <br><br> Report bugs, issues, and feature requests at project's
+      <a href="https://github.com/ovidiopr/scattnlay">GitHub</a>
+      (preferred) or mail to <a href="mailto:k.ladutenko@metalab.ifmo.ru?subject=Mie calculator webapp (Scattnlay)">k.ladutenko@metalab.ifmo.ru</a>.
+      <br><br>
+      If it was useful for your project, please, cite the following reference:
+      <br><br>
+      <article style="margin-left: 1rem">
+        <div style="font-style: italic; padding-bottom: 0.5rem">"Mie calculation of electromagnetic near-field
+          for a multilayered sphere"</div>
+        Konstantin Ladutenko, Umapada Pal, Antonio Rivera, Ovidio Peña-Rodríguez<br>
+        <span style="font-weight: bold">Comp. Phys. Comm., vol. 214, pp. 225–230, 2017</span>
+      </article>
+      <br>
+      and the related URL:
+
+      <article style="margin: 1rem">
+        <div style="font-style: italic">https://physics.itmo.ru/mie/</div>
+      </article>
+      </q-card-section>
+    </q-card>
+    <q-card class="q-mt-md  q-mx-sm">
+      <q-card-section>
+        <div class="text-h6">Alternatives:</div>
+      </q-card-section>
+      <q-card-section>
+        <ul>
+          <li><a href="https://nanocomposix.com/pages/mie-theory-calculator">Bulk or core-shell,</a>   only dipole and quadrupole contributions by Nanocomposix. </li>
+          <li><a href="https://de.ifmo.ru/miecalculator/">Bulk particles</a>   by Ivan Toftul.</li>
+          <li><a href="https://saviot.cnrs.fr/mie/index.en.html">Bulk</a> and <a href="https://saviot.cnrs.fr/miecoat/index.en.html">core-shell</a> calculators by Lucien Saviot.</li>
+          <li><a href="https://omlc.org/calc/mie_calc.html">Angle distribution</a>  by Scott Prahl.</li>
+        </ul>
+      </q-card-section>
+    </q-card>
+  </q-page>
+</template>
+
+<script>
+export default {
+  // name: 'PageName',
+}
+</script>
+<style lang="scss">
+ a {
+   margin: 0.2rem;
+
+ }
+</style>

guiapp/src/router/routes.ts

@@ -5,8 +5,9 @@ const routes: RouteRecordRaw[] = [
     path: '/',
     component: () => import('layouts/MainLayout.vue'),
     children: [
-      { path: '', component: () => import('pages/Spectrum.vue') },
-      // { path: '', component: () => import('pages/Spectrum.vue') },
+      { path: '', redirect: 'spectrum' },
+      { path: 'spectrum', component: () => import('pages/Spectrum.vue') },
+      { path: 'info', component: () => import('pages/Info.vue') },
     ],
   },