Create mobile version of the Guide Pages and ensure responsiveness

[abenipa3]

Dependency

• [x] #2978
• [ ] #3170
• [x] ~Mobile navigation audit. #2190~
• [x] https://github.com/hackforla/website/issues/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

• [x] Create a mobile version in the prototype.
• [x] 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 #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 #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]

Updated ETA: 6/19.

[Sihemgourou]

@alyssabenipayo We are putting this back into in progress. Tell us if you need some review :)

[abenipa3]

Progress: We finalized the design on Thursday with the Team. Currently implementing it to the prototype.

Block: None.

Availability: Open

ETA: 6/26/21

[abenipa3]

Progress: (Update for Tuesday's Meeting) Still currently implementing the design into the prototype. Blocker: Will be busy till Thursday. Preparing for an interview. Availability: Open ETA: 6/26/21

[abenipa3]

Progress:

• Added "Overview" in the front matter of the MD files.
• Included nav links under "In This Guide" into the md files. (Will explain in the dev meeting.)
• Fixed and updated hero section. Please see Prototype Preview below.
• Applied media query to page cards and hero section.

Prototype Preview (Desktop)


Prototype Preview (Mobile)


Blocker: (Notes) Minor bugs encountered as seen in the previews below. Will need to adjust the styling before it's ready to go. Plus, will fix responsiveness for Guide Title and Page Cards.

Parallelogram in the Hero Section is larger than the hero image


Availability: Open

ETA: 6/30/21

Note: The pull request below was from my own repo. Please feel free to ignore it.

[abenipa3]

Progress: Looked at it but haven't done much 'cause I was not feeling well this past week. Blocker: Same as previous post. Will pick it up again today. Availability: Open ETA: 7/6/21

[github-actions[bot]]

@alyssabenipayo Please add update

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

[abenipa3]

Progress: Fixed parallelogram so that it maintains its size when testing on different screen sizes. Blockers: Need to make the rest of the page responsive. Also finding a cleaner way to make it responsive. Availability: Open ETA: 7/16/21

[abenipa3]

Progress:

• Hero Section Text, Diagonal, and Image are now responsive.
  • Able to make text and diagonal stay in one place when shown on smaller screens.
• Updated guide-pages.html layout to have "In this Guide" Links show on mobile-only without using divs in markdown.
• Added Preview and Overview to MD's front matter. (To be discussed with Dev Team)
  Preview and Overview in Front Matter

• Added a new page card to show Overview.

Blockers:

TLDR; Front matter inquiry and wrapping up on responsiveness. Other feedback welcome as well!

• How to add links to the front matter?

  • Tried to google how to do so because some overviews contain external links. It would be nice to keep the overview in the front matter since it's contained in a div (guidepages.html layout) to be able to hide it on mobile.

• Should I start implementing this prototype into the HfLA repo?

• Would like feedback on overall progress as well.

Availability: Open

ETA: 7/16/21

[abenipa3]

Progress: Updated Header and Style for Desktop version as seen below. Question about margins and grid containers. Also will continue to work on styling before our next meeting.

Blocker: N/A

Availability: Open

ETA: 7/20/21

Note: Will meet with Josh on Monday (7/19) to review progress and wrap up this issue.

[abenipa3]

@Sihemgourou @ExperimentsInHonesty Hello! I've completed creating responsive Guide Pages. Please see the following link from my repo and feel free to let me know your thoughts: https://alyssabenipayo.github.io/guidepages-prototype/

Note: Please see these following links:

[abenipa3]

Progress: Changed css classes and link's font colors to reflect HfLA's Design System.

Blocker: Figuring out how to resolve responsiveness bug as seen below. Last week, we thought we found a solution by adding a margin-left on the sticky nav, but it doesn't apply when scrolling down the second-page card.

So far tried display: grid and display:flex, but no working solution yet. Will bring up this issue again on Sunday.

Availability: Open

ETA: 7/26/21

[abenipa3]

Using this space to make notes of what to do next before the new ETA (7/30/21):

Progress as of 7/27/21: Responsiveness bug on page cards resolved!

Blocker: Discovered another responsiveness bug for screens (769px — 1024px) as seen below.

Need to fix the alignment for mobile devices as seen below, too. (I love CSS. 😂)

Availability: Open

[abenipa3]

Progress:

• Fixed alignment for page cards on mobile and desktop.
• The only concern is that the parallelogram in the hero section.
• Other than that, this prototype is ready to review.

Blockers: None. Would like to gather feedback from our dev team before consulting with product and design.

Availability: Open

ETA: ~Tonight at 11:59pm (Will update more later.)~ Pending.

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

[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.)
• [x] 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.
• [x] 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.
• [x] 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[bot]]

@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 (#2190).
• Updated issue description with a Dependency section, added Dependency Label, and moved to the ice box.