qm post tabs and fixed error with posting

This commit is contained in:
iou1name 2018-06-27 08:43:00 -04:00
parent 7bcf9d3007
commit e94743b0a9
3 changed files with 98 additions and 23 deletions

View File

@ -66,7 +66,7 @@ def new_post(data):
post = data["post"] post = data["post"]
post = bleach.clean(post.strip()) post = bleach.clean(post.strip())
post = post.replace("\n", "<br />") post = post.replace("\n", "<br />")
message = tools.handle_img(message) post = tools.handle_img(post)
data["post"] = [post] data["post"] = [post]
db.insert_quest_post(room, post, int(time.time())) db.insert_quest_post(room, post, int(time.time()))
@ -87,7 +87,7 @@ def update_post(data):
post = data["post"] post = data["post"]
post = post.strip().replace("<br>", "<br />") post = post.strip().replace("<br>", "<br />")
message = tools.handle_img(message) post = tools.handle_img(post)
data["post"] = post data["post"] = post
post_id = data["post_id"] post_id = data["post_id"]

View File

@ -38,10 +38,48 @@ img {
.questPostMeta { .questPostMeta {
white-space: nowrap; white-space: nowrap;
padding-right: 15px;
} }
.questPostData { #QMPostPane {
padding-left: 20px; display: flex;
}
#QMPostTabs {
display: inline-block;
list-style-type: none;
padding: 0;
margin: 0;
background-color: #f1f1f1;
height: 200px;
}
.QMPostTab {
display: block;
padding: 8px 16px;
text-decoration: none;
}
.QMPostTab:hover {
background-color: #555;
color: white;
}
.QMPostTab.active {
background-color: #555;
color: white;
}
.QMPostTabContent {
flex: auto;
padding: 0px 12px;
border: 1px solid #ccc;
border-left: none;
width: 100px;
}
#postTextArea {
max-width: 100%;
} }
#chatPane { #chatPane {

View File

@ -75,6 +75,24 @@
document.getElementById('savePost-' + post_id).style.display = 'none'; document.getElementById('savePost-' + post_id).style.display = 'none';
} }
</script> </script>
<script>
function openPostTab(event, modeName) {
var i, QMPostTabContent, QMPostTab;
QMPostTabContent = document.getElementsByClassName("QMPostTabContent");
for (i = 0; i < QMPostTabContent.length; i++) {
QMPostTabContent[i].style.display = "none";
}
QMPostTab = document.getElementsByClassName("QMPostTab");
for (i = 0; i < QMPostTab.length; i++) {
QMPostTab[i].className = QMPostTab[i].className.replace(" active", "");
}
document.getElementById(modeName).style.display = "block";
event.currentTarget.className += " active";
}
</script>
{% endif %} {% endif %}
{% endblock %} {% endblock %}
{% block header %} {% block header %}
@ -86,29 +104,48 @@
<div id="questContainer"> <div id="questContainer">
<div id="questPane"> <div id="questPane">
<center><h1>{{ quest_title }}</h1></center> <center><h1>{{ quest_title }}</h1></center>
{% for quest_post in quest_posts %} <div id="questPosts">
<div class="questPost"> {% for quest_post in quest_posts %}
<div class="questPostMeta"> <div class="questPost">
{{ quest_post[3] | strftime }} <div class="questPostMeta">
{% if session.get("user_id") == owner_id %} {{ quest_post[3] | strftime }}
<br /><a href="javascript:void(0);" onclick="edit_post('{{ quest_post[0] }}')">Edit</a> {% if session.get("user_id") == owner_id %}
<a href="javascript:void(0);" id="savePost-{{ quest_post[0] }}" onclick="save_post('{{ quest_post[0] }}')" style="display:none;">Save</a> <br /><a href="javascript:void(0);" onclick="edit_post('{{ quest_post[0] }}')">Edit</a>
{% endif %} <a href="javascript:void(0);" id="savePost-{{ quest_post[0] }}" onclick="save_post('{{ quest_post[0] }}')" style="display:none;">Save</a>
</div> {% endif %}
<div class="questPostData" id="questPostData-{{ quest_post[0] }}"> </div>
{% autoescape false %} <div class="questPostData" id="questPostData-{{ quest_post[0] }}">
{{ quest_post[2] }} {% autoescape false %}
{% endautoescape %} {{ quest_post[2] }}
</div> {% endautoescape %}
</div><br /> </div>
{% endfor %} </div><br />
{% endfor %}
</div>
{% if session.get("user_id") == owner_id %} {% if session.get("user_id") == owner_id %}
<div id="postTextDiv"> <div id="QMPostPane">
<textarea id="postTextArea"></textarea><br /> <div>
<input type="submit" name="newPost" value="Post" onclick="makePost();"/> <ul id="QMPostTabs">
<li><a class="QMPostTab active" href="javascript:void(0);" onclick="openPostTab(event, 'QMPostText')">Text</a></li>
<li><a class="QMPostTab" href="javascript:void(0);" onclick="openPostTab(event, 'QMPostDice')">Dice</a></li>
<li><a class="QMPostTab" href="javascript:void(0);" onclick="openPostTab(event, 'QMPostPoll')">Poll</a></li>
</ul>
</div>
<div id="QMPostText" class="QMPostTabContent" style="display:initial;">
<textarea id="postTextArea"></textarea><br />
<input type="submit" name="newPost" value="Post" onclick="makePost();"/>
</div>
<div id="QMPostDice" class="QMPostTabContent" style="display:none;">
Dice for the dice god.
</div>
<div id="QMPostPoll" class="QMPostTabContent" style="display:none;">
The polls are rigged.
</div>
</div> </div>
{% endif %} {% endif %}
</div> </div>
<br />
<br />
<div id="chatPane"> <div id="chatPane">
<h1>Chat</h1> <h1>Chat</h1>
<div id="chatWindow"> <div id="chatWindow">