search

mozillabrasil / sumo_live_helper

Helper Add-on for SUMO forum contributors
https://addons.mozilla.org/firefox/addon/sumo-live-helper-/
Mozilla Public License 2.0
7 stars 8 forks source link

Add-on responsive to Firefox for Android #74

Closed jhonatasrm closed 4 years ago

jhonatasrm commented 5 years ago

I saw some users of the Add-on talking about use him on the Firefox for Android.

Actual Behavior The Add-on works very well with Firefox for Android (that was not the focus) and some people are using on the Android device, but at the moment it's not responsive enough for a good experience.

Expected Behavior The Add-on need present a good responsivity with Firefox for Android to promote a better experience possible.

P.S. We are currently working on a new design for the Add-on, but I think we can implement this responsivity before the new design comes out.

WesleyBranton commented 4 years ago

This is currently blocked by issue #58.

WesleyBranton commented 4 years ago

The add-on will need code to detect if it's running on a mobile device and then it will need to use that code to hide the sidebar button on mobile, since you obviously can't run a sidebar on mobile.

WesleyBranton commented 4 years ago

Here are a few things that I found wrong with the add-on on mobile:

These would need to be fixed before we can mark the extension as an Android-compatible Firefox extension. If you want to see how it looks on mobile, you can use Responsive Design Mode in Firefox if you view the popup.html file.

Currently, the differences between the popup for the sidebar vs the browser action are handled by adding a URL query (?view=popup or ?view=sidebar) to the page that the background.js file opens. Then, the popup file adds a class value to the body of the popup when it first loads, depending on the value of the query. That's then used to hide certain UI elements (for example, the sidebar open button).

We could use the same process to handle the mobile popup page, by having the background.js file detect if the user is on mobile and handling the popups appropriately.

I'm not sure how urgent this is to implement, since I'm not sure how many contributors answer questions using a mobile device. When we are ready to start on this, I think we should create a new issue for each thing that needs changing so that we can assign people to the issues and we don't accidentally all work on the same issues. Of course, minor ones (like hiding elements) can be merged into a single issue or simply left here.

dannycolin commented 4 years ago

Question list not taking the full width (in landscape)

It isn't related to the wrapping problem. This is due to the max-width: 500px (line 81 in css/app.css) to limit the popup size on desktop.

WesleyBranton commented 4 years ago

Question list not taking the full width (in landscape)

It isn't related to the wrapping problem. This is due to the max-width: 500px (line 81 in css/app.css) to limit the popup size on desktop.

Ok. Good to know. So it can easily be overridden with CSS then. That's good.

I swear there used to be a way to limit the popup size right from the manifest, but I guess not.

WesleyBranton commented 4 years ago

I'm think that maybe, for mobile, we have touch-friendly buttons at the top instead of the regular header. Just have the bar the same height as number, but the three buttons spread out in thirds across the top of the bar.

dannycolin commented 4 years ago

I'm think that maybe, for mobile, we have touch-friendly buttons at the top instead of the regular header. Just have the bar the same height as number, but the three buttons spread out in thirds across the top of the bar.

Sounds good to me. I trust you on that one 'cause it's been a while since I used FF for Android and I don't have a device/emulator installed to see the end result with the mobile UI. ;)

WesleyBranton commented 4 years ago

The responsive design mode in Firefox is builtin and it will basically allow you see what it looks like on mobile.

dannycolin commented 4 years ago

The responsive design mode in Firefox is builtin and it will basically allow you see what it looks like on mobile.

Sure but I was more thinking about not being able to see how well it integrate with the Firefox UI on that platform.