Merge pull request #1298 from emanuelschuetze/fix-995

Improved html templates for mobile devices (responsive).
This commit is contained in:
Emanuel Schütze 2014-05-19 22:17:26 +02:00
commit bf8bb31cdb
15 changed files with 83 additions and 39 deletions

View File

@ -44,6 +44,7 @@ Other:
- Added api for absolute urls in models.
- Inserted command line option to translate config strings during database setup.
- Enhanced http error pages.
- Improved responsive design for templates.
- Fixed headings on custom slides without text.
- Moved dashboard and select widgets view from projector to core app.
- Renamed and cleaned up static direcories.

View File

@ -85,7 +85,7 @@ ol.agenda_list {
outline: 1px dashed #4183C4;
}
.agenda_list .openclose { width: 40px; float: left; min-height: 1px; }
.agenda_list .duration { width: 92px; float: right; min-height: 1px; text-align: right; }
.agenda_list .duration { width: 92px; float: right; min-height: 1px; text-align: right; padding-right: 15px; }
.agenda_list .manage { width: 200px; float: right; min-height: 1px; padding-left: 15px; }
.agenda_list .title { float: left; padding-left: 5px;}
.agenda_list .optional { float: left; }
@ -109,4 +109,20 @@ ol.agenda_list {
.agenda_list .opener { display: none; }
.agenda_list li.closed ol { display: none; }
.agenda_list li.closed .closer { display: none; }
.agenda_list li.closed > div .opener { display: inline-block; }
.agenda_list li.closed > div .opener { display: inline-block; }
@media (max-width: 480px) {
#menu-overview .manage, .agenda_list .manage {
width: 50px;
}
.agenda_list .manage {
padding-right: 14px;
}
#menu-overview .duration, .agenda_list .duration {
width: 60px;
}
.agenda_list .duration {
padding-right: 11px;
}
}

View File

@ -18,6 +18,7 @@
</a>
{% endif %}
{% if perms.agenda.can_manage_agenda %}
<span class="optional-small">
<a href="{{ node|absolute_url:'update' }}" rel="tooltip" data-original-title="{% trans 'Edit' %}" class="btn btn-mini">
<i class="icon-pencil"></i>
</a>
@ -29,6 +30,7 @@
rel="tooltip" data-original-title="{% trans 'Change status (open/closed)' %}">
<i class="{% if node.closed %}icon-checked-new{% else %}icon-unchecked-new{% endif %}"></i>
</a>
</span>
{% if not node.is_leaf_node %}
<a href="{{ node|absolute_url:'projector_summary' }}"
class="activate_link btn btn-mini {% if node.is_active_slide and active_type == 'summary' %}btn-primary{% endif %}"

View File

@ -18,8 +18,8 @@
<br>
<small>{% trans "Election" %}</small>
<small class="pull-right">
<a href="{% url 'assignment_list' %}" class="btn btn-mini"><i class="icon-chevron-left"></i> {% trans "Back to overview" %}</a>
<a href="{% url 'assignment_pdf' assignment.id %}" class="btn btn-mini" rel="tooltip" data-original-title="{% trans 'Print election as PDF' %}" target="_blank"><i class="icon-print"></i> PDF</a>
<a href="{% url 'assignment_list' %}" class="btn btn-mini"><i class="icon-chevron-left"></i><span class="optional-small"> {% trans "Back to overview" %}</span></a>
<a href="{% url 'assignment_pdf' assignment.id %}" class="btn btn-mini" rel="tooltip" data-original-title="{% trans 'Print election as PDF' %}" target="_blank"><i class="icon-print"></i><span class="optional-small"> PDF</span></a>
<!-- activate projector -->
{% if perms.core.can_manage_projector %}
<a href="{{ assignment|absolute_url:'projector' }}"
@ -31,7 +31,7 @@
{% if perms.assignment.can_manage_assignment or perms.agenda.can_manage_agenda %}
<div class="btn-group">
<a data-toggle="dropdown" class="btn btn-mini dropdown-toggle">
{% trans 'More actions' %} <span class="caret"></span>
<span class="optional-small">{% trans 'More actions' %}</span> <span class="caret"></span>
</a>
<ul class="dropdown-menu pull-right">
{% if perms.assignment.can_manage_assignment %}

View File

@ -22,7 +22,7 @@
<a href="{% url 'assignment_create' %}" class="btn btn-mini btn-primary" rel="tooltip" data-original-title="{% trans 'New election' %}"><i class="icon-plus icon-white"></i> {% trans "New" %}</a>
{% endif %}
{% if perms.assignment.can_see_assignment %}
<a href="{% url 'assignment_list_pdf' %}" class="btn btn-mini" rel="tooltip" data-original-title="{% trans 'Print all elections as PDF' %}" target="_blank"><i class="icon-print"></i> PDF</a>
<a href="{% url 'assignment_list_pdf' %}" class="btn btn-mini" rel="tooltip" data-original-title="{% trans 'Print all elections as PDF' %}" target="_blank"><i class="icon-print"></i><span class="optional-small"> PDF</span></a>
{% endif %}
</small>
</h1>

