Improved projector zoom and scroll behaviour.

Zoom and scroll the full content div (incl. title and sidebar).
Add zoom and scroll level in projector live view widget.

openslides/agenda/templates/agenda/item_slide.html

@@ -5,8 +5,6 @@
     <hr>
 </h1>
 
-<div class="scroll">
+{% if item.text %}
-    {% if item.text %}
+    {{ item.text|safe }}
-        {{ item.text|safe|linebreaks }}
+{% endif %}
-    {% endif %}
-</div>

openslides/agenda/templates/agenda/item_slide_list_of_speaker.html

@@ -21,8 +21,7 @@
     {% if item.speaker_list_closed %}(<span class="closed">{% trans 'closed' %}</span>){% endif %}
 </h3>
 
-<div class="scroll">
+{% if list_of_speakers %}
-    {% if list_of_speakers %}
     <ul id="list_of_speakers">
         {% for speaker_dict in list_of_speakers %}
         <li class="{{ speaker_dict.type }}"> {# old_speaker, actual_speaker, coming_speaker #}
@@ -33,8 +32,6 @@
         </li>
         {% endfor %}
     </ul>
-    {% else %}
+{% else %}
     <i>{% trans 'The list of speakers is empty.' %}</i>
-    {% endif %}
+{% endif %}
-</div>
-

openslides/assignment/templates/assignment/slide.html

@@ -19,14 +19,14 @@
     </small>
     <hr>
 </h1>
-<div class="scroll">
+
-    {% if not assignment.candidates %}
+{% if not assignment.candidates %}
     <p>
         <div class="text">{{ assignment.description|linebreaks }}</div>
     </p>
-    {% endif %}
+{% endif %}
 
-    {% if assignment.candidates and assignment.status != "fin" %}
+{% if assignment.candidates and assignment.status != "fin" %}
     <h3>{% trans "Candidates" %}</h3>
     <ol>
         {% for candidate in assignment.candidates %}
@@ -38,9 +38,9 @@
         {% endfor %}
     </ol>
     <p><br></p>
-    {% endif %}
+{% endif %}
 
-    {% if polls.exists %}
+{% if polls.exists %}
     <h3>{% trans "Election results" %}</h3>
     <table class="table-striped table-bordered">
     <tr>
@@ -108,5 +108,4 @@
         {% endfor %}
     </tr>
     </table>
-    {% endif %}
+{% endif %}
-</div>

openslides/motion/templates/motion/slide.html

@@ -61,11 +61,9 @@
     <hr>
 </h1>
 
-<div class="scroll">
 <div class="text">{{ motion.active_version.text|safe }}</div>
 {% if motion.active_version.reason %}
     <br>
     <div class="reason"><p><b>{% trans "Reason" %}:</b></p>
     {{ motion.active_version.reason|safe }}</div>
 {% endif %}
-</div>

openslides/projector/signals.py

@@ -57,7 +57,7 @@ def config_variables(sender, **kwargs):
 
     projector_scale = ConfigVariable(
         name='projector_scale',
-        default_value=100)
+        default_value=0)
 
     projector_scroll = ConfigVariable(
         name='projector_scroll',

openslides/projector/static/javascript/dashboard.js

@@ -48,6 +48,14 @@ $(function() {
             url: link.attr('href'),
             dataType: 'json',
             success: function(data) {
+                $('#scale_level').html(data['scale_level']);
+                $('#scroll_level').html(data['scroll_level']);
+                if ( data['scroll_level'] == 0 )
+                    $('#scroll_up_button').addClass('disabled');
+                else {
+                    if ( $('#scroll_up_button').hasClass('disabled') )
+                        $('#scroll_up_button').removeClass('disabled');
+                }
             }
         });
     });

openslides/projector/static/javascript/projector.js

