From a3f85e4cbad8dd18a8806800cb9ea469795336e9 Mon Sep 17 00:00:00 2001
From: ElnuDev <elnu@elnu.com>
Date: Sun, 2 Jul 2023 14:14:58 -0700
Subject: [PATCH] Fix scrolling styles with CSS grid

---
 styles/sass/style.scss    |  33 ++++----
 templates/index.html.tera | 164 +++++++++++++++++++-------------------
 2 files changed, 99 insertions(+), 98 deletions(-)

diff --git a/styles/sass/style.scss b/styles/sass/style.scss
index a1be5d2..e9e3da7 100644
--- a/styles/sass/style.scss
+++ b/styles/sass/style.scss
@@ -43,11 +43,19 @@ input[type=number] {
 #content {
   width: 100%;
   height: 100%;
-  display: flex;
-  flex-direction: column;
+
+  display: grid;
+  grid-template-areas:
+    "nav        nav"
+    "challenge  submissions";
+  grid-template-columns: 30em auto;
+  grid-template-rows: min-content auto;
+
   overflow: hidden;
 
   nav {
+    grid-area: nav;
+
     --bg: #{$fg};
     --fg: #{$bg};
     background: var(--bg);
@@ -98,16 +106,12 @@ input[type=number] {
     }
   }
 
-  & > div:first-of-type {
-    display: flex;
-    height: 100%;
-    & > :first-child {
-      min-width: 40em;
-      padding: 1em;
-    }
-    & > * {
-      overflow: scroll;
-    }
+  & > div {
+    overflow: scroll;
+  }
+
+  #challenge {
+    padding: 1em;
   }
 }
 
@@ -116,9 +120,8 @@ input[type=number] {
 }
 
 #submissions {
-  display: flex;
-  flex-direction: column;
-  height: calc(100% - 2em);
+  grid-area: submissions;
+
   background: rgba(0, 0, 0, 0.125);
   $gap: 0.5em;
   padding: $gap;
diff --git a/templates/index.html.tera b/templates/index.html.tera
index 7272dd5..0242ca7 100644
--- a/templates/index.html.tera
+++ b/templates/index.html.tera
@@ -64,92 +64,90 @@
                 </nav>
             </a>
         </nav>
-        <div>
-            <div>
-                <h1>Welcome to Tegaki Tuesday #{{ challenge }}!</h1>
-                {% if content.japanese %}
-                <div lang="ja">
-                    <script>
-                        let kyujitai = false;
-                        function kyujitaiToggle() {
-                            document.querySelectorAll("[data-kyujitai]").forEach(segment => {
-                                let newText = segment.getAttribute("data-kyujitai");
-                                segment.setAttribute("data-kyujitai", segment.firstChild.data);
-                                segment.firstChild.data = newText;
-                            })
-                            kyujitai = !kyujitai;
-                        }
-                    </script>
-                    <button onclick="kyujitaiToggle(); this.innerHTML = kyujitai ? '新字体' : '旧字体'">旧字体</button>
-                    {% for line in content.japanese %}
-                        {% for subline in line %}
-                            <p>
-                                {%- for word in subline -%}
-                                    {%- if word.dictionary -%}
-                                        <a href="{{ word.dictionary }}" target="_blank"{% if word.pos %} class="{{ word.pos }}" title="{{ word.pos }}"{% endif %}>
-                                    {%- endif -%}
-                                    {% for segment in word.text -%}
-                                        <ruby{% if segment.kyujitai %} data-kyujitai="{{ segment.kyujitai }}"{% endif %}>{{ segment.kanji }}<rp>(</rp><rt>{{ segment.furigana | safe }}</rt><rp>)</rp></ruby>
-                                    {%- endfor -%}
-                                    {%- if word.dictionary -%}
-                                        </a>
-                                    {%- endif -%}
-                                {%- endfor -%}
-                            </p>
-                        {% endfor %}
-                    {% endfor %}
-                </div>
-                {% endif %}
-                {{ content.text | safe }}
-                {% if content.translation %}
-                    <p>
-                        Translation
-                        {% if content.translation.author %}by {{ content.translation.author }}{% endif %}
-                        {% if content.translation.site %} via
-                            {% if content.translation.site.link %}
-                                <a href="{{ content.translation.site.link }}" target="_blank">{{ content.translation.site.name }}</a>
-                            {% else %}
-                                {{ content.translation.site.name }}
-                            {% endif %}
-                        {%- endif -%}
-                    </p>
-                {%- endif -%}
-                {%- if content.suggester -%}
-                    <p><em>This challenge was suggested by <strong>{{ content.suggester }}</strong> using the <code>-h suggest</code> command.</code></em></p>
-                {%- endif -%}
-            </div>
-            <div id="submissions">
+        <div id="challenge">
+            <h1>Welcome to Tegaki Tuesday #{{ challenge }}!</h1>
+            {% if content.japanese %}
+            <div lang="ja">
                 <script>