View File

@ -13,7 +13,7 @@
{{ ballotnumber|ordinal|safe }} {% trans "ballot" %}
</small>
<small class="pull-right">
<a href="{{ assignment|absolute_url:'detail' }}" class="btn btn-mini"><i class="icon-chevron-left"></i> {% trans "Back to election" %}</a>
<a href="{{ assignment|absolute_url:'detail' }}" class="btn btn-mini"><i class="icon-chevron-left"></i><span class="optional-small"> {% trans "Back to election" %}</span></a>
<!-- activate projector -->
{% if perms.core.can_manage_projector %}
<a href="{{ assignment|absolute_url:'projector' }}"

View File

@ -348,7 +348,34 @@ legend + .control-group {
width: auto;
}
/* hide optional column */
.optional {
.optional, #searchbutton #id_q {
display: none;
}
#searchbutton button {
border-radius: 4px;
}
}
@media (max-width: 480px) {
body {
padding: 0;
}
.row-fluid .leftmenu {
float: left;
width: auto;
}
#header {
padding: 7px 5px 0;
}
#content {
margin: 0 5px 0 45px;
width: auto;
}
/* hide optional column */
.optional, .optional-small{
display: none;
}
#menu-overview .manage, .agenda_list .manage {
width: 50px !important;
}
}

View File

@ -27,11 +27,11 @@
<div class="span12">
<div id="header">
<a href="/" class="logo" title="{% trans 'Home' %}"><img src="{% static 'img/logo.png' %}" alt="{% trans 'Logo' %}" /></a>
<span class="title optional">{% get_config 'event_name' %} {% if 'event_description'|get_config %} {% get_config 'event_description' %}{% endif %}</span>
<span class="title optional">{% get_config 'event_name' %}</span>
{% block loginbutton %}
<div class="pull-right">
<!-- Search field -->
<form class="navbar-search" action="{% url 'core_search' %}" method="get">
<form id="searchbutton" class="navbar-search" action="{% url 'core_search' %}" method="get">
<div class="input-append">
<input type="text" id="id_q" name="q" class="input-medium" placeholder="{% trans 'Search' %}">
<button type="submit" class="btn"><i class="icon-search"></i></button>
@ -42,7 +42,7 @@
{% if chat_messages != None %}
<button class="btn" id="chatboxbutton" data-toggle="button">
<i class="icon-comments"></i>
{% trans 'Chat' %}
<span class="optional-small">{% trans 'Chat' %}</span>
<span id="newchatmessage"></span>
</button>
{% endif %}
@ -51,7 +51,8 @@
<div class="btn-group">
{% if user.is_authenticated %}
<a href="#" data-toggle="dropdown" class="btn dropdown-toggle">
<i class="icon-user"></i> {{ user.username }}
<i class="icon-user"></i>
<span class="optional-small">{{ user.username }}</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu pull-right">

View File

@ -16,10 +16,10 @@
<table class="table table-striped table-bordered">
<tr>
<th>{% trans 'Title' %}</th>
<th>{% trans 'Type' %}</th>
<th>{% trans 'Size' %}</th>
<th>{% trans 'Upload time' %}</th>
<th>{% trans 'Uploaded by' %}</th>
<th class="optional">{% trans 'Type' %}</th>
<th class="optional-small">{% trans 'Size' %}</th>
<th class="optional">{% trans 'Upload time' %}</th>
<th class="optional">{% trans 'Uploaded by' %}</th>
{% if perms.mediafile.can_manage or perms.mediafile.can_upload %}
<th class="mini_width">{% trans "Actions" %}</th>
{% endif %}
@ -27,10 +27,10 @@
{% for mediafile in mediafile_list %}
<tr class="{% if mediafile.is_active_slide %}activeline{% endif %}">
<td><a href="{{ mediafile.mediafile.url }}">{{ mediafile }}</a></td>
<td>{% trans mediafile.filetype %}</td>
<td>{{ mediafile.get_filesize }}</td>
<td>{{ mediafile.timestamp }}</td>
<td><a href="{{ mediafile.uploader|absolute_url }}">{{ mediafile.uploader }}</a></td>
<td class="optional">{% trans mediafile.filetype %}</td>
<td class="optional-small">{{ mediafile.get_filesize }}</td>
<td class="optional">{{ mediafile.timestamp }}</td>
<td class="optional"><a href="{{ mediafile.uploader|absolute_url }}">{{ mediafile.uploader }}</a></td>
{% if perms.mediafile.can_manage or perms.mediafile.can_upload %}
<td>
{% if mediafile.with_action_buttons %}

