New template design

- Great thanks to Jörn Bensch (from triagonale.de) for new base
  template!
- A lot of adaptations in all templates for new design.

AUTHORS

@@ -16,3 +16,4 @@ Authors of OpenSlides in chronological order of first contribution:
     Dominik Breu <dominikbreu@yahoo.de>
     André Böhlke <ab@bcoding.de>
     René von der Haar <rene.vonderhaar@medienweite.de> (Logo design)
+    Jörn Bensch <bensch@triagonale.de> (Template design)

bower.json

@@ -20,7 +20,6 @@
     "angular-ui-switch": "~0.1.1",
     "angular-ui-tree": "~2.2.0",
     "angular-gettext": "~2.1.2",
-    "angular-xeditable": "~0.1.9",
     "angular-scroll-glue": "~2.0.6",
     "ngBootbox": "~0.1.2",
     "ng-dialog": "~0.5.6",
@@ -30,6 +29,8 @@
     "js-data-angular": "~3.1.0",
     "ng-file-upload": "~9.1.2",
     "ckeditor": "~4.5.4",
-    "angular-ckeditor": "~1.0.0"
+    "angular-ckeditor": "~1.0.0",
+    "roboto-condensed": "~0.3.0",
+    "opensans-webfont-for-bower": "a4b3b75afa"
   }
 }

openslides/agenda/static/js/agenda/site.js

@@ -83,6 +83,7 @@ angular.module('OpenSlidesApp.agenda.site', ['OpenSlidesApp.agenda'])
             $scope.items = AgendaTree.getFlatTree(Agenda.getAll());
         });
         $scope.alert = {};
+        $scope.isFilter = true;
 
         // project related item (content object)
         $scope.project = function (item) {

openslides/agenda/static/templates/agenda/item-detail.html

@@ -1,10 +1,17 @@
-<h1>{{ item.title }}</h1>
-
-<div id="submenu">
+<div class="header">
+  <div class="title">
+    <div class="submenu">
       <a ui-sref="agenda.item.list" class="btn btn-sm btn-default">
         <i class="fa fa-angle-double-left fa-lg"></i>
         <translate>Back to agenda</translate>
       </a>
+      <!-- TODO: project list
+           ng-class="{ 'btn-primary': item.isListOfSpeakersProjected() }"-->
+      <a os-perms="core.can_manage_projector" class="btn btn-default btn-sm"
+          ng-click="projectListOfSpeakers()">
+        <i class="fa fa-video-camera"></i>
+        <translate>List of speakers</translate>
+      </a>
       <!-- project -->
       <a os-perms="core.can_manage_projector" class="btn btn-default btn-sm"
           ng-class="{ 'btn-primary': item.isProjected() }"
@@ -12,40 +19,35 @@
           title="{{ 'Project item' | translate }}">
         <i class="fa fa-video-camera"></i>
       </a>
+    </div>
+    <h1>{{ item.title }}</h1>
+    <h2><translate>List of speakers</translate></h2>
+  </div>
 </div>
 
-
-<h2>
-  <translate>List of speakers</translate>
+<div class="details">
+  <div class="pull-right">
     <span os-perms="agenda.can_manage">
       <button ng-if="item.speaker_list_closed" ng-click="closeList(false)"
-        class="btn btn-sm btn-danger" translate>
-      Closed
+          class="btn btn-sm btn-default" translate>
+        <i class="fa fa-toggle-off"></i>
+        Close
       </button>
       <button ng-if="!item.speaker_list_closed" ng-click="closeList(true)"
-        class="btn btn-sm btn-success" translate>
-      Opened
+          class="btn btn-sm btn-default" translate>
+        <i class="fa fa-toggle-on"></i>
+        Open
       </button>
     </span>
-  <!-- TODO: project list
-       ng-class="{ 'btn-primary': item.isListOfSpeakersProjected() }"-->
-  <a os-perms="core.can_manage_projector" class="btn btn-default btn-sm"
-      ng-click="projectListOfSpeakers()">
-    <i class="fa fa-video-camera"></i>
-    <translate>List of speakers</translate>
-  </a>
-</h2>
+  </div>
 
 <!-- TODO:
    * show only 'add me' OR 'remove me' button
 -->
-  <button class="btn btn-default btn-xs" type="button"
-      data-toggle="collapse" data-target="#old_speakers"
-      aria-expanded="false" aria-controls="collapseExample">
+  <button class="btn btn-default btn-sm" ng-click="showOldSpeakers = !showOldSpeakers">
     Show all old speakers
   </button>
-
-  <div class="collapse" id="old_speakers">
+  <div uib-collapse="!showOldSpeakers">
   <h3 translate>Old speakers:</h3>
     <ol>
       <li ng-repeat="speaker in item.speakers | filter: {end_time: '!!'}">
@@ -116,3 +118,4 @@
         <translate>Stop current speaker</translate>
       </button>
   </div>
+</div>

openslides/agenda/static/templates/agenda/item-form.html

@@ -1,51 +0,0 @@
-<h1 ng-if="item.id" translate>Edit agenda item</h1>
-<h1 ng-if="!item.id" translate>New agenda item</h1>
-
-<div id="submenu">
-  <a ui-sref="agenda.item.list" class="btn btn-sm btn-default">
-    <i class="fa fa-angle-double-left fa-lg"></i>
-    <translate>Back to overview</translate>
-  </a>
-</div>
-
-<form name="agendaItemForm">
-  <div class="form-group">
-    <label for="inputNumber" translate>Number</label>
-    <input type="text" ng-model="item.item_number" class="form-control" name="inputNumber">
-  </div>
-  <div class="form-group">
-    <label for="inputTitle" translate>Title</label>
-    <input type="text" ng-model="item.title" class="form-control" name="inputTitle" required>
-  </div>
-  <div class="form-group">
-    <label for="textareaDesciption" translate>Text</label>
-    <textarea ng-model="item.text" class="form-control" name="textareaText" />
-  </div>
-  <div class="form-group">
-    <label for="textareaComment" translate>Comment</label>
-    <textarea ng-model="item.comment" class="form-control" name="textareaComment" />
-  </div>
-  <div class="form-group">
-    <label for="inputDuration" translate>Duration</label>
-    <input type="text" ng-model="item.duration" class="form-control" name="inputDuration">
-  </div>
-  <div class="form-group">
-    <label for="selectType" translate>Type</label>
-    <select ng-options="type.value as type.display_name for type in types"
-        ng-model="item.type" class="form-control" name="selectType">
-    </select>
-  </div>
-  <div class="form-group">
-    <label for="selectTags" translate>Tags</label>
-    <select multiple ng-options="tag.id as tag.name for tag in tags"
-        ng-model="item.tags_id" class="form-control" name="selectTags">
-    </select>
-  </div>
-
-  <button type="submit" ng-click="save(item)" class="btn btn-primary" translate>
-    Save
-  </button>
-  <button ui-sref="agenda.item.list" class="btn btn-default" translate>
-    Cancel
-  </button>
-</form>

openslides/agenda/static/templates/agenda/item-import.html

@@ -1,13 +1,17 @@
- <h1 translate>Import agenda items</h1>
-
-<div id="submenu">
+<div class="header">
+  <div class="title">
+    <div class="submenu">
       <a ui-sref="agenda.item.list" class="btn btn-sm btn-default">
         <i class="fa fa-angle-double-left fa-lg"></i>
         <translate>Back to overview</translate>
       </a>
+    </div>
+    <h1 translate>Import agenda items</h1>
+  </div>
 </div>
 
-<h2 translate>Import by copy/paste</h2>
+<div class="details">
+<h3 translate>Import by copy/paste</h3>
 <p translate>Copy and paste your agenda item titles in this textbox.
 Keep each item in a single line.</p>
 
@@ -28,7 +32,7 @@ Keep each item in a single line.</p>
 
 <hr>
 
-<h2 translate>Import by CSV file</h2>
+<h3 translate>Import by CSV file</h3>
 <p translate>Select a CSV file to import agenda items!
 
 <p translate>Please note:</p>
@@ -86,3 +90,4 @@ Keep each item in a single line.</p>
       </button>
     </div>
 </div>
+</div>

openslides/agenda/static/templates/agenda/item-list.html

@@ -1,6 +1,6 @@
-<h1 translate>Agenda</h1>
-
-<div id="submenu">
+<div class="header">
+  <div class="title">
+    <div class="submenu">
       <a ng-click="newDialog()" os-perms="agenda.can_manage" class="btn btn-primary btn-sm">
         <i class="fa fa-plus fa-lg"></i>
         <translate>New</translate>
@@ -21,76 +21,90 @@
         <i class="fa fa-file-pdf-o fa-lg"></i>
         <translate>PDF</translate>
       </a>
+    </div>
+    <h1 translate>Agenda</h1>
+  </div>
 </div>
 
-
-<div class="row">
-  <div class="col-sm-8">
+<div class="details">
+  <div class="row">
+    <div class="col-sm-6">
       <form class="form-inline">
         <!-- delete mode -->
-      <div os-perms-lite="agenda.can_manage" class="form-group">
-        <label for="deleteSwitcher" translate>Delete mode</label>
-        <switch id="deleteSwitcher" ng-model="isDeleteMode" ng-change="uncheckAll()"
-            on="{{'On'|translate}}" off="{{'Off'|translate}}"
-            class="green wide form-control">
-        </switch>
-      </div>
+        <button os-perms-lite="agenda.can_manage" class="btn btn-default"
+            ng-click="isDeleteMode = !isDeleteMode; uncheckAll()">
+          <i class="fa fa-check-square-o"></i>
+          <translate>Select</translate>...
+        </button>
         <div class="form-group">
           <!-- project agenda button -->
-        <a ng-show="!isDeleteMode" os-perms="core.can_manage_projector"
-            class="btn btn-default btn-sm form-control"
+          <a os-perms="core.can_manage_projector"
+              class="btn btn-default form-control"
+              title="'Project agenda'|translate"
               ng-click="projectAgenda()"
               ng-class="{ 'btn-primary': isAgendaProjected() }">
             <i class="fa fa-video-camera"></i>
-          <translate>Project agenda</translate>
+            <translate>Agenda</translate>
           </a>
           <!-- auto numbering button -->
-        <a ng-show="!isDeleteMode" os-perms="core.can_manage_projector"
-            class="btn btn-default btn-sm form-control"
+          <a os-perms="core.can_manage_projector"
+              class="btn btn-default form-control"
               ng-click="autoNumbering()">
-          <i class="fa fa-list-ol"></i>
-          <translate>Number agenda items</translate>
+            <i class="fa fa-sort-numeric-asc"></i>
+            <translate>Auto numbering</translate>
           </a>
-        <!-- delete button -->
-        <a ng-show="isDeleteMode && (items|filter:{selected:true}).length > 0"
-            os-perms="agenda.can_manage" ng-click="delete()"
-            class="btn btn-primary btn-sm form-control">
-          <i class="fa fa-trash fa-lg"></i>
-          <translate>Delete selected items</translate>
-        </a>
-        <!-- hidden item filter -->
-        <label>
-          <input type="checkbox" ng-model="filter.noHiddenItems" ng-true-value="1" ng-false-value="">
-          <translate> Hide internal agenda items</translate>
-        </label>
-        <!-- closed filter -->
-        <label>
-          <input type="checkbox" ng-model="filter.noClosedItems" ng-true-value="false" ng-false-value="">
-          <translate> Hide closed items</translate>
-        </label>
         </div>
       </form>
     </div>
-  <div class="col-sm-4">
+    <div class="col-sm-6">
+      <div class="form-inline text-right">
+        <div class="form-group">
           <div class="input-group">
-      <div class="input-group-addon"><i class="fa fa-filter"></i></div>
+            <div class="input-group-addon"><i class="fa fa-search"></i></div>
             <input type="text" os-focus-me ng-model="filter.search" class="form-control"
-         placeholder="{{ 'Filter' | translate}}">
+               placeholder="{{ 'Search' | translate}}">
+          </div>
+        </div>
+        <button class="btn btn-default" ng-click="isFilter = !isFilter">
+          <i class="fa fa-filter"></i>
+          <translate>Filter</translate>...
+        </button>
+      </div>
+    </div>
+  </div>
+  <div uib-collapse="isFilter" class="row">
+    <div class="col-sm-12 text-right">
+      <!-- hidden item filter -->
+      <input type="checkbox" ng-model="filter.noHiddenItems" ng-true-value="1" ng-false-value="">
+      <translate> Hide internal agenda items</translate>
+      <!-- closed filter -->
+      <input type="checkbox" ng-model="filter.noClosedItems" ng-true-value="false" ng-false-value="">
+      <translate> Hide closed items</translate>
+    </div>
+  </div>
+  <div uib-collapse="!isDeleteMode" class="row spacer">
+    <div class="col-sm-12 text-left">
+      <!-- delete button -->
+      <a ng-show="isDeleteMode"
+          os-perms="agenda.can_manage" ng-click="delete()"
+          class="btn btn-primary">
+        <i class="fa fa-trash fa-lg"></i>
+        <translate>Delete selected items</translate>
+      </a>
     </div>
   </div>
-</div>
 
-<i>
+  <i class="spacer">
     {{ items.length }} {{ "items" | translate }}<span ng-if="(items|filter:{selected:true}).length > 0">,
     {{(items|filter:{selected:true}).length}} {{ "selected" | translate }}</span>
-</i>
-<table class="table table-striped table-bordered table-hover">
+  </i>
+  <table class="table table-striped table-bordered table-hover">
     <thead>
       <tr>
         <!-- projector column -->
-      <th ng-show="!isDeleteMode" os-perms="core.can_manage_projector" class="firstColumn"></th>
+        <th ng-show="!isDeleteMode" os-perms="core.can_manage_projector" class="minimum"></th>
         <!-- delete selection column -->
-      <th ng-show="isDeleteMode" os-perms-lite="agenda.can_manage" class="firstColumn deleteColumn"
+        <th ng-show="isDeleteMode" os-perms-lite="agenda.can_manage" class="minimum deleteColumn"
             ng-click="$event.stopPropagation();">
           <input type="checkbox" ng-model="selectedAll" ng-change="checkAll()">
         <!-- agenda item column -->
@@ -192,4 +206,5 @@
               <a href="" ng-click="edit(item)" class="pull-right"><translate>Edit</translate>...</a>
             </div>
           </form>
-</table>
+  </table>
+</div>

openslides/agenda/static/templates/agenda/item-sort.html

@@ -1,18 +1,23 @@
-<h1 translate>Sort agenda</h1>
-
-<div id="submenu">
+<div class="header">
+  <div class="title">
+    <div class="submenu">
       <a ui-sref="agenda.item.list" class="btn btn-sm btn-default">
         <i class="fa fa-angle-double-left fa-lg"></i>
         <translate>Back to overview</translate>
       </a>
+    </div>
+    <h1 translate>Sort agenda</h1>
+  </div>
 </div>
 
-<p translate>Drag and drop items to change the order of the agenda. Your modification will be saved directly.</p>
+<div class="details">
+  <p class="lead" translate>Drag and drop items to change the order of the agenda. Your modification will be saved directly.</p>
 
-<div ui-tree callbacks="treeOptions">
+  <div ui-tree callbacks="treeOptions">
     <ol ui-tree-nodes="" ng-model="items" id="tree-root">
       <li ng-repeat="item in items" ui-tree-node ng-include="'nodes_renderer.html'">
     </ol>
+  </div>
 </div>
 
 

openslides/assignments/static/js/assignments/site.js

@@ -319,14 +319,17 @@ angular.module('OpenSlidesApp.assignments.site', ['OpenSlidesApp.assignments'])
             poll.DSDestroy();
         }
         // edit poll dialog
