A React framework based front-end for the 'Grup Grup' application.
The Material UI library is utilised to make standardised UI components.
Unless specified, these components are basic building blocks of the UI for the application.
Component | Material UI | Options set as default |
---|---|---|
Dialog UI | Container | |
Text Input | Textfield | Variant: Outlined |
Dialog Button | Button | Variant: Outlined |
Link | Link | Variant: Inherit |
Component | Material UI | Options |
---|---|---|
Dialog UI | Container | |
Email Input | Textfield | Required |
Password | Textfield | Type: Password |
Login | Button | |
Signup Link | Link |
Component | Material UI | Options |
---|---|---|
Parent UI | Container | |
Email Input | Textfield | Required |
Password | Textfield | Required |
Confirm Password | Textfield | Required |
Login | Button |
This serves as the main component
Component | Material UI | Notes |
---|---|---|
Page UI | Container | Top level component |
Application header | Custom Component | |
Content Container | Grid List | |
Content Card | Grid List Tile | Small and large cards as a gateway to individual pieces of content |
Nav Footer | Bottom Navigation | Actions: |
Displayed in the application header
Component | Material UI | Options |
---|---|---|
Parent | Container | |
Input | Textfield | Autocomplete |
Search Options | Toggle Button | Exclusive selection for "Grid" and "Newsfeed" icons |
Notes:
- Search is carried out on 'enter' being pressed (keycode '13')
- Possibly will need some form of submit button for users unaware of pressing enter
Displayed in the application header.
Component | Material UI | Notes |
---|---|---|
Container | Card | |
Display Name | Typography | |
Profile Picture | Cardmedia | |
Actions | CardActions | |
Bio | Typography |
Used for posts and individual images
'Thumbnail' cards to access content
Component | Material UI | Options |
---|---|---|
Container | Card | |
Thubnail | Card Media | Occupies whole card |
Full application width cards containing hero image (or possibly carousel) from content
Component | Material UI | Options |
---|---|---|
Container | Card | |
Hero | CardMedia | Can be nominated image or carousel |
Tag List | CardActionArea | |
Display Name | Link | Clicking link goes to userprofile |
Description | Typography |
Accessed from the bottom navigation bar
Component | Material UI | Notes |
---|---|---|
Container | Menu | Holds customised menu options |
Option | Passed in as a prop |
Dialogue accesed from the menu (or by the user viewing their own profile annd using link)
Component | Material UI | Notes |
---|---|---|
Container | Drawer | Rises from bottom and is scrollable |
Heading | Typography | |
Sections for Editing | AccordianMenu | Contains sections for 'about' and 'update password' |
Component | Material UI | Notes |
---|---|---|
Display Name | Textfield | Only required when blank |
Textfield | ||
Bio | Textfield | |
Profile Picture | ||
Upload Button | (Dialog) Button | |
Update Button | (Dialog) Button |
Component | Material UI | Notes |
---|---|---|
Previous Password | Textfield | Required |
New Password | Textfield | Required |
Confirm New Password | Textfield | Required |
Save changes | (Dialogue) Button |
Component | Material UI | Notes |
---|---|---|
Parent | Long Scrolling Dialogue | Comes up from bottom of screen and holds all fields |
Image Thumbnail | Custom Component |
- Single post view
- Single image view
- Private images collection not yet posted
- Post creation from entire user image collection