Fix scrolling styles with CSS grid
This commit is contained in:
parent
2794359218
commit
a3f85e4cba
2 changed files with 99 additions and 98 deletions
|
|
@ -43,11 +43,19 @@ input[type=number] {
|
||||||
#content {
|
#content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 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;
|
overflow: hidden;
|
||||||
|
|
||||||
nav {
|
nav {
|
||||||
|
grid-area: nav;
|
||||||
|
|
||||||
--bg: #{$fg};
|
--bg: #{$fg};
|
||||||
--fg: #{$bg};
|
--fg: #{$bg};
|
||||||
background: var(--bg);
|
background: var(--bg);
|
||||||
|
|
@ -98,16 +106,12 @@ input[type=number] {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
& > div:first-of-type {
|
& > div {
|
||||||
display: flex;
|
overflow: scroll;
|
||||||
height: 100%;
|
}
|
||||||
& > :first-child {
|
|
||||||
min-width: 40em;
|
#challenge {
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
}
|
|
||||||
& > * {
|
|
||||||
overflow: scroll;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -116,9 +120,8 @@ input[type=number] {
|
||||||
}
|
}
|
||||||
|
|
||||||
#submissions {
|
#submissions {
|
||||||
display: flex;
|
grid-area: submissions;
|
||||||
flex-direction: column;
|
|
||||||
height: calc(100% - 2em);
|
|
||||||
background: rgba(0, 0, 0, 0.125);
|
background: rgba(0, 0, 0, 0.125);
|
||||||
$gap: 0.5em;
|
$gap: 0.5em;
|
||||||
padding: $gap;
|
padding: $gap;
|
||||||
|
|
|
||||||
|
|
@ -64,92 +64,90 @@
|
||||||
</nav>
|
</nav>
|
||||||
</a>
|
</a>
|
||||||
</nav>
|
</nav>
|
||||||
<div>
|
<div id="challenge">
|
||||||
<div>
|
<h1>Welcome to Tegaki Tuesday #{{ challenge }}!</h1>
|
||||||
<h1>Welcome to Tegaki Tuesday #{{ challenge }}!</h1>
|
{% if content.japanese %}
|
||||||
{% if content.japanese %}
|
<div lang="ja">
|
||||||
<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">
|
|
||||||
<script>
|
<script>
|
||||||
const submissionModal = image => {
|
let kyujitai = false;
|
||||||
const dialog = document.createElement("dialog");
|
function kyujitaiToggle() {
|
||||||
dialog.style.padding = "0";
|
document.querySelectorAll("[data-kyujitai]").forEach(segment => {
|
||||||
const img = document.createElement("img");
|
let newText = segment.getAttribute("data-kyujitai");
|
||||||
img.src = "/{{ challenge }}/" + image;
|
segment.setAttribute("data-kyujitai", segment.firstChild.data);
|
||||||
const defaultZoom = "75vh";
|
segment.firstChild.data = newText;
|
||||||
img.style.height = defaultZoom;
|
})
|
||||||
img.style.cursor = "zoom-in";
|
kyujitai = !kyujitai;
|
||||||
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>
|
</script>
|
||||||
<div>
|
<button onclick="kyujitaiToggle(); this.innerHTML = kyujitai ? '新字体' : '旧字体'">旧字体</button>
|
||||||
{% for submission in submissions %}
|
{% for line in content.japanese %}
|
||||||
{% set author = users[submission.author_id] %}
|
{% for subline in line %}
|
||||||
<figure>
|
<p>
|
||||||
<img src="/{{ challenge }}/{{ submission.image }}" alt="{{ author.username }}'s submission" onclick="submissionModal('{{ submission.image }}')">
|
{%- for word in subline -%}
|
||||||
<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>
|
{%- if word.dictionary -%}
|
||||||
</figure>
|
<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>
|
{% endfor %}
|
||||||
<div>
|
</div>
|
||||||
some random shit goes here
|
{% endif %}
|
||||||
</div>
|
{{ content.text | safe }}
|
||||||
</div>
|
{% 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>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue