Process PR feedback

maykinmedia · Mar 26, 2024 · abbddc4 · abbddc4
1 parent 8e9ad8f
commit abbddc4
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 33 deletions.
diff --git a/src/open_inwoner/accounts/views/contactmoments.py b/src/open_inwoner/accounts/views/contactmoments.py
@@ -253,12 +253,12 @@ def get_context_data(self, **kwargs):
             }
             if zaak:
                 ctx["destination"] = {
-                    "label": _("Naar aanvrag"),
+                    "label": _("Naar aanvraag"),
                     "url": zaak_url,
                 }
         else:
             ctx["origin"] = {
-                "label": _("Terug naar aanvrag"),
+                "label": _("Terug naar aanvraag"),
                 "url": zaak_url,
             }
             ctx["destination"] = {

diff --git a/src/open_inwoner/openklant/tests/test_views.py b/src/open_inwoner/openklant/tests/test_views.py
@@ -294,7 +294,7 @@ def test_show_detail_for_bsn_with_zaak(self, m, mock_get_kcm_answer_mapping):
 
         zaak_link = response.pyquery("#origin_link")
 
-        self.assertIn(_("Terug naar aanvrag"), zaak_link.text())
+        self.assertIn(_("Terug naar aanvraag"), zaak_link.text())
         self.assertEqual(
             zaak_link.attr("href"),
             reverse(
@@ -355,7 +355,7 @@ def test_show_detail_for_bsn_with_zaak_reformat_esuite_id(
 
         zaak_link = response.pyquery("#origin_link")
 
-        self.assertIn(_("Terug naar aanvrag"), zaak_link.text())
+        self.assertIn(_("Terug naar aanvraag"), zaak_link.text())
         self.assertEqual(
             zaak_link.attr("href"),
             reverse(

diff --git a/src/open_inwoner/scss/components/Contactmomenten/Contactmomenten.scss b/src/open_inwoner/scss/components/Contactmomenten/Contactmomenten.scss
@@ -74,15 +74,21 @@
 }
 
 .contactmoment {
-  margin: auto;
-  width: 100%;
+  p {
+    color: var(--font-color-body);
+  }
+
+  &__heading:first-of-type {
+    margin-top: 0;
+  }
 
-  @media (min-width: 768px) and (max-width: 900px) {
-    width: 75%;
+  &__heading {
+    font-size: var(--font-size-body-large);
   }
 
-  @media (min-width: 901px) {
-    width: 50%;
+  &__text {
+    padding-bottom: var(--spacing-large);
+    line-height: var(--font-line-height-body-medium);
   }
 }
 

diff --git a/src/open_inwoner/templates/pages/contactmoment/detail.html b/src/open_inwoner/templates/pages/contactmoment/detail.html
@@ -10,32 +10,34 @@ <h1 class="h1" id="title">{{ contactmoment.onderwerp }}</h1>
             {% endrender_column %}
         {% endrender_grid %}
 
-        <div class="container--no-margin">
-            <div class="contactmoment">
-                <h3>{% trans "Uw vraag" %}</h3>
-                <p>{{ contactmoment.text }}</p>
-            </div>
-            <div class="contactmoment">
-                <h3>{% trans "Antwoord" %}</h3>
-                {% if contactmoment.antwoord %}
-                    <p>{{ contactmoment.antwoord }}</p>
-                {% else %}
-                    <p>{% trans "Nog geen antwoord beschijkbaar" %}</p>
-                {% endif %}
-            </div>
-            <div class="contactmoment">
-                <a href="{{ origin.url }}" id="origin_link" class="button button--secondary">
-                    {% icon "arrow_backward" %}{{ origin.label }}
-                </a>
-            </div>
-            {% if destination %}
+        {% render_grid %}
+            {% render_column start=4 span=6 %}
                 <div class="contactmoment">
-                    <a href="{{ destination.url }}" id="destination_link" class="button button--transparent">
-                        {{ destination.label }}{% icon "arrow_forward" %}
+                    <h2 class="contactmoment__heading">{% trans "Uw vraag" %}</h2>
+                    <p class="contactmoment__text">{{ contactmoment.text }}</p>
+                </div>
+                <div class="contactmoment">
+                    <h2 class="contactmoment__heading">{% trans "Antwoord" %}</h2>
+                    {% if contactmoment.antwoord %}
+                        <p class="contactmoment__text">{{ contactmoment.antwoord }}</p>
+                    {% else %}
+                        <p class="contactmoment__text">{% trans "Nog geen antwoord beschijkbaar" %}</p>
+                    {% endif %}
+                </div>
+                <div class="contactmoment">
+                    <a href="{{ origin.url }}" id="origin_link" class="button button--secondary">
+                        {% icon "arrow_backward" %}{{ origin.label }}
                     </a>
                 </div>
-            {% endif %}
-        </div>
+                {% if destination %}
+                    <div class="contactmoment">
+                        <a href="{{ destination.url }}" id="destination_link" class="button button--transparent">
+                            {{ destination.label }}{% icon "arrow_forward" %}
+                        </a>
+                    </div>
+                {% endif %}
+            {% endrender_column %}
+        {% endrender_grid %}
 
     {% else %}
         <h2 class="h2">{% trans 'There is no available data at the moment.' %}</h2>