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

fix: adjust panels and display content according to screen size

parent eb30af92
Pipeline #185133 passed with stages
in 4 minutes and 29 seconds
<template>
<div id="q-app">
<q-layout view="hHh lpr fFf">
<q-layout
id="q-app"
view="hHh Lpr fFf"
class="app"
style="height: 100vh;"
>
<q-header>
<Header
v-if="config.headers.all"
:collectiontitle="collectiontitle"
......@@ -11,30 +16,32 @@
:manifests="manifests"
:panels="panels"
/>
</q-header>
<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-page-container class="root">
<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 +359,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-lg"
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="q-mr-sm q-mb-sm 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="q-mr-sm q-mb-sm 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="['scroll-panel', 'item-content', config.rtl ? 'rtl' : '']"
ref="contentsize"
v-html="content"
/>
</div>
</template>
......
<template>
<q-footer
bordered
class="row justify-start items-center"
reveal
:class="$q.dark.isActive ? 'bg-dark' : 'bg-secondary text-primary'"
>
<Language v-if="standalone" />
<Color :projectcolors="projectcolors" />
<Softwareinfo />
</q-footer>
<q-toolbar>
<div
bordered
class="row justify-start items-center"
reveal
:class="$q.dark.isActive ? 'bg-dark' : 'bg-secondary text-primary'"
>
<Language v-if="standalone" />
<Color :projectcolors="projectcolors" />
<Softwareinfo />
</div>
</q-toolbar>
</template>
<script>
......
<template>
<q-header
<q-toolbar
elevated
:class="$q.dark.isActive ? 'bg-dark' : 'bg-secondary text-primary'"
>
......@@ -42,7 +42,7 @@
:panels="panels"
/>
</div>
</q-header>
</q-toolbar>
</template>
<script>
......
<template>
<div>
<div class="item">
<q-tree
class="view-tree"
class="view-tree 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;
......@@ -44,7 +36,7 @@ body {
}
.scroll-panel {
@include make-responsive-height();
// @include make-responsive-height();
overflow: auto;
-ms-overflow-style: none;
scrollbar-width: none;
......
@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;
.q-tree__node-collapsible .q-tree__children {
/* FIXME: scss linting error because to much nesting */
/* stylelint-disable */
......
......@@ -31,7 +31,7 @@
-->
<script id="tido-config" type="application/json">
{
"entrypoint": "",
"entrypoint": "https://ahikar-dev.sub.uni-goettingen.de/api/textapi/ahikar/arabic-karshuni/collection.json",
"colors": {
"primary": "",
"secondary": "",
......
<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
class="content-panel"
keep-alive
>
<q-tab-panel
v-for="(tab, idx) in p.connector"
:key="`co${idx}`"
:name="`tab${idx}`"
>
<component
:is="p.connector[0].component"
:key="keys[p.connector[0].id]"
:is="tab.component"
:key="keys[tab.id]"
v-bind="$props"
/>
</div>
</div>
</q-tab-panel>
</q-tab-panels>
</q-card>
<!-- shows the panels -->
<div
v-else-if="p.connector.length === 1"
class="item-content"
>
<component
:is="p.connector[0].component"
:key="keys[p.connector[0].id]"
v-bind="$props"
/>
</div>
</div>
</section>
</div>
</template>
<script>
......@@ -158,4 +154,26 @@ export default {
flex: 1;
}
}
.root {
display: flex;
flex: 1;
flex-direction: row;
overflow: hidden;
}
.item {
display: flex;
flex: 1;
flex-direction: column;
overflow: hidden;
}
.item-content {
display: flex;
flex: 1;
flex-direction: column;
overflow: scroll;
padding: 8px;
}
</style>
Supports Markdown
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