Update typography of rendered rich text answers (#3601)

Fixes: #3594 - Update headings and paragraph to use tailwind/typrography. - Add border bottom for questions rendering to distinguish it with headings in the rendered answers [1] - Add styled table [2]
HyphaApp · Oct 16, 2023 · 80a191e · 80a191e
1 parent 9dbd182
commit 80a191e
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 31 deletions.
diff --git a/hypha/apply/determinations/templates/determinations/determination_detail.html b/hypha/apply/determinations/templates/determinations/determination_detail.html
@@ -30,7 +30,7 @@ <h5 class="determination-outcome mb-4">
         {% endif %}
     </div>
 
-    <div class="rich-text rich-text--answers">
+    <div class="rich-text rich-text--answers prose">
         <h4>{% trans "Determination message" %}</h4>
         {{ determination.message|bleach }}
         {% for group in determination.detailed_data.values %}

diff --git a/hypha/apply/funds/templates/funds/includes/rendered_answers.html b/hypha/apply/funds/templates/funds/includes/rendered_answers.html
@@ -1,38 +1,38 @@
 {% load i18n wagtailusers_tags workflow_tags %}
-<h3>{% trans "Proposal Information" %}</h3>
+<h3 class="text-xl border-b pb-2 font-bold">{% trans "Proposal Information" %}</h3>
 <div class="grid grid--proposal-info">
     {% if object.get_value_display != "-" %}
         <div>
-            <h5>{% trans "Requested Funding" %}</h5>
+            <h5 class="text-base">{% trans "Requested Funding" %}</h5>
             {{ object.get_value_display }}
         </div>
     {% endif %}
 
     {% if object.get_duration_display != "-" %}
         <div>
-            <h5>{% trans "Project Duration" %}</h5>
+            <h5 class="text-base">{% trans "Project Duration" %}</h5>
             {{ object.get_duration_display }}
         </div>
     {% endif %}
 
     <div>
-        <h5>{% trans "Legal Name" %}</h5>
-        {{ object.get_full_name_display }}{% if request.user.is_apply_staff %} (<a href="{% url 'wagtailusers_users:edit' object.user_id %}">{% trans "Edit account" %}</a>){% endif %}
+        <h5 class="text-base inline">{% trans "Legal Name" %}</h5>{% if request.user.is_apply_staff %} <span class="text-sm">(<a class="underline" href="{% url 'wagtailusers_users:edit' object.user_id %}">{% trans "Edit" %}</a>)</span>{% endif %}
+        {{ object.get_full_name_display }}
     </div>
 
     <div>
-        <h5>{% trans "E-mail" %}</h5>
+        <h5 class="text-base">{% trans "E-mail" %}</h5>
         {{ object.get_email_display }}
     </div>
     {% if object.get_address_display != "-" %}
         <div class="grid__cell--span-two">
-            <h5>{% trans "Address" %}</h5>
+            <h5 class="text-base">{% trans "Address" %}</h5>
             {{ object.get_address_display }}
         </div>
     {% endif %}
     {% if object.get_organization_name_display != "-" %}
         <div class="grid__cell--span-two">
-            <h5>{% trans "Organization name" %}</h5>
+            <h5 class="text-base">{% trans "Organization name" %}</h5>
             {{ object.get_organization_name_display }}
         </div>
     {% endif %}

diff --git a/hypha/apply/review/templates/review/review_detail.html b/hypha/apply/review/templates/review/review_detail.html
@@ -60,7 +60,9 @@ <h5>{% trans "Review was not against the latest version" %}:</h5>
     <div class="rich-text rich-text--answers">
         {{ object.get_comments_display|submission_links }}
 
-        {{ object.output_answers|submission_links }}
+        <div class="prose">
+            {{ object.output_answers|submission_links }}
+        </div>
     </div>
 
     {% if form %}

diff --git a/hypha/apply/stream_forms/templates/stream_forms/render_field.html b/hypha/apply/stream_forms/templates/stream_forms/render_field.html
@@ -1,9 +1,9 @@
 {% if include_question %}
-    <section>
-        <h4 class="question">{{ value.field_label }}</h4>
+    <section class="">
+        <h4 class="question text-xl font-bold border-b mb-2 py-2">{{ value.field_label }}</h4>
 {% endif %}
 
-<div class="answer">
+<div class="answer prose max-w-none">
     {% block data_display %}<p>{{ data }}</p>{% endblock %}
 </div>
 

diff --git a/hypha/static_src/src/sass/apply/components/_rich-text.scss b/hypha/static_src/src/sass/apply/components/_rich-text.scss
@@ -18,25 +18,38 @@
     }
 
     h1 {
-        font-size: 20px;
-        font-family: $font--primary;
+        font-size: 1.296rem;
+        margin-bottom: 1em;
+        font-weight: 600;
+        line-height: 1.3333;
+    }
+
+    h1:not(:first-child) {
+        margin-top: 2em;
     }
 
     h2 {
-        font-size: 18px;
-        font-family: $font--primary;
+        font-size: 1.215rem;
+        margin-top: 1.6em;
+        margin-bottom: 0.6em;
+        line-height: 1.6;
+        font-weight: 600;
     }
 
     h3,
-    h4:not(.question),
-    h5,
-    h6 {
-        font-size: 16px;
-        font-family: $font--primary;
+    h4:not(.question) {
+        font-size: 1.138rem;
+        margin-top: 1.5em;
+        margin-bottom: 0.5em;
+        line-height: 1.5;
     }
 
-    .question {
-        margin: 0;
+    h5,
+    h6 {
+        font-size: 1.067rem;
+        margin-top: 1.4em;
+        margin-bottom: 0.4em;
+        line-height: 1.4;
     }
 
     &--hidden {
@@ -47,23 +60,26 @@
         }
     }
 
+    // This is a hack to make sure a copy pasted table with width property on it
+    // doesn't break the layout. The margin from the table is removed and transferred
+    // to the parent element, because the table is wrapped in a div with overflow: auto
     &__table {
         overflow: auto;
+        margin-top: 1.25em;
+        margin-bottom: 1.25em;
+
+        > table {
+            margin-top: 0;
+            margin-bottom: 0;
+        }
     }
 
     ul {
-        padding-left: 20px;
-        list-style: outside disc;
-
         &.remove-list-style {
             padding: 0;
             list-style: none;
         }
     }
-
-    ol {
-        list-style: inside decimal;
-    }
 }
 
 .tox-statusbar {