feature/#19: Optimizing panel views

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.0.21] - 2020-07-13
+
+### Fixed
+
+- Refactored height stylings according to resolution size of the window.
+
 ## [0.0.20] - 2020-07-10
 
 ### Changed

quasar.conf.js

@@ -14,7 +14,8 @@ module.exports = function (ctx) {
     css: [
       // 'app.scss'
       '../statics/support.css',
-      '/quasar.treeview.scss'
+      '/quasar.treeview.scss',
+      '/quasar.global.scss'
     ],
 
     // https://github.com/quasarframework/quasar/tree/dev/extras

src/components/content.vue

 <template>
   <div>
     <div class="row sticky">
-      <div class="content">
+      <div>
         <q-btn
           class="q-mr-sm q-mb-sm cursor-pointer"
           color="grey-8"
@@ -33,10 +33,9 @@
         </q-btn>
       </div>
     </div>
-
-    <div class="row">
+    <div class="row" style="display:contents">
       <div
-        class="col-md-10 offset-md-1" :style="`font-size: ${fontsize}px`"
+        :style="`font-size: ${fontsize}px`"
         :id="nodeid" v-html="content">
       </div>
     </div>
@@ -110,9 +109,4 @@ export default {
   .content {
     margin: 16px;
   }
-  .sticky {
-    position: sticky;
-    top: 0;
-    background: #fff;
-  }
 </style>

src/components/openseadragon.vue

 <template>
   <figure id="openseadragon">
-    <nav>
+    <nav class="sticky">
       <q-btn
         v-for="(btn, idx) in buttons" :key="idx"
         class="q-mr-sm q-mb-sm"
@@ -75,7 +75,7 @@ export default {
   figure {
     display: inline-block;
     height: 75vh;
-    margin: 16px;
+    margin: 0;
     width: 95%
   }
 </style>

src/css/quasar.global.scss

+// global extra classes
+.scrollPanel {
+  position: relative;
+
+  .sticky {
+    background: #fff;
+    display: flex;
+    justify-content: flex-start;
+    left: 0;
+    position: sticky;
+    top: 0;
+    width: 100%;
+  }
+}

src/css/quasar.responsive.scss

+@mixin makeResponsiveHeight {
+  $sizes: (
+    "400px": "15vh",
+    "450px": "39vh",
+    "500px": "55vh",
+    "600px": "59vh",
+    "660px": "63vh",
+    "700px": "64vh",
+    "750px": "67vh",
+    "800px": "69vh",
+    "900px": "72vh",
+    "980px": "75vh",
+    "1200px": "79vh",
+    "1300px": "80vh",
+    "1800px": "86vh"
+  );
+
+  @each $minheight, $height in $sizes {
+    @media (min-height: #{$minheight}) {
+      height: #{$height};
+    }
+  }
+}

src/css/quasar.treeview.scss

+@import './quasar.responsive.scss';
+
 .view-tree {
-  max-height: 400px;
   overflow-y: scroll;
+  @include makeResponsiveHeight();
   -ms-overflow-style: none;
   scrollbar-width: none;
   .q-tree__node-collapsible .q-tree__children {
@@ -24,3 +26,7 @@
 .view-tree::-webkit-scrollbar {
   display: none;
 }
+body {
+  height: 100vh;
+  overflow-y: hidden;
+}

src/views/quasar-mainview.vue

@@ -20,17 +20,20 @@
             <Toolbar heading="Text" />
             <q-separator />
 
-            <div class="scrollPanel">
-              <q-infinite-scroll>
-                <Content
-                  :key="contenturl"
-                  :contenturl="contenturl"
-                  :fontsize="fontsize"
-                  :manifests="manifests"
-                  :request="request"
-                  >
-                </Content>
-              </q-infinite-scroll>
+            <div class="q-pa-md q-gutter-sm">
+              <div class="scrollPanel">
+
+                <q-infinite-scroll>
+                  <Content
+                    :key="contenturl"
+                    :contenturl="contenturl"
+                    :fontsize="fontsize"
+                    :manifests="manifests"
+                    :request="request"
+                    >
+                  </Content>
+                </q-infinite-scroll>
+              </div>
             </div>
           </template>
 
@@ -41,12 +44,14 @@
                 <Toolbar heading="Image" />
                 <q-separator />
 
-                <div style="overflow:hidden">
-                  <OpenSeadragon
-                    :key="imageurl"
-                    :imageurl="imageurl"
-                    >
-                  </OpenSeadragon>
+                <div class="q-pa-md q-gutter-sm" style="overflow:hidden">
+                  <div class="scrollPanel">
+                    <OpenSeadragon
+                      :key="imageurl"
+                      :imageurl="imageurl"
+                      >
+                    </OpenSeadragon>
+                  </div>
                 </div>
               </template>
 
@@ -166,12 +171,14 @@ export default {
 };
 </script>
 
-<style lang="css" scoped>
+<style lang="scss" scoped>
+  @import '../css/quasar.responsive.scss';
+
   .scrollPanel {
-    max-height: 450px;
-    overflow: auto;
     -ms-overflow-style: none;
+    overflow: auto;
     scrollbar-width: none;
+    @include makeResponsiveHeight();
   }
   .scrollPanel::-webkit-scrollbar {
     display: none;