Commit d08c679c authored by christianrhansen's avatar christianrhansen

code structured. styling: mobile resize handler & mobile temp cell

parent 48d67ffa
Pipeline #16932 passed with stage
in 5 minutes and 53 seconds
...@@ -123,15 +123,23 @@ ...@@ -123,15 +123,23 @@
.cell-item.cell-item-tmp(:style="getAnnotationStyle(tmpCell)", :key="`cell-tmp-${index}`") .cell-item.cell-item-tmp(:style="getAnnotationStyle(tmpCell)", :key="`cell-tmp-${index}`")
cell(:cell="tmpCell") cell(:cell="tmpCell")
//----- temporary cell (mobile) //------------------------- temporary cell (mobile)
.cell-item.cell-item-tmp-mobile.row.justify-center.items-center( template(v-if="mobileTempCell.show && cachedNewCell")
v-if="mobileTempCell.show && cachedNewCell", :style="mobileTempCellStyle(mobileTempCell)")
cell.absolute-top-left.q-ma-sm(:cell="cachedNewCell") //----- cell
.cell-item.cell-item-tmp-mobile.row.justify-center.items-center(:style="mobileTempCellStyle(mobileTempCell)")
cell.absolute-top-left.q-ma-sm(:cell="cachedNewCell")
q-btn.bg-dark.text-white(v-if="mobileTempCell.button",
@click="event => {addMobileCell(event)}", round, flat)
q-icon(name="check")
q-btn.bg-dark.text-white(v-if="mobileTempCell.button", //----- resize handler
@click="event => {addMobileCell(event)}", round, flat) .resize-handler-mobile.fixed.bg-dark.text-white.justify-center.row(
q-icon(name="check") v-touch-pan="testButton", round, flat,
:style="{left: cursor.x - 20 + 'px', top: cursor.y - 20 + 'px'}")
q-icon.self-center(name="signal_cellular_4_bar", size="12px", style="margin-left: -3px;")
// --------------------------------------------------------------------------------------------------------------- // ---------------------------------------------------------------------------------------------------------------
template(v-else) template(v-else)
...@@ -219,10 +227,6 @@ ...@@ -219,10 +227,6 @@
.text-center .text-center
q-btn.edit-cell-button(@click="mobileCellResize(mobileSelectedCell, 0, 1)", round, flat, size="md") q-btn.edit-cell-button(@click="mobileCellResize(mobileSelectedCell, 0, 1)", round, flat, size="md")
q-icon(name="add") q-icon(name="add")
// --------------------------------------------------------------------------------------------------- test-button
div.test-button.fixed.q-pa-md.bg-dark.text-white(v-touch-pan="testButton", round, flat,
:style="{left: cursor.x - 20 + 'px', top: cursor.y - 20 + 'px'}")
q-icon.rotate-45(name="arrow_forward_ios")
</template> </template>
<script> <script>
...@@ -1092,7 +1096,8 @@ ...@@ -1092,7 +1096,8 @@
top 0px top 0px
.cell-item-tmp-mobile .cell-item-tmp-mobile
background-color rgba(0, 0, 255, .15) // background-color rgba(0, 0, 255, .15)
background-color rgba(0, 100, 255, .5)
backdrop-filter blur(0px) backdrop-filter blur(0px)
.edit-cell-button .edit-cell-button
...@@ -1123,9 +1128,9 @@ ...@@ -1123,9 +1128,9 @@
.transition-opacity .transition-opacity
transition opacity ease 350ms transition opacity ease 350ms
.test-button .resize-handler-mobile
left 0 left 8px
top 100px top 68px
width 40px width 40px
height 40px height 40px
border-radius 1000px border-radius 1000px
......
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