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

[abenipa3]

Progress: Stabilized arrows. Need to resize text.
Blocks: Text spreads over the grey area as seen below. Still experimenting with font-size till the issue resolves.
Availability: Open on Monday, Tuesday, and Wednesday.
ETA: GitHub Issues 2/2. Wiki Page - TBD

[abenipa3]

Progress: Started working on the Wiki Page while figuring out how to fix the text sizes via mobile.
Blocks: Text overlaps the grey area on mobile. Wasn't feeling well this past week as well, but I'm good now and looking forward to progressing further with this issue.
Availability: Open on Monday through Thursday.
ETA: GitHub Issues 2/9/21. Wiki Page TBD.

Link to Wiki: https://docs.google.com/document/d/1dPlPiNLRaueoSPbcgBwdHLSHMaNeyeFNKwUaBLMiIpo/edit

[daniellex0]

@alyssabenipayo This issue has us adding more content to this page: issue #918

You can finish the issue as-is and then leave it to someone else, or you can work this into your changes- it's up to you

[abenipa3]

@daniellex0 Thanks for the update. I think I can work this into my changes. If anything, I'll keep everyone posted. Thanks.

[abenipa3]

Progress: Code works well in Firefox for Getting the Most out of GitHub as seen below, but not Google Chrome. Also attempting to resolve visual issues in the Survey Reporting file as seen below and discovered that outputs are not cross-browser compatible.

Blocks: Need to figure out how to make it cross-browser compatible. Also may consider restructuring and fixing the survey-reporting-dashboard-guide, but want to check in with the team if there are other suggestions.

Availability: Open.

ETA: GitHub Issues 2/20/21 (It may take longer considering the complexity). Wiki Page TBD.

Firefox Output (iPhone 6/7/8 Preview)

Chrome Output (iPhone X Preview)

Survey-reporting-dashboard-guide output for both Firefox and Chrome after implementing new code to Getting the Most out of GitHub. (iPhone 6/7/8/X Preview)

[abenipa3]

Plans Going Forward (Feedback from Dev Meeting on 2/14/21):

• Focus on restructuring Getting the Most Out of Github and Guide Page files (Make it cross-browser compatible).
• Add content from issue Adding 'Label' Information to the Guide on Getting the Most Out of GitHub Issues #918.
• Create a new issue to fix Survey Reporting Dashboard for consistency.

[abenipa3]

Progress: Researched how to resolve cross-browser compatibility issues, but not sure how to proceed. Updated text size and alignment. Pushed my latest code for review as a draft (#933).

"Final" Output for mobile via (Firefox):

Blocks: Need a final confirmation to see if restructuring is necessary after my updates in the Getting Started with Github file affected survey-reporting-dashboard-guide on Chrome as seen below. Danielle and I will also go over the codes to investigate today at 3 pm.

Output for survey-reporting-dashboard-guide after reverting back to the original (Susan's) code in Getting Started with Github via Chrome:

Output for survey-reporting-dashboard-guide after reverting back to the original (Susan's) code in Getting Started with Github via Firefox:

Output for survey-reporting-dashboard-guide after updating Getting Started with Github with my code via Firefox:

Availability: Open.

ETA: GitHub Issues 2/27/21. Wiki Page TBD.

[akibrhast]

Prospective Resource Link

https://jekyllrb.com/docs/step-by-step/04-layouts/

[abenipa3]

Researching Format Guide Pages Parse with Markdown. #1085