Commit 80460e29 authored by dindigala's avatar dindigala
Browse files

Merge branch 'bugfix/#118-fix-panels-height' into 'develop'

bugfix/#118 - Contents in Panels not fully visible

See merge request subugoe/emo/Qviewer!128
parents 535dc916 a55825b1
Pipeline #186449 failed with stages
in 15 minutes and 33 seconds
<template>
<div id="q-app">
<q-layout view="hHh lpr fFf">
<Header
v-if="config.headers.all"
:collectiontitle="collectiontitle"
<q-layout
id="q-app"
view="hHh Lpr fFf"
class="app"
style="height: 100vh;"
>
<Header
v-if="config.headers.all"
:collectiontitle="collectiontitle"
:config="config"
:imageurl="imageurl"
:item="item"
:itemurls="itemurls"
:manifests="manifests"
:panels="panels"
/>
<q-page-container class="root">
<router-view
:collection="collection"
:config="config"
:contenttypes="contentTypes"
:contenturls="contenturls"
:fontsize="fontsize"
:imageurl="imageurl"
:item="item"
:itemurls="itemurls"
:labels="config.labels"
:manifests="manifests"
:panels="panels"
:request="request"
:tree="tree"
/>
</q-page-container>
<q-page-container>
<router-view
:collection="collection"
:config="config"
:contenttypes="contentTypes"
:contenturls="contenturls"
:fontsize="fontsize"
:imageurl="imageurl"
:item="item"
:labels="config.labels"
:manifests="manifests"
:panels="panels"
:request="request"
:tree="tree"
/>
</q-page-container>
<q-footer>
<Footer
:projectcolors="config.colors"
:standalone="config.standalone"
/>
</q-layout>
</div>
</q-footer>
</q-layout>
</template>
<script>
......@@ -352,3 +357,19 @@ export default {
};
</script>
<style scoped>
.app {
display: flex;
flex: 1;
flex-direction: column;
overflow: hidden;
}
.root {
display: flex;
flex: 1;
flex-direction: column;
overflow: hidden;
}
</style>
<template>
<div>
<div class="item">
<q-tabs
v-model="activeTab"
dense
class="text-grey q-mb-sm"
active-color="$q.dark.isActive ? 'white' : 'accent'"
indicator-color="$q.dark.isActive ? 'white' : 'accent'"
align="justify"
narrow-indicator
>
<q-tab
v-for="(contenturl, i) in contenturls"
:key="`content${i}`"
:name="contenturl"
:class="contenturls.length == 1 && 'default-cursor'"
:disable="contenturls.length == 1"
:label="contenttypes[i]"
/>
</q-tabs>
<div>
<q-tabs
v-model="activeTab"
dense
class="text-grey q-mb-lg"
active-color="$q.dark.isActive ? 'white' : 'accent'"
indicator-color="$q.dark.isActive ? 'white' : 'accent'"
align="justify"
narrow-indicator
<q-btn
class="cursor-pointer"
flat
round
size="md"
title="Increase Textsize"
@click="increase()"
>
<q-tab
v-for="(contenturl, i) in contenturls"
:key="`content${i}`"
:name="contenturl"
:class="contenturls.length == 1 && 'default-cursor'"
:disable="contenturls.length == 1"
:label="contenttypes[i]"
<q-icon
:name="fasSearchPlus"
size="sm"
:color="$q.dark.isActive ? 'white' : 'accent'"
/>
</q-tabs>
</div>
<div class="row sticky">
<div>
<q-btn
class="q-mr-sm q-mb-sm cursor-pointer"
flat
round
size="md"
title="Increase Textsize"
@click="increase()"
>
<q-icon
:name="fasSearchPlus"
size="sm"
:color="$q.dark.isActive ? 'white' : 'accent'"
/>
</q-btn>
<q-btn
class="q-mr-sm q-mb-sm cursor-pointer"
flat
round
size="md"
title="Decrease Textsize"
</q-btn>
<q-btn
class="cursor-pointer"
flat
round
size="md"
title="Decrease Textsize"
:color="$q.dark.isActive ? 'white' : 'accent'"
@click="decrease()"
>
<q-icon
:name="fasSearchMinus"
size="sm"
:color="$q.dark.isActive ? 'white' : 'accent'"
@click="decrease()"
>
<q-icon
:name="fasSearchMinus"
size="sm"
:color="$q.dark.isActive ? 'white' : 'accent'"
/>
</q-btn>
</div>
/>
</q-btn>
</div>
<div class="row">
<!-- eslint-disable -- https://eslint.vuejs.org/rules/no-v-html.html -->
<div
:class="['scroll-panel', config.rtl ? 'rtl' : '']"
ref="contentsize"
v-html="content"
/>
</div>
<!-- eslint-disable -- https://eslint.vuejs.org/rules/no-v-html.html -->
<div
:class="['item-content', config.rtl ? 'rtl' : '']"
ref="contentsize"
v-html="content"
/>
</div>
</template>
......@@ -187,4 +182,12 @@ export default {
.default-cursor {
cursor: default !important;
}
.item-content {
display: flex;
flex: 1;
flex-direction: column;
overflow: scroll;
padding: 8px;
}
</style>
<template>
<q-footer
bordered
class="row justify-start items-center"
reveal
<q-toolbar
:class="$q.dark.isActive ? 'bg-dark' : 'bg-secondary text-primary'"
>
<Language v-if="standalone" />
<Color :projectcolors="projectcolors" />
<Softwareinfo />
</q-footer>
<div
bordered
class="row justify-start items-center"
reveal
>
<Language v-if="standalone" />
<Color :projectcolors="projectcolors" />
<Softwareinfo />
</div>
</q-toolbar>
</template>
<script>
......
<template>
<q-header
elevated
:class="$q.dark.isActive ? 'bg-dark' : 'bg-secondary text-primary'"
>
<div class="bar row justify-between items-center">
<q-header>
<q-toolbar
elevated
:class="$q.dark.isActive ? 'bg-dark' : 'bg-secondary text-primary'"
>
<Infobar
v-if="config.headers.info && manifests.length"
class="col-xs-12 q-pl-md"
......@@ -11,37 +11,26 @@
:item="item"
:manifests="manifests"
/>
</div>
</q-toolbar>
<div class="bar row q-px-md justify-sm-between">
<q-toolbar
elevated
:class="$q.dark.isActive ? 'bg-dark' : 'bg-secondary text-primary'"
>
<Navbar
v-if="config.headers.navigation"
class="
col
col-md-4
col-xs-12
column-xs
justify-md-start
justify-xs-center
row-sm"
:itemurls="itemurls"
:labels="config.labels"
:manifests="manifests"
/>
<q-space />
<ToggleIndex
v-if="config.headers.toggle"
class="
col
col-md-auto
col-xs-12
column-xs
content-sm-center
justify-sm-evenly
row-sm"
:panels="panels"
/>
</div>
</q-toolbar>
</q-header>
</template>
......
<template>
<div class="scroll-panel">
<div class="item-content">
<!-- Collection-->
<q-list v-if="config.meta.collection.all && Object.keys(collection).length">
<q-item class="q-px-none">
......
<template>
<div>
<q-btn
class="q-mb-md"
unelevated
:color="$q.dark.isActive ? 'grey-1 text-grey-10' : 'accent'"
:disabled="itemindex <= 0"
......@@ -16,7 +15,6 @@
</q-btn>
<q-btn
class="q-mb-md"
size="md"
unelevated
:color="$q.dark.isActive ? 'grey-1 text-grey-10' : 'accent'"
......
<template>
<figure id="openseadragon">
<nav class="sticky">
<figure
id="openseadragon"
class="item"
>
<nav>
<q-btn
v-for="(btn, idx) in buttons"
:id="btn.id"
:key="idx"
class="q-mr-sm q-mb-sm"
flat
round
size="md"
......
<template>
<div class="filter-buttons">
<div>
<q-btn-dropdown
v-if="$q.screen.width < 1100"
:dropdown-icon="dropicon"
outline
flat
:class="$q.dark.isActive ? 'bg-black' : 'bg-secondary text-black'"
class="q-mb-md q-mr-md"
label="Toggle panels"
>
<slot />
......@@ -14,7 +13,7 @@
<div
v-else
class="q-mb-md without-dropdown q-mr-md"
class="without-dropdown"
>
<slot />
</div>
......@@ -32,11 +31,3 @@ export default {
},
};
</script>
<style lang="scss" scoped>
.filter-buttons {
align-items: center;
display: flex;
justify-content: center;
}
</style>
<template>
<div>
<div class="item">
<q-tree
class="view-tree"
class="item-content"
label-key="label-key"
node-key="label"
:expanded.sync="expanded"
......@@ -89,3 +89,20 @@ export default {
},
};
</script>
<style scoped>
.item {
display: flex;
flex: 1;
flex-direction: column;
overflow: hidden;
}
.item-content {
display: flex;
flex: 1;
flex-direction: column;
overflow: scroll;
padding: 8px;
}
</style>
body {
height: 100vh;
overflow-y: hidden;
@media (max-width: 1023px) {
overflow-y: auto !important;
}
}
.scroll-panel {
position: relative;
.sticky {
// background: $light;
display: flex;
justify-content: flex-start;
left: 0;
position: sticky;
top: 0;
width: 100%;
z-index: 99;
}
}
.caps {
font-variant: small-caps;
}
......@@ -31,25 +8,10 @@ body {
}
}
.content-panel .q-tab-panel {
padding: 8px;
> * {
padding: 0 !important;
}
}
.without-dropdown > * {
display: flex;
}
.scroll-panel {
@include make-responsive-height();
overflow: auto;
-ms-overflow-style: none;
scrollbar-width: none;
}
.panels-target > * {
border-right: 1px solid #ddd !important;
flex: auto;
......
@mixin make-responsive-height {
$screenSizes: (
'400px': '26vh',
'450px': '34vh',
'500px': '41vh',
'550px': '46vh',
'600px': '50vh',
'630px': '53vh',
'660px': '55vh',
'700px': '58vh',
'750px': '61vh',
'800px': '63vh',
'850px': '66vh',
'900px': '67vh',
'980px': '70vh',
'1200px': '75vh',
'1300px': '77vh',
'1800px': '83vh'
);
@each $minheight, $height in $screenSizes {
@media (min-height: #{$minheight}) {
height: #{$height};
}
}
}
@import '~quasar/src/css/variables';
@import './quasar.variables';
@import './helper';
@import './global';
@import './tree';
.view-tree {
@include make-responsive-height();
-ms-overflow-style: none;
overflow-y: scroll;
scrollbar-width: none;
.item-content {
.q-tree__node-collapsible .q-tree__children {
/* FIXME: scss linting error because to much nesting */
/* stylelint-disable */
......@@ -37,10 +32,6 @@
}
}
.q-tree__node-header-content.col.row.no-wrap.items-center {
z-index: 99;
}
.q-tree__children {
cursor: pointer;
}
......
<template>
<section>
<div
v-if="ready"
class="root panels-target"
>
<div
v-if="ready"
class="row panels-target"
v-for="(p, index) in panels"
v-show="p.show && p.connector.length"
:key="`pc${index}`"
class="item"
>
<div
v-for="(p, index) in panels"
v-show="p.show && p.connector.length"
:key="`pc${index}`"
class="col-12 col-sm-6 col-md-3"
>
<Toolbar
v-if="config.headers.panelheadings"
:heading="p.panel_label"
/>
<Toolbar
v-if="config.headers.panelheadings"
:heading="p.panel_label"
/>
<q-separator />
<q-separator />
<div>
<!-- shows the nested tabs -->
<q-card
v-if="p.connector.length > 1"
flat
<!-- shows the nested tabs -->
<q-card
v-if="p.connector.length > 1"
flat
>
<div class="tabs-container item-content">
<q-tabs
v-for="(tab, i) in p.connector"
:key="`pt${i}`"
v-model="p.tab_model"
class="content-tabs"
:active-bg-color="$q.dark.isActive ? 'bg-black' : 'bg-grey-4'"
>
<div class="tabs-container">
<q-tabs
v-for="(tab, i) in p.connector"
:key="`pt${i}`"
v-model="p.tab_model"
class="content-tabs"
:active-bg-color="$q.dark.isActive ? 'bg-black' : 'bg-grey-4'"
>
<q-tab
:name="`tab${i}`"
:label="tab.label"
/>
</q-tabs>
</div>
<q-separator />
<q-tab
:name="`tab${i}`"
:label="tab.label"
/>
</q-tabs>
</div>
<q-tab-panels
v-model="p.tab_model"
animated
class="content-panel"
keep-alive
>
<q-tab-panel
v-for="(tab, idx) in p.connector"
:key="`co${idx}`"
:name="`tab${idx}`"
>
<component
:is="tab.component"
:key="keys[tab.id]"
v-bind="$props"
/>
</q-tab-panel>
</q-tab-panels>
</q-card>
<q-separator />
<!-- shows the panels -->
<div
v-else-if="p.connector.length === 1"
class="q-pa-sm overflow-hidden"
<q-tab-panels
v-model="p.tab_model"
animated
keep-alive
>
<q-tab-panel
v-for="(tab, idx) in p.connector"
:key="`co${idx}`"
:name="`tab${idx}`"
>
<component
:is="p.connector[0].component"