Restructure webapp and infoscreen

2018-01-28 20:23:56 +02:00
parent bdf6b469ad
commit 253f720043
76 changed files with 298 additions and 225 deletions
@@ -98,12 +98,12 @@ class ABBInfoItem(InfoItem):

    def get_template_url(self):
        """Return ABB infoitem template url."""
-        return "/static/html/abb.html"
+        return "/static/infoscreen/html/abb.html"

    @staticmethod
    def get_create_template_url():
        """Call create ABB infoitem template url command."""
-        return "/static/html/abb_create.html"
+        return "/static/infoscreen/html/abb_create.html"


 class ApyInfoItem(InfoItem):
@@ -113,12 +113,12 @@ class ApyInfoItem(InfoItem):

    def get_template_url(self):
        """Return APY infoitem template url."""
-        return "/static/html/apy.html"
+        return "/static/infoscreen/html/apy.html"

    @staticmethod
    def get_create_template_url():
        """Call create APY infoitem template url command."""
-        return "/static/html/apy_create.html"
+        return "/static/infoscreen/html/apy_create.html"


 class ExternalWebsiteInfoItem(InfoItem):
@@ -129,12 +129,12 @@ class ExternalWebsiteInfoItem(InfoItem):

    def get_template_url(self):
        """Return external website infoitem template url."""
-        return "/static/html/external_website.html?url={}".format(self.name)
+        return "/static/infoscreen/html/external_website.html?url={}".format(self.name)

    @staticmethod
    def get_create_template_url():
        """Call create external website infoitem template url command."""
-        return "/static/html/external_website_create.html"
+        return "/static/infoscreen/html/external_website_create.html"

    def get_dict(self):
        """Convert django model to dict and return it."""
@@ -185,12 +185,12 @@ class SossoInfoItem(InfoItem):

    def get_template_url(self):
        """Return Sosso infoitem template url."""
-        return "/static/html/sosso.html"
+        return "/static/infoscreen/html/sosso.html"

    @staticmethod
    def get_create_template_url():
        """Call create Sosso infoitem template url command."""
-        return "/static/html/sosso_create.html"
+        return "/static/infoscreen/html/sosso_create.html"


 class EventInfoItem(InfoItem):
@@ -200,12 +200,12 @@ class EventInfoItem(InfoItem):

    def get_template_url(self):
        """Return Event infoitem template url."""
-        return "/static/html/events.html"
+        return "/static/infoscreen/html/events.html"

    @staticmethod
    def get_create_template_url():
        """Call create Event infoitem template url command."""
-        return "/static/html/events_create.html"
+        return "/static/infoscreen/html/events_create.html"


 class ImageInfoItem(InfoItem):
@@ -218,12 +218,12 @@ class ImageInfoItem(InfoItem):
        """Return Image infoitem template url."""
        # get param to avoid angular from optimizing same template
        # with different options
-        return "/static/html/generic_image.html?img={}".format(self.name)
+        return "/static/infoscreen/html/generic_image.html?img={}".format(self.name)

    @staticmethod
    def get_create_template_url():
        """Call create Image infoitem template url command."""
-        return "/static/html/generic_image_create.html"
+        return "/static/infoscreen/html/generic_image_create.html"

    def get_dict(self):
        """Convert django model to dict and return it."""
@@ -240,12 +240,12 @@ class VideoInfoItem(InfoItem):

    def get_template_url(self):
        """Return Video infoitem template url."""
-        return "/static/html/generic_video.html?video={}".format(self.name)
+        return "/static/infoscreen/html/generic_video.html?video={}".format(self.name)

    @staticmethod
    def get_create_template_url():
        """Call create Video infoitem template url command."""
-        return "/static/html/generic_video_create.html"
+        return "/static/infoscreen/html/generic_video_create.html"

    def get_dict(self):
        """Convert django model to dict and return it."""
@@ -261,12 +261,12 @@ class HslInfoItem(InfoItem):

    def get_template_url(self):
        """Return HSL infoitem template url."""
-        return "/static/html/hsl.html"
+        return "/static/infoscreen/html/hsl.html"

    @staticmethod
    def get_create_template_url():
        """Call create HSL infoitem template url command."""
-        return "/static/html/hsl_create.html"
+        return "/static/infoscreen/html/hsl_create.html"


 class ExternalImageInfoItem(InfoItem):
