Merge branch 'master' into verify-email

GeekZoneHQ · May 4, 2021 · c478844 · c478844
2 parents 2ebcbc3 + a546ddf
commit c478844
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 19 deletions.
diff --git a/memberships/static/js/main.js b/memberships/static/js/main.js
@@ -12,6 +12,8 @@ function checkDarkMode() {
     default:
       if (window.matchMedia("(prefers-color-scheme: dark)").matches)
         document.documentElement.classList.add("dark");
+      else
+        document.documentElement.classList.remove("dark");
   }
 }
 
@@ -50,6 +52,14 @@ function hideHelpText(popover) {
   classList.add("opacity-0", "animate-fade-out");
 }
 
+// stop displaying popover if opacity is 0
+function hideIfTransparent(popover) {
+  let classList = popover.classList;
+
+  if (classList.contains('opacity-0'))
+    classList.add('hidden');
+}
+
 // check if an element is offscreen to the right and translate if necessary
 function correctOffscreenRight(element) {
   let rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);

diff --git a/memberships/templates/base.html b/memberships/templates/base.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 {% load static %}
-<html class="no-js min-h-screen" lang="">
+<html class="no-js min-h-screen" lang="en">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
@@ -44,7 +44,7 @@
               <a class="nav-link" href="https://geek.zone/tiki-searchindex.php" target="_blank">Wiki</a>
             </li>
 
-            <div class="self-stretch sm:-mx-2 md:mx-2 border-t-2 md:border-t-0 md:border-r-2 border-yellow-500 dark:border-gray-700"></div> 
+            <div class="self-stretch sm:-mx-2 md:mx-2 border-t-2 md:border-t-0 md:border-r-2 border-yellow-500 dark:border-gray-700" aria-hidden="true"></div> 
 
             {% if user.is_authenticated %}
             <li>
@@ -75,11 +75,16 @@
 
     <footer>
       <div class="flex justify-between items-center mx-auto py-3 px-4 sm:px-6 max-w-5xl">
-        <div><span class="inline-block transform scale-x-flip">&copy;</span> Geek.Zone</div>
+        <div>
+          <span class="inline-block transform scale-x-flip" aria-hidden="true">&copy;</span>
+          <span class="sr-only">Copyleft</span>
+          Geek.Zone
+        </div>
         <button class="btn -mt-4 p-2 rounded-full" onclick="toggleDarkMode()">
           <svg class="w-5 h-5 stroke-current stroke-1" xmlns="http://www.w3.org/2000/svg" fill="none" height=50 viewBox="0 0 20 20" aria-hidden="true">
             <path stroke-linecap="round" stroke-linejoin="round" d="M10 2 a8 8 0 0 0 8 12 a8 8 0 1 1 -8 -12" />
           </svg>
+          <span class="sr-only">Toggle dark mode</span>
         </button>
       </div>
       <div class="text-white dark:text-gray-400 bg-red-500 dark:bg-gray-900">

diff --git a/memberships/templates/inc/help_text.html b/memberships/templates/inc/help_text.html
@@ -1,7 +1,7 @@
 {% load widget_tweaks %}
 
 <div {% if not target %}class="mx-2"{% endif %}>
-  <div class="relative flex justify-center items-center ml-2 opacity-0 pointer-events-none hidden" onanimationend="this.classList.contains('opacity-0') ? this.classList.add('hidden') : undefined">
+  <div class="relative flex justify-center items-center ml-2 opacity-0 pointer-events-none hidden" onanimationend="hideIfTransparent">
     <div class="absolute bottom-1 -left-5 py-2 px-3 max-w-2xs sm:max-w-sm md:max-w-md w-max bg-gray-600 text-gray-200 text-xs text-left rounded shadow transform">
       {{ field.help_text | safe }}
     </div>
@@ -13,6 +13,9 @@
   {% if target %}
   {{ target | add_class:"inset-0 w-full" | attr:"onfocus:showHelpText(this.previousElementSibling)" | attr:"onblur:hideHelpText(this.previousElementSibling)" }}
   {% else %}
-  <div class="text-2xl sm:text-xl -my-1.5 cursor-pointer" onmouseover="showHelpText(this.previousElementSibling)" onmouseout="hideHelpText(this.previousElementSibling)">&#9432;</div>
+  <div class="text-2xl sm:text-xl -my-1.5 cursor-pointer" onmouseover="showHelpText(this.previousElementSibling)" onmouseout="hideHelpText(this.previousElementSibling)">
+    <span aria-hidden="true">&#9432;</span>
+    <span class="sr-only">More details</span>
+  </div>
   {% endif %}
 </div>
diff --git a/theme/static/css/styles.css b/theme/static/css/styles.css
@@ -20419,7 +20419,7 @@ video {
 }
 
 .font-impact {
-  font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Charcoal, Helvetica Inserat, Bitstream Vera Sans Bold, Arial Black, sans serif;
+  font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Charcoal, Helvetica Inserat, Bitstream Vera Sans Bold, sans serif;
 }
 
 .font-thin {
@@ -73910,7 +73910,7 @@ video {
   }
 
   .sm\:font-impact {
-    font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Charcoal, Helvetica Inserat, Bitstream Vera Sans Bold, Arial Black, sans serif;
+    font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Charcoal, Helvetica Inserat, Bitstream Vera Sans Bold, sans serif;
   }
 
   .sm\:font-thin {
@@ -127283,7 +127283,7 @@ video {
   }
 
   .md\:font-impact {
-    font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Charcoal, Helvetica Inserat, Bitstream Vera Sans Bold, Arial Black, sans serif;
+    font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Charcoal, Helvetica Inserat, Bitstream Vera Sans Bold, sans serif;
   }
 
   .md\:font-thin {
@@ -180656,7 +180656,7 @@ video {
   }
 
   .lg\:font-impact {
-    font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Charcoal, Helvetica Inserat, Bitstream Vera Sans Bold, Arial Black, sans serif;
+    font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Charcoal, Helvetica Inserat, Bitstream Vera Sans Bold, sans serif;
   }
 
   .lg\:font-thin {
@@ -234029,7 +234029,7 @@ video {
   }
 
   .xl\:font-impact {
-    font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Charcoal, Helvetica Inserat, Bitstream Vera Sans Bold, Arial Black, sans serif;
+    font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Charcoal, Helvetica Inserat, Bitstream Vera Sans Bold, sans serif;
   }
 
   .xl\:font-thin {
@@ -287402,7 +287402,7 @@ video {
   }
 
   .\32xl\:font-impact {
-    font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Charcoal, Helvetica Inserat, Bitstream Vera Sans Bold, Arial Black, sans serif;
+    font-family: Impact, Haettenschweiler, Franklin Gothic Bold, Charcoal, Helvetica Inserat, Bitstream Vera Sans Bold, sans serif;
   }
 
   .\32xl\:font-thin {

diff --git a/theme/static_src/tailwind.config.js b/theme/static_src/tailwind.config.js
@@ -2,13 +2,16 @@
 // If you need the full config, get it from here:
 // https://unpkg.com/browse/tailwindcss@latest/stubs/defaultConfig.stub.js
 module.exports = {
-    purge: [
-        // Templates within theme app (e.g. base.html)
-        '../templates/**/*.html',
-        // Templates in other apps. Uncomment the following line if it matches
-        // your project structure or change it to match.
-        '../../memberships/templates/**/*.html',
-    ],
+    purge: {
+        content: ['../../memberships/templates/**/*.html'],
+        options: {
+            safelist: [
+                'dark',
+                /^animate-fade-/,
+                /^-translate-x-/,
+            ],
+        },
+    },
     darkMode: 'class',
     theme: {
         extend: {
@@ -21,7 +24,16 @@ module.exports = {
                 'yellow-true': '#ffff00',
             },
             fontFamily: {
-                impact: ['Impact', 'Haettenschweiler', 'Franklin Gothic Bold', 'Charcoal', 'Helvetica Inserat', 'Bitstream Vera Sans Bold', 'Arial Black', 'sans serif'],
+                impact: [
+                    'Impact',
+                    'Haettenschweiler',
+                    'Franklin Gothic Bold',
+                    'Charcoal',
+                    'Helvetica Inserat',
+                    'Bitstream Vera Sans Bold',
+                    //'Arial Black',
+                    'sans serif',
+                ],
             },
             keyframes: {
                 fadeIn: {