Toolkit page: Add anchors to Guides and External Resources sections

[JessicaLucindaCheng]

Overview

We need to be able to go directly to the Guides and External Resources sections on the Toolkit page so that we can link to those sections from the header and footer menus. For this issue, we will add anchors to those sections.

Action Items

• See this example page that has anchors and examine the anchors with developer tools: https://www.hackforla.org/about
• In pages/toolkit.html,
  • Add an anchor to the Guides section so that https://www.hackforla.org/toolkit#guides will jump to that section
  • Add an anchor to the External Resources section so that https://www.hackforla.org/toolkit#external-resources will jump to that section
• For styling,
  • First, read the Standardized Components wiki page. Note: The guide uses buttons as an example but the concept for reusable, standardized components is applicable to anchors.
  • Then, add any page specific SCSS classes for the anchors to _sass/components/_toolkit.scss
• Using Docker,
  • Check that each anchor link jumps to its corresponding section
  • Check that the changes look good on mobile, tablet, and desktop views using developer tools
  • Check that any changes don't break anything on the website
• Once the pull request associated with this issue is approved and merged, please update and edit issue Implement the new design for the footer: desktop #2393 by
  • Checking off the dependency for this issue
  • If all dependencies are checked off, please move issue Implement the new design for the footer: desktop #2393 to the New Issue Approval column and remove the Dependency label

Resources/Instructions

• Toolkit page
• pages/toolkit.html
• _sass/components/_toolkit.scss
• Example page that has anchors: https://www.hackforla.org/about
• Standardized Components wiki page
• Tracked in homepage launch #2481 (comment)
• Related to issues
  • Implement the new design for the footer: desktop #2393
  • Implement the new design for the top navigation bar #2455

[Carlos-A-P]

Availability: 1 week
ETA: 4/20/2022

[Sparky-code]

Hello @ExperimentsInHonesty, while reviewing the PR for this issue I noticed that the buttons for 'suggest a guide' and 'suggest a resource' on the toolkits page don't actually connect to anything and appear broken, though they just don't have links.

I understand you're the stakeholder here so I wanted to get your input on whether it would make sense to have something like an onclick class for those buttons that give the user visual feedback like "coming soon!" etc. so that they know the buttons aren't broken. Otherwise if the forms/links for that are in the pipeline and it doesn't make sense to insert that extra issue.

My thought process is that a class like this would be useful for pages/elements that are live but in progress as a reusable 'construction sign' interaction.

Thank you!

[ExperimentsInHonesty]

@Sparky-code did the issue that you raised above get made into an actual issue? If yes, please put a link to it here

Nevermind. I found it #3115

[JessicaLucindaCheng]

• In addition to Requirements Gathering for 'Suggest a Guide' Button Link on Toolkits Page #3115, issue Toolkit page: Hide suggest buttons #3678 was created to temporarily hide the Suggest a guide and Suggest a resource buttons