Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bar: working on new scss #5013

Open
wants to merge 11 commits into
base: master
Choose a base branch
from
Open

Bar: working on new scss #5013

wants to merge 11 commits into from

Conversation

steal4life
Copy link
Collaborator

closes #5007

WIP!

@steal4life steal4life self-assigned this Sep 21, 2023
@steal4life
Copy link
Collaborator Author

I have no clue how can I make when dropdown is open to push other elements down not to apear over them, @stsrki @David-Moreira

@David-Moreira
Copy link
Contributor

I have no clue how can I make when dropdown is open to push other elements down not to apear over them, @stsrki @David-Moreira

I guess @stsrki might be more into this then me.

From my understanding what this task entails, is to make sure we use the provider classes instead of our custom styles in order to make the vertical mode work. So that is, to work without our custom css?

I would guess that replacing with the corresponding bs css classes / structure we would achieve this with minimal intervention. Is that not the case?
Can you post some screenshots as examples, and further explain where you need help / something is not working as expected?

@steal4life
Copy link
Collaborator Author

I'm trying to make it function the same as before, but it looks more like bootstrap and not like before:

basicaly i want when dropdown is open to push other parent dropdown elements:

this is wrong:

image

this is right:

image

basicaly first one go above other elements and I want to fix that

@David-Moreira

@David-Moreira
Copy link
Contributor

@steal4life I'm sorry it seems like I completly missed this.

I can't tell the difference between the this is right and this is wrong examples othen then the background being different?
The this is wrong: example shows the UIElements selection and the items following it, however
the "this is right:" example does not show the same elements as in the this is wrong: example? So I'm not sure what/how to compare?

@steal4life
Copy link
Collaborator Author

I managed to fix it so it is okay, thank You however @David-Moreira


public override string BarBreakpoint( Breakpoint breakpoint ) => breakpoint != Breakpoint.None && breakpoint != Breakpoint.Mobile ? $"navbar-expand-{ToBreakpoint( breakpoint )}" : null;

public override string BarMode( BarMode mode ) => $"b-bar-{ToBarMode( mode )}";
public override string BarMode( BarMode mode ) => mode != Blazorise.BarMode.Horizontal ? $"navbar-{ToBarMode( mode )} flex-column" : null;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not an issue, but I think it reads better in the positive mode == Blazorise.BarMode.Horizontal and invert acorrdingly.

Also that's how It is done in other places below, so I'd just keep it consistent
image

public override string BarMenu( BarMode mode ) => mode == Blazorise.BarMode.Horizontal ? "collapse navbar-collapse" : "b-bar-menu";
public override string BarMenu( BarMode mode ) => mode == Blazorise.BarMode.Horizontal ? "collapse navbar-collapse" : "collapse navbar-collapse";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's the difference here? We have a condition where both cases takes us to the same result?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it expected to be collapse navbar-collapse for every case?

Comment on lines -703 to 704
public override string BarDropdown( BarMode mode, bool isBarDropDownSubmenu ) => mode == Blazorise.BarMode.Horizontal ? "dropdown" : "b-bar-dropdown";
public override string BarDropdown( BarMode mode, bool isBarDropDownSubmenu ) => mode == Blazorise.BarMode.Horizontal ? "dropdown" : "dropdown";

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

redundant condition?

Comment on lines 707 to +711
public override string BarDropdownToggle( BarMode mode, bool isBarDropDownSubmenu ) => mode == Blazorise.BarMode.Horizontal
? isBarDropDownSubmenu
? "dropdown-item"
: "nav-link dropdown-toggle"
: "b-bar-link b-bar-dropdown-toggle";
: "nav-link dropdown-toggle";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please check, but this seems like it can be simplified to mode == Blazorise.BarMode.Horizontal && isBarDropDownSubmenu ...?

public override string BarDropdownItem( BarMode mode ) => mode == Blazorise.BarMode.Horizontal ? "dropdown-item" : "b-bar-dropdown-item";
public override string BarDropdownItem( BarMode mode ) => mode == Blazorise.BarMode.Horizontal ? "dropdown-item" : "dropdown-item";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

redundant?

public override string BarDropdownMenu( BarMode mode ) => mode == Blazorise.BarMode.Horizontal ? "dropdown-menu" : "b-bar-dropdown-menu";
public override string BarDropdownMenu( BarMode mode ) => mode == Blazorise.BarMode.Horizontal ? "dropdown-menu" : "dropdown-menu";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

redundant?

public override string BarDropdownMenuRight( BarMode mode ) => mode == Blazorise.BarMode.Horizontal ? "dropdown-menu-end" : "b-bar-right";
public override string BarDropdownMenuRight( BarMode mode ) => mode == Blazorise.BarMode.Horizontal ? "dropdown-menu-end" : "dropdown-menu-end";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

redundant?

@steal4life
Copy link
Collaborator Author

for me this looks quite similar to the bootstrap bar type, now I'm working on fixing the collapsing sidebar @David-Moreira @stsrki

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Bar: use native Bootstrap classnames for vertical mode
3 participants