From f41133d733c91afc9631514add0e7fd432acbe8b Mon Sep 17 00:00:00 2001 From: Daniel Roschka Date: Fri, 5 Jun 2015 16:50:48 +0200 Subject: [PATCH 1/2] Responsive layout for better experience on mobile devices This commit changes the layout of binder to provide a better experience on mobile devices and for form validation errors. It's outcome might not be perfect yet, but I believe it's a really nice step forward. The changes consist of: * moving the menu from the left side to the top, so it doesn't consume additional screen space when scrolling down * changed the width of the content to depend on the screen size. For larger screens the forms won't consume the whole width, but validation errors will be shown beside the form field containing the error * showing field independent error messages on top of each form * highlighting of form fields which contain errors --- binder/templates/base.html | 71 ++++---- .../bcommon/add_cname_record_form.html | 127 +++++++++----- binder/templates/bcommon/add_record_form.html | 166 ++++++++++-------- .../bcommon/delete_record_initial.html | 96 +++++----- binder/templates/bcommon/list_zone.html | 12 +- binder/templates/index.html | 2 +- 6 files changed, 282 insertions(+), 192 deletions(-) diff --git a/binder/templates/base.html b/binder/templates/base.html index 73e7194..bdd62c8 100644 --- a/binder/templates/base.html +++ b/binder/templates/base.html @@ -15,40 +15,51 @@ -
+
-
- {% block navigation %} - - {% endblock navigation %} -
- -
-
-
- {% block pageheader %}{% endblock pageheader %} +
+
+
+
+ + Binder +
+ +
- - {% block errors %} - {% if errors %} -
- Errors were encountered: -
- {{ errors }} -
- {% endif %} - {% endblock errors %} - -
- {% block body %} - {% endblock body %}
-
+
+
+

{% block pageheader %}{% endblock pageheader %}

+
+
+
+
+
+ {% block errors %} + {% if errors %} +
+ Errors were encountered: +
+ {{ errors }} +
+ {% endif %} + {% endblock errors %} + + {% block body %} + {% endblock body %} +
+
diff --git a/binder/templates/bcommon/add_cname_record_form.html b/binder/templates/bcommon/add_cname_record_form.html index 8991ba2..2edbeef 100644 --- a/binder/templates/bcommon/add_cname_record_form.html +++ b/binder/templates/bcommon/add_cname_record_form.html @@ -5,57 +5,81 @@ {% block body %}
{% csrf_token %} Create CNAME record -
- -
- -
-
-
- -
- +
+ +
+
-
- -
- -
- -
-
- -
- -
- {% if form_errors.cname %} - + +
+ +
+ +
+ {% if form_errors.originating_record %} +
+
+ {{ form_errors.originating_record|stringformat:"s"|striptags }} + {% if form_data.originating_record %} Previous Value: {{ form_data.originating_record }}{% endif %} +
+
+ {% endif %} +
+ +
+ +
- -
.{{zone_name}}
+ + .{{zone_name}} +
-
- -
- -
- {% for ttl, description in ttl_choices %} - - {% endfor %} + {% if form_errors.cname %} +
+
+ CNAME: {{ form_errors.cname|stringformat:"s"|striptags }} + {% if form_data.cnamr %} Previous Value: {{ form_data.cname }}{% endif %} +
+ {% endif %}
-
- -
- + {% for ttl, description in ttl_choices %} + + {% endfor %} + +
+ {% if form_errors.ttl %} +
+
+ {{ form_errors.ttl|stringformat:"s"|striptags }} + {% if form_data.ttl %} Previous Value: {{ form_data.ttl }}{% endif %} +
+
+ {% endif %} +
+ +
+ +
+
+ {% if form_errors.key_name %} +
+
+ {{ form_errors.key_name|stringformat:"s"|striptags }} + {% if form_data.key_name %} Previous Value: {{ form_data.key_name }}{% endif %} +
+
+ {% endif %}
- - Cancel - +
+
+
+ + Cancel +
+
+ {% endblock body %} diff --git a/binder/templates/bcommon/add_record_form.html b/binder/templates/bcommon/add_record_form.html index 4f46a05..cb384a2 100644 --- a/binder/templates/bcommon/add_record_form.html +++ b/binder/templates/bcommon/add_record_form.html @@ -5,98 +5,113 @@ {% block body %}
{% csrf_token %} Create Record -
- -
- + +
+ +
+
-
- -
- -
- -
-
- - -
- -
- {% if form_errors.record_name %} - + +
+ +
- -
.{{zone_name}}
+ + .{{zone_name}} +
+ {% if form_errors.record_name %} +
+
+ {{ form_errors.record_name|stringformat:"s"|striptags }} + {% if form_data.record_name %} Previous Value: {{ form_data.record_name }}{% endif %} +
+
+ {% endif %}
-
- -
+
+ +
+ {{name}} - - {% endfor %} + {% for type, name in record_type_choices %} + + {% endfor %} {% else %} - + {% endif %} +
+ {% if form_errors.record_type %} +
+
+ {{ form_errors.record_type|stringformat:"s"|striptags }} + {% if form_data.record_type %} Previous Value: {{ form_data.record_type }}{% endif %} +
+
+ {% endif %}
-
- -
- {% if form_errors.record_data %} - - {% endif %} -
- - {% if "in-addr.arpa" not in zone_name and "ip6.arpa" not in zone_name %} -
IP Address
- {% else %} -
FQDN
- {% endif %} +
+ +
+ +
+ {% if form_errors.record_data %} +
+
+ {{ form_errors.record_data|stringformat:"s"|striptags }} + {% if form_data.record_data %} Previous Value: {{ form_data.record_data }}{% endif %}
+ {% endif %}
- -
- -
- {% for ttl, description in ttl_choices %} - - {% endfor %} + +
+ +
+
+ {% if form_errors.ttl %} +
+
+ {{ form_errors.ttl|stringformat:"s"|striptags }} + {% if form_data.ttl %} Previous Value: {{ form_data.ttl }}{% endif %} +
+
+ {% endif %}
{% if "in-addr.arpa" not in zone_name and "ip.arpa" not in zone_name %}
- -
-
{% endif %} -
- -
- {% for key in tsig_keys %} {% empty %} @@ -104,9 +119,22 @@ {% endfor %}
+ {% if form_errors.key_name %} +
+
+ {{ form_errors.key_name|stringformat:"s"|striptags }} + {% if form_data.key_name %} Previous Value: {{ form_data.key_name }}{% endif %} +
+
+ {% endif %}
- - Cancel +
+
+
+ + Cancel +
+
{% endblock body %} diff --git a/binder/templates/bcommon/delete_record_initial.html b/binder/templates/bcommon/delete_record_initial.html index df78019..3d252d1 100644 --- a/binder/templates/bcommon/delete_record_initial.html +++ b/binder/templates/bcommon/delete_record_initial.html @@ -3,51 +3,65 @@ {% block pageheader %}Delete record(s) in {{ zone_name }}{% endblock pageheader %} {% block body %} -
- {% csrf_token %} - - - - - - - - - - - - - - - - - - - - - -
DNS Server{{dns_server.hostname}}
Zone{{zone_name}}
Records{% for current_rr in rr_list %} - {{ current_rr }}
- {% endfor %} -
-
-
- +
+

