Add "sane" styles for event screen

infoscreen/static/css/events.css

@@ -0,0 +1,42 @@
+.event {
+    font-size: 5vh;
+    font-family: 'Droid Sans Mono', monospace;
+}
+.event-col{
+    padding-top:1vh;
+    padding-bottom:1vh;
+}.event:nth-child(odd){
+    background-color: #d4e2fd;
+}
+
+.black {
+    color: black;
+}
+.header-row{
+    background: #d4e2fd;
+    font-size: 7vh;
+    font-family: 'Droid Sans Mono', monospace;
+    padding-bottom:20px;
+}
+
+.container {
+    width: 100vw;
+    padding: 0 0 0 0;
+    margin-left: 20px;
+    margin-right: 20px;
+}
+
+.repeat-item.ng-leave {
+    -webkit-transition:0.5s linear all;
+    transition:0.5s linear all;
+}
+
+.repeat-item.ng-leave.ng-leave-active {
+    opacity: 0;
+    font-size:  0vh;
+}
+
+.repeat-item.ng-leave{
+    opacity: 1;
+    font-size: 5vh;
+}

infoscreen/static/html/events.html

@@ -1,17 +1,14 @@
-<link rel="stylesheet" href="/static/css/sosso.css">
+<link rel="stylesheet" href="/static/css/events.css">
-<div ng-controller="EventController">
+<link href="https://fonts.googleapis.com/css?family=Droid+Sans+Mono" rel="stylesheet"> 
-    <div id="header">
+<div class="container" ng-app="myApp" ng-controller="EventController">
-        <img id="header-image" src="/static/img/sossoheader.png" >
+    <div class="header-row row">
+        <div class="col-sm-6">Tapahtuma</div>
+        <div class="col-sm-2">Aika</div>
+        <div class="col-sm-4">Paikka</div>
+    </div>
+    <div class="repeat-item row event" ng-repeat="event in events">
+        <div class="col-sm-6 event-col">{{event.name}}</div>
+        <div class="col-sm-2 event-col">{{event.event_start}}</div>
+        <div class="col-sm-4 event-col">{{event.location}}</div>
     </div>
-        <div id="container">
-            <div class="article-row row" ng-repeat="event in events">
-                <div>
-                    <h1 class="col-md-6">
-                        <div class="article-title-col">
-                            {{ event.name }}, {{event.event_start}}
-                        </div>
-                    </h1>
-                </div>
-            </div>
-        </div>
 </div>

infoscreen/static/js/infoscreen_controllers.js

@@ -75,9 +75,22 @@ app.controller('SossoController', function($scope, $http) {
 });
 app.controller('EventController', function($scope, $http) {
     $scope.data = [];
-    $http.get("https://sik.ayy.fi/api/events.php?limit=3").then(function(response)
+    $http.get("https://sik.ayy.fi/api/events.php?limit=10").then(function(response)
         {
             $scope.events = response.data;
+            $scope.events = _.each($scope.events, function(ev){
+                var time = moment(ev.event_start);
+                ev.event_start = time;
+                ev.event_start = time.format("ddd DD.MM");
+                // lets not trust locale
+                ev.event_start = ev.event_start.replace("Mon", "Ma");
+                ev.event_start = ev.event_start.replace("Tue", "Ti");
+                ev.event_start = ev.event_start.replace("Wed", "Ke");
+                ev.event_start = ev.event_start.replace("Thu", "To");
+                ev.event_start = ev.event_start.replace("Fri", "Pe");
+                ev.event_start = ev.event_start.replace("Sat", "La");
+                ev.event_start = ev.event_start.replace("Sun", "Su");
+            });
         })
 });