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.
This commit is contained in:
Emanuel Schuetze
parent
7fcc786cf9
commit
84d2619289
@ -5,8 +5,6 @@
|
||||
<hr>
|
||||
</h1>
|
||||
|
||||
<div class="scroll">
|
||||
{% if item.text %}
|
||||
{{ item.text|safe|linebreaks }}
|
||||
{{ item.text|safe }}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
@ -21,7 +21,6 @@
|
||||
{% if item.speaker_list_closed %}(<span class="closed">{% trans 'closed' %}</span>){% endif %}
|
||||
</h3>
|
||||
|
||||
<div class="scroll">
|
||||
{% if list_of_speakers %}
|
||||
<ul id="list_of_speakers">
|
||||
{% for speaker_dict in list_of_speakers %}
|
||||
@ -36,5 +35,3 @@
|
||||
{% else %}
|
||||
<i>{% trans 'The list of speakers is empty.' %}</i>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
</small>
|
||||
<hr>
|
||||
</h1>
|
||||
<div class="scroll">
|
||||
|
||||
{% if not assignment.candidates %}
|
||||
<p>
|
||||
<div class="text">{{ assignment.description|linebreaks }}</div>
|
||||
@ -109,4 +109,3 @@
|
||||
</tr>
|
||||
</table>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
<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' %}">
|
||||
<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 %}
|
||||
|
||||
@ -2,8 +2,6 @@
|
||||
|
||||
<h1>{{ slide.title }}</h1>
|
||||
|
||||
<div class="scroll">
|
||||
{% if slide.text %}
|
||||
<span>{{ slide.text|safe|linebreaks }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
@ -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(),
|
||||
|
||||
@ -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):
|
||||
"""
|
||||
|
||||
Loading…
Reference in New Issue
Block a user