159 lines
No EOL
4.2 KiB
Django/Jinja
159 lines
No EOL
4.2 KiB
Django/Jinja
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<style>
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
/*align-items: center;
|
|
justify-content: center;*/
|
|
overflow: hidden;
|
|
background-color: #f5f5f5;
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
.container {
|
|
width: 1080px;
|
|
max-height: 1350px;
|
|
height: 1350px;
|
|
display: grid;
|
|
{% if parent is not none %}
|
|
grid-template-rows: auto 1fr auto;
|
|
{% else %}
|
|
grid-template-rows: 1fr auto;
|
|
{% endif %}
|
|
background-color: #fff;
|
|
/*margin: 20px;*/
|
|
/*padding: 40px;*/
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* reply info */
|
|
.replybox {
|
|
background-color: lightblue;
|
|
padding: 20px;
|
|
margin: 40px 40px 0px 40px;
|
|
border-radius: 12px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
font-size: 35px;
|
|
}
|
|
|
|
/* content */
|
|
.contentbox {
|
|
/*background-color: blue;*/
|
|
display: flex;
|
|
overflow: auto;
|
|
box-sizing: border-box;
|
|
text-align: center;
|
|
justify-content: center;
|
|
font-size: 45px;
|
|
{% if parent is not none %}
|
|
margin: 20px 40px 0px 40px;
|
|
{% else %}
|
|
margin: 40px 40px 0px 40px;
|
|
{% endif %}
|
|
|
|
/* hide scroll bar */
|
|
scrollbar-width: none; /* Firefox */
|
|
-ms-overflow-style: none; /* IE/Edge */
|
|
}
|
|
|
|
/* content - hide scroll bar */
|
|
.contentbox::-webkit-scrollbar {
|
|
display: none; /* Chrome, Safari */
|
|
}
|
|
|
|
/* center if not overflow */
|
|
.container .center {
|
|
align-items: center;
|
|
}
|
|
|
|
.content {
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
}
|
|
|
|
/* metadata */
|
|
.metadatabox {
|
|
margin: 0px 40px 40px 40px;
|
|
color: grey;
|
|
font-size: 35px;
|
|
}
|
|
|
|
.metadata-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
vertical-align: center;
|
|
align-items: center;
|
|
}
|
|
.metadata-grid .left {
|
|
text-align: left;
|
|
}
|
|
.metadata-grid .center {
|
|
text-align: center;
|
|
}
|
|
.metadata-grid .right {
|
|
text-align: right;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<!-- reply info -->
|
|
{% if parent is not none %}
|
|
<div class="replybox">
|
|
Re: #{{ parent.id }} {{ parent.content }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- main content -->
|
|
<div class="contentbox"><a class="content">{{ main.content }}
|
|
</a></div>
|
|
|
|
<!-- metadata -->
|
|
<div class="metadatabox">
|
|
<hr/>
|
|
<div class="metadata-grid">
|
|
<!-- <div class="left">IG: niming.tcivs</div> -->
|
|
<div class="left">匿名中工#{{ main.id }}</div>
|
|
<div class="center">niming.tcivs.live</div>
|
|
<div class="right">{{ main.time }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|
|
<script>
|
|
const contentbox = document.getElementsByClassName("contentbox")[0];
|
|
var page = 1;
|
|
|
|
// check overflow
|
|
function checkOverflow() {
|
|
if (contentbox.scrollHeight <= contentbox.clientHeight) {
|
|
contentbox.classList.add("center");
|
|
} else {
|
|
contentbox.classList.remove("center");
|
|
}
|
|
}
|
|
|
|
// scroll page
|
|
function scrollPage() {
|
|
let total_page = Math.ceil(contentbox.scrollHeight / contentbox.clientHeight);
|
|
if (total_page > 1 && page < total_page) {
|
|
contentbox.scrollTo(0, contentbox.scrollTop + contentbox.clientHeight - 45);
|
|
page++;
|
|
return 0;
|
|
}
|
|
return 1;
|
|
}
|
|
|
|
// Initial check
|
|
window.addEventListener("load", checkOverflow);
|
|
// Optional: recheck on resize
|
|
// window.addEventListener("resize", checkOverflow);
|
|
</script> |