Commit d3b9ec82 authored by christianrhansen's avatar christianrhansen

css classes structured & renamed

parent 7898b8ed
Pipeline #17273 passed with stage
in 20 seconds
......@@ -154,11 +154,12 @@
// q-icon.self-center.rotate-180(name="signal_cellular_4_bar", size="12px", style="margin-top: 2px;")
q-icon.self-center.rotate-180(name="open_with", size="22px")
// dummy move handler
.handler-new-cell.dummy.fixed.text-dark.justify-center.row.bg-white.shadow-6(
//----- temporary move handler
//----- (when main move handler is outside of viewport)
.handler-new-cell.temp.fixed.text-dark.justify-center.row.bg-white.shadow-6(
v-touch-pan="handleMoveCell",
:class="[!dummyButton.visibility ? 'dummyButtonHide': 'dummyButtonShow']",
:style="{left: dummyButton.left + 'px', top: handlerNewCell.move.y + 59 - 20 + 'px'}",)
:class="[!handlerNewCellTemp.visibility ? 'temp-hide': 'temp-show']",
:style="{left: handlerNewCellTemp.left + 'px', top: handlerNewCell.move.y + 59 - 20 + 'px'}",)
q-icon.self-center.rotate-180(name="open_with", size="22px")
//----- resize handler (bottom right)
......@@ -327,7 +328,7 @@
move: {x: 20, y: undefined, pushed: false, pos: undefined, inViewport: undefined, onLeft: undefined, onRight: undefined},
resize: {x: undefined, y: undefined, pushed: false, pos: undefined}
},
dummyButton: {visibility: true, left: 0}
handlerNewCellTemp: {visibility: true, left: 0}
}
},
computed: {
......@@ -452,21 +453,21 @@
let scrollLeft = this.$el.scrollLeft
if (!target.isIntersecting) {
this.dummyButton.visibility = true
this.handlerNewCellTemp.visibility = true
if (scrollLeft < this.handlerNewCell.move.x) {
this.dummyButton.left = window.innerWidth - 40
this.handlerNewCellTemp.left = window.innerWidth - 40
}
if (scrollLeft > this.handlerNewCell.move.x) {
this.dummyButton.left = 0
this.handlerNewCellTemp.left = 0
}
}
else {
this.dummyButton.visibility = false
this.handlerNewCellTemp.visibility = false
}
},
handleMoveCell (obj) {
this.dummyButton.left = -100
this.handlerNewCellTemp.left = -100
this.handlerNewCell.move.x = obj.position.left
this.handlerNewCell.move.y = obj.position.top
......@@ -1268,14 +1269,6 @@
//************************************************** mobile: new cell
handler-width = 40px
.dummy
transition opacity ease 200ms
opacity 0
.dummyButtonHide
width 0!important
overflow hidden
.dummyButtonShow
opacity 1
.handler-new-cell
width handler-width
height handler-width
......@@ -1290,6 +1283,19 @@
&.on-right-side
left 'calc(100vw - %s)' % handler-width
&.temp
width handler-width
height handler-width
border-radius 1000px
transition opacity ease 200ms
opacity 0
&.temp-hide
width 0!important
overflow hidden
&.temp-show
opacity 1
/*
&.resize
left 'calc(100vw - %s - 8px)' % handler-width
......
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