Difference between revisions of "TGM :: All Wireframes"
(Created page with " Models are types of things. Views are panels or parts of panels. == Models == * City * Event * Venue * Account * Gallery * Video * Report == Views == * accounts-show * cit...") |
(→reports-new) |
||
| Line 99: | Line 99: | ||
Has inputs for: title, subtitle, and the textarea description. Can be put in a city, can be tagged. | Has inputs for: title, subtitle, and the textarea description. Can be put in a city, can be tagged. | ||
| − | === reports-show | + | === reports-show === |
Title, meta line, subtitle, body (I call it description). This is pretty typical. | Title, meta line, subtitle, body (I call it description). This is pretty typical. | ||
Revision as of 06:16, 17 January 2020
Models are types of things. Views are panels or parts of panels.
Contents
- 1 Models
- 2 Views
- 3 cities-index
- 3.1 cities-show
- 3.2 events-index
- 3.3 events-show
- 3.4 galleries-new
- 3.5 galleries-show
- 3.6 newsitems-index
- 3.7 newsitems-gallery
- 3.8 newsitems-video
- 3.9 newsitems-report
- 3.10 partials-share
- 3.11 partials-galleries-multiupload
- 3.12 reports-new
- 3.13 reports-show
- 3.14 sidemenu
- 3.15 tags-index
- 3.16 tags-cloud
- 3.17 venues-index (list, map)
- 3.18 venues-show
- 3.19 videos-show = newsitem-video
- 3.20 videos-new
Models
- City
- Event
- Venue
- Account
- Gallery
- Video
- Report
Views
- accounts-show
- cities-index
- cities-show
- events-index (calendar, list)
- events-show
- galeries-new
- galleries-show = newsitems-gallery
- newsitems-index = newsfeed
- newsitems-gallery
- newsitems-video
- newsitems-report
- partials-share
- partials-galleries-multiupload
- reports-new
- reports-show
- sidemenu
- tags-index
- tags-cloud
- venues-index (list, map)
- venues-show
- videos-show = newsitem-video
- videos-new
terminology: newsfeed => newsitems terminology: list => index
I like minimal flat design. The separating element is empty space, not card (border+space+shadow).
Don't be afraid to use horizontal scroll! Obviously all the panels scroll vertically as expected, but I think multiple things inside a panel can scrol right, either automatically or via swipe. Example: tag cloud isn't limited to 100% width. The partials-share can scroll right, to reveal more friends to select.
accounts-show
- has profile pic, first / last name, email
- has submenu to add gallery, add video, add report
- depending on which submenu item selected, displays galleries-new, videos-new, or reports-new
cities-index
Each city has the icon to bookmark/save it, has thumbnail and name, and lists the number of (1) galleries, (2) videos, (3) reports.
cities-show
- has the hero image
- name of the city
- statistics: number of galleries, videos, reports
- submenu: newsfeed, venues, events. This determines what the rest of the panel displays: the newsfeed, the venues-index, or the events-index.
events-index
Either a list of a calendar. The calendar view is a calendar. In the list view, each item has:
- thumbnail
- title
- meta line: number of people going, date & time, venue link.
events-show
not yet specified
galleries-new
You see that in your account when you select, new gallery. The pieces are:
- Name of the gallery
- partials-share. Which friends are you sharing it with?
- select multiple photos from the phone's gallery - probably some Ionic work to make this happen
- button to Create
The photo gallery upload must allow user to select multiple photos. Pre-processing may be done with image magic (in the background?) before upload.
galleries-show
This is either equivalent to newsitems-gallery, or is a separate page, mockups have already been done for it.
newsitems-index
That's the newsfeed. It consists of items, an item can be one of three types: newsitems-gallery, newsitems-video, or newsitems-report.
newsitems-gallery
It has a card for the title & metaline, and has photos. Scroll right to see more photos.
newsitems-video
No scrolling right, but the video player has the button to go fullscreen - the player takes care of that. The newsitem has title and metaline (date, username)
newsitems-report
Show title, meta line (date, username), and subtitle which is a 3-line paragraph.
Somehow, select from the list of friends, who to share a newsitem with.
partials-galleries-multiupload
This might need some in-depth Ionic work. Be able to select multiple; possibly resize photos before uploading, using image magic or something similar.
reports-new
Has inputs for: title, subtitle, and the textarea description. Can be put in a city, can be tagged.
reports-show
Title, meta line, subtitle, body (I call it description). This is pretty typical.
- Homefeed
- Newsfeed
- Cities
- Tags
- <saved-tag-1>
- <saved-tag-2>
- <saved-city-1>
- ...
- Account
When a user clicks the bookmark icon, that tag / city / whatever gets added to his sidemenu.
tags-index
Not yet specified - I'm not sure how that would look. Tags are hierarchical, maybe with a limit of one or two levels of children.
The difference between tags-index and tags-cloud is that the index is a full page, whereas the cloud is embedded inside another panel, such as the tags of a report.
tags-cloud
This is an inline list of tags for a particular item. Probably makes sense to have it scroll right? Maybe show 5, and a button "show more". Not sure on details of this.
venues-index (list, map)
Both a list and a map - user selects how she views them. The map is just a map, a bunch of Ionic work possibly. Dialogs on markers are not yet specified. In a list, an item has:
- thumbnail, title
- star rating - out of 5 stars.
- stats: number of galleries, videos, reports there
venues-show
Not yet specified
videos-show = newsitem-video
A video has a title and meta line (date, username). An embedded video player, click to play.
videos-new
You see this in your account, when creating a video. Can share with friends via partials-share. Possibly embed ffmpeg for compressing in background before uploading - sounds like some Ionic work. From: https://pietropassarelli.com/ffmpeg-electron.html
