From 3a3456e592c1e54ce2ef0b750c98c82b5127eb2a Mon Sep 17 00:00:00 2001
From: Fredrik Jonsson <frjo@xdeb.org>
Date: Thu, 22 Nov 2018 13:40:59 +0100
Subject: [PATCH] Sematic html for submissions, news and information pages to
activate reader view in Safari and Firefox.
---
.../funds/applicationsubmission_admin_detail.html | 1 +
.../funds/applicationsubmission_detail.html | 11 ++++++-----
.../funds/applicationsubmission_form.html | 2 +-
.../templates/funds/includes/rendered_answers.html | 10 +++++-----
.../templates/stream_forms/render_field.html | 8 ++++----
opentech/public/news/templates/news/news_page.html | 14 +++++++-------
.../people/templates/people/person_page.html | 2 +-
.../projects/templates/projects/project_page.html | 2 +-
.../templates/standardpages/information_page.html | 4 ++--
.../javascript/apply/submission-text-cleanup.js | 14 ++++++++++++++
.../src/sass/apply/components/_link.scss | 4 ----
.../src/sass/apply/components/_rich-text.scss | 12 ++++++++++--
.../src/sass/apply/components/_wrapper.scss | 2 +-
13 files changed, 53 insertions(+), 33 deletions(-)
create mode 100644 opentech/static_src/src/javascript/apply/submission-text-cleanup.js
diff --git a/opentech/apply/funds/templates/funds/applicationsubmission_admin_detail.html b/opentech/apply/funds/templates/funds/applicationsubmission_admin_detail.html
index 47380b0e4..5cc8cc9b0 100644
--- a/opentech/apply/funds/templates/funds/applicationsubmission_admin_detail.html
+++ b/opentech/apply/funds/templates/funds/applicationsubmission_admin_detail.html
@@ -44,4 +44,5 @@
<script src="{% static 'js/apply/toggle-actions-panel.js' %}"></script>
<script src="{% static 'js/apply/toggle-reviewers.js' %}"></script>
<script src="{% static 'js/apply/toggle-sidebar.js' %}"></script>
+ <script src="{% static 'js/apply/submission-text-cleanup.js' %}"></script>
{% endblock %}
diff --git a/opentech/apply/funds/templates/funds/applicationsubmission_detail.html b/opentech/apply/funds/templates/funds/applicationsubmission_detail.html
index 4f11172e9..ab0d66ee8 100644
--- a/opentech/apply/funds/templates/funds/applicationsubmission_detail.html
+++ b/opentech/apply/funds/templates/funds/applicationsubmission_detail.html
@@ -49,14 +49,14 @@
{% endblock %}
<div class="wrapper wrapper--sidebar">
{% if request.user|has_edit_perm:object and object.status == 'draft_proposal' and not request.user.is_apply_staff %}
- <div>
+ <div class="wrapper--sidebar--inner">
<h4>Congratulations!</h4>
<h5>Your {{ object.previous.stage }} application has been accepted.</h5>
<a class="button button--primary" href="{% url 'funds:submissions:edit' object.id %}">Start your {{ object.stage }} application</a>
</div>
{% else %}
- <div>
- <h6 class="heading heading--submission-meta">
+ <article class="wrapper--sidebar--inner">
+ <header class="heading heading--submission-meta heading-text zeta">
<span>Submitted: <strong>{{ object.submit_time.date }} by {{ object.user.get_full_name }}</strong></span>
<span>Last edited: <strong>{{ object.live_revision.timestamp.date }} by {{ object.live_revision.author }}</strong></span>
{% if request.user|has_edit_perm:object %}
@@ -70,10 +70,10 @@
<svg class="icon icon--padlock"><use xlink:href="#padlock"></use></svg>
</span>
{% endif %}
- </h6>
+ </header>
{% include "funds/includes/rendered_answers.html" %}
- </div>
+ </article>
{% endif %}
<aside class="sidebar">
@@ -131,5 +131,6 @@
{% block extra_js %}
<script src="{% static 'js/apply/tabs.js' %}"></script>
+ <script src="{% static 'js/apply/submission-text-cleanup.js' %}"></script>
{% endblock %}
diff --git a/opentech/apply/funds/templates/funds/applicationsubmission_form.html b/opentech/apply/funds/templates/funds/applicationsubmission_form.html
index ce956b2c6..4b9de190c 100644
--- a/opentech/apply/funds/templates/funds/applicationsubmission_form.html
+++ b/opentech/apply/funds/templates/funds/applicationsubmission_form.html
@@ -11,7 +11,7 @@
{% include "forms/includes/form_errors.html" with form=form %}
<div class="wrapper wrapper--light-grey-bg wrapper--form wrapper--sidebar">
- <div>
+ <div class="wrapper--sidebar--inner">
<form class="form" action="" method="post" enctype="multipart/form-data">
{% csrf_token %}
{{ form.media }}
diff --git a/opentech/apply/funds/templates/funds/includes/rendered_answers.html b/opentech/apply/funds/templates/funds/includes/rendered_answers.html
index 573d6bd24..301e1820b 100644
--- a/opentech/apply/funds/templates/funds/includes/rendered_answers.html
+++ b/opentech/apply/funds/templates/funds/includes/rendered_answers.html
@@ -3,26 +3,26 @@
<div class="grid grid--proposal-info">
<div>
<h5>Requested Funding</h5>
- <p>{{ object.get_value_display }}</p>
+ {{ object.get_value_display }}
</div>
<div>
<h5>Project Duration</h5>
- <p>{{ object.get_duration_display }}</p>
+ {{ object.get_duration_display }}
</div>
<div>
<h5>Legal Name</h5>
- <p>{{ object.get_full_name_display }}{% if request.user.is_apply_staff %} (<a href="{% url 'wagtailusers_users:edit' object.user_id %}">Edit account</a>){% endif %}</p>
+ {{ object.get_full_name_display }}{% if request.user.is_apply_staff %} (<a href="{% url 'wagtailusers_users:edit' object.user_id %}">Edit account</a>){% endif %}
</div>
<div>
<h5>Email</h5>
- <p>{{ object.get_email_display }}</p>
+ {{ object.get_email_display }}
</div>
<div class="grid__cell--span-two">
<h5>Address</h5>
- <p>{{ object.get_address_display }}</p>
+ {{ object.get_address_display }}
</div>
</div>
<div class="rich-text rich-text--answers">
diff --git a/opentech/apply/stream_forms/templates/stream_forms/render_field.html b/opentech/apply/stream_forms/templates/stream_forms/render_field.html
index 8826fee6c..01afc0c0c 100644
--- a/opentech/apply/stream_forms/templates/stream_forms/render_field.html
+++ b/opentech/apply/stream_forms/templates/stream_forms/render_field.html
@@ -1,10 +1,10 @@
{% if include_question %}
-<div>
- <h5>{{ value.field_label }}</h5>
+<section>
+ <h4>{{ value.field_label }}</h4>
{% endif %}
- <div>{% block data_display %}{{ data }}{% endblock %}</div>
+ {% block data_display %}<span>{{ data }}</span>{% endblock %}
{% if include_question %}
-</div>
+</section>
{% endif %}
diff --git a/opentech/public/news/templates/news/news_page.html b/opentech/public/news/templates/news/news_page.html
index 5dc991351..632ffe69f 100644
--- a/opentech/public/news/templates/news/news_page.html
+++ b/opentech/public/news/templates/news/news_page.html
@@ -2,25 +2,25 @@
{% load wagtailcore_tags wagtailimages_tags static %}
{% block content %}
-<div class="wrapper wrapper--small">
+<article class="wrapper wrapper--small">
- <h5 class="heading heading--author">
- {{ page.display_date|date:"D, Y-m-d H:i" }}
+ <header class="heading heading--author heading-text epsilon">
+ <time datetime="{{ page.display_date|date:"c" }}">{{ page.display_date|date:"D, Y-m-d H:i" }}</time>
{% if page.authors.all %}
| By:
{% for author in page.authors.all %}
<a href="{% pageurl author.author %}">{{ author.author }}</a>
{% endfor %}
{% endif %}
- </h5>
+ </header>
{% if page.introduction %}
<h4 class="heading heading--introduction">{{ page.introduction }}</h4>
{% endif %}
- <section class="main-body">
+ <div class="main-body">
{% include_block page.body %}
- </section>
+ </div>
{% if page.news_types.all %}
<ul class="list list--flex">
@@ -40,7 +40,7 @@
{% endif %}
{% include "includes/share.html" %}
-</div>
+</article>
{% include "includes/relatedcontent.html" with related_documents=page.related_documents.all related_pages=page.related_pages.all %}
diff --git a/opentech/public/people/templates/people/person_page.html b/opentech/public/people/templates/people/person_page.html
index 7ec3a90c7..f6f605655 100644
--- a/opentech/public/people/templates/people/person_page.html
+++ b/opentech/public/people/templates/people/person_page.html
@@ -4,7 +4,7 @@
{% block content %}
<section class="wrapper wrapper--small wrapper--inner-space-large wrapper--sidebar">
- <div>
+ <div class="wrapper--sidebar--inner">
{% for person_type in page.person_types.all %}
<h5 class="heading heading--no-margin">{{ person_type }}</h5>
{% endfor %}
diff --git a/opentech/public/projects/templates/projects/project_page.html b/opentech/public/projects/templates/projects/project_page.html
index 40a87ce47..f67fd4932 100644
--- a/opentech/public/projects/templates/projects/project_page.html
+++ b/opentech/public/projects/templates/projects/project_page.html
@@ -13,7 +13,7 @@
</div>
<div class="wrapper wrapper--sidebar wrapper--inner-space-small">
- <div>
+ <div class="wrapper--sidebar--inner">
{{ page.body }}
</div>
<div>
diff --git a/opentech/public/standardpages/templates/standardpages/information_page.html b/opentech/public/standardpages/templates/standardpages/information_page.html
index c91053b44..8a22f0df0 100644
--- a/opentech/public/standardpages/templates/standardpages/information_page.html
+++ b/opentech/public/standardpages/templates/standardpages/information_page.html
@@ -4,7 +4,7 @@
{% block content %}
<div class="wrapper wrapper--flex">
- <section class="section section--main">
+ <article class="section section--main">
{% if page.introduction %}
<h4 class="heading heading--introduction">{{ page.introduction }}</h4>
{% endif %}
@@ -12,7 +12,7 @@
{% include_block page.body %}
{% include "includes/share.html" %}
- </section>
+ </article>
</div>
{% include "includes/relatedcontent.html" with related_pages=page.related_pages.all %}
diff --git a/opentech/static_src/src/javascript/apply/submission-text-cleanup.js b/opentech/static_src/src/javascript/apply/submission-text-cleanup.js
new file mode 100644
index 000000000..9c5f7b813
--- /dev/null
+++ b/opentech/static_src/src/javascript/apply/submission-text-cleanup.js
@@ -0,0 +1,14 @@
+(function ($) {
+
+ 'use strict';
+
+ $('p').each(function () {
+ // Detach (remove) p tag with only whitespace inside.
+ if ($.trim($(this).text()) === '') {
+ $(this).detach();
+ }
+ });
+
+
+})(jQuery);
+
diff --git a/opentech/static_src/src/sass/apply/components/_link.scss b/opentech/static_src/src/sass/apply/components/_link.scss
index bb2bb45d7..65917654e 100644
--- a/opentech/static_src/src/sass/apply/components/_link.scss
+++ b/opentech/static_src/src/sass/apply/components/_link.scss
@@ -30,10 +30,6 @@
background: $color--light-blue;
transition: background-color, $transition;
- @include media-query(mob-landscape) {
- max-width: 300px;
- }
-
&:focus,
&:hover {
background-color: $color--dark-blue;
diff --git a/opentech/static_src/src/sass/apply/components/_rich-text.scss b/opentech/static_src/src/sass/apply/components/_rich-text.scss
index 7a8b80a3a..4457e5494 100644
--- a/opentech/static_src/src/sass/apply/components/_rich-text.scss
+++ b/opentech/static_src/src/sass/apply/components/_rich-text.scss
@@ -3,11 +3,19 @@
word-break: break-word;
&--answers {
- > div {
+ > section {
margin: 0 0 1rem;
+
+ p:first-of-type {
+ margin-top: 0;
+ }
+
+ p:empty {
+ margin: 0;
+ }
}
- h5 {
+ h4 {
margin: 0;
}
}
diff --git a/opentech/static_src/src/sass/apply/components/_wrapper.scss b/opentech/static_src/src/sass/apply/components/_wrapper.scss
index 18e04f427..cf14c2fe9 100644
--- a/opentech/static_src/src/sass/apply/components/_wrapper.scss
+++ b/opentech/static_src/src/sass/apply/components/_wrapper.scss
@@ -167,7 +167,7 @@
}
}
- > div:first-child {
+ &--inner {
flex: 1;
@include media-query(tablet-portrait) {
--
GitLab