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