Rework events page

[rileywong311]

Added a "Grid View" and "Calendar View" to the events page.

• I changed the events page to load 45 instead of 15 events so that "Grid View" would look a little better. In the future it would be worth adding a "load more" button instead and perhaps lazy loading them also.
• Created an entirely new component EventCardGrid to handle the "Grid View" layout. While it is kind of redundant to have two EventCard type components, it seemed like the most fluid way to add it to the pre-existing code. For the most part, EventCardGrid is a copy of the EventCard with the info put inside the dialog box.
• The pop-up dialog box when a flyer icon is clicked in "Grid View" basically stores all the info that is to the right of the image on the original "List View"
• It's not shown here, but the "Upcoming Events" list has slightly larger flyer icons than the "Previous Events" in "Grid View."
• The "Calendar View" is literally just the copy and paste of the Calendar page without the Navbar and Footer again (and also the v-app wrapper). I'm not 100% if this doesn't mess it up, but it looks fine from testing it around.
• I still left the Calendar page on the Navbar because there would be more work in editing the routers and removing it from the Navbar, and, as above, also in case something broke by me making it a component. This could potentially be another commit on this branch though.

Grid View

Grid View Dialog Box When Clicked

Calendar View

[rileywong311]

I tried this:

• I added an enum type pageView to the EventList data.
• I combined the EventCardGrid into the EventCard component with a new prop view to change its format based on the view. The conditionals were simple. However, the code for the event info is repeated: one is inside the dialog box and the other is outside. I was thinking it would be possible to make another component for this, which I tried, but I was having difficulties passing in the parameters for it to work (mainly because the event.link object didn't seem to be read in another component).
• This also meant I created different CSS styles for the grid and list layout when necessary. Their stylings were completely different so I opted to make completely different style classes instead of a base class they "inherit" from.
• I also merged this with the previous PR I made (Add media query to EventCard component for mobile) because the code I am working with now would have conflicted with it.
• In the EventList page, I put the EventCard components within divs that are flexboxes. It functions the same for list view, although an edge case is that if there is not enough info to fill the max-width of 1000px, it will center with weird margins on the side, so I made sure to `justify-content: left' when it was list view.

The entire page works the same still, maybe with minor styling changes, but feel free to check it out.

[Whee-il]

I still left the Calendar page on the Navbar because there would be more work in editing the routers and removing it from the Navbar, and, as above, also in case something broke by me making it a component. This could potentially be another commit on this branch though.

It feels weird to me to have the calendar in two places. Maybe I'm missing something but is it that bad to just remove it?

[rileywong311]

No, I could just go in and remove it. In that case I'll try to do that soon

[rileywong311]

My latest commit hides the calendar navbar tab if they are not a user. I opted to do this instead of deleting it because I think it's important to keep it for non-users (for example, so visitors know we're active). For users, the calendar page link will be hidden and instead it will be under the events page which is revealed to users.

I was looking into making the events page visible to all but querying user authentication to reveal certain elements, but I am unsure about the implementation so maybe keep this idea on the back-burner for now?