alert links

froide/foirequest/templates/foirequest/attachment/show.html

@@ -25,9 +25,8 @@ <h2>{% blocktrans with name=attachment.name %}Attachment “{{ name }}”{% endb
         {% if foirequest|can_write_foirequest:request or foirequest|can_moderate_pii_foirequest:request %}
             {% if foirequest.awaits_classification %}
                 <div class="alert alert-warning">
-                    <a href="{% url 'foirequest-show' slug=foirequest.slug %}#set-status">
-                        {% translate "Don't forget to set the status of this request!" %}
-                    </a>
+                    <a href="{% url 'foirequest-show' slug=foirequest.slug %}#set-status"
+                       class="alert-link">{% translate "Don't forget to set the status of this request!" %}</a>
                 </div>
             {% endif %}
             {% if attachment.can_redact %}

froide/foirequest/templates/foirequest/header/header.html

@@ -35,12 +35,15 @@ <h4>{% trans "Special access" %}</h4>
                 <li>
                     {% blocktrans %}Have you received a reply by <b>postal mail</b>?{% endblocktrans %}
                     &rarr;
-                    <a href="{% url 'foirequest-upload_postal_message' slug=object.slug %}">{% translate "Upload the letter now!" %}</a>
+                    <a href="{% url 'foirequest-upload_postal_message' slug=object.slug %}"
+                       class="alert-link">{% translate "Upload the letter now!" %}</a>
                 </li>
                 <li>
                     {% blocktrans %}Have you not gotten any reply?{% endblocktrans %}
                     &rarr;
-                    <a href="#write-messages" data-scrollto="write-messages">{% translate "Write a reminder to the public body!" %}</a>
+                    <a href="#write-messages"
+                       data-scrollto="write-messages"
+                       class="alert-link">{% translate "Write a reminder to the public body!" %}</a>
                 </li>
                 {% block aditional_actions %}{% endblock %}
             </ul>
@@ -49,9 +52,10 @@ <h4>{% trans "Special access" %}</h4>
     {% if object|can_write_foirequest:request and object.has_been_refused and object.can_be_escalated %}
         <div class="alert alert-info d-print-none">
             {% blocktrans %}You request has been refused.{% endblocktrans %}
-            <a href="#escalate" data-tabgo="tab" data-scrollto="escalate">
-                {% blocktrans %}Consider sending a letter to a mediator{% endblocktrans %}
-            </a>
+            <a href="#escalate"
+               data-tabgo
+               data-scrollto="escalate"
+               class="alert-link">{% blocktrans %}Consider sending a letter to a mediator{% endblocktrans %}</a>
         </div>
     {% endif %}
     {% if object.banner %}<div class="alert alert-info">{{ object.banner | markdown }}</div>{% endif %}

froide/foirequest/templates/foirequest/request.html

@@ -119,7 +119,7 @@ <h6>{% blocktrans %}Important Notes:{% endblocktrans %}</h6>
             </div>
             {% if not request.user.is_authenticated %}
                 <div class="alert alert-warning">
-                    <a href="{% url 'account-login' %}">{% trans "You have to login or signup first in order to make a request." %}</a>
+                    <a href="{% url 'account-login' %}" class="alert-link">{% trans "You have to login or signup first in order to make a request." %}</a>
                 </div>
             {% else %}
                 {% if publicbodies %}

froide/foisite/templates/foisite/banner.html

@@ -4,7 +4,7 @@
 {% if foisite %}
     <div class="container">
         <div class="alert alert-info">
-            {% blocktrans with name=foisite.name country_name=foisite.country_name url=foisite.url %}It looks like you are visiting from {{ country_name }}. Did you know that there is an <a href="{{ url }}">FOI site for {{ country_name }} called {{ name }}</a>?{% endblocktrans %}
+            {% blocktrans with name=foisite.name country_name=foisite.country_name url=foisite.url %}It looks like you are visiting from {{ country_name }}. Did you know that there is an <a href="{{ url }}" class="alert-link">FOI site for {{ country_name }} called {{ name }}</a>?{% endblocktrans %}
         </div>
     </div>
 {% endif %}

froide/publicbody/templates/publicbody/show_foilaw.html

@@ -60,9 +60,12 @@ <h2>{{ object.name }}</h2>
                     <div class="tab-pane active" id="legaltext">
                         <div class="alert alert-info">
                             {% blocktrans %}
-            This is a copy of the law, for which we can't guarantee correctness.
-          {% endblocktrans %}
-                            <a href="{{ object.url }}" target="_blank" rel="noopener">
+                                This is a copy of the law, for which we can't guarantee correctness.
+                            {% endblocktrans %}
+                            <a href="{{ object.url }}"
+                               target="_blank"
+                               rel="noopener"
+                               class="alert-link">
                                 {% blocktrans with name=object.name %}Official law text of {{ name }}{% endblocktrans %}
                             </a>
                         </div>

frontend/javascript/request.ts

@@ -61,27 +61,22 @@ const initRequestPage = (): void => {
     goToReplyForm()
   })
 
-  const tabLinks = document.querySelectorAll('a[data-tabgo]')
-  tabLinks.forEach((tabLink) => {
-    tabLink.addEventListener('click', function (this: HTMLElement) {
-      const hrefAttr = this.attributes.getNamedItem('href')
-      if (hrefAttr === null) {
-        return
-      }
-      const href = hrefAttr?.value
-      const el = document.querySelector(href)
-      if (el === null) {
-        return
-      }
-      const display = window.getComputedStyle(el, null).display
-      if (display === 'none') {
-        const navLink = Tab.getInstance(`.nav-link[href="${href}"]`)
-        if (navLink !== null) {
-          navLink.show()
+  document
+    .querySelectorAll<HTMLAnchorElement>('a[data-tabgo]')
+    .forEach((tabLink) => {
+      tabLink.addEventListener('click', () => {
+        const { hash } = tabLink
+        const tab = document.querySelector(hash)
+        if (!tab) return
+
+        const { display } = window.getComputedStyle(tab)
+
+        if (display === 'none') {
+          const triggerEl = document.querySelector(`.nav-link[href="${hash}"]`)
+          Tab.getOrCreateInstance(triggerEl!).show()
         }
-      }
+      })
     })
-  })
 
   const goToReplyForm = (): void => {
     if (!writeForm?.classList.contains('show')) {

frontend/styles/components/buttons.scss

@@ -1,7 +1,3 @@
-.btn {
-  white-space: normal;
-  cursor: pointer;
-}
 .btn .on-hover {
   display: none;
 }
@@ -25,32 +21,41 @@
 }
 
 .hover-btn-success {
-  @include button-outline-variant(map-get($theme-colors, "success"));
+  @include button-outline-variant(map-get($theme-colors, 'success'));
   background-color: var(--#{$prefix}body-bg);
 }
 
 .hover-btn-success:hover {
-  @include button-variant(map-get($theme-colors, "success"), map-get($theme-colors, "success"));
+  @include button-variant(
+    map-get($theme-colors, 'success'),
+    map-get($theme-colors, 'success')
+  );
 }
 
 .hover-btn-danger {
-  @include button-outline-variant(map-get($theme-colors, "secondary"));
+  @include button-outline-variant(map-get($theme-colors, 'secondary'));
 }
 
 .btn.hover-btn-danger:hover {
-  @include button-variant(map-get($theme-colors, "danger"), map-get($theme-colors, "danger"));
+  @include button-variant(
+    map-get($theme-colors, 'danger'),
+    map-get($theme-colors, 'danger')
+  );
 }
 
 .btn-warning-blink {
-  @include button-variant(map-get($theme-colors, "warning"), map-get($theme-colors, "warning"));
+  @include button-variant(
+    map-get($theme-colors, 'warning'),
+    map-get($theme-colors, 'warning')
+  );
   animation: warning-blink 1s ease-in-out infinite;
 }
 .btn-warning-blink:hover {
   animation: none;
 }
 
 .btn-outline-redact {
-  @include button-outline-variant(map-get($theme-colors, "dark"));
+  @include button-outline-variant(map-get($theme-colors, 'dark'));
   border-color: var(--#{$prefix}body-color);
   color: var(--#{$prefix}body-color);
 }

frontend/styles/components/links.scss

@@ -0,0 +1,4 @@
+a.alert-link {
+  // there is no bootstrap config option for this
+  text-decoration: underline;
+}

frontend/styles/main.scss

@@ -74,6 +74,7 @@ $fa-font-path: 'font-awesome/fonts';
 @import 'components/footer';
 @import 'components/forms';
 @import 'components/js-switches';
+@import 'components/links';
 @import 'components/misc';
 @import 'components/navbar';
 @import 'components/redacted';