Lots of update to standardize events page #1117

akibrhast · 2021-02-25T02:13:45Z

This pull request is in relation to #1041 and it

closes #1109
closes #1114
closes #1112
closes #1113
closes #1111
closes #1116

😄 😄

- 72px margin between between each Meetup category - 16px margin between subheadings and paragraphs - 80px margin between last paragraph and Meetup button

- Add 72px margin between heading and first paragraph (same as in the Meetup column card)

- Onboarding link leads to wrong url- should be to Getting Started page (https://www.hackforla.org/getting-started)

- Make time zone text bold, should be font-weight: 700 - In .userTimeZone class

- Make all of the days of week ALL CAPS (MONDAY, TUESDAY, etc. - in the html), bold, and 18px - should be- font-size: 1.125rem (18px) font-weight: 700 + in HTML: all-caps titles - In .day-header-1 class - Add 30px margin above the days of week and 10px margin belo margin: 30px 0 10px 0

- Remove the padding that pushes the meeting times to the right- Add: padding: 0 - Add to .day-header-1 class

- created new yml files to loop over events in left-col-container.html - Adjust banner font size, weight, and margin - should be - font-size: 1rem (16px) font-weight: 700 margin: auto 29%

- Decrease the padding of the page cards in their collapsed form- should be- padding: 5px 15px - Adjust the border radius- should be - border-radius: 20px

akibrhast · 2021-02-25T23:39:35Z

Hey @jbubar @drubgrubby . Please take a moment to review this pull request

the page looks good but I have some important edits and haven’t had time to list them out. Also a dev should be added as a reviewer as well, because splitting the page into separate html files is not that common (except for the home page, which was made a long time ago) so I just want to make sure that’s all fine (and they can verify code-related elements that I’m not knowledgable about). But first I just need to get my edits down, and I’m slammed today. I should be able to soon though. - @daniellex0

Please await @daniellex0 styling edits,

so that you can focus on the code!

drubgrubby

@akibrhast - Really impressive work. You really took a lot of different issues on the events page, saw a different way to look at the issue, and then took it apart and put it back together in a new way that solves a lot of the issues.

I am curious that you deconstructed the page and created all of these files to include, but left the javaScript on the .html page rather than moving it to a .js file and including it. Is there a reason that you left it here?

That said, it's a different approach to structuring the site and building the pages, and even though I like it personally, I think it needs a discussion about if we want to go in this direction.

@cnk @ExperimentsInHonesty - When you have a sec, can you weigh in on Akib's restructuring of the way the events page is built? It seems to work, but it's also a change from how we have been doing things, so a discussion seems warranted.

I'm not looking at any of the design questions. I will leave that for Danielle.

- Moved content in the previously second script tag into righ-col-content.html. Because everything the code within that script tag is doing is very tighty tied to everything within the right-col-content.html, i.e the scheduler.

daniellex0

Ok @akibrhast sorry about the delay- thank you for making these changes! Some styling edits before this can go live (I think some of these issues are from a previous update to the page, but I appreciate if you can fix these to make the page look good for now before the other issues are done!):

Can you please actually remove the content-section class? It's causing the yellow banner to have 16px margin on both sides, which makes it look especially weird in mobile-

I'll make this into a separate issue so that someone can figure it out after, because there seem to be some potential solutions (or we might just have to forego this standard class on this page.. not sure).

Please align the images with the text in both left and right column cards-

So instead of this-

it should look closer to this-

I believe this can be done by putting the text and image in the same div, and their new class should have the following properties (only for above mobile size):

display: flex;
align-items: center;

In .notification-banner p class please remove the line-height property (it should go to default line height)
Please make these highlighted changes to the collapsed column cards:

Please remove these lines:

And this is my bad, I made this edit to the text on Figma but I'm realizing it actually looks too big, so please change the font size here back to 1rem (but keep the html text in all caps) and remove the line height, as seen here:

That should be good for now, I'll make other edits on the other pages. Please just make sure everything (including my edits here) look fine in mobile before it goes live :)

… .js file

…ards

…y (it should go to default line height)

- Can you please actually remove the content-section class? It's causing the yellow banner to have 16px margin on both sides, which makes it look especially weird in mobile-

akibrhast · 2021-02-26T07:34:22Z

@daniellex0 Made all the changes as request!

daniellex0

Thank you for making all of the changes @akibrhast ! Ok, truly, last changes I promise (any others will go in the other issues). Sorry, there are just some margin issues that I can't let go live on the site!

Just make these changes to these 4 classes please and you'll be done:

margin-bottom instead of margin-top

Thank you!!

akibrhast · 2021-02-26T09:20:40Z

@daniellex0 best ever front end issue i had to deal with.... you tell me exactly what and where needs to be changed ... I go in an change it! 👯‍♂️ 👯‍♂️
Thankfully you are nice enough to take of playing with the css in dev tools and figuring out what works!!!

daniellex0 · 2021-02-26T17:39:31Z

Styling approved 👍

jbubar

Really really cool stuff. I always learn from reading your code..

A few things that I noticed that were not a part of this issue...
maybe we should have these be scrollable?

and this does not look so good in mobile view

But I know that teddy already created an issue for that.

I will finish my review later.. @akibrhast just informed me that our live wins page is down

events/our-locations-content.html

akibrhast · 2021-02-26T18:19:01Z

@jbubar I have already created a separate issue that address the change you requested . There is already a LOOOOT of changes on this one pull request(Not proud of it and I am sorry to whoever is having to review this). Should we add more into it?
#1115

The our-locations-content.html is a repeatable pattern that needs to be in a for loop somehow. That is why I did not address any of the changes requested in figma for that particular section. I have spoken about this to @daniellex0 and she has agreed on separating it into a separate issue. The same goes for the crappy mobile display, which @TeddyTelanoff made an issue for.

I would be very averse to doing this

I fear that if I make the change now, the bigger problem of having three hard coded divs, which themselves has 6 to 8 hard coded divs will be kind of forgotten!

thoughts? opinions?

jbubar

Thanks Akib for clarifying! and thanks for creating all of those issues!
Everything looks great! I like the new structure!

akibrhast · 2021-02-27T18:37:22Z

This is what the page looks like after all the changes applied in desktop

This is what the page looks like after all the changes applied in pixel2XL

jbubar · 2021-02-28T18:15:37Z

Here is a similar restructure with the wins page #1132

akibrhast · 2021-02-28T18:40:04Z

@ExperimentsInHonesty - For now we are going to leave it so such that a new page follows the directory structure as in this pull request.

A new issue should be created before merging this, that should be put into icebox and made into a discussion regarding the directory structure going forward at hack4la

jbubar · 2021-02-28T19:46:06Z

#1138

akibrhast added 19 commits February 24, 2021 12:55

Moved events.html to an events folder

f664df6

add permalinks and change title

8cb1123

Add style and render days of week with liquid

6e7dffc

Adjust size/margin of Our Events and Our Locations

3dc05b5

Change css for .event-title

9a5106d

change padding in .getting-started-page-card-hack-nights

3b3d495

change css for .title-meetup class

0d0651a

put subheading and paragraphs in same div and align righ of image

be38b53

Constraint fixes

6ccb1d6

- 72px margin between between each Meetup category - 16px margin between subheadings and paragraphs - 80px margin between last paragraph and Meetup button

componentize left col

c36c80b

Change heading spacing

add938c

- Add 72px margin between heading and first paragraph (same as in the Meetup column card)

Fix Onboarding Link

ac4f6b9

- Onboarding link leads to wrong url- should be to Getting Started page (https://www.hackforla.org/getting-started)

Make time zone text bold

616e973

- Make time zone text bold, should be font-weight: 700 - In .userTimeZone class

Remove padding from .day-header-1 class

a5d70b6

- Remove the padding that pushes the meeting times to the right- Add: padding: 0 - Add to .day-header-1 class

css changes and refactors

7621322

- created new yml files to loop over events in left-col-container.html - Adjust banner font size, weight, and margin - should be - font-size: 1rem (16px) font-weight: 700 margin: auto 29%

Add mobile view css overrides

18ba2d5

- Decrease the padding of the page cards in their collapsed form- should be- padding: 5px 15px - Adjust the border radius- should be - border-radius: 20px

merge teddys fix

2605e72

Some css changes

c555b2d

akibrhast requested review from daniellex0, jbubar and drubgrubby February 25, 2021 02:13

drubgrubby reviewed Feb 26, 2021

View reviewed changes

akibrhast added 3 commits February 25, 2021 20:54

Moved Javascript

59e985e

- Moved content in the previously second script tag into righ-col-content.html. Because everything the code within that script tag is doing is very tighty tied to everything within the right-col-content.html, i.e the scheduler.

path to refactor

bfa1487

Merge branch 'upstream-gh-pages' into events-multi-col

9c162e9

daniellex0 requested changes Feb 26, 2021

View reviewed changes

akibrhast added 2 commits February 26, 2021 02:05

Major refactor of existing js. This can now be separated into its own…

cf0222c

… .js file

Please align the images with the text in both left and right column c…

510de67

…ards

akibrhast added 5 commits February 26, 2021 02:24

In .notification-banner p class please remove the line-height propert…

3de4a8d

…y (it should go to default line height)

Addresses point 4 made in the change request

1eda5b7

Addresses point 5 in the change request

747211d

Adresses point 6

65d0619

Adress point 1 made in change request

3333995

- Can you please actually remove the content-section class? It's causing the yellow banner to have 16px margin on both sides, which makes it look especially weird in mobile-

akibrhast requested a review from daniellex0 February 26, 2021 07:31

daniellex0 requested changes Feb 26, 2021

View reviewed changes

akibrhast requested a review from daniellex0 February 26, 2021 09:21

akibrhast added 2 commits February 26, 2021 04:22

I was promised these are the last changes

09d9328

Multi column events display now working

ff39d44

daniellex0 approved these changes Feb 26, 2021

View reviewed changes

jbubar requested changes Feb 26, 2021

View reviewed changes

events/our-locations-content.html Show resolved Hide resolved

events/our-locations-content.html Show resolved Hide resolved

events/our-locations-content.html Show resolved Hide resolved

Add time zone text

25b0a85

jbubar approved these changes Feb 27, 2021

View reviewed changes

jbubar merged commit 17c251d into hackforla:gh-pages Feb 28, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Lots of update to standardize events page #1117

Lots of update to standardize events page #1117

akibrhast commented Feb 25, 2021 •

edited

Loading

akibrhast commented Feb 25, 2021 •

edited

Loading

drubgrubby left a comment

daniellex0 left a comment •

edited

Loading

akibrhast commented Feb 26, 2021

daniellex0 left a comment •

edited

Loading

akibrhast commented Feb 26, 2021

daniellex0 commented Feb 26, 2021

jbubar left a comment

akibrhast commented Feb 26, 2021 •

edited

Loading

jbubar left a comment •

edited

Loading

akibrhast commented Feb 27, 2021 •

edited

Loading

jbubar commented Feb 28, 2021

akibrhast commented Feb 28, 2021 •

edited

Loading

jbubar commented Feb 28, 2021

Lots of update to standardize events page #1117

Lots of update to standardize events page #1117

Conversation

akibrhast commented Feb 25, 2021 • edited Loading

akibrhast commented Feb 25, 2021 • edited Loading

drubgrubby left a comment

Choose a reason for hiding this comment

daniellex0 left a comment • edited Loading

Choose a reason for hiding this comment

akibrhast commented Feb 26, 2021

daniellex0 left a comment • edited Loading

Choose a reason for hiding this comment

akibrhast commented Feb 26, 2021

daniellex0 commented Feb 26, 2021

jbubar left a comment

Choose a reason for hiding this comment

akibrhast commented Feb 26, 2021 • edited Loading

jbubar left a comment • edited Loading

Choose a reason for hiding this comment

akibrhast commented Feb 27, 2021 • edited Loading

jbubar commented Feb 28, 2021

akibrhast commented Feb 28, 2021 • edited Loading

jbubar commented Feb 28, 2021

akibrhast commented Feb 25, 2021 •

edited

Loading

akibrhast commented Feb 25, 2021 •

edited

Loading

daniellex0 left a comment •

edited

Loading

daniellex0 left a comment •

edited

Loading

akibrhast commented Feb 26, 2021 •

edited

Loading

jbubar left a comment •

edited

Loading

akibrhast commented Feb 27, 2021 •

edited

Loading

akibrhast commented Feb 28, 2021 •

edited

Loading