git-graph
git-graph copied to clipboard
Add error msg for mobile devices
- 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?
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);
}
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?
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 aboveIntroMsg
would be nice, as that would be much more prominent than adding a small note inIntroMsg
.
- This makes me feel that adding an
- 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!
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.
ez.
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 aboveIntroMsg
would be nice, as that would be much more prominent than adding a small note inIntroMsg
.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?
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 aboveIntroMsg
would be nice, as that would be much more prominent than adding a small note inIntroMsg
.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.