Merge pull request #306 from City-of-Helsinki/cookie-consent-fix

fix: mobile view scroll auto
City-of-Helsinki · Nov 8, 2023 · 0963708 · 0963708
2 parents ac59550 + 8b6cb91
commit 0963708
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 21 deletions.
diff --git a/hkm/static/hkm/css/consent.css b/hkm/static/hkm/css/consent.css
@@ -7,6 +7,7 @@
   border-top: 8px solid #0000bf;
   max-height: 80vh;
   z-index: 2;
+  overflow: auto;
 }
 
 #cookie-consent__container {
@@ -84,6 +85,10 @@
   gap: 8px;
 }
 
+.cookie-consent-table-container {
+  overflow-x: auto;
+}
+
 #consent-table {
   border-collapse: collapse;
   width: 100%;

diff --git a/hkm/static/hkm/js/cookie-consent.js b/hkm/static/hkm/js/cookie-consent.js
@@ -31,13 +31,13 @@
             $readMoreBtn.hide();
             $cookieContents.show();
         });
-
-        $cookieConsentContainer.on('click', function (e) {
-            $readMoreBtn.hide();
-            $cookieContents.show();
-        });
     }
 
+    $cookieConsentContainer.on('click', function (e) {
+        $readMoreBtn.hide();
+        $cookieContents.show();
+    });
+
     $acceptBtn.on('click', function (e) {
         if(_paq) {
             _paq.push(['setCookieConsentGiven']);

diff --git a/hkm/templates/hkm/snippets/cookie_consent.html b/hkm/templates/hkm/snippets/cookie_consent.html
@@ -21,22 +21,24 @@
                 <div class="cookie-consent__more-content__section">
                     <span>{% trans 'Matomo (optional)' %}</span>
                     <p>{% trans 'Matomo description' %}</p>
-                    <table id="consent-table">
-                        <thead>
-                            <th>{% trans 'Cookie name' %}</th>
-                            <th>{% trans 'Cookie set by' %}</th>
-                            <th>{% trans 'Purpose of use' %}</th>
-                            <th>{% trans 'Period of validity' %}</th>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td>_pk*</td>
-                                <td>digia.fi</td>
-                                <td>{% trans 'A cookie of the Matomo statistics system' %}</td>
-                                <td>393 {% trans 'Cookie days' %}</td>
-                            </tr>
-                        </tbody>
-                    </table>
+                    <div class="cookie-consent-table-container">
+                        <table id="consent-table">
+                            <thead>
+                                <th>{% trans 'Cookie name' %}</th>
+                                <th>{% trans 'Cookie set by' %}</th>
+                                <th>{% trans 'Purpose of use' %}</th>
+                                <th>{% trans 'Period of validity' %}</th>
+                            </thead>
+                            <tbody>
+                                <tr>
+                                    <td>_pk*</td>
+                                    <td>digia.fi</td>
+                                    <td>{% trans 'A cookie of the Matomo statistics system' %}</td>
+                                    <td>393 {% trans 'Cookie days' %}</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
                 </div>
             </div>
             <div id="cookie-consent__actions">