{{ dns_server.hostname }}

+
+
+ +
+ + +
+

{{ zone_name }}

+
+
+ +
+ + +
+

{% for current_rr in rr_list %}{{ current_rr }}
{% endfor %}

+
+
+ +
+ +
+ + {% endfor %} + +
+ {% if form_errors.key_name %} +
+
+ {{ form_errors.key_name|stringformat:"s"|striptags }} + {% if form_data.key_name %} Previous Value: {{ form_data.key_name }}{% endif %}
-
- - Cancel -
+ {% endif %} +
- - - +
+
+
+ + Cancel +
+
{% endblock body %} diff --git a/binder/templates/bcommon/list_zone.html b/binder/templates/bcommon/list_zone.html index 503633f..9c77109 100644 --- a/binder/templates/bcommon/list_zone.html +++ b/binder/templates/bcommon/list_zone.html @@ -11,7 +11,7 @@ - +
@@ -19,12 +19,11 @@ - + - {% for current_record in zone_array %} - + @@ -33,7 +32,9 @@ {% endfor %} -
Select NameClass Type DataActions
{{ current_record.rr_name }} {{ current_record.rr_ttl }} {{ current_record.rr_class }}
- +
diff --git a/binder/templates/index.html b/binder/templates/index.html index e97b10a..87b781b 100644 --- a/binder/templates/index.html +++ b/binder/templates/index.html @@ -1,6 +1,6 @@ {% extends "base.html" %} -{% block pageheader %}{% endblock pageheader %} +{% block pageheader %}Home{% endblock pageheader %} {% block body %} From a16abc40429f95974101343c9e1ffcc1085df6dc Mon Sep 17 00:00:00 2001 From: Daniel Roschka Date: Mon, 8 Jun 2015 19:20:53 +0200 Subject: [PATCH 2/2] Fixes tests broken by previous commit. --- binder/tests/testViews.py | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/binder/tests/testViews.py b/binder/tests/testViews.py index c2a34c3..30dcc0b 100644 --- a/binder/tests/testViews.py +++ b/binder/tests/testViews.py @@ -52,13 +52,13 @@ class PostTests(TestCase): "rr_list" : [] }) self.assertContains(response, - '', + '', html=True) self.assertContains(response, - '', + '', html=True) self.assertContains(response, - '', + '', html=True) @@ -69,10 +69,10 @@ class PostTests(TestCase): "rr_list" : ["testrecord1.testzone1.test.net", "testrecord2.testzone1.test.net"] }) self.assertContains(response, - '', html=True) + '', html=True) self.assertContains(response, - '', + '', html=True) self.assertContains(response, - '', + '', html=True)