ag-admin/OpenSlides
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improved projector zoom and scroll behaviour.

Browse Source 
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 2013-10-23 17:08:08 +02:00
parent 7fcc786cf9
commit 84d2619289
13 changed files with 165 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
openslides/agenda/templates/agenda/item_slide.html
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 %}

11
openslides/agenda/templates/agenda/item_slide_list_of_speaker.html
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 %}

165
openslides/assignment/templates/assignment/slide.html
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 %}

2
openslides/motion/templates/motion/slide.html
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>

2
openslides/projector/signals.py
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',

8
openslides/projector/static/javascript/dashboard.js
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');
}
}
});
});

7
openslides/projector/static/javascript/projector.js
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) {

35
openslides/projector/static/styles/projector.css
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;
}

2
openslides/projector/templates/projector.html
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>

29
openslides/projector/templates/projector/live_view_widget.html
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 %}

8
openslides/projector/templates/projector/projectorslide_slide.html
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 %}

11
openslides/projector/urls.py
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(),

21
openslides/projector/views.py
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):
"""