iou1name/Titivillus
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

chat pane is hideable

Browse Source
This commit is contained in:
iou1name 2018-09-20 13:09:24 -04:00
parent 52b6ba01e4
commit 708513039a
6 changed files with 37 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
jinja2/base.html
View File

@ -5,17 +5,21 @@
<title>{% block title %}{% endblock %} - Titivillus</title>
<link rel="stylesheet" type="text/css" href="{{ static('base.css') }}">
<script type="text/javascript" src="{{ static('base.js') }}"></script>
<script>
const set_session_url = '{{ url("set_session:index") }}';
const csrf_token = '{{ csrf_token }}';
</script>
{% block head %}{% endblock %}
</head>
<body>
<div id="globalWrapper">
<ul id="header" class="header" style="{% if request.session.get("hide_header") == True %}display:none;{% else %}display:initial;{% endif %}">
<li><a onclick="toggleHeader();" href="javascript:void(0);">⏫</a></li>
<li><a onclick="toggle_header();" href="javascript:void(0);">↑</a></li>
<li><a href="{{ url('homepage:index') }}">Home</a></li>
{% block header %}{% endblock %}
</ul>
<ul id="headerHidden" class="header" style="{% if request.session.get("hide_header") == True %}display:initial;{% else %}display:none;{% endif %}">
<li><a onclick="toggleHeader();" href="javascript:void(0);">⏬</a></li>
<li><a onclick="toggle_header();" href="javascript:void(0);">↓</a></li>
</ul>
<ul id="alerts">
{% for message in get_messages(request) %}

3
quest/jinja2/quest/quest.html
View File

@ -27,6 +27,7 @@
{% endfor %}
</select>
</li>
<li id="toggleChat"><a onclick="toggle_chat()" href="javascript:void(0);">→</a></li>
{% endblock %}
{% block content %}
<div id="questPane">
@ -140,7 +141,7 @@
</div>
{% endif %}
</div>
<div id="chatPane">
<div id="chatPane" style="display:flex;">
<h1>Chat</h1>
<div id="chatWindow">
{% autoescape false %}

12
quest/static/quest.js
View File

@ -247,3 +247,15 @@ function open_post(post_id) {
}
}
}
function toggle_chat() {
if (document.getElementById('chatPane').style.display == 'flex') {
document.getElementById('chatPane').style.display = 'none';
document.getElementById('questPane').style.width = '100%';
toggle_cookie('hide_chat', 'on');
}
else {
document.getElementById('chatPane').style.display = 'flex';
document.getElementById('questPane').style.width = '70%';
toggle_cookie('hide_chat', 'off');
}
}

12
set_session/views.py
View File

@ -8,8 +8,12 @@ def index(request):
"""
A simple API endpoint for setting certain values in the users session.
"""
if request.POST.get('hide_header') == 'on':
request.session['hide_header'] = True
elif request.POST.get('hide_header') == 'off':
request.session['hide_header'] = False
for key, value in request.POST.items():
if key not in ['hide_header', 'hide_chat']:
continue
if value == 'on':
request.session[key] = True
elif value == 'off':
request.session[key] = False
return HttpResponse('true')

4
static/base.css
View File

@ -1,5 +1,5 @@
:root {
--header-height: 1.6em;
--header-height: 1.25em;
}
body {
@ -32,7 +32,7 @@ body {
}
#headerHidden {
width: auto;
width: 1em;
}
#alerts {

14
static/base.js
View File

@ -1,19 +1,19 @@
function toggleHeaderCookie(state) {
function toggle_cookie(cookie, state) {
let xhr = new XMLHttpRequest();
xhr.open('POST', '{{ url("set_session:index") }}', true);
xhr.open('POST', set_session_url, true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.setRequestHeader('X-CSRFToken', '{{ csrf_token }}');
xhr.send('hide_header=' + state);
xhr.setRequestHeader('X-CSRFToken', csrf_token);
xhr.send(cookie + '=' + state);
}
function toggleHeader() {
function toggle_header() {
if (document.getElementById('header').style.display == 'initial') {
document.getElementById('header').style.display = 'none';
document.getElementById('headerHidden').style.display = 'initial';
toggleHeaderCookie('on');
toggle_cookie('hide_header', 'on');
}
else {
document.getElementById('header').style.display = 'initial';
document.getElementById('headerHidden').style.display = 'none';
toggleHeaderCookie('off');
toggle_cookie('hide_header', 'off');
}
}