Skip to content

Create /events page #166

Closed
Closed
Create /events page#166
Assignees
juliantrueflynn
Labels
Type: Feature/Redesigngood first issueIf somebody is new to this repository, this is a simple way to dive in.

Description

@kylemh
kylemh
opened on Oct 1, 2018

Feature

Why is this feature being added?

Our design team has come up with a beautiful redesign to simplify UX.

What should your feature do?

Implement the newly-designed landing page via pages/events.js
Here is the mock-up: https://invis.io/KSO12EFRU7E#/323662230_OC_Events_Landing_Page

Temporary Note

This project requires back-end labor to finish (creating events surrounding our meetup groups and events). In the meantime, you can act upon a JSON of you shape/choosing in order to mock the data represented in the design mock.

Activity

  1. kylemh
    added
    Priority: Low
    Type: Feature/Redesign
    on Oct 1, 2018

  2. kylemh commented on Oct 1, 2018

    @kylemh
    kylemh
    on Oct 1, 2018
    MemberAuthor

    This is a request for a new or redesigned page.

    • The page should be implemented by creating a file (or editing the file if it already exists) in the pages folder. The file name should match the route (ex: code_schools --> pages/code_schools.js).
    • Please remember to leverage the <OutboundLink> component when dealing with external links (leaving our hostname - operationcode.org)
    • Do your best to limit stylesheets imported into pages/styles.
    • Only modularize potentially reusable content via components - it's okay to implement everything in the page file and let us as staff members sort out where you could write for reuse (if anywhere).
    • If no design is missing mobile-specific or desktop-specific styling, do your best to work with what's given. A good rule of thumb is that any lists displayed in rows on desktop mocks, can be displayed one-per-row on mobile.
  3. kylemh
    changed the title [-]Create newly-designed /events page[/-] [+]Implement newly-designed /events page[/+] on Oct 1, 2018
  4. kylemh
    added
    Hacktoberfest
    good first issueIf somebody is new to this repository, this is a simple way to dive in.
    on Oct 1, 2018

  5. lineberry30 commented on Oct 16, 2018

    @lineberry30
    lineberry30
    on Oct 16, 2018

    I'd like to take on this issue @kylemh

  6. kylemh commented on Oct 16, 2018

    @kylemh
    kylemh
    on Oct 16, 2018
    MemberAuthor

    I am assigning myself to this issue as a placeholder for your work, @lineberry30. Thank you, and good luck! 😁

    Please note:
    If no activity is shared within two weeks, I will remove my assignment. At that point, the issue will be open for anybody to take.

  7. kylemh
    self-assigned this
    on Oct 16, 2018
  8. kylemh
    removed
    Hacktoberfest
    on Nov 4, 2018
  9. kylemh
    closed this as completedin #234on Nov 10, 2018
  10. kylemh
    added a commit that references this issue on Nov 10, 2018

    Merge pull request #234 from lineberry30/events-page

    ae29b3b
  11. kylemh
    reopened this on Feb 24, 2019

  12. kylemh commented on Feb 24, 2019

    @kylemh
    kylemh
    on Feb 24, 2019
    MemberAuthor

    Previously this issue pointed to the incorrect mock.

    The old /events page has been removed and this issue has been re-opened with the correct mock linked.

  13. kylemh
    assigned
    juliantrueflynn
    on Feb 24, 2019

  14. kylemh commented on Feb 24, 2019

    @kylemh
    kylemh
    on Feb 24, 2019
    MemberAuthor

    Other Instructions:

    • The square with the text: "4,000+ Members In 20 States!" and "Locations" button should instead be a part of the hero banner. So the HeroBanner's text will be:
    EVENTS
--------
Need more Operation Code in your life? From conventions to tech meetups, we are where you are! There are 4,000+ members across more than 20 states!

|See Locations|
    • Please use https://github.com/FormidableLabs/nuka-carousel for the carousel
    • Please use the FlatCard component for the 3 blue square border cards above "Want to become a sponsor?"
    • Use any existing SVG Icon as a placeholder, until I get all of them in
    • Use the ResuableSections -> JoinSection component at the bottom of the page
  15. kylemh
    changed the title [-]Implement newly-designed /events page[/-] [+]Create /events page[/+] on Feb 24, 2019

  16. juliantrueflynn commented on Feb 25, 2019

    @juliantrueflynn
    juliantrueflynn
    on Feb 25, 2019
    Contributor

    @kylemh The mock has a boxed container instead of full width. None of the other current pages seemed to have a boxed container. Does the Events page have a boxed container layout that differs from rest of site?

    I am viewing the mock on a wide screen monitor, so that could be cause of this.

    Edit:
    Just so this is tracked in ticket. Just had call with you and you said to ignore and the boxed container is just from mock tool. Structure will be consistent with rest of site.

  17. juliantrueflynn commented on Feb 25, 2019

    @juliantrueflynn
    juliantrueflynn
    on Feb 25, 2019
    Contributor

    To your previous note on use placeholder icons, here's the ones that are missing currently:

    • "Food for longer meetups" (Pizza/food icon)
    • "Education materials" (Book icon)
    • "Raise awareness" (Podium icon)
    • Left caret icon
    • Right caret icon

    If it's easier on you I can download these from FontAwesome and put in static/images/icons/FontAwesome:

  18. kylemh commented on Feb 25, 2019

    @kylemh
    kylemh
    on Feb 25, 2019
    MemberAuthor

    Go forward on using FA until we have the assets 👍

  19. kylemh
    removed their assignment
    on Feb 25, 2019

  20. juliantrueflynn commented on Feb 26, 2019

    @juliantrueflynn
    juliantrueflynn
    on Feb 26, 2019
    Contributor

    @kylemh I have this done except for 1 issue. Branch here

    With the carousel the design has the carousel at full width of page. With the Nuka Carousel component this causes issues because it has the prop slidesToShow. Since this is responsive the number of slides showing is not a fixed number. If I make the carousel's width same as page container, then this will be easy to make responsive.

    end of carousel
    When the prop "slidesToShow" is too high, it adds empty space at the end of the carousel.

    new carousel width
    Rough sketch of what I'm proposing

  21. kylemh commented on Feb 26, 2019

    @kylemh
    kylemh
    on Feb 26, 2019
    MemberAuthor

    Let’s simply comment out this section until we have the events endpoints connected. I want to dive deeper into your issue, but don’t have much time and don’t want to block you.

  22. kylemh
    closed this as completedin #353on Mar 9, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

Type: Feature/Redesigngood first issueIf somebody is new to this repository, this is a simple way to dive in.

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions