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 {
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue