-
Notifications
You must be signed in to change notification settings - Fork 0
Components
Demeatrice J. Sherrod edited this page Sep 14, 2023
·
1 revision
All Front End React Components
- Logo
- Log in link
- Sign up link
- Search bar "Find your next event: ", Search Button
- Gallery of events near
- Event Cards
- Browse events by Category
- Small category cards (picture / event.category)
- Only appears to unauthenticated users
- Scrolls
- size 250x350
- event image 248x140
- event details div
- Date time in contrasting color h3
- Event title (full) black h2
- Event group (cutoff by elipses at end of line)
- up to 3 profile pics overlapping followed by the number of attendees
- No navigation bar
- Tooter
- Logo
- Profile picture
- Profile dropdown access
- Form
- Email address:
- Password:
- Login button active if state of form data validated
- Not a member? Signup!
- Form
- Name
- Password
- Already a member? Login!
- No navbar?
- Navigation bar
- header:
- Find you next event
- Search bar
- Search input
- location input (city or postal code)
- groups/calendar toggle
- calendar toggle lists cards filled with text in list format separated by date
- Filters on Right:
- All upcoming events
- Your groups only
- Your events only
- Calendar Widget
- Selecting date on calendar starts list at that date
- Filters on Right:
- groups toggle list:
- Your groups cards
- Suggested Groups
- calendar toggle lists cards filled with text in list format separated by date
- List of Group Names
- See all Groups link
- User Profile Column
- View Profile
- Logout
- Date, WEDNESDAY, JANUARY 24 h4 above the day's list
- Subordered by time
- Time on left '8:15 AM' format
- Group Name h4
- Event Name h2
- 'Online event' if virtual (no address if not)
- 228x180 group picture
- Gradient light at top dark at bottom
- Group name H1 contrasting color
- 309x180 group picture
- same as Your Groups Cards
- FRIENDS PROFILE PICTURES BELOW?
- Navigation bar
- Informational header
- Banner img 621 x 337 Full height left align
- information right align 438x337:
- Group Name h1
- pin icon: city, state
- people icon: # members PUBLIC?PRIVATE GROUP?
- person icon: Organized by group.leader
- Button: Join this group
- About - group.description
- aligned and sized with banner img
- Upcoming events
- Upcoming event cards sized with banner img include attend button
- Limit five
- button to see all?
- Past events
- Upcoming event card sized with banner img no button
- Limit one, button to see all?
- Discussion
- Maybe event comments?
- Similar events nearby event cards
- Right side align with group information:
- Organizer: picture and name
- Members (#) profile pictures only limit 5 col 3 rows
- Footer
- No navigation bar, just logo and exit anchor
- progress bar at top filled in 1/7 with 'STEP 1 of 7' below
- First set your group's location
- pull location from user City/State. OPTION TO CHANGE LOCATION?
- Next button
- Choose a few topics that describe your groups interests: Search for Categories
- Suggested topics in clickable buttons below change color onclick
- Next and back buttons
- What will your group's name be?
- Input autofilled with " Group" also indication of characters left auto incre/decrements
- Next and back buttons
- Now describe what your group will be about
- What's the purpose of the group?
- Who should join?
- What will you do at your events?
- Large text area 'Please write at least 50 Characters'
- Next button enabled after 50 characters
- Almost Done, review our guidelines (PROBABLY SKIP?)
- Next Button becomes Agree & Continue
- Unable to complete group Creation because of paywall.