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> <title>{% block title %}{% endblock %} - Titivillus</title>
<link rel="stylesheet" type="text/css" href="{{ static('base.css') }}"> <link rel="stylesheet" type="text/css" href="{{ static('base.css') }}">
<script type="text/javascript" src="{{ static('base.js') }}"></script> <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 %} {% block head %}{% endblock %}
</head> </head>
<body> <body>
<div id="globalWrapper"> <div id="globalWrapper">
<ul id="header" class="header" style="{% if request.session.get("hide_header") == True %}display:none;{% else %}display:initial;{% endif %}"> <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> <li><a href="{{ url('homepage:index') }}">Home</a></li>
{% block header %}{% endblock %} {% block header %}{% endblock %}
</ul> </ul>
<ul id="headerHidden" class="header" style="{% if request.session.get("hide_header") == True %}display:initial;{% else %}display:none;{% endif %}"> <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>
<ul id="alerts"> <ul id="alerts">
{% for message in get_messages(request) %} {% for message in get_messages(request) %}

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

@ -27,6 +27,7 @@
{% endfor %} {% endfor %}
</select> </select>
</li> </li>
<li id="toggleChat"><a onclick="toggle_chat()" href="javascript:void(0);">→</a></li>
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div id="questPane"> <div id="questPane">
@ -140,7 +141,7 @@
</div> </div>
{% endif %} {% endif %}
</div> </div>
<div id="chatPane"> <div id="chatPane" style="display:flex;">
<h1>Chat</h1> <h1>Chat</h1>
<div id="chatWindow"> <div id="chatWindow">
{% autoescape false %} {% 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. A simple API endpoint for setting certain values in the users session.
""" """
if request.POST.get('hide_header') == 'on': for key, value in request.POST.items():
request.session['hide_header'] = True if key not in ['hide_header', 'hide_chat']:
elif request.POST.get('hide_header') == 'off': continue
request.session['hide_header'] = False if value == 'on':
request.session[key] = True
elif value == 'off':
request.session[key] = False
return HttpResponse('true') return HttpResponse('true')

4
static/base.css
View File

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

14
static/base.js
View File

@ -1,19 +1,19 @@
function toggleHeaderCookie(state) { function toggle_cookie(cookie, state) {
let xhr = new XMLHttpRequest(); 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('Content-Type', 'application/x-www-form-urlencoded');
xhr.setRequestHeader('X-CSRFToken', '{{ csrf_token }}'); xhr.setRequestHeader('X-CSRFToken', csrf_token);
xhr.send('hide_header=' + state); xhr.send(cookie + '=' + state);
} }
function toggleHeader() { function toggle_header() {
if (document.getElementById('header').style.display == 'initial') { if (document.getElementById('header').style.display == 'initial') {
document.getElementById('header').style.display = 'none'; document.getElementById('header').style.display = 'none';
document.getElementById('headerHidden').style.display = 'initial'; document.getElementById('headerHidden').style.display = 'initial';
toggleHeaderCookie('on'); toggle_cookie('hide_header', 'on');
} }
else { else {
document.getElementById('header').style.display = 'initial'; document.getElementById('header').style.display = 'initial';
document.getElementById('headerHidden').style.display = 'none'; document.getElementById('headerHidden').style.display = 'none';
toggleHeaderCookie('off'); toggle_cookie('hide_header', 'off');
} }
} }