Improv/mobile responsive report #261
Merged
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
This code will: Add a script that will check for the viewport and update the report's #headerTitle accordingly. Add id headerTitle to <header> h1 tag. Add checkViewportWidth to report.ejs
BREAKING CHANGE This commit will: - Move scanAbout component outside of main tag. - Remove inline css flex-column from main tag. - Nest scan content divs under a new section. - Add media queries for max-width 600px
This commit will fix the error caused by declaring the target id (i.e. #headerTitle) before the script is called.
This commit adds: - Display none to elements not needed on ui (ie ally-online-banner) - Remove class z-1 to #scanAbout.
This commit will update css declaration for selectors related to #scan-about and #header.
This commit removes the inline bootstrap css and move the declarations into .compliance-summary so that certain selectors can be targeted in the mobile view media query.
This commit adds elements for mobile ui and updates the necessary inline css for desktop and mobile views.
This commit updates the css declarations for desktop and mobile views.
For commits up till b50e4eb
This commit will add the mobile ui for category selector and will add a desktop-view class to <nav> for desktop ui components.
This commit will fix the distortion of the divs under rule-item in the mobile view.
This commit will fix the report layout on ultrawide screens, the report will now stretch fully instead of having a right-side space.
This commit will fix the report layout on ultrawide screens, the report will now stretch fully instead of having a right-side space.
New file for search feature.
New file for search feature.
…ines This commit will fix the text wrapping distortion for createElementFromString. Core changes: - <button> element will have three <div> to each contain rule-items-count, rule-item-description, and dropdown svg icon. - Add dedicated css styles for rule-item-description to also make it mobile responsive.
This commit will add the onclick that calls OffCanvasSearchWarning for the search feature.
This commit changes the breakpoint to 767 to follow bootstrap values.
This commit will: - Remove unnecessary attributes and classes from header tag. - Add css styles to header tag
This commit will change the layout for wcagCompliance card and top5 card: - New class for card containers on <main> - Layout changes on wcagCompliance ejs file - New css styles for wcagCompliance card
|
Merged with fix/search-filter-ui branch. Fixed search filter ui for mobile responsiveness. |
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.
This PR is a WIP and adds...
Mobile Responsive UI
const ruleItem = createElementFromStringto fix UI on both desktop and mobile viewSearch Feature
Pending FIX
Elipsis not showing for rule-item-description
CSS for search function to be ported to static/ejs/partials/styles/styles.ejs
CSS for search function affecting mobile responsive when searchFilter is toggled on
I've kept this PR as small as possible (~500 lines) by splitting it into PRs with manageable chunks of code
I've requested reviews from 1 reviewer
This PR is a WIP so the following will be done later
package[-lock].jsonnpm audit, portable installation on GitHub Actions