hex/iwakuweb
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(guest): add 'back' button on post & refresh when post is made.

Browse source
This commit is contained in:
hexlocation pc 2024-07-13 10:44:53 +02:00
parent e9379d1e23
commit 25f9cd96ff
1 changed files with 23 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
templates/guest.html.tera
View file

@ -1,7 +1,7 @@
<div id="page-container"> <div id="page-container">
<div id="header-container"> <div id="header-container">
<h1 id="title">iwakura.rip</h1> <h1 id="title"><a href="/">iwakura.rip</a></h1>
<a class="link" onclick="show_message_poster()" style="margin-bottom: 10px;">&nbsp;[ post message ]&nbsp;</a> <a class="link" id="msg-post" onclick="show_message_poster()" style="margin-bottom: 10px;">&nbsp;[ post message ]&nbsp;</a>
</div> </div>
<div id="entries-container"> <div id="entries-container">
{% for message in messages %} {% for message in messages %}
@ -27,9 +27,19 @@
</div> </div>
</div> </div>
<script> <script>
let show_post_message = false;
let show_message_poster = () => { let show_message_poster = () => {
document.getElementById("entries-container").style.display = "none"; if (!show_post_message) {
document.getElementById("post-container").style.display = "flex"; show_post_message = !show_post_message
document.getElementById("entries-container").style.display = "none";
document.getElementById("post-container").style.display = "flex";
document.getElementById("msg-post").innerText = " [ back ] ";
return
}
document.getElementById("msg-post").innerText = " [ post message ] "
show_post_message = !show_post_message
document.getElementById("entries-container").style.display = "flex";
document.getElementById("post-container").style.display = "none";
} }
let send_msg = async () => { let send_msg = async () => {
fetch("/post_message", { fetch("/post_message", {
@ -38,10 +48,18 @@
body: document.getElementById("msg-box").value, body: document.getElementById("msg-box").value,
name: document.getElementById("name-box").value name: document.getElementById("name-box").value
}), }),
}).then(x => {
window.location.reload()
}) })
} }
</script> </script>
<style> <style>
a {
text-decoration: none;
}
a:active {
text-decoration: none;
}
:root { :root {
--term-color: #4AF626; --term-color: #4AF626;
--title-gap: 0px; --title-gap: 0px;
@ -92,6 +110,7 @@ label {
float: left; float: left;
} }
.link { .link {
cursor: default;
align-items: center; align-items: center;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;