Mobile dashboard design / UX #972
Comments
ukutaht
changed the title
|
I think a part of this issue should also be defining the support standards for Plausible, namely the dashboard here, but doing so for the script would also likely be beneficial. Most of the browser stuff can just be solved with polyfills, but it's be important to know what all needs to be tested. |
|
I'll pick these issues up. 🙂 |
|
An additional problem on the main chart is, when you try to see the number of visitors of one day, you need to tab and hold. When you only tab on a day you will switch to that day. |
|
After working on a solution (only locally at the moment) for this issue, I can confirm that the "Details button issue on Firefox specifically" issue is not specific to Firefox:
|
This _mostly_ fixes one of the issues being tracked on plausible#972, titled "Details button issue on Firefox specifically"
* chore(make): convenience commands for installation & dev server * docs: easier development env instructions * docs: add note about docker volumes * docs: detail pre-commit configuration * style: eslint and prettier changes * Allow for passing custom classes to fade-in * style: eslint & prettier for the details button component * style: react lifecycle methods to come first * docs: add instructions to disable pre-commit * style: devices components * Move render methods to the last (together) in the order list * Remove unused component import * React lifecycle to come first before our own methods * General styling and eslint changes * Cleaner renderContent method using switch/case (fixes an eslint error as well!) * Cleaner renderPill method with proper spacing + removing uncessary else * style: more eslint/prettier for pages components * Use newer Fragment syntax * Remove unnecessary else statement * Use backtick strings for concatenating strings * Remove unnecessary space * Remove unused imports and variable declarations * Bunch render methods together as last in the order list * fix: details button to drop to the bottom naturally on smaller screens This _mostly_ fixes one of the issues being tracked on #972, titled "Details button issue on Firefox specifically" * refactor: reduce usage of our CSS class in favor of tailwind's util classes * refactor: remove our css classes in favor of Tailwind's util classes
|
For the first issue...
We could either increase the chart height here, or look at making it less granular on the Y axis. Which one would be ideal? |
|
I'd rather go for a less granular Y axis |
|
Are there any more issues to tackle other than those in the OP? |
|
I'm not aware of any. The idea with this issue was to compile all together. |
This fixes two issues from plausible#972 - Goals area has display issues depending on the name of your custom events - It is not possible to view labels for outbound links, 404 and custom props
* chore(docker): improve repeat contributions workflow * This change adds two new commands to gracefully stop and remove the Postgres and Clickhouse docker containers. To do so, it also gives them a recognizable name. * Additionally, the Postgres container is updated to use a named volume for its data. This lower friction for repeat contributions where one would otherwise sign up and activate their accounts again and again each time. * Improve bar component to work in a variety of situations This fixes two issues from #972 - Goals area has display issues depending on the name of your custom events - It is not possible to view labels for outbound links, 404 and custom props * Update changelog entry * Move content to children for Bar component * Remove redundant fallback width * Fix text color on root conversion texts Hyperlinks (<a>) inherit their color. In the case of the root conversion text, we needed to specify the color somewhere. The same color as the breakdown texts has been chosen. The Bar component no longer needs to take in text classes.
|
"noticed that custom filter breaks the layout on mobile screens a bit"
looks to happen with longer domain names |
|
we have two more reports: "a third of my goals are not displaying since today's update. Both for today, and past dates. Looks like you've put a limit on the number of displayed goals? I mean that I now only see the top 9 goals, the other ones are not displayed." "Also, on mobile, the add filter button doesn't fit well, and there are no more the arrows to switch to previous day" |
|
"Hey, PlausibleHQ , why are the outbound links not clickable anymore?" |
Confirmed to be a bug. Investigating. |
|
|
Also on the to-do list: A way for anonymous/logged-out viewers to see domain name on the embed/public mobile version. #1256 temporarily solves the larger issue, but we'd also like to get this taken care of. |
|
Several issues that people reported over the last few days have now been fixed:
|
thanks for your help @hirusi! another quick note: now that all this is live i noticed that if i'm logged in and tap on the favicon to display the full domain / other sites i have, i cannot tap the favicon again to close that little menu. i must tap on another site or somewhere else on the display to close the menu. would be nice if i can tap the favicon again |
|
Interesting problem, I'll take a look at that one tomorrow morning. |
|
closing this. i've added the remaining issues in this #1272 |
We're aware that the Plausible dashboard is not as optimized on smaller screens as on laptops/desktops. We will collect/combine all the main problems in one thread and prioritize the work to get them fixed. I'll start with some issues that I notice on my own device:
The traffic numbers on the main chart get squeezed and overlap
The Y value on the main chart that shows the numbers of unique visitors gets squeezed and overlaps all depending on what traffic you're getting. Here's an example of how it looks like when not optimized:
Details view doesn't allow scroll left or right
For every chart with the "Details" button (Top Sources and Top Pages), the report that opens up when you click on "Details" is not optimized:
Goals area has display issues depending on the name of your custom events
The goals area is not displayed correctly all depending on what type of goals you have set. Some examples here:
It is not possible to view labels for outbound links, 404 and custom props
When you open up the goals (404 error pages, outbound link clicks and any goal with custom properties) you cannot see the main label on the portrait orientation. You have to switch to landscape mode to see them. There's a thread with more details here #534
Details button issue on Firefox specifically
Firefox specific. The "Details" button on charts goes over the main chart and makes it impossible to click on the main entries:
The text was updated successfully, but these errors were encountered: