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> <hr>
</h1> </h1>
<div class="scroll"> {% if item.text %}
{% if item.text %} {{ item.text|safe }}
{{ item.text|safe|linebreaks }} {% endif %}
{% endif %}
</div>

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

165
openslides/assignment/templates/assignment/slide.html
View File

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

2
openslides/projector/signals.py
View File

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

8
openslides/projector/static/javascript/dashboard.js
View File

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

7
openslides/projector/static/javascript/projector.js
View File

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

35
openslides/projector/static/styles/projector.css
View File

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

2
openslides/projector/templates/projector.html
View File

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

29
openslides/projector/templates/projector/live_view_widget.html
View File

@ -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>
&nbsp;&nbsp; <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>
&nbsp;&nbsp;
<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 %}

8
openslides/projector/templates/projector/projectorslide_slide.html
View File

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

11
openslides/projector/urls.py
View File

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

21
openslides/projector/views.py
View File

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