@@ -277,12 +277,12 @@ class ExternalImageInfoItem(InfoItem):

    def get_template_url(self):
        """Return External Image infoitem template url."""
-        return "/static/html/generic_image.html?img={}".format(self.name)
+        return "/static/infoscreen/html/generic_image.html?img={}".format(self.name)

    @staticmethod
    def get_create_template_url():
        """Call create External Image infoitem template url command."""
-        return "/static/html/generic_external_image_create.html"
+        return "/static/infoscreen/html/generic_external_image_create.html"

    def get_dict(self):
        """Convert django model to dict and return it."""
@@ -5,6 +5,7 @@ html {
 body {
  padding: 1.5rem;
  margin: 0.5rem;
+  height: 100%;
 }

 tbody {
@@ -51,10 +52,16 @@ td {

 #header {
    max-width: 100%;
+    display: flex;
+    justify-content: flex-end;
 }

-.logout-button {
-  float: right;
-  margin-top: 10px;
-  margin-right: 30px;
+.tab-content {
+  margin-top: 1rem;
+}
+
+.rotation-title-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
@@ -1,4 +1,4 @@
-<link rel="stylesheet" href="/static/css/abb.css">
+<link rel="stylesheet" href="/static/infoscreen/infoscreen/css/abb.css">
 <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
 <div ng-controller="ABBController">
    <!-- Only show the job listing if there are any jobs, i.e, the jobs list is non-empty -->
@@ -4,7 +4,7 @@
    </div>
    <div class="form-group">
        <label>Name:</label>
-        <input type="text" ng-model="item.name"></input>
+        <input class="form-control" type="text" ng-model="item.name"></input>
    </div>
    <input type="button" class="btn btn-success" ng-click="send()" value="create"></input>
 </div>
@@ -1,4 +1,4 @@
-<link rel="stylesheet" href="/static/css/apy.css">
+<link rel="stylesheet" href="/static/infoscreen/css/apy.css">
 <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
 <div id="bg">
 	<div class="container " ng-controller="ApyController">
@@ -1,10 +1,10 @@
 <div ng-controller="infoadmin_apyitem_create" style="margin-top:20px;">
    <div>
-        create apyitem
+        Create new ÄPY statistics item
    </div>
    <div class="form-group">
        <label>Name:</label>
-        <input type="text" ng-model="item.name"></input>
+        <input class="form-control" type="text" ng-model="item.name"></input>
    </div>
    <input type="button" class="btn btn-success" ng-click="send()" value="create"></input>
 </div>
@@ -1,4 +1,4 @@
-<link rel="stylesheet" href="/static/css/coffee.css">
+<link rel="stylesheet" href="/static/infoscreen/css/coffee.css">
 <iframe src="https://host2.kilta.aalto.fi/kahvi/cups" allowfullscreen=true sandbox="allow-scripts allow-pointer-lock allow-same-origin">
  <p>Your browser does not support iframes.</p>
 </iframe>
@@ -1,4 +1,4 @@
-<link rel="stylesheet" href="/static/css/events.css">
+<link rel="stylesheet" href="/static/infoscreen/css/events.css">
 <link href="https://fonts.googleapis.com/css?family=Droid+Sans+Mono" rel="stylesheet"> 
 <div class="container" ng-app="myApp" ng-controller="EventController">
    <div class="header-row row">
@@ -4,7 +4,7 @@
    </div>
    <div class="form-group">
        <label>Name:</label>
-        <input type="text" ng-model="item.name"></input>
+        <input type="text" class="form-control" ng-model="item.name"></input>
    </div>
    <input type="button" class="btn btn-success" ng-click="send()" value="create"></input>
 </div>
@@ -1,4 +1,4 @@
-<link rel="stylesheet" href="/static/css/external_website.css">
+<link rel="stylesheet" href="/static/infoscreen/css/external_website.css">
 <iframe ng-src="{{ url | trusted_url }}" allowfullscreen=true sandbox="allow-scripts allow-pointer-lock allow-same-origin">
  <p>Your browser does not support iframes.</p>
 </iframe>
@@ -1,14 +1,14 @@
 <div ng-controller="infoadmin_websiteitem_create" style="margin-top:20px;">
    <div>
-        Create new item to show external website. For example "ka.dy.fi".
+        Create new item to show external website. For example "https://ka.dy.fi".
    </div>
    <div class="form-group">
        <label>Name:</label>
-        <input type="text" ng-model="item.name"></input>
+        <input type="text" class="form-control" ng-model="item.name"></input>
    </div>
    <div class="form-group">
        <label>Url:</label>
-        <input type="text" ng-model="item.url"></input>
+        <input type="text" class="form-control" ng-model="item.url"></input>
    </div>
    <input type="button" class="btn btn-success" ng-click="send()" value="create"></input>
 </div>
@@ -4,11 +4,11 @@
    </div>
    <div class="form-group">
        <label>Name:</label>
-        <input type="text" ng-model="item.name"></input>
+        <input type="text" class="form-control" ng-model="item.name"></input>
    </div>
    <div class="form-group">
        <label>Url:</label>
-        <input type="text" ng-model="item.url"></input>
+        <input type="text" class="form-control" ng-model="item.url"></input>
    </div>
    <input type="button" class="btn btn-success" ng-click="send()" value="create"></input>
 </div>
@@ -4,7 +4,7 @@
    </div>
    <div class="form-group">
        <label>Name:</label>
-        <input type="text" ng-model="imagename"></input>
+        <input type="text" class="form-control" ng-model="imagename"></input>
    </div>
    <div class="form-group">
        <input type="file" ngf-select ng-model="img" name="file" required>
@@ -1,4 +1,4 @@
-<link rel="stylesheet" href="/static/css/video.css">
+<link rel="stylesheet" href="/static/infoscreen/css/video.css">


 <div class="fullscreen-bg">
@@ -4,7 +4,7 @@
    </div>
    <div class="form-group">
        <label>Name:</label>
-        <input type="text" ng-model="name"></input>
+        <input type="text" class="form-control" ng-model="name"></input>
    </div>
    <div class="form-group">
        <input type="file" ngf-select ng-model="video" name="file" required>
@@ -1,4 +1,4 @@
-<link rel="stylesheet" href="/static/css/hsl.css">
+<link rel="stylesheet" href="/static/infoscreen/css/hsl.css">
 <link href="https://fonts.googleapis.com/css?family=Droid+Sans+Mono" rel="stylesheet"> 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/locale/fi.js"></script>
 <div class="container" ng-app="myApp" ng-controller="timetableCtrl">
@@ -4,7 +4,7 @@
    </div>
    <div class="form-group">
        <label>Name:</label>
-        <input type="text" ng-model="item.name"></input>
+        <input type="text" class="form-control" ng-model="item.name"></input>
    </div>
    <input type="button" class="btn btn-success" ng-click="send()" value="create"></input>
 </div>
@@ -1,4 +1,4 @@
-<link rel="stylesheet" href="/static/css/sosso.css">
+<link rel="stylesheet" href="/static/infoscreen/css/sosso.css">
 <div ng-controller="SossoController">
    <div id="header">
        <img id="header-image" src="/static/img/sossoheader.png" >
@@ -4,7 +4,7 @@
    </div>
    <div class="form-group">
        <label>Name:</label>
-        <input type="text" ng-model="item.name"></input>
+        <input type="text" class="form-control" ng-model="item.name"></input>
    </div>
    <input type="button" class="btn btn-success" ng-click="send()" value="create"></input>
 </div>
@@ -17,20 +17,23 @@
        <script src="{% static "js/lib/angular.js" %}"></script>
        <script src="{% static "js/lib/ng-file-upload-bower-12.2.11/ng-file-upload-all.js" %}"></script>
        <script src="{% static "js/lib/jquery-3.1.0.min.js" %}"></script>
-        <script src="{% static "js/lib/bootstrap.min.js" %}"></script>
        <script src="{% static "js/lib/underscore-min.js" %}"></script>
        <script src="{% static "js/lib/moment.js" %}"></script>
        <script src="{% static "js/lib/angular-route.js" %}"></script>
        <script src="{% static "js/lib/angular-animate.js" %}"></script>
-        <link rel="stylesheet" href="{% static "css/lib/bootstrap.min.css" %}"></link>
+        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
+        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
        {% endblock libraries %}

        {% block styles %}
-        <link rel="stylesheet" href="{% static "css/admin.css" %}"></link>
+        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+        <link rel="stylesheet" href="{% static "webapp/css/footer.css" %}">
        {% endblock styles %}

        {% block controllers %}
-        <script src="{% static "js/infoadmin_controllers.js" %}"></script>
+        <script src="{% static "infoscreen/js/infoadmin_controllers.js" %}"></script>
        {% endblock controllers %}
    </head>
    <body>
@@ -0,0 +1,7 @@
+{% load i18n %}
+{% load static %}
+<div class="header-content">
+    <div class="logo">
+        <a href="/"><img src="{% static "webapp/img/logo_header.png" %}" alt="Aalto-yliopiston Sähköinsinöörikilta ry"></a>
+    </div>
+</div>
@@ -11,11 +11,12 @@
 {% endblock title %}

 {% block styles %}
-<link rel="stylesheet" href="{% static "css/admin.css" %}"></link>
+{{ block.super }}
+<link rel="stylesheet" href="{% static "infoscreen/css/admin.css" %}"></link>
 {% endblock styles %}

 {% block controllers %}
-<script src="{% static "js/infoadmin_controllers.js" %}"></script>
+<script src="{% static "infoscreen/js/infoadmin_controllers.js" %}"></script>
 {% endblock controllers %}

 {% block body %}
@@ -28,127 +29,17 @@
 </div>
 <div class="container" ng-controller="infoadmin_ctrl">
    <div class="row">
-        <div class="col-md-12">
+        <div class="col">
            <h1>{% trans "Infoscreen Admin Pane" %}</h1>
        </div>
    </div>
-    <ul class="nav nav-tabs" role="tablist">
-        <li class="active"><a data-toggle="tab" href="#slides" role="tab">{% trans "Manage Slides" %}</a></li>
-        <li class="dropdown">
-            <a data-toggle="dropdown" href="#">{% trans "Manage Rotations" %}<span class="caret"></span></a>
-            <ul class="dropdown-menu">
-                <li ng-repeat="r in rotations"><a href="#rotations" ng-click="selectRotation(r.id)" data-toggle="tab">{$ r.name $}</a></li>
-                <li class="divider">
-                <li class="nav-item"><a data-toggle="tab" href="#deleterot" role="tab">{% trans "Create/Delete" %}</a></li>
-            </ul>
-    </ul>
-    <div class="tab-content row">
-        <div id="slides" class="tab-pane active">
-            <div ng-controller="infoadmin_ctrl">
-                <div class="col-xs-12 col-md-6">
-                    <h2>{% trans "Create new item" %}</h2>
-                    <div>{% trans "Create a new item by type" %}</div>
-                    <table class="table table-striped">
-                        <tr>
-                            <td>{% trans "Item type" %}</td>
-                            <td>
-                                <select class="form-control form-control-sm" ng-model="createtype", ng-options="t.name for t in infotypes | orderBy: 'name'">
-                                    <option value=""></option>
-                                </select>
-                            </td>
-                        </tr>
-                    </table>
-                    <div ng-include="createtype.create_template_url"></div>
-                </div>
-                <div class="col-xs-12 col-md-6">
-                    <h2>{% trans "Info items" %}</h2>
-                    <div>{% trans "Infoitems available for rotations" %}</div>
-                    <table class="table table-striped">
-                        <tr>
-                            <th>{% trans "Item" %}</th>
-                            <th>{% trans "Type" %}</th>
-                            <th>{% trans "Delete" %}</th>
-                        </tr>
-                        <tr ng-repeat="i in infoitems | orderBy:['display_name','name']">
-                            <td>{$ i.name $}</td>
-                            <td>{$ i.display_name $}</td>
-                            <td><input type="button" class="btn btn-danger" ng-click="deleteItem(i.item_type, i.id);" value="{% trans "Delete" %}"></input></td>
-                        </tr>
-                    </table>
-
-                </div>
-            </div>
-        </div>
-        <div id="rotations" class="tab-pane" ng-controller="infoadmin_ctrl">
-            <div class="col-xs-12 col-md-6">
-                <h2>{% trans "Info items" %}</h2>
-                <div>{% trans "Infoitems available for rotations" %}</div>
-                <table class="table table-striped">
-                    <tr>
-                        <th>{% trans "Item" %}</th>
-                        <th>{% trans "Type" %}</th>
-                        <th>{% trans "Set duration" %}</th>
-                        <th>{% trans "Add to rotation" %}</th>
-                        <th>{% trans "Delete" %}</th>
-                    </tr>
-                    <tr ng-repeat="i in infoitems | orderBy:['display_name','name']">
-                        <td>{$ i.name $}</td>
-                        <td>{$ i.display_name $}</td>
-                        <td><input type="number" min="1" max="60" class="form-control" ng-model="i.duration"></input></td>
-                        <td><input type="button" class="btn btn-success" ng-click="createInstance(selected_rot.id, i.id, i.item_type, i.duration);" value="{% trans "Add" %}"></input></td>
-                        <td><input type="button" class="btn btn-danger" ng-click="deleteItem(i.item_type, i.id);" value="{% trans "Delete" %}"></input></td>
-                    </tr>
-                </table>
-
-            </div>
-
-            <div class="col-xs-12 col-md-6">
-                <h2>{% trans "Rotation" %}: {$ selected_rot.name $}<a href="/infoscreen/{$ selected_rot.id $}"><input type="button" class="btn btn-primary pull-right" value="{% trans "Preview" %}"></a></h2>
-                <div>{% trans "Instances in currently selected rotation" %}:</div>
-                <table class="table table-striped">
-                    <tr>
-                        <th>{% trans "Instance" %}</th>
-                        <th>{% trans "Duration" %}</th>
-                        <th>{% trans "Delete" %}</th>
-                    </tr>
-                    <tr ng-repeat="i in selected_rot.instances">
-                        <td>{$ i.item.name $}</td><td>{$ i.duration $} s</td>
-                        <td><input type="button" ng-click="deleteInstance(i.id);" value="{% trans "Delete" %}" class="btn btn-danger"></input></td>
-                    </tr>
-                </table>
-            </div>
-        </div>
-        <div id="deleterot" class="tab-pane">
-            <div class="col-xs-12 " ng-controller="infoadmin_ctrl">
-                <h2>{% trans "Rotations" %}</h2>
-                <div>
-                    {% trans "Select rotation to edit" %}:
-                </div>
-                <table class="table table-striped">
-                    <tr>
-                        <th>{% trans "Rotation" %}</th>
-                        <th>{% trans "id" %}</th>
-                        <th>{% trans "Preview" %}</th>
-                        <th>{% trans "Delete" %}</th>
-                    </tr>
-                    <tr ng-repeat="r in rotations">
-                        <td>{$ r.name $}</td>
-                        <td>{$ r.id $}</td>
-                        <td><a href="/infoscreen/{$ r.id $}"><input type="button" class="btn btn-primary" value="{% trans "Preview" %}"></a></td>
-                        <td><input type="button" class="btn btn-danger" ng-click="deleteRotation(r.id)" value="{% trans "Delete" %}"></input></td>
-                    </tr>
-                    <tr>
-                        <td><input type="text" class="form-control" ng-model="r.name" placeholder="{% trans "Name" %}"></input></td>
-                        <td><input type="button" class="btn btn-success" ng-click="createRotation(r.name)" value="{% trans "Create new" %}"></input></td>
-                        <td></td>
-                        <td></td>
-                    </tr>
-                </table>
-            </div>
-        </div>
-    </div>
-    <div style="margin-top: 100px;">
-        {% include "footer.html" %}
+    {% include "infoscreen:nav.html" %}
+    <div class="tab-content" id="tabContent">
+        {% include "infoscreen:tabs/slides.html" %}
+        {% include "infoscreen:tabs/rotations.html" %}
+        {% include "infoscreen:tabs/add_remove.html" %}
    </div>
 </div>
+
+{% include "webapp:footer.html" %}
 {% endblock body %}
@@ -9,11 +9,11 @@
 {% endblock title %}

 {% block controllers %}
-<script src="{% static "js/infoscreen_controllers.js" %}"></script>
+<script src="{% static "infoscreen/js/infoscreen_controllers.js" %}"></script>
 {% endblock controllers %}

 {% block styles %}
-<link rel="stylesheet" href="{% static "css/infoscreen.css" %}"></link>
+<link rel="stylesheet" href="{% static "infoscreen/css/infoscreen.css" %}"></link>
 {% endblock styles %}

 {% block body %}
@@ -0,0 +1,17 @@
+{% load i18n %}
+
+<ul class="nav nav-tabs" id="tabs" role="tablist">
+    <li class="nav-item">
+        <a class="nav-link active" data-toggle="tab" role="tab" href="#slides">{% trans "Manage Slides" %}</a>
+    </li>
+    <li class="nav-item dropdown">
+        <a class="nav-link dropdown-toggle" role="button" data-toggle="dropdown" href="#" aria-haspopup="true" aria-expanded="false">
+            {% trans "Manage Rotations" %}<span class="caret"></span>
+        </a>
+        <div class="dropdown-menu">
+            <a class="dropdown-item" role="tab" href="#rotations" ng-repeat="r in rotations" ng-click="selectRotation(r.id)" data-toggle="tab">{$ r.name $}</a>
+            <div class="dropdown-divider"></div>
+            <a class="dropdown-item" data-toggle="tab" href="#deleterot" role="tab">{% trans "Create/Delete" %}</a>
+        </div>
+    </li>
+</ul>
@@ -0,0 +1,30 @@
+{% load i18n %}
+
+<div id="deleterot" class="tab-pane fade" role="tabpanel">
+    <div class="col" ng-controller="infoadmin_ctrl">
+        <h2>{% trans "Rotations" %}</h2>
+        <div>
+            {% trans "Select rotation to edit" %}:
+        </div>
+        <table class="table table-striped">
+            <tr>
+                <th>{% trans "Rotation" %}</th>
+                <th>{% trans "id" %}</th>
+                <th>{% trans "Preview" %}</th>
+                <th>{% trans "Delete" %}</th>
+            </tr>
+            <tr ng-repeat="r in rotations">
+                <td>{$ r.name $}</td>
+                <td>{$ r.id $}</td>
+                <td><a class="btn btn-primary" href="/infoscreen/{$ r.id $}">{% trans "Preview" %}</a></td>
+                <td><a class="btn btn-danger" href="#" ng-click="deleteRotation(r.id)">{% trans "Delete" %}</a></td>
+            </tr>
+            <tr>
+                <td><input type="text" class="form-control" ng-model="r.name" placeholder="{% trans "Name" %}"></input></td>
+                <td><input type="button" class="btn btn-success" ng-click="createRotation(r.name)" value="{% trans "Create new" %}"></input></td>
+                <td></td>
+                <td></td>
+            </tr>
+        </table>
+    </div>
+</div>
@@ -0,0 +1,44 @@
+{% load i18n %}
+
+<div id="rotations" class="tab-pane fade" role="tabpanel" ng-controller="infoadmin_ctrl">
+    <div class="col">
+        <h2>{% trans "Info items" %}</h2>
+        <div>{% trans "Infoitems available for rotations" %}</div>
+        <table class="table table-striped">
+            <tr>
+                <th>{% trans "Item" %}</th>
+                <th>{% trans "Type" %}</th>
+                <th>{% trans "Set duration" %}</th>
+                <th>{% trans "Add to rotation" %}</th>
+                <th>{% trans "Delete" %}</th>
+            </tr>
+            <tr ng-repeat="i in infoitems | orderBy:['display_name','name']">
+                <td>{$ i.name $}</td>
+                <td>{$ i.display_name $}</td>
+                <td><input type="number" min="1" max="60" class="form-control" ng-model="i.duration"></input></td>
+                <td><input type="button" class="btn btn-success" ng-click="createInstance(selected_rot.id, i.id, i.item_type, i.duration);" value="{% trans "Add" %}"></input></td>
+                <td><input type="button" class="btn btn-danger" ng-click="deleteItem(i.item_type, i.id);" value="{% trans "Delete" %}"></input></td>
+            </tr>
+        </table>
+
+    </div>
+
+    <div class="col">
+        <div class="rotation-title-row">
+            <h2>{% trans "Rotation" %}: {$ selected_rot.name $}</h2>
+            <a class="btn btn-primary" href="/infoscreen/{$ selected_rot.id $}">{% trans "Preview" %}</a>        
+        </div>
+        <div>{% trans "Instances in currently selected rotation" %}:</div>
+        <table class="table table-striped">
+            <tr>
+                <th>{% trans "Instance" %}</th>
+                <th>{% trans "Duration" %}</th>
+                <th>{% trans "Delete" %}</th>
+            </tr>
+            <tr ng-repeat="i in selected_rot.instances">
+                <td>{$ i.item.name $}</td><td>{$ i.duration $} s</td>
+                <td><input type="button" ng-click="deleteInstance(i.id);" value="{% trans "Delete" %}" class="btn btn-danger"></input></td>
+            </tr>
+        </table>
+    </div>
+</div>
@@ -0,0 +1,37 @@
+{% load i18n %}
+
+<div id="slides" class="tab-pane fade show active" role="tabpanel">
+    <div ng-controller="infoadmin_ctrl">
+        <div class="col">
+            <h2>{% trans "Create new item" %}</h2>
+            <div>{% trans "Create a new item by type" %}</div>
+            <table class="table table-striped">
+                <tr>
+                    <td>{% trans "Item type" %}</td>
+                    <td>
+                        <select class="form-control form-control-sm" ng-model="createtype", ng-options="t.name for t in infotypes | orderBy: 'name'">
+                            <option value=""></option>
+                        </select>
+                    </td>
+                </tr>
+            </table>
+            <div ng-include="createtype.create_template_url"></div>
+        </div>
+        <div class="col">
+            <h2>{% trans "Info items" %}</h2>
+            <div>{% trans "Infoitems available for rotations" %}</div>
+            <table class="table table-striped">
+                <tr>
+                    <th>{% trans "Item" %}</th>
+                    <th>{% trans "Type" %}</th>
+                    <th>{% trans "Delete" %}</th>
+                </tr>
+                <tr ng-repeat="i in infoitems | orderBy:['display_name','name']">
+                    <td>{$ i.name $}</td>
+                    <td>{$ i.display_name $}</td>
+                    <td><input type="button" class="btn btn-danger" ng-click="deleteItem(i.item_type, i.id);" value="{% trans "Delete" %}"></input></td>
+                </tr>
+            </table>
+        </div>
+    </div>
+</div>
@@ -28,7 +28,7 @@ from infoscreen.models import VideoInfoItem
@permission_required('infoscreen.change_infoinstance', raise_exception=True)
 def admin(request, *args, **kwargs):
    """Render infoscreen admin page."""
-    return render(request, 'infoscreen_admin.html', {})
+    return render(request, 'infoscreen:infoscreen_admin.html', {})


 def create_item_generator(model):
@@ -1,5 +1,9 @@
-{% extends "login_base.html" %}
+{% extends "webapp:base.html" %}
 {% load i18n %}
+{% load static %}
+
+{% block navigation %}
+{% endblock navigation %}

 {% block content %}
    <h1>SIK Admin</h1>
@@ -1,23 +0,0 @@
-{% extends "base.html" %}
-
-{% load i18n %}
-{% load static %}
-
-{% block body %}
-{% block header %}
-<link rel="stylesheet" href="{% static "css/login.css" %}" />
-<div class="header">
-    {% include "sik_header.html" %}
-</div>
-{% endblock %}
-
-<div class="login container">
-    {% block content %}
-    {% endblock %}
-</div>
-<div class="footer">
-    {% block footer %}
-        {% include "footer.html" %}
-    {% endblock footer %}
-</div>
-{% endblock %}
@@ -1,3 +0,0 @@
-/*.main_navigation .navbar-border .navbar-nav .nav-item {
-    display: block;
-}*/
@@ -0,0 +1,35 @@
+#footer-div {
+    height:10vh;
+}
+
+footer {
+    position: absolute;
+    bottom: 1rem; /* Distance from bottom of page */
+    width: 100%;
+    height: 5rem; /* Set the fixed height of the footer here */
+}
+
+footer .container .col .nav .nav-item {
+    display: inline-block;
+    margin-right: 3vh;
+}
+
+.lang-button {
+    height: 4vh;
+    width: 6vh;
+    margin-left: 1vh;
+    margin-right: 1vh;
+}
+
+.lang-select {
+    width: 10rem;
+    display: inline-block;
+}
+
+footer .lang-form {
+    margin: 1rem auto 0;
+}
+
+.footer-padder {
+    margin-top: 6rem;  /* height of the footer element */
+}
@@ -1,23 +1,29 @@
-{% extends "base.html" %}
+{% extends "project.html" %}

 {% load i18n %}
 {% load static %}
 {% load staticfiles %}

+{% block styles %}
+<link rel="stylesheet" href="{% static "webapp/css/base.css" %}">
+<link rel="stylesheet" href="{% static "webapp/css/webapp.css" %}">
+<link rel="stylesheet" href="{% static "webapp/css/header.css" %}">
+<link rel="stylesheet" href="{% static "webapp/css/footer.css" %}">
+{% endblock styles %}
+
 {% block body %}
-<link rel="stylesheet" href="{% static "css/webapp.css" %}">
 <div class="container">
    <div class="row">
        <div class="col">
            {% block header %}
-                {% include "sik_header.html" %}
+                {% include "webapp:header.html" %}
            {% endblock %}
        </div>
    </div>
    <div class="row">
        <div class="col">
            {% block navigation %}
-                {% include "navigation.html" %}
+                {% include "webapp:navigation.html" %}
            {% endblock %}
        </div>
    </div>
@@ -29,6 +35,6 @@
    </div>
 </div>
 {% block footer %}
-    {% include "footer.html" %}
+    {% include "webapp:footer.html" %}
 {% endblock footer %}
 {% endblock %}
@@ -1,4 +1,4 @@
-{% extends "webapp_base.html" %}
+{% extends "webapp:base.html" %}
 {% block content %}

 {% load i18n %}
@@ -1,4 +1,4 @@
-{% extends "webapp_base.html" %}
+{% extends "webapp:base.html" %}
 {% block content %}

 {% load i18n %}
@@ -0,0 +1,25 @@
+{% load i18n %}
+{% load static %}
+{% load staticfiles %}
+
+<div class="footer-padder"></div>
+<footer style="text-align: center">
+    <div>
+        <form class="lang-form form" action="{% url 'set_language' %}" method="post">{% csrf_token %}
+            <span>
+                <input name="next" type="hidden" value="{{ redirect_to }}" />
+                <select onchange="this.form.submit()" class="lang-select form-control" name="language">
+                    {% get_current_language as LANGUAGE_CODE %}
+                    {% get_available_languages as LANGUAGES %}
+                    {% get_language_info_list for LANGUAGES as languages %}
+                    {% for language in languages %}
+                    <option value="{{ language.code }}"{% if language.code == LANGUAGE_CODE %} selected="selected"{% endif %}>
+                        {{ language.name_local }} ({{ language.code }})
+                    </option>
+                    {% endfor %}
+                </select>
+            </span>
+        </form>
+        <span>{% trans "Copyright Aalto-yliopiston Sähköinsinöörikilta ry" %} {% now 'Y' %}</span>
+    </div>
+</footer>
@@ -1,4 +1,4 @@
-{% extends "webapp_base.html" %}
+{% extends "webapp:base.html" %}
 {% block content %}

 {% load i18n %}
@@ -1,4 +1,4 @@
-{% extends "webapp_base.html" %}
+{% extends "webapp:base.html" %}
 {% block content %}

 {% load i18n %}
@@ -0,0 +1,7 @@
+{% load i18n %}
+{% load static %}
+<div class="header-content">
+    <div class="logo">
+        <a href="/"><img src="{% static "webapp/img/logo_header.png" %}" alt="Aalto-yliopiston Sähköinsinöörikilta ry"></a>
+    </div>
+</div>
@@ -1,4 +1,4 @@
-{% extends "webapp_base.html" %}
+{% extends "webapp:base.html" %}
 {% load i18n %}

 {% block content %}
@@ -1,4 +1,4 @@
-{% extends "webapp_base.html" %}
+{% extends "webapp:base.html" %}
 {% block content %}

 {% load i18n %}
@@ -1,4 +1,4 @@
-{% extends "webapp_base.html" %}
+{% extends "webapp:base.html" %}
 {% block content %}

 {% load i18n %}
@@ -1,8 +0,0 @@
-{% load i18n %}
-<link rel="stylesheet" href="/static/css/sik_header.css">
-
-<div class="header-content">
-    <div class="logo">
-        <a href="/"><img src="/static/img/logo_header.png" alt="Aalto-yliopiston Sähköinsinöörikilta ry"></a>
-    </div>
-</div>
@@ -1,4 +1,4 @@
-{% extends "webapp_base.html" %}
+{% extends "webapp:base.html" %}
 {% block content %}

 {% load i18n %}
@@ -20,7 +20,7 @@ from members.views.utils import *
@require_http_methods(["GET"])
 def main_index(request, *args, **kwargs):
    """Render main page."""
-    return render(request, "main_index.html", {})
+    return render(request, "index.html", {})


@require_http_methods(["GET", "POST"])