Create a design to add/edit/delete events
McPringle opened this issue · comments
A logged in user should be able to add new events, to edit (his) events, to delete (his) events and to upload images to (his) events. This functionality should be available directly on the event listing page. The forms to add or edit events could be displayed in a dialog, see paper-dialog.
Screen for creating the first event. After the first login user sees the empty space just with the SportChef logo, a welcome text with a button to create the first event. The button will activate a paper dialog to create the event.
After creating the first events, a button to create a new event will be shown in a tile right to the already created event.
To edit or delete an event, you have two buttons in the right top corner of the event tiles. In this example the blue an orange tile show the normal active state of those buttons. The dark grey circle is actually a black shape with an opacity of 30%. The icons have an opacity of 100% and are light grey. The green tile shows the mouseover state. The opacity of the black circle is now 60% and the icon is white.
Clicking on the pencil will open the edit dialog, clicking on the trashbin will open a dialog with something like "Are you sure to delete this event? All your data will be lost" and the choice between "Cancel" and "Delete".
Attached is the dialog to add and edit an event. To add an event, the user needs to give it a name first – adding a pic is not a must. Afterwards he needs to define a date (would be nice with a date picker) and a time (start/end – would be nice to get such a time picker to adjust hours and mins). If the event is e.g. on a weekend, he can add another day by clicking on the "+ calendar icon". Per default, the new date has the same start/end time like the first day. On a day, he also can add another time, e.g. there is a lunch break – see filled examples in the edit dialog. A time segment all times belongs to a day, so different days can have different time structures. With the "X" in the circle, the user can delete the additional times and days in the edit dialog. The address can be filled out manually or by clicking on the map icon, Google Maps will open to select the place on the map.
The description of the event below is not mandatory.
Looks great 😄
Except the first image.
If I'm right it's only the case if there's no other event (including events from other users)
Is this possible?
Yes, @PReimers, you are right, a user will not only see the events he created, he will see all events. Maybe a user can filter for his own events, but that is a separate feature. I have an idea: What if we display the box with the information (and button) for creating a new event in fron of the events (on the left side, as the "first event")?
I just was thinking about the situation ... in the case the user always sees all events, either he is logged in or not, the first or the second screenshot are not working this way. The first screen can't, because the situation is not existing – the screen always shows events. For the second screen, it would be less convinient, if you have to scroll down 50 events, before you will see the "add a new event" tile.
In this case I suggest, the function "add/create an event" needs to be in the header. When the user opens the page the first time, he may get a hint by a tooltip to this function in the header with some explanation. Another scenario is, that the user will see a bar at the bottom of the screen (like many webpages do to show their cookie policies). I will work on some stuff and let you know about possible solutions.
Regarding the "own event filter" – we can do it with a simple checkbox like it is in the screenshot now ("Show only my favorite events"). This function is a must, if I think about a page with 50+ events.
Sounds okay for me 😄
- @Interactiondesigner was to fast 😄
@McPringle had the idea of putting the "create event card" as first event followed by the other events.
Then they don't need to scroll down.
The idea of @McPringle would be also okay to me ... will do my tryouts and upload the new screens
Here is my screen for the "Create a new event topic". Beside of the login button in the header the user now has a "add event" button, where he gets a hint with such a tooltip. Otherwise I moved the tile to create an event to the left ... frankly speaking, I am not a super big fan of that as there is always a blind spot, where you actually begin to "read" a list. My personal recommendation would be, to put it into the header. It might also depends a bit, which kind of menus we wil have in the future, otherwise I was thinking e.g. about a "tool tile", where you can create events but also have access to a bunch of other functions like manage your events, settings etc.
@Interactiondesigner, I like your suggestion with an "add event" button besides the "Logout" button (the "add event" button will only be visible after login) and the tooltip. We should not implement the tile to create an event. Let's go! :-)
An Event-organizer can edit and delete an event directly in the listing. So i preferre the solution with the new-button at first position in the listing. It has also an mood or view of an portal-site for this event-admin. I like.
The color of the tooltip changed from the lightgrey to RGB 29/29/27 or #1d1d1b , so it can be better recognized on the bright interface or as well on pictures.
