UI glitch with narrow devices #1091
Conversation
MarcelRobitaille
force-pushed
the
896-ui-glitch-with-narrow-devices
branch
from
9c4f4c2 to
ba15a1d
Compare
|
I don't know where the PHP error is coming from. I didn't change any PHP. |
|
Also, not sure how copying files from nextcloud/nextcloud-vue works. It's GPLV3, so we probably need to state the changes and disclose the source. I'm not sure how that works though, I've never done that before.
|
|
I just compiled it and found a small further glitch: To reproduce:
|
This is a tougher one, I fear. If they published the file under GPLv3, it is in general compatible with our AGPL. The problem is that once you copy and modify their code, you would have to publish under a compatible license. For GPLv3 that might be v3 or any successor. Enforcing another license (AGPL) might cause trouble. I am no lawyer, so I might be completely wrong. I am just saying, I would be very careful in this case. One safe way would be to create our own fork of the repo, make the changes there, use the forked repo in the cookbook app and report the changes back. Then the team in the main Vue repo can consider whether the changes are worth getting integrated or not. GPL satisfied. I do not know what modifications you made exactly. Could this be incorporated into the main Vue library? Was e.g. a PR a feasible way? I will try to get in contact with the maintainers of the nextcloud-vue repo. Let's see what they are thinking about this. |
|
Thanks for the bug report. I will try to reproduce and fix it. I understand. I know licensing is tricky. I think it could be made into a PR. My issue requesting this upstream was completely ignored, but maybe a PR would be different. |
Previously, we introduced a class `.breadcrumbs` that sets `width: calc(100% - 60px)` to compensate for the left margin. However, `.breadcrumb` defined in `@nextcloud/vue` Breadcrumbs sets `width: 100%`. This was getting priority over our `calc` rule. Not wanting to use `!important`, the solution I chose was to move this single rule to the unscoped style tag and to add additional class name selectors in order to increase the specificity. Signed-off-by: Marcel Robitaille <[email protected]>
Implement a custom ResponsiveActions based on nextcloud/vue Actions that automatically changes the button layout based on available space. Signed-off-by: Marcel Robitaille <[email protected]>
Signed-off-by: Marcel Robitaille <[email protected]>
Signed-off-by: Marcel Robitaille <[email protected]>
This was only needed for customizing Breadcrumbs, which has been removed. Signed-off-by: Marcel Robitaille <[email protected]>
MarcelRobitaille
force-pushed
the
896-ui-glitch-with-narrow-devices
branch
from
fe92aa2 to
45dc107
Compare
|
Closing this because I think we're going with #1105 |
2 participants
Fixes: #896
Fix this UI glitch by replacing the
Breadcrumbselement with an element better suited for this kind of button layout. AResponsiveActionswas developed based on thenextcloud/vue Actionscomponent. ThisResponsiveActionsshows the buttons with an icon and text if there is enough space, only the icons if there is only enough space for that, and only a 3-dot menu if very narrow devices like phones. This is to avoid mystery meat navigation.Peek.2022-06-08.02-50.mp4