Commit 6a6be8cf authored by dindigala's avatar dindigala
Browse files

Merge branch 'feature/19-optimizePanels' into 'develop'

feature/#19: Optimizing panel views

See merge request subugoe/emo/Qviewer!26
parents 3491817c d8dcc826
Pipeline #144386 passed with stages
in 2 minutes and 21 seconds
......@@ -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
......
......@@ -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
......
<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>
<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>
// global extra classes
.scrollPanel {
position: relative;
.sticky {
background: #fff;
display: flex;
justify-content: flex-start;
left: 0;
position: sticky;
top: 0;
width: 100%;
}
}
@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};
}
}
}
@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;
}
......@@ -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;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment