From eb4ccddb37163e8ea53e753f9b13b6dae2041971 Mon Sep 17 00:00:00 2001
From: iou1name <iou1name@national.shitposting.agency>
Date: Sun, 30 Sep 2018 01:30:50 -0400
Subject: [PATCH] adjust header and chatPane height

---
 jinja2/base.html              | 14 +++++++-------
 quest/jinja2/quest/quest.html | 10 +++++-----
 quest/static/quest.css        |  6 +++++-
 static/base.css               | 12 +++++-------
 static/base.js                |  4 ++--
 5 files changed, 24 insertions(+), 22 deletions(-)
diff --git a/jinja2/base.html b/jinja2/base.html
index bc6ac8c..81eb057 100644
--- a/jinja2/base.html
+++ b/jinja2/base.html
@@ -14,14 +14,14 @@
 </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="toggle_header();" href="javascript:void(0);">↑</a></li>
-			<li><a href="{{ url('homepage:index') }}">Home</a></li>
+		<div id="header" class="header" style="{% if request.session.get("hide_header") == True %}display:none;{% else %}display:flex;{% endif %}">
+			<span><a onclick="toggle_header();" href="javascript:void(0);">↑</a></span>
+			<span><a href="{{ url('homepage:index') }}">Home</a></span>
 			{% 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="toggle_header();" href="javascript:void(0);">↓</a></li>
-		</ul>
+		</div>
+		<div id="headerHidden" class="header" style="{% if request.session.get("hide_header") == True %}display:initial;{% else %}display:none;{% endif %}">
+			<span><a onclick="toggle_header();" href="javascript:void(0);">↓</a></span>
+		</div>
 		<ul id="alerts">
 			{% for message in get_messages(request) %}
 			<li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
diff --git a/quest/jinja2/quest/quest.html b/quest/jinja2/quest/quest.html
index b50d6f3..dd65b8a 100644
--- a/quest/jinja2/quest/quest.html
+++ b/quest/jinja2/quest/quest.html
@@ -7,7 +7,7 @@
 	{% endif %}
 	<script>
 		const quest_id = {{ quest.id }};
-		const page_num = {{ page_num }};
+		const page_num = '{{ page_num }}';
 		const SCRIPT_NAME = '{{ request.META["SCRIPT_NAME"] }}';
 		const anon_name = '{{ quest.anon_name }}';
 	</script>
@@ -19,9 +19,9 @@
 {% endblock %}
 {% block header %}
 {% if request.user == quest.owner %}
-	<li><a href="{{ url('quest:edit_quest', args=[quest_id]) }}">Edit Quest</a></li>
+	<span><a href="{{ url('quest:edit_quest', args=[quest_id, page_num]) }}">Edit Quest</a></span>
 {% endif %}
-	<li>
+	<span>
 		<select onChange="window.location.href=this.value">
 			<optgroup label="Pages">
 				{% for page in pages %}
@@ -36,8 +36,8 @@
 			</optgroup>
 			{% endif %}
 		</select>
-	</li>
-	<li id="toggleChat"><a onclick="toggle_chat()" href="javascript:void(0);">{% if request.session.get("hide_chat") == True %}←{% else %}→{% endif %}</a></li>
+	</span>
+	<span id="toggleChat"><a onclick="toggle_chat()" href="javascript:void(0);">{% if request.session.get("hide_chat") == True %}←{% else %}→{% endif %}</a></span>
 {% endblock %}
 {% block content %}
 	<div id="questPane" style="width:{% if request.session.get("hide_chat") == True %}100%{% else %}70%{% endif %};">
diff --git a/quest/static/quest.css b/quest/static/quest.css
index 555f7f8..61363b9 100644
--- a/quest/static/quest.css
+++ b/quest/static/quest.css
@@ -8,6 +8,10 @@ h3 {
 	margin-bottom: 0.5em;
 }
 
+#toggleChat {
+	margin-left: auto;
+}
+
 #questPane {
 	float: left;
 	box-sizing: border-box;
@@ -111,8 +115,8 @@ h3 {
 }
 
 #chatPane {
-	height: calc(100% - var(--header-height));
 	width: 30%;
+	height: calc(100vh - 2em);
 	right: 0;
 	position: fixed;
 	display: flex;
diff --git a/static/base.css b/static/base.css
index 373773d..cc17b26 100644
--- a/static/base.css
+++ b/static/base.css
@@ -1,7 +1,3 @@
-:root {
-	--header-height: 1.25em;
-}
-
 body {
 	margin: 0;
 }
@@ -18,13 +14,15 @@ body {
 	margin: 0;
 	padding: 0;
 	width: 100%;
-	height: var(--header-height);
+	height: 2em;
 	list-style-type: none;
 	background-color: #dddddd;
+	display: flex;
+	align-items: center;
 }
 
-.header li {
-	display: inline;
+.header span {
+	padding-right: 0.25em;
 }
 
 .header a {
diff --git a/static/base.js b/static/base.js
index 77352a2..0a95025 100644
--- a/static/base.js
+++ b/static/base.js
@@ -6,13 +6,13 @@ function toggle_cookie(cookie, state) {
 	xhr.send(cookie + '=' + state);
 	}
 function toggle_header() {
-	if (document.getElementById('header').style.display == 'initial') {
+	if (document.getElementById('header').style.display == 'flex') {
 		document.getElementById('header').style.display = 'none';
 		document.getElementById('headerHidden').style.display = 'initial';
 		toggle_cookie('hide_header', 'on');
 	}
 	else {
-		document.getElementById('header').style.display = 'initial';
+		document.getElementById('header').style.display = 'flex';
 		document.getElementById('headerHidden').style.display = 'none';
 		toggle_cookie('hide_header', 'off');
 	}
