Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
subugoe
emo
TIDO
Commits
d8dcc826
Commit
d8dcc826
authored
Jul 13, 2020
by
dindigala
Browse files
feature/
#19
: Optimizing panel views
parent
3491817c
Changes
8
Hide whitespace changes
Inline
Side-by-side
CHANGELOG.md
View file @
d8dcc826
...
...
@@ -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
View file @
d8dcc826
...
...
@@ -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
View file @
d8dcc826
<
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
View file @
d8dcc826
<
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
0 → 100644
View file @
d8dcc826
// 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
0 → 100644
View file @
d8dcc826
@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
View file @
d8dcc826
@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
View file @
d8dcc826
...
...
@@ -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
;
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment