change alert color if form is dirty

angular_app/event-edit.html

@@ -8,9 +8,9 @@
     </h1>
 
     <form name="eventForm" ng-model="eventdetails" ng-submit="save()">
-        <alert class="clearfix">
+        <div ng-class="{clearfix: true, alert: true, 'alert-success': !eventForm.$dirty, 'alert-danger': eventForm.$dirty}">
             <button type="button" class="btn btn-default pull-right" ng-click="save($event)" ng-disabled="!eventForm.$dirty">{{'save' | translate}}</button>
-        </alert>
+        </div>
 
         <div class="input-group input-group-lg">
             <span class="input-group-addon">{{'Title' | translate}}</span>

angular_app/import-persons.html

@@ -1,8 +1,8 @@
 <div class="container">
-    <h1>{{'Import' | translate}}</h1>
-    <div class="panel panel-default">
+    <h1>{{'Import persons' | translate}}</h1>
+    <div class="panel panel-primary">
         <div class="panel-heading">
-            <div class="panel-title">{{'Import from eventbrite CSV' | translate}}</div>
+            <div class="panel-title">{{'Import persons from eventbrite CSV' | translate}}</div>
         </div>
         <div class="panel-body">
             <form name="ebCSVForm" class="well" ng-controller="FileUploadCtrl">

angular_app/index.html

@@ -44,8 +44,7 @@
                 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                     <ul class="nav navbar-nav">
                         <li ng-class="{active: n.isActive('/events') || n.isActive('/event')}"><a ui-sref="events">{{'Events' | translate}}</a></li>
-                        <li ng-class="{active: n.isActive('/persons') ||  n.isActive('/person')}"><a ui-sref="persons">{{'Persons' | translate}}</a></li>
-                        <li ng-class="{active: n.isActive('/import/persons')}"><a ui-sref="import.persons">{{'Import persons' | translate}}</a></li>
+                        <li ng-class="{active: n.isActive('/persons') ||  n.isActive('/person') || n.isActive('/import/persons')}"><a ui-sref="persons">{{'Persons' | translate}}</a></li>
                     </ul>
                 </div>
             </div>

angular_app/person-edit.html

@@ -8,9 +8,9 @@
     </h1>
 
     <form name="personForm" ng-model="persondetails" ng-submit="save()">
-        <alert class="clearfix">
+        <div ng-class="{clearfix: true, alert: true, 'alert-success': !personForm.$dirty, 'alert-danger': personForm.$dirty}">
             <button type="button" class="btn btn-default pull-right" ng-click="save($event)" ng-disabled="!personForm.$dirty">{{'save' | translate}}</button>
-        </alert>
+        </div>
 
         <div class="input-group input-group-lg">
             <span class="input-group-addon">{{'Name' | translate}}</span>

angular_app/persons-list.html

@@ -5,6 +5,10 @@
             <span class="glyphicon glyphicon-plus-sign"></span>
             {{'Add person' | translate}}
         </button>
+        <button ng-click="$state.go('import.persons')" class="btn btn-success">
+            <span class="glyphicon glyphicon-plus-sign"></span>
+            {{'Import persons' | translate}}
+        </button>
     </h1>
     <div class="panel panel-primary table-striped top5">
         <div class="panel-heading">{{'Persons' | translate}}</div>

static/css/eventman.css

@@ -10,5 +10,9 @@ body { padding-top: 70px; }
 .top10 { margin-top: 10px; }
 .top15 { margin-top: 15px; }
 .top20 { margin-top: 20px; }
-.top30 { margin-top:30px; }
+.top30 { margin-top: 30px; }
+
+.vcenter {
+    vertical-align: middle;
+}