Replace wrapper--cookieconsent with tailwind classes (#4301)

- One less scss rule, removes extra px to allow for better spacing in mobile view + html wrapping - Remove unused `wrapper--relative` - Remove unused `wrapper--media-boxes` - Remove unused `card--reviewers`
HyphaApp · Dec 31, 2024 · 0846f65 · 0846f65
1 parent 556a848
commit 0846f65
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 29 deletions.
diff --git a/hypha/cookieconsent/templates/includes/banner.html b/hypha/cookieconsent/templates/includes/banner.html
@@ -1,22 +1,42 @@
 {% load i18n wagtailcore_tags %}
 
 {% if show_banner %}
-    <div class="wrapper wrapper--cookieconsent cookieconsent">
+    <div class="cookieconsent w-full z-20 py-8">
         <div class="cookieconsent__content">
             <div class="cookieconsent__brief">
                 <div>
-                    <h2 class="cookieconsent__title">{% trans settings.cookieconsent_title %}</h2>
+                    <h2 class="cookieconsent__title">
+                        {% trans settings.cookieconsent_title %}
+                    </h2>
                     <div class="cookieconsent__message rich-text">
                         {{ settings.cookieconsent_message|richtext }}
                     </div>
+
                     <div class="cookieconsent__actions">
                         {% if settings.cookieconsent_analytics %}
-                            <button class="button button--cookieconsent button--decline" title="{% trans 'Decline tracking cookies.' %}" type="button" data-consent="decline">{% trans 'Essential only' %}</button>
-                            <button class="button button--cookieconsent button--accept lg:ms-[20px]" title="{% trans 'Accept tracking cookies.' %}" type="button" data-consent="accept">{% trans 'Accept all' %}</button>
+                            <button class="button button--cookieconsent button--decline"
+                                    title="{% trans 'Decline tracking cookies.' %}"
+                                    type="button"
+                                    data-consent="decline"
+                            >{% trans 'Essential only' %}</button>
+
+                            <button class="button button--cookieconsent button--accept lg:ms-[20px]"
+                                    title="{% trans 'Accept tracking cookies.' %}"
+                                    type="button"
+                                    data-consent="accept"
+                            >{% trans 'Accept all' %}</button>
                         {% else %}
-                            <button class="button button--cookieconsent button--accept" title="{% trans 'Acknowledge use of essential cookies.' %}" data-consent="ack">{% trans 'Ok' %}</button>
+                            <button class="button button--cookieconsent button--accept"
+                                    title="{% trans 'Acknowledge use of essential cookies.' %}"
+                                    data-consent="ack"
+                            >{% trans 'Ok' %}</button>
                         {% endif %}
-                        <button class="button button--cookieconsent button--learn-more lg:ms-[20px]" title="{% trans 'Learn more about specific cookies used.' %}" show-learn-more="true">{% trans 'Learn More' %}</button>
+
+                        <button class="button button--cookieconsent button--learn-more lg:ms-[20px]"
+                                title="{% trans 'Learn more about specific cookies used.' %}"
+                                show-learn-more="true"
+                        >{% trans 'Learn More' %}</button>
+
                     </div>
                 </div>
             </div>
@@ -25,6 +45,7 @@ <h2 class="cookieconsent__title">{% trans settings.cookieconsent_title %}</h2>
                     <div class="cookieconsent__statement">
                         <p>{% trans "This Website uses cookies.  Below you can select the categories of cookies to allow when you use our website and services." %}</p>
                     </div>
+
                     <div class="cookieconsent__info-wrapper">
                         <div class="cookieconsent__info">
                             <p class="font-semibold">{% trans "Essential Cookies" %}</p>
@@ -38,14 +59,32 @@ <h2 class="cookieconsent__title">{% trans settings.cookieconsent_title %}</h2>
                             </div>
                         {% endif %}
                     </div>
+
                     <div class="cookieconsent__actions">
                         {% if settings.cookieconsent_analytics %}
-                            <button class="button button--cookieconsent button--decline" title="{% trans 'Decline tracking cookies.' %}" type="button" data-consent="decline">{% trans 'Essential only' %}</button>
-                            <button class="button button--cookieconsent button--accept lg:ms-[20px]" title="{% trans 'Accept tracking cookies.' %}" type="button" data-consent="accept">{% trans 'Accept all' %}</button>
+                            <button class="button button--cookieconsent button--decline"
+                                    title="{% trans 'Decline tracking cookies.' %}"
+                                    type="button"
+                                    data-consent="decline"
+                            >{% trans 'Essential only' %}</button>
+
+                            <button class="button button--cookieconsent button--accept lg:ms-[20px]"
+                                    title="{% trans 'Accept tracking cookies.' %}"
+                                    type="button"
+                                    data-consent="accept"
+                            >{% trans 'Accept all' %}</button>
                         {% else %}
-                            <button class="button button--cookieconsent button--accept" title="{% trans 'Acknowledge use of essential cookies.' %}" data-consent="ack">{% trans 'Ok' %}</button>
+                            <button class="button button--cookieconsent button--accept"
+                                    title="{% trans 'Acknowledge use of essential cookies.' %}"
+                                    data-consent="ack"
+                            >{% trans 'Ok' %}</button>
                         {% endif %}
-                        <button class="button button--cookieconsent button--learn-more lg:ms-[20px]" title="{% trans 'Return to main cookie menu.' %}" show-learn-more="false" tabindex="-1">{% trans 'Back' %}</button>
+
+                        <button class="button button--cookieconsent button--learn-more lg:ms-[20px]"
+                                title="{% trans 'Return to main cookie menu.' %}"
+                                show-learn-more="false"
+                                tabindex="-1"
+                        >{% trans 'Back' %}</button>
                     </div>
                 </div>
             </div>

diff --git a/hypha/static_src/sass/components/_card.scss b/hypha/static_src/sass/components/_card.scss
@@ -39,8 +39,4 @@
             margin-inline-start: 1rem;
         }
     }
-
-    &__reviewer {
-        margin-inline-start: 10px;
-    }
 }
diff --git a/hypha/static_src/sass/components/_wrapper.scss b/hypha/static_src/sass/components/_wrapper.scss
@@ -31,12 +31,6 @@
         background-color: var(--color-bg-default);
     }
 
-    &--media-boxes {
-        max-width: 1220px;
-        padding: 0 20px;
-        margin: 0 auto;
-    }
-
     &--embed {
         width: 100%;
         height: 100%;
@@ -210,10 +204,6 @@
         }
     }
 
-    &--relative {
-        position: relative;
-    }
-
     &--activity-feed {
         padding: 0 20px;
         margin-block-start: 50px;
@@ -263,9 +253,4 @@
             flex: 1;
         }
     }
-
-    &--cookieconsent {
-        padding: 40px 20px;
-        z-index: 20;
-    }
 }