Add abbreviation explanations on mobile

myhpi/core/markdown/utils.py

@@ -12,26 +12,26 @@ def render_markdown(text, context=None, with_abbreveations=True):
     """
     if context is None or not isinstance(context, dict):
         context = {}
-    markdown_html, toc = _transform_markdown_into_html(text, with_abbreveations=with_abbreveations)
+    markdown_html, toc = _transform_markdown_into_html(text, with_abbreviations=with_abbreveations)
     sanitised_markdown_html = _sanitise_markdown_html(markdown_html)
     return mark_safe(sanitised_markdown_html), mark_safe(toc)
 
 
-def _transform_markdown_into_html(text, with_abbreveations):
+def _transform_markdown_into_html(text, with_abbreviations):
     from myhpi.core.models import AbbreviationExplanation
 
     markdown_kwargs = _get_markdown_kwargs()
     markdown_kwargs["extensions"].append(
         MinuteExtension()
     )  # should be in settings.py, but module lookup doesn't work
     md = markdown.Markdown(**markdown_kwargs)
-    abbreveations = "\n" + (
+    abbreviations = "\n" + (
         "\n".join(
             [
                 f"*[{abbr.abbreviation}]: {abbr.explanation}"
                 for abbr in AbbreviationExplanation.objects.all()
             ]
         )
     )
-    text = smart_str(text) + abbreveations if with_abbreveations else smart_str(text)
+    text = smart_str(text) + abbreviations if with_abbreviations else smart_str(text)
     return md.convert(text), md.toc

myhpi/static/js/myHPI.js

@@ -83,4 +83,9 @@ window.onscroll = () => {
 window.onresize = () => {
     adaptNavbarToWindowSize()
     updateNavbarPosition()
-}
+}
+
+/* https://stackoverflow.com/questions/12539006/tooltips-for-mobile-browsers */
+// To enable tooltips on mobile, add tabindex=0 to abbr elements.
+document.querySelectorAll("abbr")
+    .forEach(node => node.setAttribute("tabindex", "0"))

myhpi/static/scss/myHPI.scss

@@ -265,4 +265,22 @@ h1.toc-title::after {
         margin-top: 50px;
         order: 3;
     }
-}
+}
+
+@media (pointer: coarse), (hover: none) {
+      [title] {
+        position: relative;
+        display: inline-flex;
+        justify-content: center;
+      }
+      [title]:focus::after {
+        content: attr(title);
+        position: absolute;
+        top: 90%;
+        color: #000;
+        background-color: #fff;
+        border: 1px solid;
+        width: fit-content;
+        padding: 3px;
+      }
+    }