Allow more initial drag targets on mobile devices

[kloknibor]

Hi,

The NewGUI resizes perfectly on an mobile phone but scrolling up and down hangs quite a lot if it would even work... I tested this on safari and chrome on ios, both the same problem

I know we talked about it before and you said it had something to do with the cache. But if there is enough free space this wouldn't be a problem right? And the js scripts etc aren't that big...

Is this solveable?

[WesGilster]

It's really not a fee space thing, I just haven't gotten around to checking to see if I'm allowing the browser to utilize cache properly. Also I think jmkao found that I'm executing some web functions 3-4 times. :) I'm also refreshing all printers instead of the currently selected printer. Actually there is lot's of optimizations that will make this pretty quick. I just haven't really gotten around to doing it...

If there is a screen that is especially intolerable, I can fix that one for you.

[WesGilster]

I just tested this on my iphone(Safari & Chrome) and every page I tried is extremely fast(didn't try the print job pages). I did figure out your "scrolling up and down hang" though. At first, I believed these were intermittent html/js processing that Angular was performing in the background. It turns out that it's not hanging or processing at all. It turns out that it's a combination of user error and a poor choice of html tags. Try the application again and be extremely careful about where you attempt to start a drag with your finger.

Here are some Dont's:

1. Dragging on a button doesn't work
2. Dragging on a card footer doesn't work
3. Dragging on font awesome icons don't work
4. Dragging on empty space generally doesn't work
5. Dragging on the empty horizonal space directly above header text doesn't work.
6. Dragging on a label html doesn't work.

Here are some Do's

1. Drag on headers
2. Drag on a horizontal separator (I wouldn't try this because it takes 5-10 tries to land your finger directly on the pixel that allows you to scroll)

The true issue at hand is to determine why all of the components I mentioned in the first section aren't allowed to be initial drag targets. Most likely I've missed a mobile compatibility setting that will turn all of those on. You seem to be a bit interested in the front end, I'll bet this would be a pretty good starter bug to tackle... :)

[kloknibor]

Allright wes! I'm gonna look at it ;)! And yes the front end seems more simple :P So I started playing with that ;)! Eclipse was totally new for me but I got it under control :)!

I'm unfamiliar with your angular modules... I'll start learning more about it so I can help more efficiently to fix things and make GUI's :)! (I'm only familiair with a bit of java(-script), c#, C, PHP, HTML, CSS) But I enjoy playing around with creation workshop :)!

[kloknibor]

Ok, documentation on angular seems fine and I like it now already :) I'm gonna work on this!

[kloknibor]

Fun thing is that in the chrome emulator I can drag everywhere I wan't... weird...

[jmkao]

I've been looking at this more closely. Messing with various overflow and overflow-y styles in CSS for the body didn't have any noticeable effect.

What did make a difference is changing the bootcards css.

If I switch the CSS from bootcards-desktop.min.css to bootcards-ios.min.css, then scrolling is fine all over, but the layout becomes messed up,

Need to do some investigation since the sample template at https://github.com/bootcards/bootcards/blob/master/samples/starter-template.html has a mysterious comment that states "You'll only need to load one of these (depending on the device you're using) in production".

<!-- Bootcards CSS files for desktop, iOS and Android -->
  <!-- You'll only need to load one of these (depending on the device you're using) in production -->
  <link href="//cdnjs.cloudflare.com/ajax/libs/bootcards/1.1.1/css/bootcards-ios.min.css" rel="stylesheet">
  <!-- <link href="//cdnjs.cloudflare.com/ajax/libs/bootcards/1.1.1/css/bootcards-desktop.min.css" rel="stylesheet">-->
  <!--<link href="//cdnjs.cloudflare.com/ajax/libs/bootcards/1.1.1/css/bootcards-android.min.css" rel="stylesheet">-->

That seems like a strange statement to make given that most sites won't have just one kind of device coming in...

[jmkao]

And more mysterious... the example at http://demo.bootcards.org only pulls in bootcards-desktop.min.css, but when I load it on an iPhone, it has the bootcards-ios.min.css style.

That implies that the fix we need to make may involve two steps:

1. Figure out how this magical css switching in the demo works
2. Figure out why the pages don't lay out properly in the iOS and Android styles

Or, a hack could be:

1. Figure out what in the iOS and Android styles makes scrolling work, manually copy those into cwh.css...

[jmkao]

Hmm... I see. The bootcards demo site uses server side browser type detection logic to insert a different CSS depending on the User-Agent.

If I change my User-Agent to identify myself as an Android device, then the demo serves me the Android version of the CSS:

 <!-- Bootcards CSS file (different for desktop, iOS and Android, included Bootstrap CSS) -->
  <link href="//cdnjs.cloudflare.com/ajax/libs/bootcards/1.1.2/css/bootcards-android.min.css" rel="stylesheet" type="text/css" />

I don't think we want to do this using server templating, since that adds a whole layer of server-side UI code that we don't have today.

[jmkao]

I think I figured out what bootcards-ios.min.css has that we need. Will put it in a PR

[WesGilster]

I totally agree, that's really nasty. I already don't like the server side redirect sillyness for pretty urls. It would be nice to find a client side solution...

[WesGilster]

Ignore my comment, looks like you already have a solution. Nice.