Consolidate CSS Stylings
Merge Request Checklist
Review
- [x ] Make sure the pipeline has passed. You may have to check the mirrored repo in code.il2.dso.mil to see the pipelines.
- [x ] Make sure that there are no errors in the development console.
- [x ] Make sure everything in the the ticket is addressed and that the acceptance criteria (if applicable) is met.
- [x ] Make sure all components and images match the design file or instruction given (if applicable).
- [x ] Make sure to take out any unused code.
- [x ] Make sure that common mistakes are not present in the code base. (See list under Common Mistakes below).
- [x ] Make sure the page is responsive (see the list for Responsiveness below for checklist).
- [x ] Check if any other issues may need to be checked (some examples can be found under Other items to look out for)
Common Mistakes
-
Make sure all words are spelled correctly (if applicable). -
Make sure the right images are used (if applicable). -
Do not use any inline styles in the HTML component in files. - [x ] Make sure everything is aligned correctly.
- [x ] Please avoid making global variables.
- [x ] Make sure error handling is in appropriate places.
- [x ] Remove all test code within the working sections when ready to push to master.
Responsiveness
For all below check the following breakpoints for Vue apps
Devices | Code | Screen sizes |
---|---|---|
Extra Small | xs | < 600px |
Small | sm | 600px > < 960px |
Medium | md | 960px > < 1264px |
Large | lg | 1264px > < 1904px |
Extra Large | xl | > 1904px |
- [x ] Check for bad word breaks within each breakpoint.
- [x ] Check to see if components are misaligned or have bad spacing, padding, or margin.
- [x ] Check to see if components overflow to either side of the viewport.
- [x ] Check if there are any weird visual glitches at different breakpoints.
Other items to look out for
-
Make sure new API calls use the correct HTTP verb and when working with JSON make sure it is validated. -
With GET
s, make sure that text/html return type is avoided and application/json is used when dealing with json data. -
Avoid transmission of confidential data in URL parameters and unnecessary parameters. -
Make sure all API calls are within a try catch block with appropriate error handling. -
If dealing with forms, make sure the form has input validation. -
Avoid logging confidential information. -
Make sure no-cache
is on confidential web pages. -
Make sure rel="noopener noreferrer"
is on any link that opens to a new tab. -
For browser performance, use .webp
images instead of.png
,.jpg
,.jpeg
, etc.
Developer responsibilities with Cypress tests
-
Make sure any new download buttons (that don't use DownloadButton.vue) have the attribute data-cy="download"
. -
Make sure new pages / paths within router.js are added to the links.js test suite. -
Add a new test case within downloads.js if you're adding the first download button to any page. -
Reuse existing custom commands if they serve the purpose of your test. -
Create a new custom command for any duplicate code / test that can be globally reused. -
Create a local function for duplicate code that can be reused within your test spec.