Add abbreviation explanations on mobile (#376)

Co-authored-by: abc013 <[email protected]>

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\n" + (
+    abbreviations = "\n\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/core/templates/core/information_page.html

@@ -12,7 +12,7 @@ <h1 class="page-title">
                 {{ page.title }}
             </span>
         </h1>
-        {{ parsed_md.0|tag_external_links }}
+        {{ parsed_md.0|touchify_abbreviations|tag_external_links }}
     </div>
     <div class="col-lg-3">
         <div class="side-panel-container">

myhpi/core/templates/core/minutes.html

@@ -12,7 +12,7 @@
             <h1>{{  page.title }}</h1>
         </div>
         <div class="col-9 minutes-text">
-            {{ parsed_md.0|tag_external_links }}
+            {{ parsed_md.0|touchify_abbreviations|tag_external_links }}
         </div>
         <div class="col-3 minutes-meta">
             <aside class="side-panel border-accent">

myhpi/core/templatetags/core_extras.py

@@ -53,6 +53,15 @@ def tag_external_links(content):
     return template.render(Context())
 
 
+@register.filter(name="touchify_abbreviations")
+def touchify_abbreviations(content):
+    abbreviations = re.finditer("<abbr[^>]*>[^<]*", content)
+    for link in reversed(list(abbreviations)):
+        content = content[: link.start() + 5] + " tabindex=0" + content[link.start() + 5 :]
+    template = Template("{% load bootstrap_icons %}" + content)
+    return template.render(Context())
+
+
 @register.filter(name="markdown")
 def markdown(value):
     return render_markdown(value)

myhpi/static/scss/myHPI.scss

@@ -299,4 +299,22 @@ img {
         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;
+      }
+    }