@@ -6,7 +6,6 @@
  */
 
 $(document).ready(function() {
-    $('#content .scroll').wrap('<div class="scrollwrapper"></div>');
     if ($('#content.reload').length > 0) {
         updater.start();
     }
@@ -25,12 +24,11 @@ var projector = {
     },
 
     scroll: function(value) {
-        $('#content .scroll').css('margin-top', value + 'em')
+        $('#content').css('margin-top', -10 * value + 'em');
     },
 
     scale: function(value) {
-        $('#content').css('font-size', value  + '%');
+        $('#content').css('font-size', 100 + 20 * value  + '%');
-        $('#content #sidebar').css('font-size', '18px');
     },
 
     update_data: function(data) {
@@ -60,7 +58,6 @@ var updater = {
     updateProjector: function(data) {
         if (data.content) {
             $('#content').html(data.content);
-            $('#content .scroll').wrap('<div class="scrollwrapper"></div>');
         }
         if (data.overlays) {
             $.each(data.overlays, function (key, value) {

openslides/projector/static/styles/projector.css

@@ -86,39 +86,46 @@ body{
     top: 150px;
     right: 40px;
     z-index: -1;
-    transition: all 2s;
+    transition: all 1s;
+    line-height: normal;
 }
 #content .scroll {
-    transition: margin 2s;
+    transition: margin 1s;
-}
-#content .scrollwrapper {
-    overflow: hidden;
 }
 h1 {
-    font-size: 45px !important;
+    font-size: 2.25em;
-    margin-bottom: 40px !important;
+    margin-bottom: 40px;
+    line-height: 0.95em;
+}
+h1 small {
+    font-size: 0.55em;
+}
+h3 {
+    font-size: 1.2em;
 }
 #sidebar {
     width: 255px;
     float: right;
     margin: 0 0 20px 10px;
 }
+ul, ol {
+    margin: 0 0 10px 2em;
+}
+li {
+    line-height: normal;
+}
 .well h4 {
     margin: 20px 0 2px 0;
 }
 .well h4 .first {
     margin-top: 0;
 }
-
-.well .results {
-    line-height: 30px;
-}
 .well .results hr {
-    margin: 5px 0 !important;
+    margin: 5px 0;
+    border: 1px solid #E3E3E3;
 }
-
 hr {
-    margin: 10px 0 !important;
+    margin: 10px 0;
 }
 
 

openslides/projector/templates/projector.html

@@ -5,8 +5,8 @@
 <!DOCTYPE html>
 <html lang="{{LANGUAGE_CODE}}">
     <head>
-        <link href="{% static 'styles/projector.css' %}" type="text/css" rel="stylesheet">
         <link href="{% static 'styles/bootstrap.min.css' %}" type="text/css" rel="stylesheet">
+        <link href="{% static 'styles/projector.css' %}" type="text/css" rel="stylesheet">
         <link  href="{% static 'img/favicon.png' %}" type="image/png" rel="shortcut icon">
         <title>{% trans 'Projector' %} – {{ 'event_name'|get_config }}</title>
     </head>

openslides/projector/templates/projector/live_view_widget.html

@@ -1,4 +1,5 @@
 {% load i18n %}
+{% load tags %}
 
 <!-- projector live view -->
 <a href="{% url 'projector_show' %}" target="_blank">
@@ -11,22 +12,28 @@
 <!-- projector control buttons -->
 {% if perms.projector.can_manage_projector %}
     <p>
-        <a class="projector_edit btn btn-mini" href="{% url 'projector_bigger' %}" title="{% trans 'Zoom in' %}">
+        <a class="projector_edit btn" href="{% url 'projector_bigger' %}" title="{% trans 'Zoom in' %}">
             <i class="icon-zoom-in"></i>
         </a>
-        <a class="projector_edit btn btn-mini" href="{% url 'projector_smaller' %}" title="{% trans 'Zoom out' %}">
+        <a class="projector_edit btn" href="{% url 'projector_smaller' %}" title="{% trans 'Zoom out' %}">
             <i class="icon-zoom-out"></i>
         </a>
-        &nbsp;&nbsp;
+        <a class="projector_edit btn" href="{% url 'projector_clean_scale' %}" title="{% trans 'Reset zoom level' %}">
-        <a class="projector_edit btn btn-mini" href="{% url 'projector_up' %}" title="{% trans 'Scroll visible view up' %}">
-            <i class="icon-arrow-up"></i>
-        </a>
-        <a class="projector_edit btn btn-mini" href="{% url 'projector_down' %}" title="{% trans 'Scroll visible view down' %}">
-            <i class="icon-arrow-down"></i>
-        </a>
-        &nbsp;&nbsp;
-        <a class="projector_edit btn btn-mini" href="{% url 'projector_clean' %}" title="{% trans 'Reset projector view' %}">
             <i class="icon-resize-small"></i>
         </a>
+        {% trans "Zoom level" %}: <span id="scale_level">{{ 'projector_scale'|get_config }}</span>
+    </p>
+    <p>
+        <a class="projector_edit btn {% if 'projector_scroll'|get_config == 0 %}disabled{% endif %}" id="scroll_up_button"
+            href="{% url 'projector_up' %}" title="{% trans 'Scroll visible view up' %}">
+            <i class="icon-arrow-up"></i>
+        </a>
+        <a class="projector_edit btn" href="{% url 'projector_down' %}" title="{% trans 'Scroll visible view down' %}">
+            <i class="icon-arrow-down"></i>
+        </a>
+        <a class="projector_edit btn" href="{% url 'projector_clean_scroll' %}" title="{% trans 'Reset scroll level' %}">
+            <i class="icon-resize-small"></i>
+        </a>
+        {% trans "Scroll level" %}: <span id="scroll_level">{{ 'projector_scroll'|get_config }}</span>
     </p>
 {% endif %}

openslides/projector/templates/projector/projectorslide_slide.html

@@ -2,8 +2,6 @@
 
 <h1>{{ slide.title }}</h1>
 
-<div class="scroll">
+{% if slide.text %}
-    {% if slide.text %}
     <span>{{ slide.text|safe|linebreaks }}</span>
-    {% endif %}
+{% endif %}
-</div>

openslides/projector/urls.py

@@ -77,10 +77,15 @@ urlpatterns = patterns(
         {'direction': 'down'},
         name='projector_down'),
 
-    url(r'^clean/$',
+    url(r'^clean/scale/$',
         views.ProjectorControllView.as_view(),
-        {'direction': 'clean'},
+        {'direction': 'clean_scale'},
-        name='projector_clean'),
+        name='projector_clean_scale'),
+
+    url(r'^clean/scroll/$',
+        views.ProjectorControllView.as_view(),
+        {'direction': 'clean_scroll'},
+        name='projector_clean_scroll'),
 
     url(r'^countdown/reset/$',
         views.CountdownControllView.as_view(),

openslides/projector/views.py

@@ -144,21 +144,28 @@ class ProjectorControllView(RedirectView):
     def pre_redirect(self, request, *args, **kwargs):
         direction = kwargs['direction']
         if direction == 'bigger':
-            config['projector_scale'] = int(config['projector_scale']) + 20
+            config['projector_scale'] = int(config['projector_scale']) + 1
         elif direction == 'smaller':
-            config['projector_scale'] = int(config['projector_scale']) - 20
+            config['projector_scale'] = int(config['projector_scale']) - 1
         elif direction == 'down':
-            config['projector_scroll'] = int(config['projector_scroll']) - 5
+            config['projector_scroll'] = int(config['projector_scroll']) + 1
         elif direction == 'up':
-            if config['projector_scroll'] < 0:
+            if config['projector_scroll'] > 0:
-                config['projector_scroll'] = int(config['projector_scroll']) + 5
+                config['projector_scroll'] = int(config['projector_scroll']) - 1
-        elif direction == 'clean':
+        elif direction == 'clean_scale':
-            config['projector_scroll'] = config.get_default('projector_scroll')
             config['projector_scale'] = config.get_default('projector_scale')
+        elif direction == 'clean_scroll':
+            config['projector_scroll'] = config.get_default('projector_scroll')
 
         call_on_projector({'scroll': config['projector_scroll'],
                           'scale': config['projector_scale']})
 
+    def get_ajax_context(self, **kwargs):
+        return {
+            'scale_level': config['projector_scale'],
+            'scroll_level': config['projector_scroll'],
+        }
+
 
 class CountdownControllView(RedirectView):
     """