Improved html templates for mobile devices (responsive).

Fixed #995 (Use responsive navbar for main menu in backend template)

CHANGELOG

@@ -43,6 +43,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.

openslides/agenda/static/css/agenda.css

@@ -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; }
@@ -110,3 +110,19 @@ ol.agenda_list {
 .agenda_list li.closed ol { display: none; }
 .agenda_list li.closed .closer { display: none; }
 .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;
+    }
+}

openslides/agenda/templates/agenda/item_row.html

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

openslides/assignment/templates/assignment/assignment_detail.html

@@ -21,8 +21,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_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> PDF</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' }}"
@@ -34,7 +34,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 %}

openslides/assignment/templates/assignment/assignment_list.html

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

openslides/assignment/templates/assignment/assignmentpoll_form.html

@@ -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' }}"

openslides/core/static/css/base.css

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

openslides/core/templates/base.html

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

openslides/mediafile/templates/mediafile/mediafile_list.html

@@ -16,10 +16,10 @@
     <table class="table table-striped table-bordered">
         <tr>
             <th>{% trans 'Title' %}</th>
-            <th>{% trans 'Type' %}</th>
+            <th class="optional">{% trans 'Type' %}</th>
-            <th>{% trans 'Size' %}</th>
+            <th class="optional-small">{% trans 'Size' %}</th>
-            <th>{% trans 'Upload time' %}</th>
+            <th class="optional">{% trans 'Upload time' %}</th>
-            <th>{% trans 'Uploaded by' %}</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 class="optional">{% trans mediafile.filetype %}</td>
-            <td>{{ mediafile.get_filesize }}</td>
+            <td class="optional-small">{{ mediafile.get_filesize }}</td>
-            <td>{{ mediafile.timestamp }}</td>
+            <td class="optional">{{ mediafile.timestamp }}</td>
-            <td><a href="{{ mediafile.uploader|absolute_url }}">{{ mediafile.uploader }}</a></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 %}

openslides/motion/templates/motion/motion_detail.html

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

openslides/motion/templates/motion/motion_list.html

@@ -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_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> {% trans 'Import' %}</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>

openslides/participant/templates/participant/group_detail.html

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

openslides/participant/templates/participant/group_overview.html

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

openslides/participant/templates/participant/overview.html

@@ -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_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> {% trans 'Import' %}</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 %}

openslides/participant/templates/participant/user_detail.html

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