Create mobile version of the Guide Pages and ensure responsiveness

[abenipa3]

Dependency

• Create Guides Markdown Converter (Google Apps Script) #2978
• Guide Pages - Sticky Navigation Fix #3170
• Mobile navigation audit. Perform site audit of mobile navigation #2190
• Work flow for guides to appear on the website #1630

Overview

We learned that Jekyll is a feasible option because it can render Markdown files into HTML as seen in #1085.

Now we need to create a mobile version of it and ensure that the codes are responsive on all screens.

Action Items

• Create a mobile version in the prototype.
• Design mobile version of guide pages.
• Consult with the product and design team.

Future Items

• Implement prototype into the HfLA repository. (The prototype is currently in @alyssabenipayo for testing purposes.)
• Create documentation of how the Jekyll Guide Pages works and how the team can use it.
• Add it HfLA's Drive. Get approval from the team.

Resources/Instructions

Guide Pages Figma File
HfLA Guide Pages Design Issue
Alyssa's Repository for the Guide Pages Prototype

[abenipa3]

Progress: Just assigned this issue to myself.
Blocks: N/A
Availability: Will be available starting on 5/13 to work on this issue.
ETA: I might have some progress on 5/15.

[qiqicodes]

@alyssabenipayo Can you let us know your progress in regards to this issue? Thank you =]

Progress:
Blockers:

[abenipa3]

Progress: Planning to work on it today (5/15). Will update this post before our Sunday meeting. Started working on creating the mobile version with CSS. Experimenting between hiding the navbar and creating an accordion.

Screenshot for mobile version without navbar

Blocks: Have been focusing on Hackathon this past week. Learned a lot from the experience (especially with CSS and a bit of JavaScript) that I’m excited to continue with this issue.

Availability: Open this coming week. (Yay!)

ETA: 5/22.

[abenipa3]

Progress:

• Created wireframes for the mobile designs as mentioned in Design HfLA Guide Pages #1525.
• Applied the media query works in the prototype to hide nav-bar in all mobile devices as seen below. Repo here.

Blocks: N/A

Availability: Open!

ETA: 5/23/21

[abenipa3]

Progress:

• Reviewed wireframes with Design and Product as stated in Design HfLA Guide Pages #1525
• Next Objective:
  • Add code with a collapsible menu to the prototype.

Block: N/A
Availability: Open
ETA: 5/29/21

[abenipa3]

Feedback from Dev Team: We learned that the most feasible way to develop is to hide the nav-bar.

Will have the prototype ready by Sunday.

[abenipa3]

Progress:

Added page-card and media query to hide the nav-bar as seen below.

Screen capture for page-card update

Screen capture for Media Query Update

Block: N/A

Availability: Open

ETA: Ready for review.

[abenipa3]

Feedback from Sunday Meeting: We would like to update the mobile prototype where the table of contents is hiding at the top (hamburger menu) while a top scroll button appears after the user scrolls through the page.

Note for future references (potential new issue): Create an accordion for mobile.

[abenipa3]

Progress: Added scroll to top button for mobile.

Screen capture

Block: Will review new wireframes with design team.

Availability: Open

ETA: TBD

[abenipa3]

Progress: Scroll to top button bug fixed! Also added links to the page card, which will only appear on mobile.

Would like feedback on the links on page card as seen in the GIF above.
Had to create a div in markdown file for it to work. Any suggestions?

Block: None.

Availability: Open

ETA: 6/13/21

[abenipa3]

Feedback from 6/13 Meeting:

• We want to avoid having to add HTML in the markdown so Akib suggested toc.
  • Will revisit the toc prototype to test it!
• ETA: Latest 6/19. Earliest 6/15.

[abenipa3]

Just found out how it really looks like on mobile.

Current Mobile Preview

I manually coded the parallelogram. I think a quick solution to this is downloading the svg of the hero image with the shape from our Figma and implement it on our prototype. With that, we would avoid visual issues in the future.

Going to reach out to Design and Dev teams for feedback and update again today.

Updated ETA: 8/1/21

References:

Original Image without Parallelogram

Original Image with Parallelogram

UPDATE (8/5/21): Design and Dev teams said that downloading the svg image with the parallelogram is a workable solution. Will proceed to have this issue reviewed with Product.

[abenipa3]

@Sihemgourou @ExperimentsInHonesty Hello! Guide Pages Prototype is ready to review. I've consulted with our dev and design teams to see if they have feedback, and they said it looks good so far.

Please see the link for the prototype below and feel free to let me know if you have any questions! Thanks.

https://alyssabenipayo.github.io/guidepages-prototype/

[Sihemgourou]

Great @alyssabenipayo ! could you put it in the review column please :)

[abenipa3]

Update from 8/15/2021's Meeting:

• Make the sample issues into actual issues. (We want to be able to tell that it works when it's a real issue.)
• Add submenus to the 2FA's FAQ.
• Update the page cards so that there's padding. Refer to HfLA's About Section as a reference.
• Replicate the full guide of How to Make a Guide.
• Continue working on Markdown converter for guides (10).

Blockers: None.

Availability: 8-10 hours

ETA: 8/21/21

Preview: https://alyssabenipayo.github.io/guidepages-prototype/

[abenipa3]

Additional Notes from Previous Update:

• Check the headings for each section title.
• Styling not applied to subsections of the navbar in mobile and tablet. Need to update.
• Edit the indentation of the subsections (See JavaScript).

[abenipa3]

Update 8/20/21

Will be redesigning the Guide Pages as mention in #1630. Status of this issue: TBD

[github-actions]

@alyssabenipayo

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.}

[abenipa3]

Issue Update 8/27/21:

• Currently redesigning the Guide Pages.
• This issue now has a dependency in the Mobile Navigation Audit (Perform site audit of mobile navigation #2190).
• Updated issue description with a Dependency section, added Dependency Label, and moved to the ice box.