Make Style Linting Fixes

[averdin2]

Overview

I recently made a GitHub action for Linting our CSS, see issue #1441. I decided that this GitHub action would not lint the entire codebase, only code that is committed on the pull request. However, there are still linting issues throughout the entire code base. We need to go through and clean up that code using the linter showing all the issues.

Action Items

• [x] Set line 22 in .github/workflows/linter.yml to VALIDATE_ALL_CODEBASE: true, and commit the changes to run the lining test on the entire codebase.
• [ ] Go through each file where there is an issue and clean up the code so it does not cause any issues.
• [ ] Change line 22 in github/workflows/linter.yml to VALIDATE_ALL_CODEBASE: false.

[averdin2]

Notes for changes in _about.scss

• On line 149, I got rid of the margin-bottom: 0 because it wasn’t doing anything. The design seems to be fine with just having margin: 12px and it was causing a linting issue.
• On line 275, I got rid of a duplicate style property for padding-left. I changed the padding-left: 23px to 10px because it matches the specifications in the Figma better.
• I commented out some empty media queries on lines 615 - 622 because they were empty. I kept them commented out instead of removing them in case they are needed for future issues on the about page.

[averdin2]

Note

• For errors regarding 'declaration-block-no-duplicate-properties', make sure that the duplicate properties are not vendor prefixes.
• [ ] After checking all issues, need to add ignore: ["consecutive-duplicates-with-different-values"] to .stylelintrc.json file

[Sihemgourou]

Please add update

1. Progress
2. Blockers
3. Availability
4. ETA Thanks :)

[averdin2]

1. Progress: I am working through all the issues, see the other comments I have, and will post on this issue for more information.
2. Blockers: None, but this issue is a low priority. I am currently assisting on issue #1833 which is a high priority. I will incrementally make updates regarding this issue throughout the week.
3. Availability: I am fairly available, but I do not need assistance on this issue.
4. ETA: 2 weeks.

[averdin2]

Notes for changes in _events.scss

• On line 5, there was code that said margin-top: 52px but then there was another line lower margin: 0 which overwrites that style. I changed line 5 to say margin: 52px 0 0 0; with the intended changes included. In the pictures below, I show what it looked like originally vs my changes. I personally don't know what the website should look like, should there not be a margin top of 52px? I assumed that there should be and added it in (I personally think the page looks better without).
  Before my changes

After my changes


• On line 257, there was a similar margin issue where margin-bottom: 0 was being overwritten by a line lower margin: 45px. I changed the code so that there is only margin: 45px on line 257. I looked at the website with the margin-bottom added correctly, but I ultimately decided that having a margin of 45px on this class looks better. Having a margin-bottom of 45px instead of 0 didn't change the position of the cards either. See the below screenshots for a visual of both.
  With the correct margin-bottom: 0

With all margin: 45px. This is what I decided to go with


• On line 327, there was text-align: center and another text-align: left two lines lower. Since the website was using the text-align: left styles, I decided to change line 327 to text-align: left and removed the other line. See both the text-align center and left below.
  text-align: center

text-align: left


• I removed commented out code that started on line 327.

[averdin2]

Notes for changes in _home.scss

• On line 428, there was originally a line flex-basis: 100%. This caused linting issues with a line underneath it that said flex: 1. The flex basis line wasn't adding any styles, and the flex: 1 line makes the page look a lot better (this is what I kept). See the screenshots below for with only flex basis set, none set, and flex: 1 set.
  Only flex-basis: 100%

Neither flex-basis or flex


Only flex: 1


[averdin2]

Notes for changes in _project-page.scss

• On line 54, I commented out an empty styles block.
• On line 157, I removed a duplicate semicolon.
• On lines 184, 207, and 348, there were two text-align properties in the css class. In each instance, text-align: left would have been the style attribute displayed, so I changed each line to be text-align: left and removed the duplicate text-align attribute. I believe that some of these styles are not even being used in the site, which is why I don't have images for the changes, but the code would be using text-align: left.

[averdin2]

Notes for changes in _toolkit.scss

• Duplicate classes on lines 146 and 263. They are both enacting styles on the height and width of particular images on the Toolkit page. Currently, the enacted styles are height and width at 14.5rem. The duplicate has a height and width at 17.5rem. I went with the one that is currently being used (changing styles on lines 147 and 148, and removed styles on line 263). In the screenshots below, you can see 17.5rem makes the images look larger.
  Height and Width: 14.5rem

Height and Width: 17.5 rem


• On line 156, there was a duplicate class selector lower in the code. I brought the styles up from the code lower in the file into the block starting on line 156. I then removed any duplicate style attributes that would change what the current page looks like. I am not too concerned with how the page looks like now, as we need an issue to go into this page and clean up styles being enacted on h tags. The h tags should not be targeted directly by style changes, we have standardized classes for this.
• On line 102, there is a similar issue to the above point. I again brought the classes into the code block starting on line 102, and removed the lower block, and replaced any duplicate style attributes. Again, styles targeting h tags need to be replaced with standardized classes in another issue.

[averdin2]

Progress: I am pretty much done with the linting fixes. I need to pull current code and recheck before making a PR. I haven't decided if this should be made a PR before the acutal GitHub action gets implmented yet. I also was hesitent to make linting fixes to wins page since there is wins feature branch. May want to make a similar issue for the wins feature branch. Blockers: None, just working slowly on this issue. Availability: I attend most meetings and am fairly available on slack. Also available most evenings, scheduled ahead of time. ETA: Not sure. Still deciding if I should wait until the acutal GitHub action is implemented first.

[github-actions[bot]]

@averdin2

Please add update using this template (even if you have a pull request)

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) ask for help at a Tuesday or Sunday meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, August 10, 2021 at 12:10 AM.}

---

Note: This comment was created as part of a GitHub Action during its trial phase. If you find this GitHub Action to be disruptive/unhelpful, or if you believe there might be a bug, please leave a comment on this issue. All feedback will be used to further improve it. Thank you for your time.

[github-actions[bot]]

@averdin2

Please add update using this template (even if you have a pull request)

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, August 17, 2021 at 12:02 AM PST.}

[github-actions[bot]]

@averdin2

Please add update using this template (even if you have a pull request)

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, August 24, 2021 at 12:03 AM PST.}

[averdin2]

Progress: Just waiting on issue #1441 to be merged to make a PR for this.

[github-actions[bot]]

@averdin2

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, September 7, 2021 at 12:02 AM PST.}

[github-actions[bot]]

@averdin2

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, September 14, 2021 at 12:02 AM PST.}

[github-actions[bot]]

@averdin2

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, September 21, 2021 at 12:02 AM PST.}

[github-actions[bot]]

@averdin2

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, September 28, 2021 at 12:02 AM PST.}

[github-actions[bot]]

@averdin2

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, October 5, 2021 at 12:02 AM PST.}

[github-actions[bot]]

@averdin2

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, October 12, 2021 at 12:02 AM PST.}

[macho-catt]

Hi @averdin2, I will DM you on slack to find out more info on how you want to move forward on this. Thanks :)

[github-actions[bot]]

@averdin2, @macho-catt

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, October 19, 2021 at 12:03 AM PST.}

[github-actions[bot]]

@averdin2, @macho-catt

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, October 26, 2021 at 12:03 AM PST.}

[github-actions[bot]]

@averdin2, @macho-catt

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, November 2, 2021 at 12:03 AM PST.}

[github-actions[bot]]

@averdin2, @macho-catt

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Monday, November 8, 2021 at 11:03 PM PST.}

[macho-catt]

Will reach out again to @averdin2

[macho-catt]

PR is opened and is being reviewed

[github-actions[bot]]

@averdin2, @macho-catt

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Monday, November 22, 2021 at 11:19 PM PST.}

[github-actions[bot]]

@averdin2, @macho-catt

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the developer meeting discussion column and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Monday, November 29, 2021 at 11:19 PM PST.}

[macho-catt]

Will reach out again to @averdin2 to update the PR