From 606359cb985d842941347c2e89558ac372362f7b Mon Sep 17 00:00:00 2001
From: Davide Alberani <d.alberani@endian.com>
Date: Sun, 17 Jul 2016 11:44:04 +0200
Subject: [PATCH] improve GUI buttons

---
 angular_app/event-tickets.html |  8 ++++----
 angular_app/events-list.html   | 27 ++++++++++++++++-----------
 angular_app/tickets-list.html  |  2 +-
 angular_app/user-edit.html     |  2 +-
 angular_app/users-list.html    |  2 +-
 static/css/eventman.css        | 11 ++++++++++-
 6 files changed, 33 insertions(+), 19 deletions(-)

diff --git a/angular_app/event-tickets.html b/angular_app/event-tickets.html
index 9b37a6e..cc97c09 100644
--- a/angular_app/event-tickets.html
+++ b/angular_app/event-tickets.html
@@ -55,18 +55,18 @@
                                         <p ng-if="ticket.company || ticket.job_title"><i ng-if="ticket.job_title">{{ticket.job_title}}</i><span ng-if="ticket.company && ticket.job_title">&nbsp;@&nbsp;</span><i ng-if="ticket.company">{{ticket.company}}</i></p>
                                     </td>
                                     <td class="text-center">
-                                        <button class="btn btn-link" reset-focus name="switch-attended" ng-click="setTicketAttributeAndRefocus(ticket, 'attended', !ticket.attended)"><span class="fa fa-lg {{(ticket.attended) && 'fa-check-circle text-success' || 'fa-times-circle text-danger'}}"></span></button>
+                                        <button class="btn btn-link" reset-focus name="switch-attended" ng-click="setTicketAttributeAndRefocus(ticket, 'attended', !ticket.attended)"><span class="fa {{(ticket.attended) && 'fa-check-circle text-success' || 'fa-times-circle text-danger'}}"></span></button>
                                     </td>
                                     <td class="text-center" ng-repeat="col in customFields">
                                         <span ng-if="col.type == 'boolean'">
-                                            <button class="btn btn-link" ng-click="setTicketAttribute(ticket, col.key, !ticket[col.key])"><span class="fa fa-lg {{(ticket[col.key]) && 'fa-check-circle text-success' || 'fa-times-circle text-danger'}}"></span></button>
+                                            <button class="btn btn-link" ng-click="setTicketAttribute(ticket, col.key, !ticket[col.key])"><span class="fa {{(ticket[col.key]) && 'fa-check-circle text-success' || 'fa-times-circle text-danger'}}"></span></button>
                                         </span>
                                         <span ng-if="col.type != 'boolean'">
                                             {{ticket[col.key]}}
                                         </span>
                                     </td>
                                     <td class="text-center">
-                                        <button ng-click="deleteTicket(ticket)" type="button" class="btn btn-link fa fa-lg fa-trash"></button>
+                                        <button ng-click="deleteTicket(ticket)" type="button" class="btn btn-link fa fa-trash"></button>
                                     </td>
                                 </tr>
                             </tbody>
@@ -94,7 +94,7 @@
                                         {{person.email}}
                                     </td>
                                     <td class="text-left">
-                                        <button reset-focus ng-click="addTicket(person)" type="button" class="btn btn-link fa fa-plus-circle vcenter"></button>
+                                        <button reset-focus ng-click="addTicket(person)" type="button" class="btn btn-link fa fa-user-plus vcenter"></button>
                                     </td>
                                 </tr>
                             </tbody>
diff --git a/angular_app/events-list.html b/angular_app/events-list.html
index 1ca4ea6..8bd246f 100644
--- a/angular_app/events-list.html
+++ b/angular_app/events-list.html
@@ -32,29 +32,34 @@
                     <tr>
                         <th><strong>{{'Event' | translate}}</strong></th>
                         <th ng-if="hasPermission('event|update')" class="hcenter"><strong>{{'Attendees / Registered' | translate}}</strong></th>
-                        <th><strong>{{'Actions' | translate}}</strong></th>
+                        <th class="hcenter"><strong>{{'Actions' | translate}}</strong></th>
                     </tr>
                 </thead>
                 <tbody>
                     <tr ng-repeat="event in events | splittedFilter:query | orderBy:eventsOrderProp">
-                        <td>
-                            <span>
-                                <strong>
+                        <td class="vtop">
+                            <span class="vtop">
+                                <h2 class="vtop">
                                     <a ui-sref="event.edit({id: event._id})" ng-if="hasPermission('event|update')">{{event.title}}</a>
                                     <a ui-sref="event.view({id: event._id})" ng-if="!hasPermission('event|update')">{{event.title}}</a>
-                                </strong>
+                                </h2>
                             </span>
-                            <p><span ng-if="event['begin-date']">{{'Begins:' | translate}} {{event['begin-date'] | date:'fullDate'}} {{event['begin-time'] | date:'HH:mm'}}<br/></span>
-                            <span ng-if="event['end-date']">{{'Ends:' | translate}} {{event['end-date'] | date:'fullDate' }} {{event['end-time'] | date:'HH:mm'}}</span></p>
+                            <div ng-if="event.tagline"><em>{{event.tagline}}</em></div>
+                            <div ng-if="event.summary"><em>{{event.summary}}</em></div>
+                            <div ng-if="event['begin-date'] || event['end-date'] || event.where" class="top5">
+                                <div ng-if="event.where">{{event.where}}</div>
+                                <span ng-if="event['begin-date']">{{'Begins:' | translate}} {{event['begin-date'] | date:'fullDate'}} {{event['begin-time'] | date:'HH:mm'}}<br/></span>
+                                <span ng-if="event['end-date']">{{'Ends:' | translate}} {{event['end-date'] | date:'fullDate' }} {{event['end-time'] | date:'HH:mm'}}</span>
+                            </div>
                         </td>
                         <td ng-if="hasPermission('event:tickets-all|read')" class="hcenter">
                             <p><span ng-init="attendeesNr = ((event.tickets || []) | attendeesFilter).length">{{attendeesNr}}</span> / {{((event.tickets ||  []) | registeredFilter).length}} ({{((attendeesNr / ((event.tickets || []) | registeredFilter).length * 100) || 0).toFixed()}}%)</p>
                         </td>
                         <td>
-                            <button ng-if="hasPermission('event:tickets-all|create')" ng-click="$state.go('event.ticket.new', {id: event._id})" class="btn btn-link fa fa-user-plus" type="button" title="{{'Join this event' | translate}}"></button>
-                            <button ng-if="hasPermission('ticket|update')" ng-click="$state.go('event.tickets', {id: event._id})" class="btn btn-link fa fa-ticket" type="button" title="{{'Manage tickets' | translate}}"></button>
-                            <button ng-if="hasPermission('event|update')" ng-click="$state.go('event.edit', {id: event._id})" type="button" class="btn btn-link fa fa-cog fa-lg" title="{{'Edit' | translate}}"></button>
-                            <button ng-if="hasPermission('event|delete')" ng-click="deleteEvent(event._id)" type="button" class="btn btn-link fa fa-trash fa-lg" title="{{'Delete' | translate}}"></button>
+                            <div ng-if="hasPermission('event:tickets-all|create')" class="top5 hcenter"><button ng-click="$state.go('event.ticket.new', {id: event._id})" class="min150 btn btn-success" type="button" title="{{'Join this event' | translate}}"><span class="fa fa-user-plus vcenter"></span> {{'Join this event' | translate}}</button></div>
+                            <div ng-if="hasPermission('ticket|update')" class="top5 hcenter"><button ng-click="$state.go('event.tickets', {id: event._id})" class="min150 btn btn-primary" type="button" title="{{'Manage tickets' | translate}}"><span class="fa fa-ticket"></span> {{'Manage tickets' | translate}}</button></div>
+                            <div ng-if="hasPermission('event|update')" class="top5 hcenter"><button ng-click="$state.go('event.edit', {id: event._id})" type="button" class="min150 btn btn-warning" title="{{'Edit event' | translate}}"><span class="fa fa-cog"></span> {{'Edit event' | translate}}</button></div>
+                            <div ng-if="hasPermission('event|delete')" class="top5 hcenter bottom5"><button ng-click="deleteEvent(event._id)" type="button" class="min150 btn btn-danger" title="{{'Delete event' | translate}}"><span class="fa fa-trash"></span> {{'Delete event' | translate}}</button></div>
                         </td>
                     </tr>
                 </tbody>
diff --git a/angular_app/tickets-list.html b/angular_app/tickets-list.html
index 27f72a5..6c32658 100644
--- a/angular_app/tickets-list.html
+++ b/angular_app/tickets-list.html
@@ -35,7 +35,7 @@
                         <a ui-sref="event.view({id: ticket.event_id})">{{ticket.event_title}}</a>
                     </td>
                     <td class="text-center">
-                        <span class="fa fa-lg {{(ticket.attended) && 'fa-check-circle text-success' || 'fa-times-circle text-danger'}}"></span>
+                        <span class="fa {{(ticket.attended) && 'fa-check-circle text-success' || 'fa-times-circle text-danger'}}"></span>
                     </td>
                 </tr>
                 </tbody>
diff --git a/angular_app/user-edit.html b/angular_app/user-edit.html
index 8cc8f69..dbc9450 100644
--- a/angular_app/user-edit.html
+++ b/angular_app/user-edit.html
@@ -63,7 +63,7 @@
                         </td>
                         <td><strong>{{ticket.event_title}}</strong></td>
                         <td class="text-center">
-                            <span class="fa fa-lg {{(ticket.attended) && 'fa-check-circle text-success' || 'fa-times-circle text-danger'}}"></span>
+                            <span class="fa {{(ticket.attended) && 'fa-check-circle text-success' || 'fa-times-circle text-danger'}}"></span>
                         </td>
                     </tr>
                 </tbody>
diff --git a/angular_app/users-list.html b/angular_app/users-list.html
index 47dce72..99eeb4a 100644
--- a/angular_app/users-list.html
+++ b/angular_app/users-list.html
@@ -45,7 +45,7 @@
                             </span>
                         </td>
                         <td>
-                            <button ng-if="hasPermission('user|delete')" ng-click="deleteUser(user._id)" type="button" class="btn btn-link fa fa-trash fa-lg" title="{{'Delete' | translate}}"></button>
+                            <button ng-if="hasPermission('user|delete')" ng-click="deleteUser(user._id)" type="button" class="btn btn-danger" title="{{'Delete' | translate}}"><span class="fa fa-trash"></span> {{'Delete' | translate}}</button>
                         </td>
                     </tr>
                 </tbody>
diff --git a/static/css/eventman.css b/static/css/eventman.css
index 45889e8..e2e285c 100644
--- a/static/css/eventman.css
+++ b/static/css/eventman.css
@@ -33,6 +33,11 @@ input[type=text].form-control, input[type=search].form-control {
 .top15 { margin-top: 15px; }
 .top20 { margin-top: 20px; }
 .top30 { margin-top: 30px; }
+.bottom5 { margin-bottom: 5px; }
+.bottom10 { margin-bottom: 10px; }
+.bottom15 { margin-bottom: 15px; }
+.bottom20 { margin-bottom: 20px; }
+.bottom30 { margin-bottom: 30px; }
 
 /* minimum widths for various input groups */
 .min50 { min-width: 50px; }
@@ -49,13 +54,17 @@ input[type=text].form-control, input[type=search].form-control {
     text-align: center;
 }
 
-/* vertically center */
+/* vertical alignment */
 .vcenter {
     vertical-align: middle;
     display: inline-block !important;
     float: none;
 }
 
+.vtop {
+    vertical-align: top !important;
+}
+
 /* pop-up message */
 .eventman-message {
     position: fixed;