Create a Hack Nights Page

[ExperimentsInHonesty]

Overview

We are going to move to a model where the hack nights have their own pages when we go back to meeting in person. In the meantime, we need a hack nights page, that says what the status of the hack night is, while maintaining our promotion of the amazing had nights we had.

Details of what the page should contain:

• The images that used to exist on the homepage
• list of projects and icons of those projects by location
• Maybe - links to our last in person meetings via meetup - maybe
• Encouraging people to signup for meetup

Action Items

• [x] Review the other prototypes
• [x] Design low-fidelity wireframe that mirrors that design but is specific to hack night information
• [x] Draft copy for Hack Nights page
• [x] Revise and proof copy for page
• [x] Design high-fidelity mockup
• [x] Insert copy into finalized mockup
• [ ] Implement new Hack Nights page

Resources/Instructions

Copy: https://docs.google.com/document/d/1wVbTCuALfUs02qVahkwfAoZ0BSQyYcp_TCbvja0hSrY/edit

Lucid Chart Prototype the Projects page #156 Prototype the Project-specific page #157

[alexandrastubbs]

@leonelRos we are working with Stella to identify the discrepancies in the font sizes, because it appears that there are quite a few different sizes in both desktop and mobile version. In the meantime, we have two other points of feedback that we'd like to update before pushing this live:

1. The line spacing is not correct. Can you update to look more like the Figma? For example, where you have Meetup Events, there are huge spaces between the sub heads where they don't exist in the figma.
2. By video at the top of the mobile version, the arrow pointing the wrong direction. Reference the Figma for correct orientation.

[leonelRos]

@alexandrastubbs, Thank you for pointing that out. Since you guys are checking on some other details. I would like to point that out that the main reason why I have those spaces in "Meetup events" is to cover the height of the "Online project teams meetings" bubble. The calendar part populates itself by calling the script from Project teams meeting page https://www.hackforla.org/project-meetings. I will make it look more fitting to the Figma file and that would mean adding more properties to the Scss file. This is what it would look like with the following changes.

[alexandrastubbs]

@leonelRos can you share mockups of the mobile version as well?

[leonelRos]

@alexandrastubbs, it does not change much since mobile version has its own properties.

[leonelRos]

Hey guys I didn't have much time this week. I have the header to look exactly like figma file

Progress: web and mobile version need adjustments. Blocks: time-limited. Availability: Wednesday to Friday ETA: 08-18-20

[leonelRos]

Progress: web and mobile versions need adjustments. Blocks: time-limited, redo the header. Availability: Friday and saturday ETA: 08-23-20

[leonelRos]

Hey Team, I got the design as displayed in the figma file, I still working on the arrow vectors, it won't rotate as a commanded on my code, so still working on that!

[leonelRos]

Hey team, I still debugging the arrows. Susan and I worked on it last Thursday but we could not figure it out. This is the error I am getting:

1. The page looks fully complete.

2.After going to mobile version and clicking the arrows for the drop down and go back to full desktop page we see the arrows in those two bubble cards.

I will try to make sure this is done by developers meeting!

[ExperimentsInHonesty]

@leonelRos Let's go ahead and push the page and fix the problem after. Also, we could use the live page to ask for help in the general channel which might get some more developers on the project.

[leonelRos]

@ExperimentsInHonesty OK, I will create the PR and assign @ye-susan to review it.

[alexandrastubbs]

@leonelRos We just looked at the pull request - who/what is the blocker now?

[alexandrastubbs]

@leonelRos any updates on this?

[ExperimentsInHonesty]

@cnk will fix meeting times not loading and add timezone lang

Issues that need to be looked at that are unassigned currently

1. The top white header needs to fill the page like the toolkit page does https://www.hackforla.org/hack-nights-page https://www.hackforla.org/toolkit

2. Why is there any pink at all

3. The text for the video is not responsive and is merging with the about text

[cnk]

I renamed this so the url will be hackforla.org/hack-nights and made the meeting times section work. Also added the Time Zone note from the current meeting-times pages.

[ExperimentsInHonesty]

@drubgrubby will take care of the remaining issues here: https://github.com/hackforla/website/issues/403#issuecomment-695816107

[drubgrubby]

I made the fixes mentioned in https://github.com/hackforla/website/issues/403#issuecomment-695816107 .
1) The white background fills the header and the "pink" is gone. 2) The text for the video is now responsive and doesn't merge with the about text. 3) In the process, because there was a header-container tag that was being used from getting-started-page.scss, I created an ../elements/_containers.scss file and put the header-container tag there so it can logically be used on whatever page wants it now. (This was done in consultation with @cnk )

[drubgrubby]

I have not made a pull request on this because the mobile version doesn't look quite right yet. I'm not sure if I should include that in the same pull request, or merge this and make the mobile version a separate issue/PR.

Option A: Do the fixes to the mobile and include it in the same PR Option B: Do a PR for the current work and make a separate issue/PR for the mobile site.

[cnk]

Either is fine. If you don't have a lot of time, perhaps pushing this now. Even without mobile fixes it is certainly better than the current version.

[ExperimentsInHonesty]

748 also related