Touch events and mobile compatability in Dashboard 2.0

Dashboard
1

So in the process of migrating from the old Dashboard to the new one I have run into a few minor issue that I can't seem to find a quick answer for.

EDIT: IGNORE PROBLEM NUMBER ONE

  1. In the old dashboard I used the following, and touch events work as well as clicks:
<img class="p1overlay1" ng-click="send({payload: '1',topic: 'click'})" ng-mouseover="send({payload: '1',topic: 'mouseover'})" src="/assets/cards/card_0_overlay.png" width="{{size1}}" height="{{size1}}">

Now I am using:

<v-img src="/assets/cards/card_0_overlay.png" :width="`${msg.size1}`" :height="`${msg.size1}`" style="position: absolute; top: 50px; left: 0px; z-index: 95;" @click="send({ payload: '1', topic: 'click' })" @mouseover="send({ payload: '1', topic: 'mouseover' })"></v-img>

It works for clicks as expected but not for touch. What am I missing?
Scratch that, touch actually does work, the issue was caused by the layout not functioning as expected.

  1. In the old Dashboard I had set the viewport like the following:
<meta name="viewport" content="width=device-width, initial-scale=0.1">

Because without it on mobile it looked like this:

2048Ă—946 210 KB

With the viewport zoomed out by default I got this:
2048Ă—946 286 KB

So far in the new Dashboard I've got this for mobile:
1266Ă—585 137 KB

In the old Dashboard I could at least zoom out manually with pinch to zoom, but the new Dashboard does not seem to allow this. Is there an easy fix or am I boned?

It looks fine on desktop, this is what I would like it to look like on mobile as well:

3810Ă—2202 670 KB

I appreciate any advice as my front-end skills are lacking.

2

It also seems to be moving the game board down resizing the game board image on mobile (or smaller desktop windows) even though I have set it's size like the following:

<v-img src="/assets/board/mat.png" width="768" height="768" style="position: absolute; top: 50px; left: 256px; z-index: 0;"></v-img>

Other images are not doing this but are set dynamically the board is am asset thet never changes, could that be why?

The blue buttons are 50px in height so it should line up with the top of the first card which is set like the following one does:

<v-img src="/assets/cards/card_0_overlay.png" :width="`${msg.size1}`" :height="`${msg.size1}`" style="position: absolute; top: 50px; left: 0px; z-index: 95;" @click="send({ payload: '1', topic: 'click' })" @mouseover="send({ payload: '1', topic: 'mouseover' })"></v-img>

But I can't seem to find out why?
EDIT: style="min-width: 768px" seems to stop it from resizing. So it's just the zoom level or size on mobile that remains an issue.

3

First of all - love what you're building...

Secondly, this isn't a use case I had considered in Dashboard 2.0. For 99% of situations, our users want content to be automatically responsive, so we take the reigns and when on mobile view for example, set the CSS such that it move content into a "3" wide grid, and then pieces below that will fit accordingly.

Is your full Dashboard here a ui-template node? Just want to understand the makeup of it, and then I could help with a solution.

I haven't put any explicit blockers on being able to zoom. I'm able to in my standard desktop browser, so not sure why there would be limitations on mobile.

4

@HaroldPetersInskipp - how come the URL that you are accessing the dashboard does not include a port number?

5

@Paul-Reed It does, but iOS doesn't show the full url unless you click/focus the url bar.

1 Like
6

@joepavitt That is correct, my user interface is made in ui-template nodes scoped to the group level and layout set to grid. I have experimented with other scopes and layouts to no avail.

7

So far It looks like I may have found one possible solution (works on android, haven't got a chance to test iOS until tonight), include the following in a ui-template node set to type "CSS (Single Page)":

html {
  overflow-x: auto !important;
}
.v-card {
  width:1280px !important;
}

Still open to other more elegant suggestions though.

8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.