Merge pull request #952 from emanuelschuetze/zoom

Improved projector zoom and scroll behaviour.
This commit is contained in:
Oskar Hahn 2013-10-25 23:53:26 -07:00
commit 98667d9479
13 changed files with 165 additions and 144 deletions

View File

@ -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 %}

View File

@ -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 %}
<i>{% trans 'The list of speakers is empty.' %}</i>
{% endif %}
</div>
{% else %}
<i>{% trans 'The list of speakers is empty.' %}</i>
{% endif %}

View File

@ -19,94 +19,93 @@
</small>
<hr>
</h1>
<div class="scroll">
{% if not assignment.candidates %}
<p>
<div class="text">{{ assignment.description|linebreaks }}</div>
</p>
{% endif %}
{% if assignment.candidates and assignment.status != "fin" %}
<h3>{% trans "Candidates" %}</h3>
<ol>
{% for candidate in assignment.candidates %}
<li>{{ candidate }} </li>
{% empty %}
<li style="list-style: none outside none;">
<i>{% trans "No candidates available." %}</i>
</li>
{% endfor %}
</ol>
<p><br></p>
{% endif %}
{% if not assignment.candidates %}
<p>
<div class="text">{{ assignment.description|linebreaks }}</div>
</p>
{% endif %}
{% if polls.exists %}
<h3>{% trans "Election results" %}</h3>
<table class="table-striped table-bordered">
{% if assignment.candidates and assignment.status != "fin" %}
<h3>{% trans "Candidates" %}</h3>
<ol>
{% for candidate in assignment.candidates %}
<li>{{ candidate }} </li>
{% empty %}
<li style="list-style: none outside none;">
<i>{% trans "No candidates available." %}</i>
</li>
{% endfor %}
</ol>
<p><br></p>
{% endif %}
{% if polls.exists %}
<h3>{% trans "Election results" %}</h3>
<table class="table-striped table-bordered">
<tr>
<th>{% trans "Candidates" %}</th>
{% for poll in polls %}
<th>
<nobr>{{ poll.get_ballot }}. {% trans "ballot" %}</nobr>
</th>
{% endfor %}
</tr>
{% for candidate, poll_list in vote_results.items %}
<tr>
<th>{% trans "Candidates" %}</th>
{% for poll in polls %}
<th>
<nobr>{{ poll.get_ballot }}. {% trans "ballot" %}</nobr>
</th>
{% endfor %}
</tr>
{% for candidate, poll_list in vote_results.items %}
<tr>
<td class="{% if candidate in assignment.elected %} elected{% endif %}">
{% if candidate in assignment.elected %}
<a class="elected">
<img src="{% static 'img/voting-yes.png' %}" title="{% trans 'Candidate is elected' %}">
</a>
{% endif %}
{{ candidate }}
</td>
{% for vote in poll_list %}
<td style="white-space:nowrap;"{% if candidate in assignment.elected %} class="elected"{% endif %}>
{% if not "assignment_publish_winner_results_only"|get_config or candidate in assignment.elected %}
{% if 'Yes' in vote and 'No' in vote and 'Abstain' in vote %}
<img src="{% static 'img/voting-yes.png' %}" title="{% trans 'Yes' %}"> {{ vote.Yes }}<br>
<img src="{% static 'img/voting-no.png' %}" title="{% trans 'No' %}"> {{ vote.No }}<br>
<img src="{% static 'img/voting-abstention.png' %}" title="{% trans 'Abstention' %}"> {{ vote.Abstain }}<br>
{% elif 'Votes' in vote %}
<img src="{% static 'img/voting-yes.png' %}" title="{% trans 'Yes' %}"> {{ vote.Votes }}
{% elif vote == None %}
{% trans 'was not a <br> candidate'%}
{% else %}
&nbsp;
{% endif %}
<td class="{% if candidate in assignment.elected %} elected{% endif %}">
{% if candidate in assignment.elected %}
<a class="elected">
<img src="{% static 'img/voting-yes.png' %}" title="{% trans 'Candidate is elected' %}">
</a>
{% endif %}
{{ candidate }}
</td>
{% for vote in poll_list %}
<td style="white-space:nowrap;"{% if candidate in assignment.elected %} class="elected"{% endif %}>
{% if not "assignment_publish_winner_results_only"|get_config or candidate in assignment.elected %}
{% if 'Yes' in vote and 'No' in vote and 'Abstain' in vote %}
<img src="{% static 'img/voting-yes.png' %}" title="{% trans 'Yes' %}"> {{ vote.Yes }}<br>
<img src="{% static 'img/voting-no.png' %}" title="{% trans 'No' %}"> {{ vote.No }}<br>
<img src="{% static 'img/voting-abstention.png' %}" title="{% trans 'Abstention' %}"> {{ vote.Abstain }}<br>
{% elif 'Votes' in vote %}
<img src="{% static 'img/voting-yes.png' %}" title="{% trans 'Yes' %}"> {{ vote.Votes }}
{% elif vote == None %}
{% trans 'was not a <br> candidate'%}
{% else %}
&nbsp;
{% endif %}
</td>
{% endfor %}
</tr>
{% endfor %}
<tr>
<td>{% trans 'Invalid votes' %}</td>
{% for poll in polls %}
<td style="white-space:nowrap;">
{% if poll.has_votes %}
<img src="{% static 'img/voting-invalid.png' %}" title="{% trans 'Invalid' %}">
{{ poll.print_votesinvalid }}
{% endif %}
</td>
{% endfor %}
</tr>
<tr class="total">
<td>
<strong>{% trans 'Votes cast' %}</strong>
{% else %}
&nbsp;
{% endif %}
</td>
{% for poll in polls %}
<td style="white-space:nowrap;">
{% if poll.has_votes %}
<img src="{% static 'img/voting-total.png' %}" title="{% trans 'Votes cast' %}">
<strong>{{ poll.print_votescast }}</strong>
{% endif %}
</td>
{% endfor %}
{% endfor %}
</tr>
</table>
{% endif %}
</div>
{% endfor %}
<tr>
<td>{% trans 'Invalid votes' %}</td>
{% for poll in polls %}
<td style="white-space:nowrap;">
{% if poll.has_votes %}
<img src="{% static 'img/voting-invalid.png' %}" title="{% trans 'Invalid' %}">
{{ poll.print_votesinvalid }}
{% endif %}
</td>
{% endfor %}
</tr>
<tr class="total">
<td>
<strong>{% trans 'Votes cast' %}</strong>
</td>
{% for poll in polls %}
<td style="white-space:nowrap;">
{% if poll.has_votes %}
<img src="{% static 'img/voting-total.png' %}" title="{% trans 'Votes cast' %}">
<strong>{{ poll.print_votescast }}</strong>
{% endif %}
</td>
{% endfor %}
</tr>
</table>
{% endif %}

View File

@ -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>

View File

@ -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',

View File

@ -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');
}
}
});
});

View File

@ -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) {

View File

@ -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;
}

View File

@ -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>

View File

@ -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 %}

View File

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

View File

@ -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(),

View File

@ -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):
"""