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

adjust header and chatPane height

Browse Source
This commit is contained in:
iou1name 2018-09-30 01:30:50 -04:00
parent ba28cb94e1
commit eb4ccddb37
5 changed files with 24 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
jinja2/base.html
View File

@ -14,14 +14,14 @@
</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 %}"> <div id="header" class="header" style="{% if request.session.get("hide_header") == True %}display:none;{% else %}display:flex;{% endif %}">
<li><a onclick="toggle_header();" href="javascript:void(0);">↑</a></li> <span><a onclick="toggle_header();" href="javascript:void(0);">↑</a></span>
<li><a href="{{ url('homepage:index') }}">Home</a></li> <span><a href="{{ url('homepage:index') }}">Home</a></span>
{% block header %}{% endblock %} {% block header %}{% endblock %}
</ul> </div>
<ul id="headerHidden" class="header" style="{% if request.session.get("hide_header") == True %}display:initial;{% else %}display:none;{% endif %}"> <div 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> <span><a onclick="toggle_header();" href="javascript:void(0);">↓</a></span>
</ul> </div>
<ul id="alerts"> <ul id="alerts">
{% for message in get_messages(request) %} {% for message in get_messages(request) %}
<li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li> <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>

10
quest/jinja2/quest/quest.html
View File

@ -7,7 +7,7 @@
{% endif %} {% endif %}
<script> <script>
const quest_id = {{ quest.id }}; const quest_id = {{ quest.id }};
const page_num = {{ page_num }}; const page_num = '{{ page_num }}';
const SCRIPT_NAME = '{{ request.META["SCRIPT_NAME"] }}'; const SCRIPT_NAME = '{{ request.META["SCRIPT_NAME"] }}';
const anon_name = '{{ quest.anon_name }}'; const anon_name = '{{ quest.anon_name }}';
</script> </script>
@ -19,9 +19,9 @@
{% endblock %} {% endblock %}
{% block header %} {% block header %}
{% if request.user == quest.owner %} {% 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 %} {% endif %}
<li> <span>
<select onChange="window.location.href=this.value"> <select onChange="window.location.href=this.value">
<optgroup label="Pages"> <optgroup label="Pages">
{% for page in pages %} {% for page in pages %}
@ -36,8 +36,8 @@
</optgroup> </optgroup>
{% endif %} {% endif %}
</select> </select>
</li> </span>
<li id="toggleChat"><a onclick="toggle_chat()" href="javascript:void(0);">{% if request.session.get("hide_chat") == True %}←{% else %}→{% endif %}</a></li> <span id="toggleChat"><a onclick="toggle_chat()" href="javascript:void(0);">{% if request.session.get("hide_chat") == True %}←{% else %}→{% endif %}</a></span>
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div id="questPane" style="width:{% if request.session.get("hide_chat") == True %}100%{% else %}70%{% endif %};"> <div id="questPane" style="width:{% if request.session.get("hide_chat") == True %}100%{% else %}70%{% endif %};">

6
quest/static/quest.css
View File

@ -8,6 +8,10 @@ h3 {
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
#toggleChat {
margin-left: auto;
}
#questPane { #questPane {
float: left; float: left;
box-sizing: border-box; box-sizing: border-box;
@ -111,8 +115,8 @@ h3 {
} }
#chatPane { #chatPane {
height: calc(100% - var(--header-height));
width: 30%; width: 30%;
height: calc(100vh - 2em);
right: 0; right: 0;
position: fixed; position: fixed;
display: flex; display: flex;

12
static/base.css
View File

@ -1,7 +1,3 @@
:root {
--header-height: 1.25em;
}
body { body {
margin: 0; margin: 0;
} }
@ -18,13 +14,15 @@ body {
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 100%; width: 100%;
height: var(--header-height); height: 2em;
list-style-type: none; list-style-type: none;
background-color: #dddddd; background-color: #dddddd;
display: flex;
align-items: center;
} }
.header li { .header span {
display: inline; padding-right: 0.25em;
} }
.header a { .header a {

4
static/base.js
View File

@ -6,13 +6,13 @@ function toggle_cookie(cookie, state) {
xhr.send(cookie + '=' + state); xhr.send(cookie + '=' + state);
} }
function toggle_header() { 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('header').style.display = 'none';
document.getElementById('headerHidden').style.display = 'initial'; document.getElementById('headerHidden').style.display = 'initial';
toggle_cookie('hide_header', 'on'); toggle_cookie('hide_header', 'on');
} }
else { else {
document.getElementById('header').style.display = 'initial'; document.getElementById('header').style.display = 'flex';
document.getElementById('headerHidden').style.display = 'none'; document.getElementById('headerHidden').style.display = 'none';
toggle_cookie('hide_header', 'off'); toggle_cookie('hide_header', 'off');
} }