Add error msg for mobile devices

[HarshKapadia2]

• Mobile devices should not be allowed to use the app and should display an error to use the web app on a desktop device.
• Make use of User Agents.
• How would an iPad be handled?

[tusharnankani]

How would an iPad be handled?

function isIOS() {
  if (/iPad|iPhone|iPod/.test(navigator.platform)) {
    return true;
  } else {
    return navigator.maxTouchPoints &&
      navigator.maxTouchPoints > 2 &&
      /MacIntel/.test(navigator.platform);
  }
}

function isIpadOS() {
  return navigator.maxTouchPoints &&
    navigator.maxTouchPoints > 2 &&
    /MacIntel/.test(navigator.platform);
}

Source

[tusharnankani]

Mobile devices should not be allowed to use the app and should display an error to use the web app on a desktop device.

If less than a specific width; hide all buttons and display a message to open it from a PC?

[HarshKapadia2]

The reason why this is 'error' message is required, is because I haven't figured out a way to make Git Graph responsive on smaller screens. I haven't looked into it too much and that is not a priority to be honest, because it is extremely rare for someone to have a .git directory on their mobile or iPad.

So better than calling it an 'error' message, it should be called a 'warning' message.

The 'warning' message to be displayed would be something like: The rendered graph might not be properly visible. Using a larger screen would be recommended.

---

Okay so currently on the home page, an IntroMsg component gives general information on the web app.

What we can do for any device below a specific width is that we can prominently display a note or something in the IntroMsg component or maybe display a ErrorMsg component above the IntroMsg component.

Also, let us stick to the width to add the note for now, because there are certain restrictions on navigator.userAgent that I haven't had time to look into. (If you have the time @tusharnankani, please let me know what we can do. I don't even know whether all browsers are going to implement this or whether this is just specific to Google Chrome.)

I was going to suggest disabling the directory selector button while less than the width as well, but let that be for now, because

• Let us not restrict users. They've been warned, so it's their choice whether they want to go ahead with it.
  • This makes me feel that adding an ErrorMsg component above IntroMsg would be nice, as that would be much more prominent than adding a small note in IntroMsg.
• Desktop users will be affected by the button disabling, which doesn't make sense.
  • Some desktop users might be using their browsers at smaller sizes.

---

LMK your thoughts @tusharnankani and also, would you like to open a PR for this? Thank you!

[tusharnankani]

Damn. I forgot about this.

Side note: I need a bot like @remindmeofthis like the one on Twitter. cc: @KartikSoneji

Like I mentioned before:

Mobile devices should not be allowed to use the app and should display an error to use the web app on a desktop device.

If less than a specific width; hide all buttons and display a message to open it from a PC?

So, for patternistic; I did this:

Since, it is based out of hover effects; best seen on desktops.

Respective HTML and CSS

ez.

[tusharnankani]

The reason why this is 'error' message is required, is because I haven't figured out a way to make Git Graph responsive on smaller screens. I haven't looked into it too much and that is not a priority to be honest, because it is extremely rare for someone to have a .git directory on their mobile or iPad.

So better than calling it an 'error' message, it should be called a 'warning' message.

The 'warning' message to be displayed would be something like: The rendered graph might not be properly visible. Using a larger screen would be recommended.

Got it, makes sense!

I was going to suggest disabling the directory selector button while less than the width as well, but let that be for now, because

• Let us not restrict users. They've been warned, so it's their choice whether they want to go ahead with it.

  • This makes me feel that adding an ErrorMsg component above IntroMsg would be nice, as that would be much more prominent than adding a small note in IntroMsg.

• Desktop users will be affected by the button disabling, which doesn't make sense.

  • Some desktop users might be using their browsers at smaller sizes.

Okay, so like a modal/dialog/popup, which can be closed. Something like this?

[HarshKapadia2]

The Patternistic approach is something I don't want to do because:

• Let us not restrict users. They've been warned, so it's their choice whether they want to go ahead with it.

  • This makes me feel that adding an ErrorMsg component above IntroMsg would be nice, as that would be much more prominent than adding a small note in IntroMsg.

• Desktop users will be affected by the button disabling, which doesn't make sense.

  • Some desktop users might be using their browsers at smaller sizes.

Using User Agents is the way to go, I guess.

---

Okay, so like a modal/dialog/popup, which can be closed. Something like this?

No, just use the existing ErrorMsg component.