View File

@ -32,10 +32,10 @@
</small>
<small class="pull-right">
<a href="{% url 'motion_list' %}" class="btn btn-mini">
<i class="icon-chevron-left"></i> {% trans "Back to overview" %}</a>
<i class="icon-chevron-left"></i><span class="optional-small"> {% trans "Back to overview" %}</span></a>
<a href="{% url 'motion_detail_pdf' motion.id %}" class="btn btn-mini"
rel="tooltip" data-original-title="{% trans 'Print motion as PDF' %}" target="_blank">
<i class="icon-print"></i> PDF</a>
<i class="icon-print"></i><span class="optional-small"> PDF</span></a>
<!-- activate projector -->
{% if perms.core.can_manage_projector %}
<a href="{{ motion|absolute_url:'projector' }}" class="activate_link btn {% if motion.is_active_slide %}btn-primary{% endif %} btn-mini" rel="tooltip" data-original-title="{% trans 'Show motion' %}">
@ -45,7 +45,7 @@
{% if perms.motion.can_manage_motion or perms.agenda.can_manage_agenda or allowed_actions.edit %}
<div class="btn-group">
<a data-toggle="dropdown" class="btn btn-mini dropdown-toggle">
{% trans 'More actions' %} <span class="caret"></span>
<span class="optional-small">{% trans 'More actions' %} </span> <span class="caret"></span>
</a>
<ul class="dropdown-menu pull-right">
<!-- edit -->

View File

@ -37,10 +37,10 @@
{% endif %}
{% endif %}
{% if perms.motion.can_manage_motion %}
<a href="{% url 'motion_category_list' %}" class="btn btn-mini" rel="tooltip" data-original-title="{% trans 'Manage categories' %}"><i class="icon-th-large"></i> {% trans 'Categories' %}</a>
<a href="{% url 'motion_csv_import' %}" class="btn btn-mini" rel="tooltip" data-original-title="{% trans 'Import motions' %}"><i class="icon-import"></i> {% trans 'Import' %}</a>
<a href="{% url 'motion_category_list' %}" class="btn btn-mini" rel="tooltip" data-original-title="{% trans 'Manage categories' %}"><i class="icon-th-large"></i><span class="optional-small"> {% trans 'Categories' %}</span></a>
<a href="{% url 'motion_csv_import' %}" class="btn btn-mini" rel="tooltip" data-original-title="{% trans 'Import motions' %}"><i class="icon-import"></i><span class="optional-small"> {% trans 'Import' %}</span></a>
{% endif %}
<a href="{% url 'motion_list_pdf' %}" class="btn btn-mini" rel="tooltip" data-original-title="{% trans 'Print all motions as PDF' %}" target="_blank"><i class="icon-print"></i> PDF</a>
<a href="{% url 'motion_list_pdf' %}" class="btn btn-mini" rel="tooltip" data-original-title="{% trans 'Print all motions as PDF' %}" target="_blank"><i class="icon-print"></i><span class="optional-small"> PDF</span></a>
</small>
</h1>
@ -50,7 +50,7 @@
<th>{% trans "#" %}</th>
<th>{% trans "Motion title" %}</th>
<th class="optional">{% trans 'Category' %}</th>
<th>{% trans "Status" %}</th>
<th class="optional-small">{% trans "Status" %}</th>
<th class="optional">{% trans "Submitter" %}</th>
{% if 'motion_min_supporters'|get_config > 0 %}
<th class="optional">{% trans "Supporters" %}</th>
@ -64,7 +64,7 @@
<td class="nobr">{{ motion.identifier|default:'' }}</td>
<td><a href="{{ motion|absolute_url }}">{{ motion }}</a></td>
<td class="optional">{% if motion.category %}{{ motion.category }}{% else %}{% endif %}</td>
<td><span class="label label-info">{% trans motion.state.name %}</span></td>
<td class="optional-small"><span class="label label-info">{% trans motion.state.name %}</span></td>
<td class="optional">
{% for submitter in motion.submitter.all %}
{{ submitter.person }}{% if not forloop.last %}, {% endif %}
@ -104,9 +104,6 @@
class="btn btn-mini"><i class="icon-remove"></i>
</a>
{% endif %}
<a href="{% url 'motion_detail_pdf' motion.id %}" data-original-title="{% trans 'Print motion as PDF' %}"
class="btn btn-mini tooltip-left" target="_blank"><i class="icon-print"></i> PDF
</a>
</span>
</td>
</tr>

View File