-                const submissionModal = image => {
-                    const dialog = document.createElement("dialog");
-                    dialog.style.padding = "0";
-                    const img = document.createElement("img");
-                    img.src = "/{{ challenge }}/" + image;
-                    const defaultZoom = "75vh";
-                    img.style.height = defaultZoom;
-                    img.style.cursor = "zoom-in";
-                    img.style.display = "block";
-                    img.style.margin = "0";
-                    img.onclick = event => img.style.height = img.style.height ? "" : defaultZoom;
-                    dialog.appendChild(img);
-                    dialog.addEventListener("close", event => document.body.removeChild(dialog));
-                    document.body.appendChild(dialog);
-                    dialog.showModal();
-                };
+                    let kyujitai = false;
+                    function kyujitaiToggle() {
+                        document.querySelectorAll("[data-kyujitai]").forEach(segment => {
+                            let newText = segment.getAttribute("data-kyujitai");
+                            segment.setAttribute("data-kyujitai", segment.firstChild.data);
+                            segment.firstChild.data = newText;
+                        })
+                        kyujitai = !kyujitai;
+                    }
                 </script>
-                <div>
-                    {% for submission in submissions %}
-                        {% set author = users[submission.author_id] %}
-                        <figure>
-                            <img src="/{{ challenge }}/{{ submission.image }}" alt="{{ author.username }}'s submission" onclick="submissionModal('{{ submission.image }}')">
-                            <figcaption>{% if not author.deleted %}<a href="https://discord.com/users/{{ author.id }}" target="_blank">{% endif %}{{ author.username }}{% if author.deleted %} (deleted account){% else %}</a>{% endif %}</figcaption>
-                        </figure>
+                <button onclick="kyujitaiToggle(); this.innerHTML = kyujitai ? '新字体' : '旧字体'">旧字体</button>
+                {% for line in content.japanese %}
+                    {% for subline in line %}
+                        <p>
+                            {%- for word in subline -%}
+                                {%- if word.dictionary -%}
+                                    <a href="{{ word.dictionary }}" target="_blank"{% if word.pos %} class="{{ word.pos }}" title="{{ word.pos }}"{% endif %}>
+                                {%- endif -%}
+                                {% for segment in word.text -%}
+                                    <ruby{% if segment.kyujitai %} data-kyujitai="{{ segment.kyujitai }}"{% endif %}>{{ segment.kanji }}<rp>(</rp><rt>{{ segment.furigana | safe }}</rt><rp>)</rp></ruby>
+                                {%- endfor -%}
+                                {%- if word.dictionary -%}
+                                    </a>
+                                {%- endif -%}
+                            {%- endfor -%}
+                        </p>
                     {% endfor %}
-                </div>
-                <div>
-                some random shit goes here
-                </div>
-            </div> 
+                {% endfor %}
+            </div>
+            {% endif %}
+            {{ content.text | safe }}
+            {% if content.translation %}
+                <p>
+                    Translation
+                    {% if content.translation.author %}by {{ content.translation.author }}{% endif %}
+                    {% if content.translation.site %} via
+                        {% if content.translation.site.link %}
+                            <a href="{{ content.translation.site.link }}" target="_blank">{{ content.translation.site.name }}</a>
+                        {% else %}
+                            {{ content.translation.site.name }}
+                        {% endif %}
+                    {%- endif -%}
+                </p>
+            {%- endif -%}
+            {%- if content.suggester -%}
+                <p><em>This challenge was suggested by <strong>{{ content.suggester }}</strong> using the <code>-h suggest</code> command.</code></em></p>
+            {%- endif -%}
+        </div>
+        <div id="submissions">
+            <script>
+            const submissionModal = image => {
+                const dialog = document.createElement("dialog");
+                dialog.style.padding = "0";
+                const img = document.createElement("img");
+                img.src = "/{{ challenge }}/" + image;
+                const defaultZoom = "75vh";
+                img.style.height = defaultZoom;
+                img.style.cursor = "zoom-in";
+                img.style.display = "block";
+                img.style.margin = "0";
+                img.onclick = event => img.style.height = img.style.height ? "" : defaultZoom;
+                dialog.appendChild(img);
+                dialog.addEventListener("close", event => document.body.removeChild(dialog));
+                document.body.appendChild(dialog);
+                dialog.showModal();
+            };
+            </script>
+            <div>
+                {% for submission in submissions %}
+                    {% set author = users[submission.author_id] %}
+                    <figure>
+                        <img src="/{{ challenge }}/{{ submission.image }}" alt="{{ author.username }}'s submission" onclick="submissionModal('{{ submission.image }}')">
+                        <figcaption>{% if not author.deleted %}<a href="https://discord.com/users/{{ author.id }}" target="_blank">{% endif %}{{ author.username }}{% if author.deleted %} (deleted account){% else %}</a>{% endif %}</figcaption>
+                    </figure>
+                {% endfor %}
+            </div>
+            <div>
+            some random shit goes here
+            </div>
         </div>
     </div>
 </body>