Merge pull request #98 from trojsten/io-block-tweaks

fix: better io block rendering on mobile

Author: Aiq0

css/tailwind.css

@@ -11,16 +11,19 @@
   color utility to any element that depends on these defaults.
 */
 @layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-gray-200, currentcolor);
-  }
+
+    *,
+    ::after,
+    ::before,
+    ::backdrop,
+    ::file-selector-button {
+        border-color: var(--color-gray-200, currentcolor);
+    }
 }
 
-[x-cloak] { display: none; }
+[x-cloak] {
+    display: none;
+}
 
 .codehilite {
     background: none !important;
@@ -36,13 +39,15 @@
 
 /** I/O table in problem statements **/
 .io {
-    @apply grid grid-cols-1 sm:grid-cols-2 gap-x-4;
+    @apply grid grid-cols-1 sm:grid-cols-2 gap-4 my-5;
 }
+
 .io h3 {
     @apply mt-0;
 }
+
 .io pre {
-    @apply mt-0;
+    @apply m-0;
 }
 
 .input {

school/pages/markdown_extensions.py

@@ -1,5 +1,5 @@
 import re
-from xml.etree.ElementTree import ElementTree, SubElement
+from xml.etree.ElementTree import Element, SubElement
 
 from django.conf import settings
 from markdown import Extension, Markdown
@@ -9,7 +9,7 @@
 
 
 class SchoolImageTreeprocessor(Treeprocessor):
-    def run(self, root: ElementTree):
+    def run(self, root: Element):
         for elem in root.iter("img"):
             image_url = elem.get("src")
             if image_url is None:
@@ -35,7 +35,7 @@ def run(self, root: ElementTree):
 
 
 class CodeBlocksProcessor(Preprocessor):
-    def run(self, lines) -> list[str]:
+    def run(self, lines: list[str]) -> list[str]:
         new_lines = []
         inside = 0
         for line in lines:
@@ -45,29 +45,37 @@ def run(self, lines) -> list[str]:
 
             if line == "```vstup":
                 new_lines.append("<io>")
-                # new_lines.append("### Vstup")
+                new_lines.append("<io:input>")
                 new_lines.append("```")
                 inside = 1
             elif line == "```vystup":
-                # new_lines.append("### Výstup")
+                new_lines.append("<io:output>")
                 new_lines.append("```")
-                inside = 2
-            elif line == "```" and inside == 2:
+                inside = 3
+            elif line == "```":
                 new_lines.append("```")
-                new_lines.append("</io>")
-                inside = 0
+                if inside == 3:
+                    new_lines.append("</io:output>\n")
+                    new_lines.append("</io>")
+                    inside = 0
+                elif inside == 1:
+                    new_lines.append("</io:input>\n")
+                    inside = 2
             else:
                 new_lines.append(line)
         return new_lines
 
 
-class BoxBlockProcessor(BlockProcessor):
-    RE_FENCE_START = r"<io>"
-    RE_FENCE_END = r"</io>"
+class FencedBlockProcessor(BlockProcessor):
+    RE_FENCE_START: str
+    RE_FENCE_END: str
 
-    def test(self, parent, block) -> bool:
+    def test(self, parent: Element, block: str) -> bool:
         return re.match(self.RE_FENCE_START, block) is not None
 
+    def fence_logic(self, parent: Element, blocks: list[str]) -> None:
+        raise NotImplementedError()
+
     def run(self, parent, blocks):
         original_block = blocks[0]
         blocks[0] = re.sub(self.RE_FENCE_START, "", blocks[0])
@@ -77,26 +85,60 @@ def run(self, parent, blocks):
             if re.search(self.RE_FENCE_END, block):
                 # remove fence
                 blocks[block_num] = re.sub(self.RE_FENCE_END, "", block)
-                # render fenced area inside a new div
-                e = SubElement(parent, "div")
-                e.set("class", "io")
-                inp = SubElement(e, "h3")
-                inp.text = "Vstup"
-                out = SubElement(e, "h3")
-                out.text = "Výstup"
-
-                self.parser.parseBlocks(e, blocks[0 : block_num + 1])
+
+                self.fence_logic(parent, blocks[0 : block_num + 1])
+
                 # remove used blocks
-                for i in range(0, block_num + 1):
+                for _ in range(0, block_num + 1):
                     blocks.pop(0)
                 return True  # or could have had no return statement
         # No closing marker!  Restore and do nothing
         blocks[0] = original_block
         return False  # equivalent to our test() routine returning False
 
 
+class BoxBlockProcessor(FencedBlockProcessor):
+    RE_FENCE_START = r"<io>"
+    RE_FENCE_END = r"</io>"
+
+    def fence_logic(self, parent, blocks):
+        d = SubElement(parent, "div")
+        d.set("class", "io")
+        self.parser.parseBlocks(d, blocks)
+
+
+class IOInputBlockProcessor(FencedBlockProcessor):
+    RE_FENCE_START = r"<io:input>"
+    RE_FENCE_END = r"</io:input>"
+
+    def fence_logic(self, parent, blocks):
+        d = SubElement(parent, "div")
+        inp = SubElement(d, "h3")
+        inp.text = "Vstup"
+        self.parser.parseBlocks(d, blocks)
+
+
+class IOOutputBlockProcessor(FencedBlockProcessor):
+    RE_FENCE_START = r"<io:output>"
+    RE_FENCE_END = r"</io:output>"
+
+    def fence_logic(self, parent, blocks):
+        d = SubElement(parent, "div")
+        inp = SubElement(d, "h3")
+        inp.text = "Výstup"
+        self.parser.parseBlocks(d, blocks)
+
+
 class KspSchoolExtension(Extension):
     def extendMarkdown(self, md: Markdown) -> None:  # noqa: N802
         md.treeprocessors.register(SchoolImageTreeprocessor(md), "ksp_school_images", 0)
         md.preprocessors.register(CodeBlocksProcessor(md), "IO_code_blocks", 100000)
-        md.parser.blockprocessors.register(BoxBlockProcessor(md.parser), "box", 100000)
+        md.parser.blockprocessors.register(
+            BoxBlockProcessor(md.parser), "IO_box", 100000
+        )
+        md.parser.blockprocessors.register(
+            IOInputBlockProcessor(md.parser), "IO_input", 100000
+        )
+        md.parser.blockprocessors.register(
+            IOOutputBlockProcessor(md.parser), "IO_output", 100000
+        )