Getting the Most out of Github Issues Guide

[alexandrastubbs]

Dependency

New Issue for figuring out how we can use markdown and then this issue will be restructured. #1085

Overview

The 'Getting the most out of Github Issues' guide is complete, but not live due to a problem with how it is showing up visually. We need to fix the visuals so that we can get it live in our toolkit.

Action Items

Development

• Discuss with Danielle how the CSS should be set up
  • If restructuring is recommended, then fix the survey-reporting-dashboard-guide to use new SCSS format and do PR
  • Update the getting the most out of github guide to use the new SCSS format
• Add link to the toolkit page and update the card to reflect live status
• Create a new Wiki page with a clear explanation on how to execute the responsiveness of the red link indicators and link it to the architecture/ how to create a guide

Resources

Github Issue Guide
Example of guide for what it should look like
Toolkit page
Original issue for the guide
How to create a guide page

Image highlighting the problem:

[alexandrastubbs]

Hannah Livnat was the developer for the Survey Reporting Dashboard page btw, in case you'd like to understand what she did to make that page work.

[ExperimentsInHonesty]

Notes from a slack convo with @hannahlivnat who can be contacted on Slack at Hannah Livnat
Hannah said: ...I made the guide arrows as reusable sass mixins within the main github issue guide scss page so any developer should be able to achieve the correct affect by using the correct mixins and class names. https://github.com/hackforla/website/blob/gh-pages/_sass/components/_guide-pages.scss

class name for any div containing image with overlay links:

Class name for image within overlay-link div:

Mixin for small and medium arrows:

classname for arrows that should be hidden on mobile:

mixin for arrows that should be changed on mobile:

[pawan92]

@alyssabenipayo Please update your issue with following information

1. Progress
2. Blockers
3. Availability
4. ETA

[abenipa3]

Hello @pawan92, this is my progress so far.

I updated the HTML and SCSS files for Getting the Most out of GitHub Guide as seen below so that the arrow points are positioned properly on full screen. Restructuring was not needed.

(Full Screen Version Preview)

(Mobile Version Preview)

I also added the link to the toolkit page and updated the card to reflect live status.

[abenipa3]

• Progress: Approximately 85% done with updating the Getting the Most out of Github Guide.
• Blocks: Need to figure out how to resolve the visual issue when viewing in iPad mode. (UPDATE 1/14+1/16: Reached out to Hannah for questions.)
• Availability: Open
• ETA: 1/17 for the Getting the Most out of Github Guide. Wiki Page TBD

[abenipa3]

UPDATE 1/19/21

• Progress: Visual issue resolved - Created a pull request. Will start on writing the wiki page. Still need to resolve visual issue (this time on mobile).
• Blocks: Arrows are pushed on top of the elements. Experimenting with media query so that it will work on all devices.
• Availability: Open
• ETA: GitHub Issues, hopefully, 1/20/21...Wiki Page - TBD

[pawan92]

@alyssabenipayo Could you update please
Progress:
Blocks:
Availability:
ETA:

[abenipa3]

Progress: Reformatting the github-issues-guide.scss so that it would use the classes from the _guide-pages.scss
Blocks: Need to stabilize arrows so that it doesn't move on the overlay image on mobile devices.
Availability: Open
ETA: GitHub Issues - 1/30...Wiki Page - TBD