Update: use display flex to set equal menu item heights (fixes #466) #467
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
+ inner width keeps the box from collapsing if there's not enough content to push it outward.
...for consistent item spacing
danielghost
approved these changes
Sep 20, 2023
|
🎉 This PR is included in version 9.9.0 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
github-actions bot
pushed a commit
to redwoodperforms/adapt-contrib-vanilla
that referenced
this pull request
Aug 19, 2024
# [7.1.0](v7.0.1...v7.1.0) (2024-08-19) ### Fix * Add 'bg-color white' mixin (adaptlearning#461) ([79f9011](79f9011)), closes [adaptlearning#461](https:/redwoodperforms/adapt-contrib-vanilla/issues/461) * Add hover effect to GMCQ items to match MCQ items (fixes adaptlearning#513) ([030c251](030c251)), closes [adaptlearning#513](https:/redwoodperforms/adapt-contrib-vanilla/issues/513) * Add margins for mobile stacked layout (fixes adaptlearning#450) ([988d68f](988d68f)), closes [adaptlearning#450](https:/redwoodperforms/adapt-contrib-vanilla/issues/450) * Add menu subtitle color variable (fixes adaptlearning#515) (adaptlearning#516) ([a1b8aba](a1b8aba)), closes [adaptlearning#515](https:/redwoodperforms/adapt-contrib-vanilla/issues/515) [adaptlearning#516](https:/redwoodperforms/adapt-contrib-vanilla/issues/516) * Add schema default values for background image styles (fixes adaptlearning#456) ([17134df](17134df)), closes [adaptlearning#456](https:/redwoodperforms/adapt-contrib-vanilla/issues/456) * Add variables to control box menu item padding (fixes adaptlearning#506) adaptlearning#517 ([92ccf46](92ccf46)), closes [adaptlearning#506](https:/redwoodperforms/adapt-contrib-vanilla/issues/506) [adaptlearning#517](https:/redwoodperforms/adapt-contrib-vanilla/issues/517) * background and headerBackground undefined variable errors (fixes adaptlearning#462) (adaptlearning#463) ([ad4d5ba](ad4d5ba)), closes [adaptlearning#462](https:/redwoodperforms/adapt-contrib-vanilla/issues/462) [adaptlearning#463](https:/redwoodperforms/adapt-contrib-vanilla/issues/463) * Bump braces from 3.0.2 to 3.0.3 (adaptlearning#519) ([1b8a0c2](1b8a0c2)), closes [adaptlearning#519](https:/redwoodperforms/adapt-contrib-vanilla/issues/519) * Change @max-width to 100%, remove max-width: inherit from .page (adaptlearning#494) ([0a204a3](0a204a3)), closes [adaptlearning#494](https:/redwoodperforms/adapt-contrib-vanilla/issues/494) * Component background image support (fixes adaptlearning#511) (adaptlearning#512) ([1ca97b5](1ca97b5)), closes [adaptlearning#511](https:/redwoodperforms/adapt-contrib-vanilla/issues/511) [adaptlearning#512](https:/redwoodperforms/adapt-contrib-vanilla/issues/512) * Increase container horizontal padding (gutters & margins) (adaptlearning#435) ([3ab5675](3ab5675)), closes [adaptlearning#435](https:/redwoodperforms/adapt-contrib-vanilla/issues/435) * Loading animation updated (fixes adaptlearning#500) (adaptlearning#501) ([2c24965](2c24965)), closes [adaptlearning#500](https:/redwoodperforms/adapt-contrib-vanilla/issues/500) [adaptlearning#501](https:/redwoodperforms/adapt-contrib-vanilla/issues/501) * Matching dropdown list style improvements (fixes adaptlearning#478) (adaptlearning#507) ([c77980a](c77980a)), closes [adaptlearning#478](https:/redwoodperforms/adapt-contrib-vanilla/issues/478) [adaptlearning#507](https:/redwoodperforms/adapt-contrib-vanilla/issues/507) * Neutralised `nav-btn-*` variables (adaptlearning#477) ([4120884](4120884)), closes [adaptlearning#477](https:/redwoodperforms/adapt-contrib-vanilla/issues/477) * Optimise `blend.less` (adaptlearning#503) ([bc7a7f8](bc7a7f8)), closes [adaptlearning#503](https:/redwoodperforms/adapt-contrib-vanilla/issues/503) * prevent notify btn hover style override (adaptlearning#483) ([7c88e60](7c88e60)), closes [adaptlearning#483](https:/redwoodperforms/adapt-contrib-vanilla/issues/483) * Remove background color when using pin images (adaptlearning#454) ([6aaa5e7](6aaa5e7)), closes [adaptlearning#454](https:/redwoodperforms/adapt-contrib-vanilla/issues/454) * remove legacy z-index from slider number selection / model answer (adaptlearning#489) ([932d416](932d416)), closes [adaptlearning#489](https:/redwoodperforms/adapt-contrib-vanilla/issues/489) * Utilize .size-small class for .hide-on-mobile class (adaptlearning#495) ([fbb693d](fbb693d)), closes [adaptlearning#495](https:/redwoodperforms/adapt-contrib-vanilla/issues/495) ### New * Add drawer item locked state (adaptlearning#488) ([79aad47](79aad47)), closes [adaptlearning#488](https:/redwoodperforms/adapt-contrib-vanilla/issues/488) * Add margin start and margin end column classes (fixes adaptlearning#504) ([5ee17b7](5ee17b7)), closes [adaptlearning#504](https:/redwoodperforms/adapt-contrib-vanilla/issues/504) * Add text-transform variables (fixes adaptlearning#479) ([1d963a6](1d963a6)), closes [adaptlearning#479](https:/redwoodperforms/adapt-contrib-vanilla/issues/479) * expand on Narrative progress indicator state styles (fixes adaptlearning#509) (adaptlearning#510) ([5010471](5010471)), closes [adaptlearning#509](https:/redwoodperforms/adapt-contrib-vanilla/issues/509) [adaptlearning#510](https:/redwoodperforms/adapt-contrib-vanilla/issues/510) ### Update * Hotgraphic pin number inherits from the icon styles (fixes adaptlearning#282) ([6abf34f](6abf34f)), closes [adaptlearning#282](https:/redwoodperforms/adapt-contrib-vanilla/issues/282) * Media transcript completion styling (adaptlearning#475) ([7d4d5f7](7d4d5f7)), closes [adaptlearning#475](https:/redwoodperforms/adapt-contrib-vanilla/issues/475) * menu item image margin updated (fixes adaptlearning#520) ([25dd6b7](25dd6b7)), closes [adaptlearning#520](https:/redwoodperforms/adapt-contrib-vanilla/issues/520) * Nav styling amends (adaptlearning#474) ([bf02388](bf02388)), closes [adaptlearning#474](https:/redwoodperforms/adapt-contrib-vanilla/issues/474) * remove default color hex codes from schemas (fixes adaptlearning#464) (adaptlearning#468) ([4f4acbf](4f4acbf)), closes [adaptlearning#464](https:/redwoodperforms/adapt-contrib-vanilla/issues/464) [adaptlearning#468](https:/redwoodperforms/adapt-contrib-vanilla/issues/468) * Replace PLP hard coded border-radius with variable (fixes adaptlearning#498) (adaptlearning#499) ([666b472](666b472)), closes [adaptlearning#498](https:/redwoodperforms/adapt-contrib-vanilla/issues/498) [adaptlearning#499](https:/redwoodperforms/adapt-contrib-vanilla/issues/499) * RTL styling (adaptlearning#481) ([14b2bf9](14b2bf9)), closes [adaptlearning#481](https:/redwoodperforms/adapt-contrib-vanilla/issues/481) * Update visited color variables (fixes adaptlearning#470) ([c0bebdd](c0bebdd)), closes [adaptlearning#470](https:/redwoodperforms/adapt-contrib-vanilla/issues/470) * use display flex to set equal menu item heights (fixes adaptlearning#466) (adaptlearning#467) ([84e9379](84e9379)), closes [adaptlearning#466](https:/redwoodperforms/adapt-contrib-vanilla/issues/466) [adaptlearning#467](https:/redwoodperforms/adapt-contrib-vanilla/issues/467) ### Upgrade * Bump ip from 1.1.8 to 1.1.9 (adaptlearning#497) ([e40efcf](e40efcf)), closes [adaptlearning#497](https:/redwoodperforms/adapt-contrib-vanilla/issues/497)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #466 and #465
Set equal menu item heights
Currently, the height of menu items is based on the amount of text content which leads to inconsistent item heights.
This PR uses
display: flexto display all items at equal height with no constraints on the content. Please see below for screenshots of how this looks in different use cases.Standard display:
Items using column layout:
Items without image:
Remove button container margin
I've also included #465 in this PR. The
margin-bottomattached to the.boxmenu-item__button-containercreates inconsistent spacing around the item (1rem top/left/right and 2rem bottom). As the.boxmenu-item__button-containeris the last item in the menu item, and there is already padding applied to the.boxmenu-item__inner, the margin here isn't needed.