@ -9,7 +9,7 @@
<h1>{% trans group.name %}
<small class="pull-right">
<a href="{% url 'user_group_overview' %}" class="btn btn-mini"><i class="icon-chevron-left"></i> {% trans "Back to overview" %}</a>
<a href="{% url 'user_group_overview' %}" class="btn btn-mini"><i class="icon-chevron-left"></i><span class="optional-small"> {% trans "Back to overview" %}</span></a>
<!-- activate projector -->
{% if perms.core.can_manage_projector %}
<a href="{% url 'projector_activate_slide' group.sid %}" class="activate_link btn {% if group.active %}btn-primary{% endif %} btn-mini" rel="tooltip" data-original-title="{% trans 'Show group' %}">
@ -19,7 +19,7 @@
{% if perms.participant.can_manage_participant and group.pk != 1 and group.pk != 2 %}
<div class="btn-group">
<a data-toggle="dropdown" class="btn btn-mini dropdown-toggle">
{% trans 'More actions' %} <span class="caret"></span>
<span class="optional-small">{% trans 'More actions' %} </span><span class="caret"></span>
</a>
<ul class="dropdown-menu pull-right">
<!-- edit -->

View File

@ -20,7 +20,7 @@
{% trans "Groups" %}
<small class="pull-right">
<a href="{% url 'user_group_new' %}" class="btn btn-mini btn-primary" rel="tooltip" data-original-title="{% trans 'New group' %}"><i class="icon-plus icon-white"></i> {% trans "New" %}</a>
<a href="{% url 'user_overview' %}" class="btn btn-mini"><i class="icon-chevron-left"></i> {% trans "Back to participants overview" %}</a>
<a href="{% url 'user_overview' %}" class="btn btn-mini"><i class="icon-chevron-left"></i><span class="optional-small"> {% trans "Back to participants overview" %}</span></a>
</small>
</h1>

View File

@ -22,13 +22,13 @@
{% if perms.participant.can_manage_participant %}
<a href="{% url 'user_new' %}" class="btn btn-mini btn-primary" rel="tooltip" data-original-title="{% trans 'New participant' %}"><i class="icon-plus icon-white"></i> {% trans "New" %}</a>
<a href="{% url 'user_new_multiple' %}" class="btn btn-mini" rel="tooltip" data-original-title="{% trans 'New multiple participants' %}"><i class="icon-plus"></i> {% trans 'New multiple' %}</a>
<a href="{% url 'user_group_overview' %}" class="btn btn-mini" rel="tooltip" data-original-title="{% trans 'All groups' %}"><i class="icon-group"></i> {% trans "Groups" %}</a>
<a href="{% url 'user_csv_import' %}" class="btn btn-mini" rel="tooltip" data-original-title="{% trans 'Import participants' %}"><i class="icon-import"></i> {% trans 'Import' %}</a>
<a href="{% url 'user_group_overview' %}" class="btn btn-mini" rel="tooltip" data-original-title="{% trans 'All groups' %}"><i class="icon-group"></i><span class="optional-small"> {% trans "Groups" %}</span></a>
<a href="{% url 'user_csv_import' %}" class="btn btn-mini" rel="tooltip" data-original-title="{% trans 'Import participants' %}"><i class="icon-import"></i><span class="optional-small"> {% trans 'Import' %}</span></a>
{% endif %}
{% if perms.participant.can_see_participant and perms.participant.can_manage_participant %}
<div class="btn-group">
<a data-toggle="dropdown" class="btn btn-mini dropdown-toggle">
<i class="icon-print"></i> PDF <span class="caret"></span>
<i class="icon-print"></i><span class="optional-small"> PDF</span> <span class="caret"></span>
</a>
<ul class="dropdown-menu pull-right">
{% url 'user_settings' as url_usersettings %}

View File

@ -9,7 +9,7 @@
<h1>
{{ shown_user.clean_name }}
<small class="pull-right">
<a href="{% url 'user_overview' %}" class="btn btn-mini"><i class="icon-chevron-left"></i> {% trans "Back to overview" %}</a>
<a href="{% url 'user_overview' %}" class="btn btn-mini"><i class="icon-chevron-left"></i><span class="optional-small"> {% trans "Back to overview" %}</span></a>
<!-- activate projector -->
{% if perms.core.can_manage_projector %}
<a href="{% url 'projector_activate_slide' shown_user.sid %}" class="activate_link btn {% if shown_user.active %}btn-primary{% endif %} btn-mini" rel="tooltip" data-original-title="{% trans 'Show participant' %}">
@ -19,7 +19,7 @@
{% if perms.participant.can_manage_participant %}
<div class="btn-group">
<a data-toggle="dropdown" class="btn btn-mini dropdown-toggle">
{% trans 'More actions' %} <span class="caret"></span>
<span class="optional-small">{% trans 'More actions' %} </span><span class="caret"></span>
</a>
<ul class="dropdown-menu pull-right">
<!-- edit -->