Current Behavior
The UserCard dropdown menu receive the same style as the app controls, even when they are not in a context where they are the primary controls.
This includes changing the color and position of the button.
Steps to Reproduce
Hover the cursor on an avatar while the browser is in the @phone viewport. The dropdown button will be grey instead of white.
In versions up to 0.2.1 of Flagrow User Directory, the same color issue can be observed. Additionally, all dropdown buttons of the page are moved to the top right of the page because they are all treated as the primary action of the page https://github.com/flagrow/user-directory/issues/26
Expected Behavior
The class .App-primaryControl should not be applied by default, so that the style is only changed on the UserPage.
The issue is not too bad in Flarum because the button is absolutely positioned inside the card which is itself absolutely positioned, making the position issue invisible. This is however clearly visible in extensions that use the UserCard without absolutely positioning it, like User Directory.
Screenshots
Environment
Flarum version: beta8, dev-master
Possible Solution
Add a new prop to the UserCard component, to tell it whether it's the primary component on the page. This prop would be false by default, and only set to true when used on the UserPage
Additional Context
This was initially reported as issue https://github.com/flagrow/user-directory/issues/26 in User Directory. A workaround has been written for it, but I believe it should be fixed in core as it still impacts color and possibly future use of the UserCard component.
Bug Report
Current Behavior The UserCard dropdown menu receive the same style as the app controls, even when they are not in a context where they are the primary controls.
This includes changing the color and position of the button.
Steps to Reproduce Hover the cursor on an avatar while the browser is in the
@phoneviewport. The dropdown button will be grey instead of white.In versions up to 0.2.1 of Flagrow User Directory, the same color issue can be observed. Additionally, all dropdown buttons of the page are moved to the top right of the page because they are all treated as the primary action of the page https://github.com/flagrow/user-directory/issues/26
Expected Behavior The class
.App-primaryControlshould not be applied by default, so that the style is only changed on the UserPage.The issue is not too bad in Flarum because the button is absolutely positioned inside the card which is itself absolutely positioned, making the position issue invisible. This is however clearly visible in extensions that use the UserCard without absolutely positioning it, like User Directory.
Screenshots
Environment
Possible Solution Add a new prop to the UserCard component, to tell it whether it's the primary component on the page. This prop would be false by default, and only set to true when used on the UserPage
Additional Context This was initially reported as issue https://github.com/flagrow/user-directory/issues/26 in User Directory. A workaround has been written for it, but I believe it should be fixed in core as it still impacts color and possibly future use of the UserCard component.