-        $scope.editPollDialog = function (poll) {
+        $scope.editPollDialog = function (poll, ballot) {
             ngDialog.open({
                 template: 'static/templates/assignments/assignmentpoll-form.html',
                 controller: 'AssignmentPollUpdateCtrl',
                 className: 'ngdialog-theme-default',
                 resolve: {
-                    assignmentpoll: function(AssignmentPoll) {
+                    assignmentpoll: function (AssignmentPoll) {
                         return AssignmentPoll.find(poll.id);
+                    },
+                    ballot: function () {
+                        return ballot;
                     }
                 }
             });
@@ -394,9 +397,11 @@ angular.module('OpenSlidesApp.assignments.site', ['OpenSlidesApp.assignments'])
     'gettext',
     'AssignmentPoll',
     'assignmentpoll',
-    function($scope, $state, gettext, AssignmentPoll, assignmentpoll) {
+    'ballot',
+    function($scope, $state, gettext, AssignmentPoll, assignmentpoll, ballot) {
         // set initial values for form model
         $scope.model = assignmentpoll;
+        $scope.ballot = ballot;
         $scope.formFields = [];
         // add dynamic form fields
         assignmentpoll.options.forEach(function(option) {

openslides/assignments/static/templates/assignments/assignment-detail.html

@@ -1,6 +1,6 @@
-<h1>{{ assignment.title }}</h1>
-
-<div id="submenu">
+<div class="header">
+  <div class="title">
+    <div class="submenu">
       <a ui-sref="assignments.assignment.list" class="btn btn-sm btn-default">
         <i class="fa fa-angle-double-left fa-lg"></i>
         <translate>Back to overview</translate>
@@ -27,23 +27,27 @@
           title="{{ 'Edit' | translate}}">
         <i class="fa fa-pencil"></i>
       </a>
+    </div>
+    <h1>{{ assignment.title }}</h1>
+    <h2 translate>Election</h2>
+  </div>
 </div>
 
+<div class="details">
+  <h3 translate>Description</h3>
+  <div class="white-space-pre-line">{{ assignment.description }}</div>
 
-<h3 translate>Description</h3>
-<div class="white-space-pre-line">{{ assignment.description }}</div>
-
-<h3 translate>Candidates</h3>
-<ol>
+  <h3 translate>Candidates</h3>
+  <ol>
     <li ng-repeat="related_user in assignment.assignment_related_users" ng-if="related_user.status == 1">
       <a ui-sref="users.user.detail({id: related_user.user_id})">{{ related_user.user.get_full_name() }}</a>
       <button os-perms="assignments.can_manage" ng-click="removeCandidate(related_user.user_id)"
           class="btn btn-default btn-xs">
         <i class="fa fa-times"></i>
       </button>
-</ol>
+  </ol>
 
-<div class="form-group">
+  <div class="form-group">
     <alert ng-show="alert.show" type="{{ alert.type }}" ng-click="alert={}" close="alert={}">
       {{alert.msg}}
     </alert>
@@ -71,18 +75,18 @@
         <i class="fa fa-minus"></i>
         <translate>Remove me</translate>
       </button>
-</div>
+  </div>
 
-<h3 translate>Election result</h3>
-<button os-perms="assignments.can_manage" ng-click="createBallot()" class="btn btn-default btn-sm">
+  <h3 translate>Election result</h3>
+  <button os-perms="assignments.can_manage" ng-click="createBallot()" class="btn btn-default btn-sm">
     <i class="fa fa-bar-chart fa-lg"></i>
     <translate>New ballot</translate>
-</button>
+  </button>
 
-<uib-tabset class="spacer">
+  <uib-tabset class="spacer">
     <uib-tab ng-repeat="poll in assignment.polls" heading="Ballot {{$index+1}}">
       <div os-perms="assignments.can_manage" class="spacer">
-      <button ng-click="editPollDialog(poll)"
+        <button ng-click="editPollDialog(poll, $index+1)"
             class="btn btn-default btn-sm">
           <i class="fa fa-pencil"></i>
           <translate>Edit</translate>
@@ -123,4 +127,5 @@
         Votes cast:  {{ poll.votescast }}
       </div>
     </uib-tab>
-</uib-tabset>
+  </uib-tabset>
+</div>

openslides/assignments/static/templates/assignments/assignment-list.html

@@ -1,6 +1,6 @@
-<h1 translate>Elections</h1>
-
-<div id="submenu">
+<div class="header">
+  <div class="title">
+    <div class="submenu">
       <a ng-click="newDialog()" os-perms="assignments.can_manage" class="btn btn-primary btn-sm">
         <i class="fa fa-plus fa-lg"></i>
         <translate>New</translate>
@@ -13,50 +13,72 @@
         <i class="fa fa-file-pdf-o fa-lg"></i>
         <translate>PDF</translate>
       </a>
+    </div>
+    <h1 translate>Elections</h1>
+  </div>
 </div>
 
-<div class="row form-group">
-  <div class="col-sm-8">
+<div class="details">
+  <div class="row form-group">
+    <div class="col-sm-6">
       <form class="form-inline">
         <!-- delete mode -->
-      <div os-perms-lite="assignments.can_manage" class="form-group">
-        <label for="deleteSwitcher" translate>Delete mode</label>
-        <switch id="deleteSwitcher" ng-model="isDeleteMode" ng-change="uncheckAll()"
-            on="{{'On'|translate}}" off="{{'Off'|translate}}"
-            class="green wide form-control">
-        </switch>
+        <button os-perms-lite="assignments.can_manage" class="btn btn-default"
+            ng-click="isDeleteMode = !isDeleteMode; uncheckAll()">
+          <i class="fa fa-check-square-o"></i>
+          <translate>Select</translate>...
+        </button>
+      </form>
     </div>
-      <!-- delete button -->
-      <a ng-show="isDeleteMode && (assignments|filter:{selected:true}).length > 0"
-          os-perms="assignments.can_manage" ng-click="deleteMultiple()"
-          class="btn btn-primary btn-sm form-control">
-        <i class="fa fa-trash fa-lg"></i>
-        <translate>Delete selected elections</translate>
-      </a>
+    <div class="col-sm-6">
+      <div class="form-inline text-right">
+        <div class="form-group">
+          <div class="input-group">
+            <div class="input-group-addon"><i class="fa fa-search"></i></div>
+            <input type="text" os-focus-me ng-model="filter.search" class="form-control"
+               placeholder="{{ 'Search' | translate}}">
+          </div>
+        </div>
+        <button class="btn btn-default" ng-click="isFilter = !isFilter">
+          <i class="fa fa-filter"></i>
+          <translate>Filter</translate>...
+        </button>
+      </div>
+    </div>
+  </div>
+  <div uib-collapse="!isFilter" class="row">
+    <div class="col-sm-6 text-right"></div>
+    <div class="col-sm-6 text-right">
       <!-- phase filter -->
-      &nbsp;
       <select ng-model="phaseFilter" class="form-control" id="phaseFilter">
         <option value="" translate>--- Select phase ---</option>
         <option ng-repeat="phase in phases" value="{{ phase.value }}">{{ phase.display_name }}</option>
       </select>
-    </form>
-  </div>
-  <div class="col-sm-4">
-    <div class="input-group">
-      <div class="input-group-addon"><i class="fa fa-filter"></i></div>
-      <input type="text" os-focus-me ng-model="filter.search" class="form-control"
-         placeholder="{{ 'Filter' | translate}}">
     </div>
   </div>
-</div>
+  <div uib-collapse="!isDeleteMode" class="row spacer">
+    <div class="col-sm-12 text-left">
+      <!-- delete button -->
+      <a ng-show="isDeleteMode"
+          os-perms="assignments.can_manage" ng-click="deleteMultiple()"
+          class="btn btn-primary">
+        <i class="fa fa-trash fa-lg"></i>
+        <translate>Delete selected elections</translate>
+      </a>
+    </div>
+  </div>
 
-<table class="table table-striped table-bordered table-hover">
+  <i class="spacer">
+    {{ assignments.length }} {{ "elections" | translate }}<span ng-if="(assignments|filter:{selected:true}).length > 0">,
+    {{(assignments|filter:{selected:true}).length}} {{ "selected" | translate }}</span>
+  </i>
+  <table class="table table-striped table-bordered table-hover">
     <thead>
       <tr>
         <!-- projector column -->
-      <th ng-show="!isDeleteMode" os-perms="core.can_manage_projector" class="firstColumn">
+        <th ng-show="!isDeleteMode" os-perms="core.can_manage_projector" class="minimum">
         <!-- delete selection column -->
-      <th ng-show="isDeleteMode" os-perms-lite="assignments.can_manage" class="firstColumn deleteColumn">
+        <th ng-show="isDeleteMode" os-perms-lite="assignments.can_manage" class="minimum deleteColumn">
           <input type="checkbox" ng-model="selectedAll" ng-change="checkAll()">
         <th ng-click="toggleSort('title')" class="sortable">
           <translate>Title</translate>
@@ -142,4 +164,5 @@
               <a href="" ng-click="editDialog(assignment)"
                   class="pull-right" translate>Edit election...</a>
             </div>
-</table>
+  </table>
+</div>

openslides/assignments/static/templates/assignments/assignmentpoll-form.html

@@ -1,4 +1,4 @@
-<h1 translate>Update ballot</h1>
+<h1 translate>Ballot {{ ballot }}</h1>
 
 <form name="assignmentpollForm" ng-submit="save(model)">
   <formly-form model="model" fields="formFields">

openslides/core/signals.py

@@ -84,7 +84,7 @@ def setup_general_config(sender, **kwargs):
         label=ugettext_lazy('Show logo on projector'),
         help_text=ugettext_lazy(
             'You can replace the logo. Just copy a file to '
-            '"static/img/logo.png" in your OpenSlides data path.'),
+            '"static/img/logo-projector.png" in your OpenSlides data path.'),
         weight=150,
         group=ugettext_lazy('Projector'))
 

openslides/core/static/js/core/base.js

@@ -4,14 +4,12 @@
 
 // The core module used for the OpenSlides site and the projector
 angular.module('OpenSlidesApp.core', [
-    'angular-loading-bar',
     'js-data',
     'gettext',
     'ngAnimate',
     'ngSanitize',  // TODO: only use this in functions that need it.
     'ui.bootstrap',
     'ui.tree',
-    'uiSwitch',
 ])
 
 .config(['DSProvider', 'DSHttpAdapterProvider', function(DSProvider, DSHttpAdapterProvider) {

openslides/core/static/js/core/site.js

@@ -6,6 +6,7 @@
 angular.module('OpenSlidesApp.core.site', [
     'OpenSlidesApp.core',
     'ui.router',
+    'angular-loading-bar',
     'formly',
     'formlyBootstrap',
     'ngBootbox',
@@ -14,7 +15,6 @@ angular.module('OpenSlidesApp.core.site', [
     'ngCsvImport',
     'ui.select',
     'luegg.directives',
-    'xeditable',
     'ckeditor',
 ])
 
@@ -73,14 +73,6 @@ angular.module('OpenSlidesApp.core.site', [
             'weight': 100,
         });
 
-        mainMenuProvider.register({
-            'ui_sref': 'core.customslide.list',
-            'img_class': 'video-camera',
-            'title': 'Projector',
-            'weight': 110,
-            'perm': 'core.can_see_projector',
-        });
-
         mainMenuProvider.register({
             'ui_sref': 'config',
             'img_class': 'cog',
@@ -288,11 +280,6 @@ angular.module('OpenSlidesApp.core.site', [
     });
 })
 
-// options for angular-xeditable
-.run(function(editableOptions) {
-    editableOptions.theme = 'bs3';
-})
-
 // angular formly config options
 .run([
     'formlyConfig',
@@ -367,6 +354,17 @@ angular.module('OpenSlidesApp.core.site', [
     };
 })
 
+// Projector Sidebar Controller
+.controller('ProjectorSidebarCtrl', [
+    '$scope',
+    function ($scope) {
+        $scope.isProjectorSidebar = false;
+        $scope.showProjectorSidebar = function (show) {
+            $scope.isProjectorSidebar = show;
+        };
+    }
+])
+
 // Version Controller
 .controller('VersionCtrl', [
     '$scope',

openslides/core/static/templates/config.html

@@ -1,6 +1,11 @@
-<h1 translate>Settings</h1>
+<div class="header">
+  <div class="title">
+    <h1 translate>Settings</h1>
+  </div>
+</div>
 
-<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
+<div class="details">
+  <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
     <!-- generate config groups -->
     <div ng-repeat="group in configGroups">
       <div class="panel panel-default">
@@ -24,5 +29,6 @@
         </div> <!-- group.name -->
       </div>
     </div>
+  </div>
 </div>
 

openslides/core/static/templates/core/customslide-detail.html

@@ -1,6 +1,6 @@
-<h1>{{ customslide.title }}</h1>
-
-<div id="submenu">
+<div class="header">
+  <div class="title">
+    <div class="submenu">
       <a ui-sref="agenda.item.list" class="btn btn-sm btn-default">
         <i class="fa fa-angle-double-left fa-lg"></i>
         <translate>Back to overview</translate>
@@ -17,7 +17,12 @@
           title="{{ 'Project agenda item' | translate }}">
         <i class="fa fa-video-camera"></i>
       </a>
+    </div>
+    <h1>{{ customslide.title }}</h1>
+    <h2 translate>Agenda item</h2>
+  </div>
 </div>
 
-<div ng-bind-html="customslide.text"></div>
-
+<div class="details">
+  <div ng-bind-html="customslide.text"></div>
+</div>

openslides/core/static/templates/core/customslide-form.html

@@ -1,5 +1,5 @@
 <h1 ng-if="model.id" translate>Edit agenda item</h1>
-<h2 ng-if="!model.id" translate>New agenda item</h2>
+<h1 ng-if="!model.id" translate>New agenda item</h1>
 
 <form name="customslideForm" ng-submit="save(model)">
   <formly-form model="model" fields="formFields">

openslides/core/static/templates/core/customslide-list.html

@@ -1,55 +0,0 @@
-<h1 translate>Custom slides</h1>
-
-<div id="submenu">
-  <a ui-sref="core.customslide.create" os-perms="core.can_manage_projector" class="btn btn-primary btn-sm">
-    <i class="fa fa-plus fa-lg"></i>
-    <translate>New</translate>
-  </a>
-</div>
-
-
-
-<div class="row form-group">
-  <div class="col-sm-8" os-perms="core.can_manage_projector">
-    <p><input type="text" os-focus-me ng-model="filter.search" class="form-control"
-        placeholder="{{ 'Filter' | translate}}">
-    <table class="table table-striped table-bordered table-hover">
-      <thead>
-        <tr>
-          <th ng-click="toggleSort('title')" class="sortable">
-            <translate>Title</translate>
-            <i class="pull-right fa" ng-show="sortColumn === 'title' && header.sortable != false"
-                ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
-            </i>
-          <th os-perms="core.can_manage_projector" class="minimum">
-            <translate>Actions</translate>
-      <tbody>
-        <tr ng-repeat="customslide in customslides | filter: filter.search |
-            orderBy: sortColumn:reverse" ng-class="{ 'activeline': customslide.isProjected() }">
-          <td><a ui-sref="core.customslide.detail({id: customslide.id})">{{ customslide.title }}</a>
-          <td os-perms="core.can_manage_projector" class="nobr">
-            <!-- project -->
-            <a os-perms="core.can_manage_projector" class="btn btn-default btn-sm" ng-class="{ 'btn-primary': customslide.isProjected() }"
-                ng-click="customslide.project()"
-                title="{{ 'Project user' | translate }}">
-              <i class="fa fa-video-camera"></i>
-            </a>
-            <!-- edit -->
-            <a ui-sref="core.customslide.detail.update({id: customslide.id })"
-                class="btn btn-default btn-sm"
-                title="{{ 'Edit' | translate}}">
-              <i class="fa fa-pencil"></i>
-            </a>
-            <!-- delete -->
-            <a ng-click="delete(customslide)" class="btn btn-danger btn-sm"
-                title="{{ 'Delete' | translate }}">
-              <i class="fa fa-trash-o"></i>
-            </a>
-    </table>
-  </div>
-  <div class="col-sm-4">
-    <div class="well">
-      <div ng-include src="'static/templates/core/projector-controls.html'"></div>
-    </div>
-  </div>
-</div>

openslides/core/static/templates/core/login-form.html

@@ -1,6 +1,6 @@
 <form ng-submit="login(username, password)">
   <div class="modal-header">
-    <img src="/static/img/logo-login.png" alt="OpenSlides" class="center-block">
+    <img src="/static/img/openslides-logo.png" alt="OpenSlides" class="login-logo center-block">
   </div>
   <div class="modal-body">
     <uib-alert ng-repeat="alert in alerts" type="{{ alert.type }}" close="closeAlert($index)">

openslides/core/static/templates/core/projector-controls.html

@@ -1,13 +1,20 @@
-<!-- projector live view -->
-<h3 translate>Projector</h3>
-<a ui-sref="projector" target="_blank">
+
+<div class="details">
+
+  <div ng-controller="ProjectorControlCtrl">
+    <!-- live view -->
+    <div class="section" os-perms-lite="core.can_see_projector">
+      <a href="#" ng-click="isLiveView = !isLiveView">
+        <i class="fa toggle-icon" ng-class="isLiveView ? 'fa-angle-up' : 'fa-angle-down'"></i>
+        <h4 translate>Live view</h4>
+      </a>
+      <div uib-collapse="!isLiveView">
+        <a ui-sref="projector" target="_blank">
           <div id="iframewrapper">
             <iframe id="iframe" src="/projector" frameborder="0"></iframe>
             <div id="iframeoverlay"></div>
           </div>
-</a>
-
-<div ng-controller="ProjectorControlCtrl">
+        </a>
         <!-- projector control buttons -->
         <p os-perms="core.can_manage_projector">
           <a ng-click="editCurrentSlide()"
@@ -45,10 +52,18 @@
           </a>
           <span ng-class="{ 'notNull': scrollLevel != 0 }">{{ scrollLevel }}</span>
         </p>
+      </div>
+    </div>
 
     <!-- countdowns -->
-  <div os-perms-lite="core.can_manage_projector">
-    <div ng-repeat="countdown in countdowns | orderBy: 'index'" id="{{countdown.uuid}}" class="countdown panel panel-default">
+    <div class="section" os-perms-lite="core.can_manage_projector">
+      <a href="#" ng-click="isCountdowns = !isCountdowns">
+        <i class="fa toggle-icon" ng-class="isCountdowns ? 'fa-angle-up' : 'fa-angle-down'"></i>
+        <h4 translate>Countdowns</h4>
+      </a>
+      <div uib-collapse="!isCountdowns">
+        <div ng-repeat="countdown in countdowns | orderBy: 'index'" id="{{countdown.uuid}}"
+            class="countdown panel panel-default">
           <div class="panel-heading">
             <span ng-if="countdown.description">{{ countdown.description }}</span>
             <span ng-if="!countdown.description">Countdown {{ countdown.index +1 }}</span>
@@ -129,10 +144,16 @@
           <i class="fa fa-plus"></i> <translate>Add new countdown</translate>
         </a>
       </div>
+    </div>
+
 
     <!-- messages -->
-  <div os-perms-lite="core.can_manage_projector">
-    <h3 translate>Messages</h3>
+    <div class="section" os-perms="core.can_manage_projector">
+      <a href="#" ng-click="isMessages = !isMessages">
+        <i class="fa toggle-icon" ng-class="isMessages ? 'fa-angle-up' : 'fa-angle-down'"></i>
+        <h4 translate>Messages</h4>
+      </a>
+      <div uib-collapse="!isMessages">
         <div ng-repeat="message in messages | orderBy: 'index'" id="{{message.uuid}}" class="message panel panel-default">
           <div class="panel-body"
               ng-class="{ 'projected': message.visible }">
@@ -174,4 +195,7 @@
           <i class="fa fa-plus"></i> <translate>Add new message</translate>
         </a>
       </div>
+    </div>
+  </div><!-- end div ProjectorControlCtrl -->
+
 </div>

openslides/core/static/templates/core/tag-form.html

@@ -1,13 +1,17 @@
-<h1 ng-if="tag.id" translate>Edit tag</h1>
-<h1 ng-if="!tag.id" translate>New tag</h1>
-
-<div id="submenu">
+<div class="header">
+  <div class="title">
+    <div class="submenu">
       <a ui-sref="core.tag.list" class="btn btn-sm btn-default">
         <i class="fa fa-angle-double-left fa-lg"></i>
         <translate>Back to overview</translate>
       </a>
+    </div>
+    <h1 ng-if="tag.id" translate>Edit tag</h1>
+    <h1 ng-if="!tag.id" translate>New tag</h1>
+  </div>
 </div>
 
+<div class="details">
 <form name="tagForm">
   <div class="form-group">
     <label for="inputName" translate>Name</label>
@@ -21,3 +25,4 @@
     Cancel
   </button>
 </form>
+</div>

openslides/core/static/templates/core/tag-list.html

@@ -1,21 +1,25 @@
-<h1 translate>Tags</h1>
-
-<div id="submenu">
+<div class="header">
+  <div class="title">
+    <div class="submenu">
       <a ui-sref="core.tag.create" os-perms="core.can_manage_tags" class="btn btn-primary btn-sm">
         <i class="fa fa-plus fa-lg"></i>
         <translate>New</translate>
       </a>
+    </div>
+    <h1 translate>Tags</h1>
+  </div>
 </div>
 
-<div class="row form-group">
+<div class="details">
+  <div class="row form-group">
     <div class="col-sm-8"></div>
     <div class="col-sm-4">
       <input type="text" os-focus-me ng-model="filter.search" class="form-control"
           placeholder="{{ 'Filter' | translate}}">
     </div>
-</div>
+  </div>
 
-<table class="table table-striped table-bordered table-hover">
+  <table os-perms="core.can_manage_tags" class="table table-striped table-bordered table-hover">
     <thead>
       <tr>
         <th ng-click="toggleSort('name')" class="sortable">
@@ -23,22 +27,17 @@
           <i class="pull-right fa" ng-show="sortColumn === 'name' && header.sortable != false"
               ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
           </i>
-      <th os-perms="core.can_manage_tags" class="minimum">
-        <translate>Actions</translate>
     <tbody>
       <tr ng-repeat="tag in tags | filter: filter.search |
           orderBy: sortColumn:reverse">
-      <td>{{ tag.name }}
-      <td os-perms="core.can_manage_tags" class="nobr">
-        <!-- edit -->
-        <a ui-sref="core.tag.detail.update({id: tag.id })"
-            class="btn btn-default btn-sm"
-            title="{{ 'Edit' | translate}}">
-          <i class="fa fa-pencil"></i>
-        </a>
-        <!-- delete -->
-        <a ng-click="delete(tag)"class="btn btn-danger btn-sm"
-            title="{{ 'Delete' | translate }}">
-          <i class="fa fa-trash-o"></i>
-        </a>
-</table>
+        <td ng-mouseover="tag.hover=true" ng-mouseleave="tag.hover=false">
+          <strong>{{ tag.name }}</strong>
+          <div class="hoverActions" ng-class="{'hiddenDiv': !tag.hover}">
+            <a ui-sref="core.tag.detail.update({id: tag.id })" translate>Edit</a> |
+            <!-- TODO: translate confirm message -->
+            <a href="" class="text-danger"
+              ng-bootbox-confirm="Are you sure you want to delete <b>{{ tag.name }}</b>?"
+              ng-bootbox-confirm-action="delete(tag)" translate>Delete</a>
+          </div>
+  </table>
+</div>

openslides/core/static/templates/dashboard.html

@@ -1,3 +1,9 @@
-<h1>{{ config('projector_welcome_title') }}</h1>
+<div class="header">
+  <div class="title">
+    <h1>{{ config('projector_welcome_title') }}</h1>
+  </div>
+</div>
 
-{{ config('projector_welcome_text') }}
+<div class="details">
+  {{ config('projector_welcome_text') }}
+</div>

openslides/core/static/templates/index.html

@@ -5,29 +5,33 @@
 <base href="/">
 <title>OpenSlides</title>
 <meta name="description" content="">
-<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
 <link rel="stylesheet" href="static/css/openslides-libs.css">
 <link rel="stylesheet" href="static/css/app.css">
+<link rel="icon" href="/static/img/favicon.png">
 <script src="static/js/openslides-libs.js"></script>
 <script src="static/ckeditor/ckeditor.js"></script>
+<div id="wrapper">
 
-<!-- Navbar -->
-<nav id="header" class="navbar navbar-inverse">
-  <div class="container-fluid">
-    <div class="navbar-header">
-      <a ui-sref="dashboard" class="navbar-brand">
-        <img id="logo" src="/static/img/logo.png" alt="OpenSlides" />
+<!-- Header -->
+<div id="header">
+  <div class="containerOS">
+    <!-- Logo -->
+    <div class="title">
+      <a ui-sref="dashboard">
+        <img src="/static/img/openslides-logo-dark.png" alt="Logo" height="35">
       </a>
-      <span class="navbar-text optional">{{ config('general_event_name') }}</span>
+      <!-- TODO: <span class="navbar-text optional">{{ config('general_event_name') }}</span>-->
     </div>
-    <div class="navbar-right" ng-controller="userMenu">
+
+    <!-- user specific header (chat, user settings / login, language)-->
+    <div class="user" ng-controller="userMenu">
       <div class="btn-group">
-        <!-- Logout / user setttings button -->
         <div ng-if="operator.isAuthenticated()">
 
           <!-- chatbox -->
           <div ng-controller="ChatMessageCtrl" os-perms="core.can_use_chat" class="inline">
-            <button ng-click="openChatbox()" class="btn btn-default">
+            <button ng-click="openChatbox()" class="btn btn-sm btn-default">
               <i class="fa fa-comment"></i>
               <translate>Chat</translate>
               <span ng-if="unreadMessages > 0 && chatboxIsCollapsed" class="badge">
@@ -60,7 +64,7 @@
 
           <!-- user settings / logout button -->
           <div class="btn-group" uib-dropdown>
-            <button type="button" class="btn btn-default" uib-dropdown-toggle>
+            <button type="button" class="btn btn-sm btn-default" uib-dropdown-toggle>
               <i class="fa fa-user"></i>
               <span class="optional-small">{{ operator.user.get_short_name() }}</span>
               <span class="caret"></span>
@@ -87,7 +91,7 @@
         </div>
         <!-- Login button -->
         <div ng-if="!operator.isAuthenticated()">
-          <button class="btn btn-default" ng-click="openLoginForm()">
+          <button class="btn btn-sm btn-default" ng-click="openLoginForm()">
             <i class="fa fa-sign-in"></i>
             <translate>Login</translate>
           </button>
@@ -96,11 +100,11 @@
 
       <!-- language switcher -->
       <div class="btn-group" ng-controller="LanguageCtrl" uib-dropdown>
-        <button class="btn btn-default" uib-dropdown-toggle>
+        <button class="btn btn-sm btn-default" uib-dropdown-toggle>
           <i class="fa fa-flag"></i>
           <span class="caret"></span>
         </button>
-        <ul class="uib-dropdown-menu uib-dropdown-menu-right" role="menu" aria-labelledby="single-button">
+        <ul class="uib-dropdown-menu pull-right" role="menu" aria-labelledby="single-button">
           <li>
             <a href="" ng-click="switchLanguage('en')">
               <i class="fa fa-flag"></i>
@@ -118,45 +122,70 @@
             </a>
         </ul>
       </div>
-    </div>
-  </div>
-</nav>
 
-<!-- Container -->
-<div id="container" class="container-fluid">
-  <div class="row">
+    </div>
+  </div>
+</div><!--end header-->
+
+<!-- Navbar -->
+<div id="nav">
+  <div class="containerOS">
+    <div class="navbar">
+      <div class="button"><a href="#"><i class="fa fa-bars"></i></a></div>
       <!-- Main menu -->
-    <div id="main-menu" class="col-md-2 leftmenu lefticon">
       <ul ng-controller="MainMenuCtrl">
-        <li ng-repeat="element in elements">
+        <li ng-repeat="element in elements" ui-sref-active="active">
           <a ui-sref="{{ element.ui_sref }}">
-            <span class="ico"><i class="fa fa-{{ element.img_class }} fa-lg"></i></span>
-            <span class="text" translate>{{ element.title }}</span>
+            <i class="fa fa-{{ element.img_class }}"></i>
+            <translate>{{ element.title }}</translate>
           </a>
       </ul>
-    </div><!--/#main-menu-->
-    <!-- Content -->
-    <div id="content" class="col-md-7">
-      <div class="row">
-        <div class="col-md-12">
-          <div ui-view></div>
     </div>
    </div>
-    </div><!--/#content-->
-    <div class="col-sm-3" os-perms="core.can_see_projector">
-      <div class="well">
-        <div ng-include src="'static/templates/core/projector-controls.html'"></div>
-      </div>
-    </div>
-  </div><!--/.row-->
+</div><!--end nav-->
 
-  <hr>
-  <footer>
-    <small>
+
+<!-- Content -->
+<div id="content" ng-controller="ProjectorSidebarCtrl">
+  <div class="containerOS">
+    <div class="col1" ng-class="isProjectorSidebar ? 'min' : 'max'">
+        <!-- dynamic views -->
+        <div ui-view></div>
+        <!-- footer -->
+        <div id="footer">
           &copy; Copyright by <a href="http://www.openslides.org" target="_blank">OpenSlides</a> |
           <a ui-sref="version">Version</a>
-    </small>
-  </footer>
-</div><!--/#container-->
+        </div><!--end footer-->
+    </div>
+    <div class="col2" os-perms="core.can_see_projector"
+        ng-class="isProjectorSidebar ? 'max' : 'min'">
+      <!-- sidebar maximized -->
+      <div class="projector_full" ng-if="isProjectorSidebar">
+        <div class="title" ng-click="showProjectorSidebar(false)">
+          <div class="name">
+            <i class="fa fa-caret-square-o-right"></i>
+            <translate>Projector</translate>
+          </div>
+          <div class="icon">
+            <i class="fa fa-video-camera"></i>
+          </div>
+        </div>
+        <div ng-include src="'static/templates/core/projector-controls.html'"></div>
+      </div>
+      <!-- sidebar minimized -->
+      <div class="projector_min" ng-if="!isProjectorSidebar">
+        <div class="icon">
+          <a href="" ng-click="showProjectorSidebar(true)">
+            <i class="fa fa-video-camera"></i>
+          </a>
+        </div>
+      </div>
+    </div><!--end col2-->
+
+  </div><!--end content-container--> 
+</div><!--end content--> 
+
+</div><!--end wrapper-->
+
 
 <script src="/angular_js/site/"></script>

openslides/core/static/templates/projector.html

@@ -31,7 +31,7 @@
 
 
 <div id="header">
-  <img id="logo" src="/static/img/logo.png" alt="OpenSlides" />
+  <img id="logo" src="/static/img/logo-projector.png" alt="OpenSlides" />
   <div id="eventdata">
     <div class="title">
       {{ config('general_event_name') }}

openslides/core/static/templates/version.html

@@ -1,12 +1,17 @@
-<h1 translate>Version</h1>
+<div class="header">
+  <div class="title">
+    <h1 translate>Version</h1>
+  </div>
+</div>
 
-<p>OpenSlides Version {{ core_version }}
+<div class="details">
+  <p class="lead">OpenSlides {{ core_version }}
 
-<div ng-show="plugins.length">
+  <div ng-show="plugins.length">
     <p translate>Installed plugins:</p>
     <ol>
       <li ng-repeat="plugin in plugins">
         {{ plugin.verbose_name }}: {{ plugin.version }}
     </ol>
+  </div>
 </div>
-

openslides/mediafiles/static/templates/mediafiles/mediafile-form.html

@@ -1,14 +1,18 @@
-<h1 ng-if="mediafile.id" translate>Edit file</h1>
-<h1 ng-if="!mediafile.id" translate>New file</h1>
-
-<div id="submenu">
+<div class="header">
+  <div class="title">
+    <div class="submenu">
       <a ui-sref="mediafiles.mediafile.list" class="btn btn-sm btn-default">
         <i class="fa fa-angle-double-left fa-lg"></i>
         <translate>Back to overview</translate>
       </a>
+    </div>
+    <h1 ng-if="mediafile.id" translate>Edit file</h1>
+    <h1 ng-if="!mediafile.id" translate>New file</h1>
+  </div>
 </div>
 
-<form name="mediafileForm">
+<div class="details">
+  <form name="mediafileForm">
 
     <div class="form-group">
       <div ng-if="mediafile.id">
@@ -35,4 +39,5 @@
     <button ui-sref="mediafiles.mediafile.list" class="btn btn-default" translate>
       Cancel
     </button>
-</form>
+  </form>
+</div>

openslides/mediafiles/static/templates/mediafiles/mediafile-list.html

@@ -1,21 +1,24 @@
-<h1 translate>Files</h1>
-
-<div id="submenu">
+<div class="header">
+  <div class="title">
+    <div class="submenu">
       <a ui-sref="mediafiles.mediafile.create" os-perms="mediafiles.can_upload" class="btn btn-primary btn-sm">
         <i class="fa fa-plus fa-lg"></i>
         <translate>New</translate>
       </a>
+    </div>
+    <h1 translate>Files</h1>
+  </div>
 </div>
 
-<div class="row form-group">
+<div class="details">
+  <div class="row form-group">
     <div class="col-sm-8"></div>
     <div class="col-sm-4">
       <input type="text" os-focus-me ng-model="filter.search" class="form-control"
           placeholder="{{ 'Filter' | translate }}">
     </div>
-</div>
-
-<table class="table table-striped table-bordered table-hover">
+  </div>
+  <table class="table table-striped table-bordered table-hover">
     <thead>
       <tr>
         <th ng-click="toggleSort('title_or_filename')" class="sortable">
@@ -43,7 +46,7 @@
           <i class="pull-right fa" ng-show="sortColumn === 'uploader' && header.sortable != false"
               ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
           </i>
-      <th os-perms="mediafiles.can_manage core.can_manage_projector" class="minimum">
+        <th os-perms="mediafiles.can_manage core.can_manage_projector">
           <translate>Actions</translate>
         </th>
       </tr>
@@ -75,4 +78,5 @@
           </a>
       </tr>
     </tbody>
-</table>
+  </table>
+</div>

openslides/motions/static/templates/motions/category-detail.html

@@ -1,12 +1,16 @@
-<h1>{{ category.name }}</h1>
-
-<div id="submenu">
+<div class="header">
+  <div class="title">
+    <div class="submenu">
       <a ui-sref="motions.category.list" class="btn btn-sm btn-default">
         <i class="fa fa-angle-double-left fa-lg"></i>
         <translate>Back to overview</translate>
       </a>
+    </div>
+    <h1>{{ category.name }}</h1>
+  </div>
 </div>
 
-
-<b translate>Prefix:</b>
-{{ category.prefix }}
+<div class="details">
+  <strong translate>Prefix:</strong>
+  {{ category.prefix }}
+</div>

openslides/motions/static/templates/motions/category-form.html

@@ -1,14 +1,18 @@
-<h1 ng-if="category.id" translate>Edit category</h1>
-<h1 ng-if="!category.id" translate>New category</h1>
-
-<div id="submenu">
+<div class="header">
+  <div class="title">
+    <div class="submenu">
       <a ui-sref="motions.category.list" class="btn btn-sm btn-default">
         <i class="fa fa-angle-double-left fa-lg"></i>
         <translate>Back to overview</translate>
       </a>
+    </div>
+    <h1 ng-if="category.id" translate>Edit category</h1>
+    <h1 ng-if="!category.id" translate>New category</h1>
+  </div>
 </div>
 
-<form name="groupForm">
+<div class="details">
+  <form name="groupForm">
     <div class="form-group">
       <label for="inputPrefix" translate>Prefix</label>
       <input type="text" ng-model="category.prefix" class="form-control" name="inputPrefix">
@@ -24,4 +28,5 @@
     <button ui-sref="motions.category.list" class="btn btn-default" translate>
       Cancel
     </button>
-</form>
+  </form>
+</div>

openslides/motions/static/templates/motions/category-list.html

@@ -1,6 +1,6 @@
-<h1 translate>Categories</h1>
-
-<div id="submenu">
+<div class="header">
+  <div class="title">
+    <div class="submenu">
       <a ui-sref="motions.category.create" os-perms="motions.can_manage" class="btn btn-primary btn-sm">
         <i class="fa fa-plus fa-lg"></i>
         <translate>New</translate>
@@ -9,16 +9,20 @@
         <i class="fa fa-angle-double-left fa-lg"></i>
         <translate>Back to overview</translate>
       </a>
-</div>
-
-<div class="row form-group">
-  <div class="col-sm-4 right">
-    <input type="text" os-focus-me ng-model="filter.search" class="form-control"
-        placeholder="{{ 'Filter' | translate }}">
+    </div>
+    <h1 translate>Categories</h1>
   </div>
 </div>
 
-<table class="table table-striped table-bordered table-hover">
+<div class="details">
+  <div class="row form-group">
+    <div class="col-sm-4 pull-right">
+      <input type="text" os-focus-me ng-model="filter.search" class="form-control"
+          placeholder="{{ 'Filter' | translate }}">
+    </div>
+  </div>
+
+  <table class="table table-striped table-bordered table-hover">
     <thead>
       <tr>
         <th ng-click="sortby='prefix';reverse=!reverse">
@@ -53,4 +57,5 @@
               title="{{ 'Delete' | translate }}">
             <i class="fa fa-trash-o"></i>
           </a>
-</table>
+  </table>
+</div>

openslides/motions/static/templates/motions/motion-detail.html

@@ -1,14 +1,7 @@
-<h1>
-  {{ motion.getTitle() }}
-  <small>
-    <translate>Motion</translate> {{ motion.identifier }}
-    <span ng-if="motion.versions.length > 1" >| Version {{ motion.active_version }}</span>
-  </small>
-</h1>
-
-<!-- TODO: show list of speakers controls for { motion.agenda_item } -->
-
-<div id="submenu">
+<div class="header">
+  <div class="title">
+    <!-- TODO: show list of speakers controls for { motion.agenda_item } -->
+    <div class="submenu">
       <a ui-sref="motions.motion.list" class="btn btn-sm btn-default">
         <i class="fa fa-angle-double-left fa-lg"></i>
         <translate>Back to overview</translate>
@@ -30,46 +23,25 @@
         <i class="fa fa-video-camera"></i>
       </a>
       <!-- edit -->
-  <a ng-if="motion.isAllowed('update')" ng-click="editDialog(motion)"
+      <a ng-if="motion.isAllowed('update')" ui-sref="motions.motion.detail.update({id: motion.id })"
           class="btn btn-default btn-sm"
           title="{{ 'Edit' | translate}}">
         <i class="fa fa-pencil"></i>
       </a>
+    </div>
+    <h1>{{ motion.getTitle() }}</h1>
+    <h2>
+        <translate>Motion</translate> {{ motion.identifier }}
+        <span ng-if="motion.versions.length > 1" >| Version {{ motion.active_version }}</span>
+    </h2>
+  </div>
 </div>
 
-<div class="row">
-  <div class="col-sm-8">
-    <h3 translate>Text</h3>
-    <div class="white-space-pre-line" ng-bind-html="motion.getText()"></div>
-
-    <!-- reason -->
-    <div ng-if="motion.getReason() != ''">
-      <h3 translate>Reason</h3>
-      <div class="white-space-pre-line" ng-bind-html="motion.getReason()"></div>
-    </div>
-
-    <!-- attachments
-    TODO: make 'motion.attachments' useable and itteratable in template
-    <div ng-if="motion.attachments">
-      <h3 translate>Attachments</h3>
-    </div>
-    -->
-
-    <!-- log -->
-    <button type="button" class="btn btn-default spacer" ng-click="isCollapsed = !isCollapsed" translate>
-      Show log
-    </button>
-    <div uib-collapse="isCollapsed">
-      <div class="well well-sm">
-        <ul class="list-unstyled">
-          <li ng-repeat="message in motion.log_messages">
-            <small>{{ message.message }}</small>
-      </div>
-    </div>
-  </div>
-
+<div class="meta">
+  <i class="fa toggle-icon pointer" ng-click="isMeta = !isMeta"
+    ng-class="isMeta ? 'fa-angle-down' : 'fa-angle-up'"></i>
+  <div class="row" uib-collapse="isMeta">
     <div class="col-sm-4">
-    <div class="well">
         <!-- submitters -->
         <h3 translate>Submitters</h3>
         <div ng-repeat="submitter in motion.submitters">
@@ -94,7 +66,19 @@
             <translate>Unsupport motion</translate>
           </button>
         </div>
+    </div>
+    <div class="col-sm-4">
+        <!-- Category -->
+        <h3 translate>Category</h3>
+        {{ motion.category.name }}</a>
 
+        <!-- Tags -->
+        <h3 translate>Tags</h3>
+        <span ng-repeat="tag in motion.tags">
+          {{ tag.name }}{{$last ? '' : ', '}}
+        </span>
+
+        <!-- State -->
         <h3 translate>State</h3>
         <span class="label" ng-class="'label-'+motion.state.css_class">
           {{ motion.state.name | translate }}
@@ -112,7 +96,8 @@
             </button>
           </div>
         </div>
-
+    </div>
+    <div class="col-sm-3">
         <h3 translate>Voting result</h3>
         <ol class="slimlist">
           <li ng-repeat="poll in motion.polls" class="spacer">
@@ -236,16 +221,42 @@
           <i class="fa fa-bar-chart fa-lg"></i>
           <translate>New poll</translate>
         </button>
-
-      <h3 translate>Category</h3>
-      {{ motion.category.name }}</a>
-
-      <h3 translate>Tags</h3>
-      <p ng-repeat="tag in motion.tags">
-        <span class="label label-default spacer-top">
-          {{ tag.name }}
-        </span>
-      </p>
     </div>
+    <div class="col-sm-1"></div>
+  </div>
+</div>
+
+<div class="details">
+  <div class="row">
+    <div class="col-sm-8">
+      <h3 translate>Text</h3>
+      <div class="white-space-pre-line" ng-bind-html="motion.getText()"></div>
+
+      <!-- reason -->
+      <div ng-if="motion.getReason() != ''">
+        <h3 translate>Reason</h3>
+        <div class="white-space-pre-line" ng-bind-html="motion.getReason()"></div>
+      </div>
+
+      <!-- attachments
+      TODO: make 'motion.attachments' useable and itteratable in template
+      <div ng-if="motion.attachments">
+        <h3 translate>Attachments</h3>
+      </div>
+      -->
+
+      <!-- log -->
+      <button type="button" class="btn btn-default spacer" ng-click="isCollapsed = !isCollapsed" translate>
+        Show log
+      </button>
+      <div uib-collapse="isCollapsed">
+        <div class="well well-sm">
+          <ul class="list-unstyled">
+            <li ng-repeat="message in motion.log_messages">
+              <small>{{ message.message }}</small>
+        </div>
+      </div>
+    </div>
+
   </div>
 </div>

openslides/motions/static/templates/motions/motion-list.html

@@ -1,6 +1,6 @@
-<h1 translate>Motions</h1>
-
-<div id="submenu">
+<div class="header">
+  <div class="title">
+    <div class="submenu">
       <a ng-click="newDialog()" os-perms="motions.can_create" class="btn btn-primary btn-sm">
         <i class="fa fa-plus fa-lg"></i>
         <translate>New</translate>
@@ -17,44 +17,64 @@
         <i class="fa fa-file-pdf-o fa-lg"></i>
         <translate>PDF</translate>
       </a>
+    </div>
+    <h1 translate>Motions</h1>
+  </div>
 </div>
 
-<div class="row form-group">
-  <div class="col-sm-8">
-    <form class="form-inline">
+<div class="details">
+  <div class="row">
+    <div class="col-sm-6">
       <!-- delete mode -->
-      <div os-perms-lite="motions.can_manage" class="form-group">
-        <label for="deleteSwitcher" translate>Delete mode</label>
-        <switch id="deleteSwitcher" ng-model="isDeleteMode" ng-change="uncheckAll()"
-            on="{{'On'|translate}}" off="{{'Off'|translate}}"
-            class="green wide form-control">
-        </switch>
+      <button os-perms-lite="motions.can_manage" class="btn btn-default"
+          ng-click="isDeleteMode = !isDeleteMode; uncheckAll()">
+        <i class="fa fa-check-square-o"></i>
+        <translate>Select</translate>...
+      </button>
     </div>
-      <!-- delete button -->
-      <a ng-show="isDeleteMode && (motions|filter:{selected:true}).length > 0"
-          os-perms="motions.can_manage" ng-click="deleteMultiple()"
-          class="btn btn-primary btn-sm form-control">
-        <i class="fa fa-trash fa-lg"></i>
-        <translate>Delete selected motions</translate>
-      </a>
+    <div class="col-sm-6">
+      <div class="form-inline text-right">
+        <div class="form-group">
+          <div class="input-group">
+            <div class="input-group-addon"><i class="fa fa-search"></i></div>
+            <input type="text" os-focus-me ng-model="filter.search" class="form-control"
+               placeholder="{{ 'Search' | translate}}">
+          </div>
+        </div>
+        <button class="btn btn-default" ng-click="isFilter = !isFilter">
+          <i class="fa fa-filter"></i>
+          <translate>Filter</translate>...
+        </button>
+      </div>
+    </div>
+  </div>
+  <div uib-collapse="!isFilter" class="row">
+    <div class="col-sm-6 text-right"></div>
+    <div class="col-sm-6 text-right">
       <!-- state filter -->
-      &nbsp;
       <select ng-model="stateFilter" class="form-control" id="stateFilter">
         <option value="" translate>--- Select state ---</option>
         <option ng-repeat="state in states" value="{{ state.id }}">{{ state.name }}</option>
       </select>
-    </form>
-  </div>
-  <div class="col-sm-4">
-    <div class="input-group">
-      <div class="input-group-addon"><i class="fa fa-filter"></i></div>
-      <input type="text" os-focus-me ng-model="filter.search" class="form-control"
-         placeholder="{{ 'Filter' | translate}}">
     </div>
   </div>
-</div>
+  <div uib-collapse="!isDeleteMode" class="row spacer">
+    <div class="col-sm-12 text-left">
+      <!-- delete button -->
+      <a ng-show="isDeleteMode"
+          os-perms="motions.can_manage" ng-click="delete()"
+          class="btn btn-primary">
+        <i class="fa fa-trash fa-lg"></i>
+        <translate>Delete selected items</translate>
+      </a>
+    </div>
+  </div>
 
-<table class="table table-striped table-bordered table-hover">
+  <i class="spacer">
+    {{ motions.length }} {{ "motion" | translate }}<span ng-if="(motions|filter:{selected:true}).length > 0">,
+    {{(motions|filter:{selected:true}).length}} {{ "selected" | translate }}</span>
+  </i>
+  <table class="table table-striped table-bordered table-hover">
     <thead>
       <tr>
         <!-- projector column -->
@@ -199,4 +219,5 @@
               <a ng-if="motion.isAllowed('update')" ui-sref="motions.motion.detail.update({id: motion.id })"
                   class="pull-right" translate>Edit motion...</a>
             </div>
-</table>
+  </table>
+</div>

openslides/users/static/js/users/site.js

@@ -718,7 +718,7 @@ angular.module('OpenSlidesApp.users.site', ['OpenSlidesApp.users'])
         $scope.alerts.push({
             type: 'success',
             msg: gettext("Installation was successfully.") + "<br>" +
-                 gettext("Use <strong>admin</strong> and <strong>admin</strong> for first login.") + "<p>" +
+                 gettext("Use <strong>admin</strong> and <strong>admin</strong> for first login.") + "<br>" +
                  gettext("Important: Please change your password!")
         });
         // close alert function

openslides/users/static/templates/users/group-detail.html

@@ -1,14 +1,19 @@
-<h1>{{ group.name }}</h1>
-
-<div id="submenu">
+<div class="header">
+  <div class="title">
+    <div class="submenu">
       <a ui-sref="users.group.list" class="btn btn-sm btn-default">
         <i class="fa fa-angle-double-left fa-lg"></i>
         <translate>Back to overview</translate>
       </a>
+    </div>
+    <h1>{{ group.name }}</h1>
+    <h2 translate>Group</h2>
+  </div>
 </div>
 
-
-<b translate>Permissions:</b>
-<ul ng-repeat="perm in group.permissions">
+<div class="details">
+  <p class="lead" translate>Permissions:</p>
+  <ul ng-repeat="perm in group.permissions">
     <li>{{ perm }}
-</ul>
+  </ul>
+</div>

openslides/users/static/templates/users/group-form.html

@@ -1,14 +1,18 @@
-<h1 ng-if="group.id" translate>Edit group</h1>
-<h1 ng-if="!group.id" translate>New group</h1>
-
-<div id="submenu">
+<div class="header">
+  <div class="title">
+    <div class="submenu">
       <a ui-sref="users.group.list" class="btn btn-sm btn-default">
         <i class="fa fa-angle-double-left fa-lg"></i>
         <translate>Back to overview</translate>
       </a>
+    </div>
+    <h1 ng-if="group.id" translate>Edit group</h1>
+    <h1 ng-if="!group.id" translate>New group</h1>
+  </div>
 </div>
 
-<form name="groupForm">
+<div class="details">
+  <form name="groupForm">
     <div class="form-group">
       <label for="inputName" translate>Name</label>
       <input type="text" ng-model="group.name" class="form-control" name="inputName" required>
@@ -26,4 +30,5 @@
     <button ui-sref="users.group.list" class="btn btn-default" translate>
       Cancel
     </button>
-</form>
+  </form>
+</div>

openslides/users/static/templates/users/group-list.html

@@ -1,6 +1,6 @@
-<h1 translate>Groups</h1>
-
-<div id="submenu">
+<div class="header">
+  <div class="title">
+    <div class="submenu">
       <a ui-sref="users.group.create" os-perms="users.can_manage" class="btn btn-primary btn-sm">
         <i class="fa fa-plus fa-lg"></i>
         <translate>New</translate>
@@ -9,16 +9,25 @@
         <i class="fa fa-angle-double-left fa-lg"></i>
         <translate>Back to overview</translate>
       </a>
-</div>
-
-<div class="row form-group">
-  <div class="col-sm-4 right">
-    <input type="text" os-focus-me ng-model="filter.search" class="form-control"
-        placeholder="{{ 'Filter' | translate }}">
+    </div>
+    <h1 translate>Groups</h1>
   </div>
 </div>
 
-<table class="table table-striped table-bordered table-hover">
+<div class="details">
+  <div class="row form-group">
+    <div class="col-sm-4 pull-right">
+      <div class="form-group">
+        <div class="input-group">
+          <div class="input-group-addon"><i class="fa fa-search"></i></div>
+          <input type="text" os-focus-me ng-model="filter.search" class="form-control"
+             placeholder="{{ 'Search' | translate}}">
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <table class="table table-striped table-bordered table-hover">
     <thead>
       <tr>
         <th ng-click="sortby='id';reverse=!reverse">
@@ -48,4 +57,5 @@
               title="{{ 'Delete' | translate }}">
             <i class="fa fa-trash-o"></i>
           </a>
-</table>
+  </table>
+</div>

openslides/users/static/templates/users/user-detail-password.html

@@ -1,9 +1,14 @@
-<h1>Change password</h1>
+<div class="header">
+  <div class="title">
+    <h1>Change password</h1>
+  </div>
+</div>
 
-<p ng-if='formError' class="text-danger">
+<div class="details">
+  <p ng-if='formError' class="text-danger">
     <strong>{{ formError }}</strong>
-</p>
-<form name="userForm" >
+  </p>
+  <form name="userForm" >
     <div class="form-group">
       <label for="inputOldPassword" translate>Old password</label>
       <input type="password"
@@ -34,4 +39,5 @@
     <button ui-sref="users.user.list" class="btn btn-default" translate>
       Cancel
     </button>
-</form>
+  </form>
+</div>

openslides/users/static/templates/users/user-detail-profile.html

@@ -1,9 +1,14 @@
-<h1>Edit profil</h1>
+<div class="header">
+  <div class="title">
+    <h1 translate>Edit profil</h1>
+  </div>
+</div>
 
-<p ng-if='formError' class="text-danger">
+<div class="details">
+  <p ng-if='formError' class="text-danger">
     <strong>{{ formError }}</strong>
-</p>
-<form name="userForm" >
+  </p>
+  <form name="userForm" >
     <div class="form-group">
       <label for="inputUsername" translate>Username</label>
       <input type="text"
@@ -41,4 +46,5 @@
     <button ui-sref="users.user.list" class="btn btn-default" translate>
       Cancel
     </button>
-</form>
+  </form>
+</div>

openslides/users/static/templates/users/user-detail.html

@@ -1,6 +1,6 @@
-<h1>{{ user.get_short_name() }}</h1>
-
-<div id="submenu">
+<div class="header">
+  <div class="title">
+    <div class="submenu">
       <a ui-sref="users.user.list" class="btn btn-sm btn-default">
         <i class="fa fa-angle-double-left fa-lg"></i>
         <translate>Back to overview</translate>
@@ -18,9 +18,14 @@
           title="{{ 'Edit' | translate}}">
         <i class="fa fa-pencil"></i>
       </a>
+    </div>
+    <h1>{{ user.get_short_name() }}</h1>
+    <h2 translate>Participant</h2>
+  </div>
 </div>
 
-<div class="user_details form-group">
+<div class="details">
+  <div class="user_details form-group">
     <fieldset>
       <legend translate>Personal data</legend>
       <label translate>Structure level</label>
@@ -40,4 +45,5 @@
       <label translate>Comment</label>
         <div class="white-space-pre-line">{{ user.comment }}</div>
     </fieldset>
+  </div>
 </div>

openslides/users/static/templates/users/user-import.html

@@ -1,38 +1,42 @@
- <h1 translate>Import participants</h1>
-
-<div id="submenu">
+<div class="header">
+  <div class="title">
+    <div class="submenu">
       <a ui-sref="users.user.list" class="btn btn-sm btn-default">
         <i class="fa fa-angle-double-left fa-lg"></i>
         <translate>Back to overview</translate>
       </a>
-</div>
-
-<h2 translate>Import by copy/paste</h2>
-<p translate>Copy and paste your participant names in this textbox.
-Keep each person in a single line.</p>
-
-<div class="row">
-  <div class="form-group col-sm-6">
-    <textarea ng-model="userlist" rows="5" class="form-control" ng-list="/\n/"></textarea>
+    </div>
+    <h1 translate>Import participants</h1>
   </div>
 </div>
 
-<div class="clearfix">
+<div class="details">
+  <h3 translate>Import by copy/paste</h3>
+  <p translate>Copy and paste your participant names in this textbox.
+  Keep each person in a single line.</p>
+
+  <div class="row">
+    <div class="form-group col-sm-6">
+      <textarea ng-model="userlist" rows="5" class="form-control" ng-list="/\n/"></textarea>
+    </div>
+  </div>
+
+  <div class="clearfix">
     <button ng-click="importByLine()" class="btn btn-primary pull-left" translate>Import</button>
     <div class="col-xs-5" ng-if="users">
       <progressbar animate="false" type="success" max="users.length" value="importcounter">
         <i>{{ importcounter }} / {{ users.length }} {{ "imported" | translate }}</i>
       </progressbar>
     </div>
-</div>
+  </div>
 
-<hr>
+  <hr>
 
-<h2 translate>Import by CSV file</h2>
-<p translate>Select a CSV file to import users!
+  <h3 translate>Import by CSV file</h3>
+  <p translate>Select a CSV file to import users!
 
-<p translate>Please note:</p>
-<ul>
+  <p translate>Please note:</p>
+  <ul>
       <li><translate>Required comma separated values</translate>:<br>
           <code translate>'title, first_name, last_name, structure level, groups, comment, is active'</code>
       <li><translate>Default groups</translate>:
@@ -45,16 +49,16 @@ Keep each person in a single line.</p>
       <li><a href="https://github.com/OpenSlides/OpenSlides/wiki/CSV-Import" translate>
             Use the CSV example file from OpenSlides Wiki.
           </a>
-</ul>
+  </ul>
 
-<ng-csv-import
+  <ng-csv-import
     content="csv.content"
     class="import"
     header="csv.header"
     separator="csv.separator"
     result="csv.result"></ng-csv-import>
 
-<div ng-if="csv.result" class="col-sm-10 well">
+  <div ng-if="csv.result" class="col-sm-10 well">
     <h3 translate>Preview</h3>
     <table class="table table-striped table-bordered table-condensed">
       <thead>
@@ -77,7 +81,7 @@ Keep each person in a single line.</p>
           <td>{{ user.comment }}
     </table>
 
-<div class="clearfix">
+  <div class="clearfix">
     <button ng-if="!csvimporting" ng-click="importByCSV(csv.result)" class="btn btn-primary pull-left" translate>Import</button>
     <div ng-if="csvimporting">
       <progressbar animate="false"  type="success" max="csvlines" value="csvimportcounter">
@@ -88,11 +92,12 @@ Keep each person in a single line.</p>
       <i class="fa fa-angle-double-left fa-lg"></i>
       <translate>Back to users overview</translate>
     </a>
-</div>
+  </div>
     <p>
       <div class="form-group">
         <button ng-if="!csvimporting" ng-click="clear()" class="btn btn-default" translate>
           Clear
         </button>
       </div>
+  </div>
 </div>

openslides/users/static/templates/users/user-list.html

@@ -1,6 +1,6 @@
-<h1 translate>Participants</h1>
-
-<div id="submenu">
+<div class="header">
+  <div class="title">
+    <div class="submenu">
       <a ng-click="newDialog()" os-perms="users.can_manage" class="btn btn-primary btn-sm">
         <i class="fa fa-user-plus fa-lg"></i>
         <translate>New</translate>
@@ -31,41 +31,62 @@
               </a>
         </ul>
       </div>
+    </div>
+    <h1 translate>Participants</h1>
+  </div>
 </div>
 
-<div class="row form-group">
-  <div class="col-sm-8">
-    <form class="form-inline">
+<div class="details">
+  <div class="row">
+    <div class="col-sm-6">
       <!-- delete mode -->
-      <div os-perms-lite="users.can_manage" class="form-group">
-        <label for="deleteSwitcher" translate>Delete mode</label>
-        <switch id="deleteSwitcher" ng-model="isDeleteMode" ng-change="uncheckAll()"
-            on="{{'On'|translate}}" off="{{'Off'|translate}}"
-            class="green wide form-control">
-        </switch>
+      <button os-perms-lite="users.can_manage" class="btn btn-default"
+          ng-click="isDeleteMode = !isDeleteMode; uncheckAll()">
+        <i class="fa fa-check-square-o"></i>
+        <translate>Select</translate>...
+      </button>
     </div>
-      <!-- delete button -->
-      <a ng-show="isDeleteMode && (users|filter:{selected:true}).length > 0"
-          os-perms="users.can_manage" ng-click="deleteMultiple()"
-          class="btn btn-primary btn-sm form-control">
-        <i class="fa fa-trash fa-lg"></i>
-        <translate>Delete selected users</translate>
-      </a>
+    <div class="col-sm-6">
+      <div class="form-inline text-right">
+        <div class="form-group">
+          <div class="input-group">
+            <div class="input-group-addon"><i class="fa fa-search"></i></div>
+            <input type="text" os-focus-me ng-model="filter.search" class="form-control"
+               placeholder="{{ 'Search' | translate}}">
+          </div>
+        </div>
+        <button class="btn btn-default" ng-click="isFilter = !isFilter">
+          <i class="fa fa-filter"></i>
+          <translate>Filter</translate>...
+        </button>
+      </div>
+    </div>
+  </div>
+  <div uib-collapse="!isFilter" class="row">
+    <div class="col-sm-6 text-right"></div>
+    <div class="col-sm-6 text-right">
       <!-- isPresent filter -->
       <input type="checkbox" ng-model="filterPresent" ng-false-value="''">
       <translate>Is present</translate>
-    </form>
-  </div>
-  <div class="col-sm-4">
-    <div class="input-group">
-      <div class="input-group-addon"><i class="fa fa-filter"></i></div>
-      <input type="text" os-focus-me ng-model="filter.search" class="form-control"
-         placeholder="{{ 'Filter' | translate}}">
     </div>
   </div>
-</div>
+  <div uib-collapse="!isDeleteMode" class="row spacer">
+    <div class="col-sm-12 text-left">
+      <!-- delete button -->
+      <a ng-show="isDeleteMode"
+          os-perms="users.can_manage" ng-click="delete()"
+          class="btn btn-primary">
+        <i class="fa fa-trash fa-lg"></i>
+        <translate>Delete selected items</translate>
+      </a>
+    </div>
+  </div>
 
-<table class="table table-striped table-bordered table-hover">
+  <i class="spacer">
+    {{ users.length }} {{ "participants" | translate }}<span ng-if="(users|filter:{selected:true}).length > 0">,
+    {{(users|filter:{selected:true}).length}} {{ "selected" | translate }}</span>
+  </i>
+  <table class="table table-striped table-bordered table-hover">
     <thead>
       <tr>
         <!-- projector column -->
@@ -97,7 +118,7 @@
     <tbody>
       <tr ng-repeat="user in users | filter: filter.search | filter: {is_present: filterPresent} |
           orderBy: sortColumn:reverse"
-        ng-class="{ 'activeline': user.isProjected(), 'selected': assignment.selected  }">
+          ng-class="{ 'activeline': user.isProjected(), 'selected': user.selected  }">
         <!-- projector column -->
         <td ng-show="!isDeleteMode" os-perms="core.can_manage_projector">
           <a class="btn btn-default btn-sm"
@@ -128,4 +149,5 @@
             {{ (groups | filter: {id: group})[0].name }}
           </div>
         <td><input type="checkbox" ng-model="user.is_present" ng-click="save(user)">
-</table>
+  </table>
+</div>