Getting the Most out of Github Issues Guide

alexandrastubbs commented 4 years ago

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

[x] 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
- [x] Update the getting the most out of github guide to use the new SCSS format
[x] 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 commented 4 years ago

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 commented 3 years ago

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 commented 3 years ago

@alyssabenipayo Please update your issue with following information

Progress
Blockers
Availability
ETA

abenipa3 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

abenipa3 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

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

abenipa3 commented 3 years ago

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 commented 3 years ago

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 #918.
Create a new issue to fix Survey Reporting Dashboard for consistency.

abenipa3 commented 3 years ago

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: