training modals - fix column layout & remove width restriction on CustomisedBulletpoint #161
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
and remove specific pixel width restriction on CustomisedBulletpoint - instead allow this to span width of container
|
This pull request is automatically deployed with Now. |
jsms90
changed the title
|
Reviewed & okayed by Bea 👍 |
jsms90
added a commit
that referenced
this pull request
Mar 19, 2019
and remove specific pixel width restriction on CustomisedBulletpoint - instead allow this to span width of container
jsms90
added a commit
that referenced
this pull request
Mar 21, 2019
* make Grid a 'header' element under the hood, rather than wrapping header with divs * correct the paddings on the logos & remove extra padding on header itself * move anchor elements from inside Header to be inside Navbar component and allow configuration from the Header level (via an array for now & possibly Contentful at a future date) * create TopNavbar file, update with latest Zeplin specs & use existing 'Navbar' as SideNav only therefore altered all media queries in the existing Navbar file to correspond to 959px (not quite tablet) * fix the height of the flex container & make this the header again, instead of the Grid * begin changing SideNav to be closer to specs * separate HeaderAnchor into styles for top nav & side nav * separate SideNavAnchor & TopNavAnchor into own components & correct styling on font colours * update snapshots based on new breakdown of navbar we only have a story for the TopNavbar, since the SideNav is still not to spec * alter the breakpoint at which top nav turns into hamburger icon, to accommodate 8th link this is only temporary and will be replaced as soon as the dropdowns are incorporated into the TopNav * first attempt to add dropdowns to topnav * move padding onto top nav list item, instead of the anchor itself * change object keys in topNavLinks array to match the key names that dropdown component expects * make anchor links same colour as dropdown names * add stories for TopNav with dropdown & overall Header component * change 'Modal' to 'Panel' * change shape of array to conform to the way our existing Dropdown & Anchor components are written & change TopNav to accept the same props * enable the whole dropdown list to appear over the top of a page by forcing 'overflow: visible' onto Row & Col wrapping the header * pass dark prop into TopNavAnchor * add dropdowns to sidenav & make dropdown component configurable with differently styled components * move top nav dropdown styles into their own file * style dropdown on sidenav according to latest Zeplin designs * remove unused storybook component * replace existing TopNavAnchor with li+a combination, including new styles * fix anchor styles, method of applying the theme & speed of font colour transitions * change vibrant/outline colour in theme.js to new 'neon green' from Zeplin styleguide * speed up animations * re-use styles from TopNavAnchor on TopNavDropdown * restructure Header folder - create 2 new sub folders: TopNav & SideNav * separate padding that is specific to TopNav items from headerAnchorStyles & rename file * pass onClick handler through from dropdown to anchors nested inside * create separate InnerAnchor component & use in SideNavDropdown to correct styles * distinguish between smaller font for InnerAnchor on TopNav & larger font for SideNav otherwise, share all styles * bring top nav dropdowns in front of page - adjust z-index * separate all outerItemStyles from TopNav and SideNav * separate OuterAnchor from DropdownStylesSideNav file & rename TopNav version * break DropdownStyles file into SelectButton & List * further componentise * put sub-components back into Dropdown.js files & create 2 files for SideNav and TopNav * remove onBlur from dropdown wrapper, that is closing menu before link can navigate also move other event handlers onto the select button rather than entire dropdown wrapper * make SideNav dropdown wrapper an li under the hood for correct semantics * update snapshots * update lighthouse tests to allow for a larger dom size (700 nodes) * remove activeClassName error - stop passing this through to <a> tags, but only to <Link>s * make 'Us' in 'Join Us' lowercase * fix size of logos in 'Course catalog' section of training page (#154) * fix size of logos on training modal (#158) * fix size of logos on training modal * update lighthouse tests to allow for a larger dom size (700 nodes) (cherry picked from commit 7a15b56) * chore: testing deploy * Fix case study component paddings (#149) * make padding on case study cards consistent across pages - apply padding to CaseStudyLayout and make Hero and Preview components sections in their own right (i.e. using Grid internally) * show null if/when caseStudy prop is not passed to CaseStudyPreview * fix CaseStudyPreviews on Training page too * fix top and bottom padding for case study cards used at the top of pages * remove top padding on CaseStudyLayout - now the only space between case study cards & the navbar is the padding on the nav itself * bring CustomisedBullepoint in line with design specs, use this on appropriate pages & remove from other pages (#150) * move CustomisedBullepoint into Common & use on training page * remove extra padding around CustomisedBulletpoint on service pages' WorkStage (aka Approach) * bring CustomisedBulletpoint to spec & top using this component where a different list item is called for * fix typo * change background colours on the Our work page, so the top section is white & middle is grey * change screen width at which the TopNav turns into a hamburger * add padding to SideNav dropdown list * finalise tweaks to SideNav dropdown event handlers * fix outline colour - white on expansion & otherwise vibrant * adjust sizing & positioning of hamburger and close icons, to conform to zeplin specs * make space for outline styling within margin/padding of each item * update snapshots * specify styles to be applied to a link which relates to the current page & has just been clicked i.e. :active & .active * separate CloseButton into its own file * update naming of MobileNav vs SideNav * dummy commit * Revert "dummy commit" This reverts commit dfdadb6. * increase time to first contentful (and meaningful) paint values, to allow lighthouse to pass understanding that we will look into our performance issues thoroughly within another ticket * move ButtonAsIconWrapper styles onto UnstyledButton & remove ButtonAsIconWrapper * simplify the addition of styles to the Hamburger SVG * remove superfluous 'tab-index' on YLD Logo & put focus outline onto link that wraps logo * remove fill styles on tag * move list item's font styles into file with item spacing, rather than inside outerItemStyles * re-order CSS on SideNavPanel for greater clarity & remove extra z-index alteration * Revert "re-order CSS on SideNavPanel for greater clarity & remove extra z-index alteration" This reverts commit 8347290. * remove extra z-index alteration on thinner SideNav * stop TopNav from showing on screens between smallPhone & phone size and ensure that styles are applied correctly to this screensize for the hamburger * separate logic that checks whether a list item is a dropdown or link, into 'SideNavItem' * remove extra application of padding & margin on focus * put all item styles into same import/export - i.e. put font styles and maring+padding styles together * simplify the way we handle theme variation + list item states * update snapshots * remove colour alteration on SideNav's DropdownName when expanded * remove outline styles on SideNav * fix spacing between Dropdown name & chevron on TopNav * create 36px of space between each list item * make sections on training page modal span 5 columns instead of 6 (#161) and remove specific pixel width restriction on CustomisedBulletpoint - instead allow this to span width of container * add extra padding above related case study on training page (#163) * update snapshots * use remcalc on YLD Logo image wrapper * Revert "remove outline styles on SideNav" This reverts commit ef40109. * update snapshot * return old logo size - to be fixed in a separate ticket * fix bug in SideNav dropdown, where it expands and collapses immediately after a click * fix drunk chevron 😋 * stop hamburger from staying on scroll * update snapshots
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.
training modals - fix column layout & remove width restriction on CustomisedBulletpoint - Trello ticket
CustomisedBulletpointon training pageModalReview template