Merge pull request #952 from emanuelschuetze/zoom
Improved projector zoom and scroll behaviour.
This commit is contained in:
commit
98667d9479
@ -5,8 +5,6 @@
|
|||||||
<hr>
|
<hr>
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
<div class="scroll">
|
{% if item.text %}
|
||||||
{% if item.text %}
|
{{ item.text|safe }}
|
||||||
{{ item.text|safe|linebreaks }}
|
{% endif %}
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
|
@ -21,8 +21,7 @@
|
|||||||
{% if item.speaker_list_closed %}(<span class="closed">{% trans 'closed' %}</span>){% endif %}
|
{% if item.speaker_list_closed %}(<span class="closed">{% trans 'closed' %}</span>){% endif %}
|
||||||
</h3>
|
</h3>
|
||||||
|
|
||||||
<div class="scroll">
|
{% if list_of_speakers %}
|
||||||
{% if list_of_speakers %}
|
|
||||||
<ul id="list_of_speakers">
|
<ul id="list_of_speakers">
|
||||||
{% for speaker_dict in list_of_speakers %}
|
{% for speaker_dict in list_of_speakers %}
|
||||||
<li class="{{ speaker_dict.type }}"> {# old_speaker, actual_speaker, coming_speaker #}
|
<li class="{{ speaker_dict.type }}"> {# old_speaker, actual_speaker, coming_speaker #}
|
||||||
@ -33,8 +32,6 @@
|
|||||||
</li>
|
</li>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
{% else %}
|
{% else %}
|
||||||
<i>{% trans 'The list of speakers is empty.' %}</i>
|
<i>{% trans 'The list of speakers is empty.' %}</i>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
|
||||||
|
|
||||||
|
@ -19,14 +19,14 @@
|
|||||||
</small>
|
</small>
|
||||||
<hr>
|
<hr>
|
||||||
</h1>
|
</h1>
|
||||||
<div class="scroll">
|
|
||||||
{% if not assignment.candidates %}
|
{% if not assignment.candidates %}
|
||||||
<p>
|
<p>
|
||||||
<div class="text">{{ assignment.description|linebreaks }}</div>
|
<div class="text">{{ assignment.description|linebreaks }}</div>
|
||||||
</p>
|
</p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% if assignment.candidates and assignment.status != "fin" %}
|
{% if assignment.candidates and assignment.status != "fin" %}
|
||||||
<h3>{% trans "Candidates" %}</h3>
|
<h3>{% trans "Candidates" %}</h3>
|
||||||
<ol>
|
<ol>
|
||||||
{% for candidate in assignment.candidates %}
|
{% for candidate in assignment.candidates %}
|
||||||
@ -38,9 +38,9 @@
|
|||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ol>
|
</ol>
|
||||||
<p><br></p>
|
<p><br></p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% if polls.exists %}
|
{% if polls.exists %}
|
||||||
<h3>{% trans "Election results" %}</h3>
|
<h3>{% trans "Election results" %}</h3>
|
||||||
<table class="table-striped table-bordered">
|
<table class="table-striped table-bordered">
|
||||||
<tr>
|
<tr>
|
||||||
@ -108,5 +108,4 @@
|
|||||||
{% endfor %}
|
{% endfor %}
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
|
||||||
|
@ -61,11 +61,9 @@
|
|||||||
<hr>
|
<hr>
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
<div class="scroll">
|
|
||||||
<div class="text">{{ motion.active_version.text|safe }}</div>
|
<div class="text">{{ motion.active_version.text|safe }}</div>
|
||||||
{% if motion.active_version.reason %}
|
{% if motion.active_version.reason %}
|
||||||
<br>
|
<br>
|
||||||
<div class="reason"><p><b>{% trans "Reason" %}:</b></p>
|
<div class="reason"><p><b>{% trans "Reason" %}:</b></p>
|
||||||
{{ motion.active_version.reason|safe }}</div>
|
{{ motion.active_version.reason|safe }}</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
|
||||||
|
@ -57,7 +57,7 @@ def config_variables(sender, **kwargs):
|
|||||||
|
|
||||||
projector_scale = ConfigVariable(
|
projector_scale = ConfigVariable(
|
||||||
name='projector_scale',
|
name='projector_scale',
|
||||||
default_value=100)
|
default_value=0)
|
||||||
|
|
||||||
projector_scroll = ConfigVariable(
|
projector_scroll = ConfigVariable(
|
||||||
name='projector_scroll',
|
name='projector_scroll',
|
||||||
|
@ -48,6 +48,14 @@ $(function() {
|
|||||||
url: link.attr('href'),
|
url: link.attr('href'),
|
||||||
dataType: 'json',
|
dataType: 'json',
|
||||||
success: function(data) {
|
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');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
@ -6,7 +6,6 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
$('#content .scroll').wrap('<div class="scrollwrapper"></div>');
|
|
||||||
if ($('#content.reload').length > 0) {
|
if ($('#content.reload').length > 0) {
|
||||||
updater.start();
|
updater.start();
|
||||||
}
|
}
|
||||||
@ -25,12 +24,11 @@ var projector = {
|
|||||||
},
|
},
|
||||||
|
|
||||||
scroll: function(value) {
|
scroll: function(value) {
|
||||||
$('#content .scroll').css('margin-top', value + 'em')
|
$('#content').css('margin-top', -10 * value + 'em');
|
||||||
},
|
},
|
||||||
|
|
||||||
scale: function(value) {
|
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) {
|
update_data: function(data) {
|
||||||
@ -60,7 +58,6 @@ var updater = {
|
|||||||
updateProjector: function(data) {
|
updateProjector: function(data) {
|
||||||
if (data.content) {
|
if (data.content) {
|
||||||
$('#content').html(data.content);
|
$('#content').html(data.content);
|
||||||
$('#content .scroll').wrap('<div class="scrollwrapper"></div>');
|
|
||||||
}
|
}
|
||||||
if (data.overlays) {
|
if (data.overlays) {
|
||||||
$.each(data.overlays, function (key, value) {
|
$.each(data.overlays, function (key, value) {
|
||||||
|
@ -86,39 +86,46 @@ body{
|
|||||||
top: 150px;
|
top: 150px;
|
||||||
right: 40px;
|
right: 40px;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
transition: all 2s;
|
transition: all 1s;
|
||||||
|
line-height: normal;
|
||||||
}
|
}
|
||||||
#content .scroll {
|
#content .scroll {
|
||||||
transition: margin 2s;
|
transition: margin 1s;
|
||||||
}
|
|
||||||
#content .scrollwrapper {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
}
|
||||||
h1 {
|
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 {
|
#sidebar {
|
||||||
width: 255px;
|
width: 255px;
|
||||||
float: right;
|
float: right;
|
||||||
margin: 0 0 20px 10px;
|
margin: 0 0 20px 10px;
|
||||||
}
|
}
|
||||||
|
ul, ol {
|
||||||
|
margin: 0 0 10px 2em;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
.well h4 {
|
.well h4 {
|
||||||
margin: 20px 0 2px 0;
|
margin: 20px 0 2px 0;
|
||||||
}
|
}
|
||||||
.well h4 .first {
|
.well h4 .first {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.well .results {
|
|
||||||
line-height: 30px;
|
|
||||||
}
|
|
||||||
.well .results hr {
|
.well .results hr {
|
||||||
margin: 5px 0 !important;
|
margin: 5px 0;
|
||||||
|
border: 1px solid #E3E3E3;
|
||||||
}
|
}
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
margin: 10px 0 !important;
|
margin: 10px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -5,8 +5,8 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="{{LANGUAGE_CODE}}">
|
<html lang="{{LANGUAGE_CODE}}">
|
||||||
<head>
|
<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/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">
|
<link href="{% static 'img/favicon.png' %}" type="image/png" rel="shortcut icon">
|
||||||
<title>{% trans 'Projector' %} – {{ 'event_name'|get_config }}</title>
|
<title>{% trans 'Projector' %} – {{ 'event_name'|get_config }}</title>
|
||||||
</head>
|
</head>
|
||||||
|
@ -1,4 +1,5 @@
|
|||||||
{% load i18n %}
|
{% load i18n %}
|
||||||
|
{% load tags %}
|
||||||
|
|
||||||
<!-- projector live view -->
|
<!-- projector live view -->
|
||||||
<a href="{% url 'projector_show' %}" target="_blank">
|
<a href="{% url 'projector_show' %}" target="_blank">
|
||||||
@ -11,22 +12,28 @@
|
|||||||
<!-- projector control buttons -->
|
<!-- projector control buttons -->
|
||||||
{% if perms.projector.can_manage_projector %}
|
{% if perms.projector.can_manage_projector %}
|
||||||
<p>
|
<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>
|
<i class="icon-zoom-in"></i>
|
||||||
</a>
|
</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>
|
<i class="icon-zoom-out"></i>
|
||||||
</a>
|
</a>
|
||||||
|
<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>
|
|
||||||
|
|
||||||
<a class="projector_edit btn btn-mini" href="{% url 'projector_clean' %}" title="{% trans 'Reset projector view' %}">
|
|
||||||
<i class="icon-resize-small"></i>
|
<i class="icon-resize-small"></i>
|
||||||
</a>
|
</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>
|
</p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
@ -2,8 +2,6 @@
|
|||||||
|
|
||||||
<h1>{{ slide.title }}</h1>
|
<h1>{{ slide.title }}</h1>
|
||||||
|
|
||||||
<div class="scroll">
|
{% if slide.text %}
|
||||||
{% if slide.text %}
|
|
||||||
<span>{{ slide.text|safe|linebreaks }}</span>
|
<span>{{ slide.text|safe|linebreaks }}</span>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
|
||||||
|
@ -77,10 +77,15 @@ urlpatterns = patterns(
|
|||||||
{'direction': 'down'},
|
{'direction': 'down'},
|
||||||
name='projector_down'),
|
name='projector_down'),
|
||||||
|
|
||||||
url(r'^clean/$',
|
url(r'^clean/scale/$',
|
||||||
views.ProjectorControllView.as_view(),
|
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/$',
|
url(r'^countdown/reset/$',
|
||||||
views.CountdownControllView.as_view(),
|
views.CountdownControllView.as_view(),
|
||||||
|
@ -144,21 +144,28 @@ class ProjectorControllView(RedirectView):
|
|||||||
def pre_redirect(self, request, *args, **kwargs):
|
def pre_redirect(self, request, *args, **kwargs):
|
||||||
direction = kwargs['direction']
|
direction = kwargs['direction']
|
||||||
if direction == 'bigger':
|
if direction == 'bigger':
|
||||||
config['projector_scale'] = int(config['projector_scale']) + 20
|
config['projector_scale'] = int(config['projector_scale']) + 1
|
||||||
elif direction == 'smaller':
|
elif direction == 'smaller':
|
||||||
config['projector_scale'] = int(config['projector_scale']) - 20
|
config['projector_scale'] = int(config['projector_scale']) - 1
|
||||||
elif direction == 'down':
|
elif direction == 'down':
|
||||||
config['projector_scroll'] = int(config['projector_scroll']) - 5
|
config['projector_scroll'] = int(config['projector_scroll']) + 1
|
||||||
elif direction == 'up':
|
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')
|
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'],
|
call_on_projector({'scroll': config['projector_scroll'],
|
||||||
'scale': config['projector_scale']})
|
'scale': config['projector_scale']})
|
||||||
|
|
||||||
|
def get_ajax_context(self, **kwargs):
|
||||||
|
return {
|
||||||
|
'scale_level': config['projector_scale'],
|
||||||
|
'scroll_level': config['projector_scroll'],
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
class CountdownControllView(RedirectView):
|
class CountdownControllView(RedirectView):
|
||||||
"""
|
"""
|
||||||
|
Loading…
Reference in New Issue
Block a user