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.
2013-10-23 17:08:08 +02:00 · 2013-10-23 17:08:08 +02:00 · 84d2619289
commit 84d2619289
parent 7fcc786cf9
13 changed files with 165 additions and 144 deletions
--- a/openslides/agenda/templates/agenda/item_slide.html
+++ b/openslides/agenda/templates/agenda/item_slide.html
@ -5,8 +5,6 @@
    <hr>
 </h1>

-<div class="scroll">
-    {% if item.text %}
-        {{ item.text|safe|linebreaks }}
-    {% endif %}
-</div>
+{% if item.text %}
+    {{ item.text|safe }}
+{% endif %}
--- a/openslides/agenda/templates/agenda/item_slide_list_of_speaker.html
+++ b/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 %}
-</div>
-
+{% endif %}
--- a/openslides/assignment/templates/assignment/slide.html
+++ b/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 %}
-</div>
+{% endif %}
--- a/openslides/motion/templates/motion/slide.html
+++ b/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>
--- a/openslides/projector/signals.py
+++ b/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',
--- a/openslides/projector/static/javascript/dashboard.js
+++ b/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');
+                }
            }
        });
    });
--- a/openslides/projector/static/javascript/projector.js
+++ b/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 #sidebar').css('font-size', '18px');
+        $('#content').css('font-size', 100 + 20 * value  + '%');
    },

    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) {
--- a/openslides/projector/static/styles/projector.css
+++ b/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;
-}
-#content .scrollwrapper {
-    overflow: hidden;
+    transition: margin 1s;
 }
 h1 {
-    font-size: 45px !important;
-    margin-bottom: 40px !important;
+    font-size: 2.25em;
+    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;
 }


--- a/openslides/projector/templates/projector.html
+++ b/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>
--- a/openslides/projector/templates/projector/live_view_widget.html
+++ b/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 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' %}">
+        <a class="projector_edit btn" href="{% url 'projector_clean_scale' %}" title="{% trans 'Reset zoom level' %}">
            <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 %}
--- a/openslides/projector/templates/projector/projectorslide_slide.html
+++ b/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 %}
-</div>
+{% endif %}
--- a/openslides/projector/urls.py
+++ b/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'},
-        name='projector_clean'),
+        {'direction': 'clean_scale'},
+        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(),
--- a/openslides/projector/views.py
+++ b/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:
-                config['projector_scroll'] = int(config['projector_scroll']) + 5
-        elif direction == 'clean':
-            config['projector_scroll'] = config.get_default('projector_scroll')
+            if config['projector_scroll'] > 0:
+                config['projector_scroll'] = int(config['projector_scroll']) - 1
+        elif direction == 'clean_scale':
            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):
    """