ERATRANS-1057: Mega menu. #643
Conversation
|
🚀 Deployed on https://preview-643--oelibrary.netlify.app |
|
Prerelease done: 0.1057.202502162340. |
| {% set _content_block = content_block|default('') %} | ||
| {% set _items = items|default([]) %} | ||
| {% set _back_button_label = back_button_label|default('Back') %} | ||
| {% set _icon_path = icon_path|default('') %} |
There was a problem hiding this comment.
add a min height parameter with a default value to what is now in ecl. If the content height is bigger, then scrolling is fine
There was a problem hiding this comment.
added. it's pixel based, the user can add any size but will default to 300px
| {% endif %} | ||
| <div class="col-12 col-lg-8"> | ||
| <div class="navigation-items"> | ||
| {% for _item in _items %} |
There was a problem hiding this comment.
look into a solution, css prefereply with some pseudo code or js if not, where if the first item in any column inside the meganenu has children, then we open it automatically 1st and 2nd level both (see ecl example)
There was a problem hiding this comment.
added using js, there is no possibility with css
| {% for _item in _items %} | ||
| {% if _item.items is defined %} | ||
| {% set _trigger_attributes = _item.trigger.attributes is defined ? _item.trigger.attributes : create_attribute() %} | ||
| {% include '@oe-bcl/bcl-dropdown/dropdown.html.twig' with _item|merge({ |
There was a problem hiding this comment.
make sure that columns can be targeted separately in css if needed also toghter with their parent link
There was a problem hiding this comment.
they can, we have .content-block for first column, .navigation-items for second column, .navigation-items .dropdown-menu for third column and .collapse for 3rd column
| @@ -124,6 +124,8 @@ | |||
| {% include '@oe-bcl/bcl-dropdown/dropdown.html.twig' with _item only %} | |||
| {% elseif _item.button is defined %} | |||
| {% include '@oe-bcl/bcl-button/button.html.twig' with _item only %} | |||
| {% elseif _item.mega_menu is defined %} | |||
| {% include '@oe-bcl/bcl-mega-menu/mega-menu.html.twig' with _item only %} | |||
There was a problem hiding this comment.
double check that it renders correclty when used inside a menu
There was a problem hiding this comment.
yes, fixed and now renders okay inside a menu
|
|
||
| {% set attributes = attributes.setAttribute('aria-labelledby', _id).addClass(_classes) %} | ||
|
|
||
| {% if _trigger.attributes is empty %} |
There was a problem hiding this comment.
when on tabled mode, the parent data should be displayed on top
| }) only %} | ||
| {% if _item.collapse is defined %} | ||
| <div class="collapse"> | ||
| {{ _item.collapse|raw }} |
There was a problem hiding this comment.
what is this collapse|raw? please give me an example
There was a problem hiding this comment.
It is used to render properly the html... the encoding if the |raw is not added sees the collapse parameter as simple string and does not render it properly.. that's why i used raw here
| @@ -0,0 +1,166 @@ | |||
| /* stylelint-disable no-descending-specificity, declaration-no-important */ | |||
There was a problem hiding this comment.
the second column should be white and the third gray as in ecl
There was a problem hiding this comment.
changed the colors
No description provided.