refactor css layout
This commit is contained in:
parent
be467e003d
commit
52b6ba01e4
|
|
@ -4,30 +4,11 @@
|
|||
<meta charset="utf-8">
|
||||
<title>{% block title %}{% endblock %} - Titivillus</title>
|
||||
<link rel="stylesheet" type="text/css" href="{{ static('base.css') }}">
|
||||
<script>
|
||||
function toggleHeaderCookie(state) {
|
||||
let xhr = new XMLHttpRequest();
|
||||
xhr.open('POST', '{{ url("set_session:index") }}', true);
|
||||
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
|
||||
xhr.setRequestHeader('X-CSRFToken', '{{ csrf_token }}');
|
||||
xhr.send('hide_header=' + state);
|
||||
}
|
||||
function toggleHeader() {
|
||||
if (document.getElementById('header').style.display == 'initial') {
|
||||
document.getElementById('header').style.display = 'none';
|
||||
document.getElementById('headerHidden').style.display = 'initial';
|
||||
toggleHeaderCookie('on');
|
||||
}
|
||||
else {
|
||||
document.getElementById('header').style.display = 'initial';
|
||||
document.getElementById('headerHidden').style.display = 'none';
|
||||
toggleHeaderCookie('off');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script type="text/javascript" src="{{ static('base.js') }}"></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 href="{{ url('homepage:index') }}">Home</a></li>
|
||||
|
|
@ -36,14 +17,12 @@
|
|||
<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>
|
||||
</ul>
|
||||
{#<br /> <!-- TODO: make this more exact. -->#}
|
||||
<div id="pageMessages">
|
||||
<ul class="pageMessages">
|
||||
<ul id="alerts">
|
||||
{% for message in get_messages(request) %}
|
||||
<li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
<div id="content">{% block content %}{% endblock %}</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,9 @@
|
|||
{% block title %}{{ quest.title }}{% endblock %}
|
||||
{% block head %}
|
||||
<link rel="stylesheet" type="text/css" href="{{ static('quest.css') }}">
|
||||
{% if request.user == quest.owner %}
|
||||
<link rel="stylesheet" type="text/css" href="{{ static('questQM.css') }}">
|
||||
{% endif %}
|
||||
<script>
|
||||
const quest_id = {{ quest.id }};
|
||||
const page_num = {{ page_num }};
|
||||
|
|
@ -26,7 +29,6 @@
|
|||
</li>
|
||||
{% endblock %}
|
||||
{% block content %}
|
||||
<div id="questContainer">
|
||||
<div id="questPane">
|
||||
<center><h1>{{ quest.title }}</h1></center>
|
||||
<div id="questPosts">
|
||||
|
|
@ -87,7 +89,7 @@
|
|||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div><br />
|
||||
</div><br>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% if request.user == quest.owner %}
|
||||
|
|
@ -138,8 +140,6 @@
|
|||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<br />
|
||||
<br />
|
||||
<div id="chatPane">
|
||||
<h1>Chat</h1>
|
||||
<div id="chatWindow">
|
||||
|
|
@ -159,6 +159,5 @@
|
|||
</div>
|
||||
<div id="messageTextDiv"><textarea id="messageTextArea"></textarea></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="preview" style="display:none;"></div>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -8,14 +8,12 @@ h3 {
|
|||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
#questContainer {
|
||||
display: flex;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#questPane {
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
padding-left: 5%;
|
||||
width: 65%;
|
||||
padding-right: 5%;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.questPost {
|
||||
|
|
@ -33,60 +31,6 @@ h3 {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
#QMPostPane {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.editPostText {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#QMPostTabs {
|
||||
display: inline-block;
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: #f1f1f1;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
border-bottom: 1px dotted black;
|
||||
}
|
||||
|
||||
#QMPollPostForm a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.pollOption {
|
||||
width: 100%;
|
||||
margin: 0.1em;
|
||||
|
|
@ -153,7 +97,7 @@ h3 {
|
|||
}
|
||||
|
||||
#chatPane {
|
||||
height: 100%;
|
||||
height: calc(100% - var(--header-height));
|
||||
width: 30%;
|
||||
right: 0;
|
||||
position: fixed;
|
||||
|
|
@ -165,7 +109,7 @@ h3 {
|
|||
border: 1px solid #ccc;
|
||||
padding: 0.25em;
|
||||
overflow: auto;
|
||||
flex: 1;
|
||||
flex: auto;
|
||||
}
|
||||
|
||||
.messageContent {
|
||||
|
|
@ -184,16 +128,15 @@ h3 {
|
|||
}
|
||||
|
||||
#messageTextDiv {
|
||||
padding-bottom: 1em;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: 0.25em;
|
||||
}
|
||||
|
||||
#messageTextArea {
|
||||
resize: none;
|
||||
box-sizing: border-box;
|
||||
height: 5em;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#preview {
|
||||
|
|
|
|||
53
quest/static/questQM.css
Normal file
53
quest/static/questQM.css
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
#QMPostPane {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.editPostText {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#QMPostTabs {
|
||||
display: inline-block;
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: #f1f1f1;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
border-bottom: 1px dotted black;
|
||||
}
|
||||
|
||||
#QMPollPostForm a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
@ -1,11 +1,25 @@
|
|||
:root {
|
||||
--header-height: 1.6em;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#globalWrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.header {
|
||||
position: fixed;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: var(--header-height);
|
||||
list-style-type: none;
|
||||
background-color: #dddddd;
|
||||
}
|
||||
|
||||
|
|
@ -20,3 +34,12 @@
|
|||
#headerHidden {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#alerts {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#content {
|
||||
flex: auto;
|
||||
overflow: auto;
|
||||
}
|
||||
|
|
|
|||
19
static/base.js
Normal file
19
static/base.js
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
function toggleHeaderCookie(state) {
|
||||
let xhr = new XMLHttpRequest();
|
||||
xhr.open('POST', '{{ url("set_session:index") }}', true);
|
||||
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
|
||||
xhr.setRequestHeader('X-CSRFToken', '{{ csrf_token }}');
|
||||
xhr.send('hide_header=' + state);
|
||||
}
|
||||
function toggleHeader() {
|
||||
if (document.getElementById('header').style.display == 'initial') {
|
||||
document.getElementById('header').style.display = 'none';
|
||||
document.getElementById('headerHidden').style.display = 'initial';
|
||||
toggleHeaderCookie('on');
|
||||
}
|
||||
else {
|
||||
document.getElementById('header').style.display = 'initial';
|
||||
document.getElementById('headerHidden').style.display = 'none';
|
||||
toggleHeaderCookie('off');
|
||||
}
|
||||
}
|
||||
5
todo
5
todo
|
|
@ -19,14 +19,9 @@ Improvements:
|
|||
More options for text posts (lists and so on)
|
||||
More rigorous input checking in events.py
|
||||
New post displays chat message
|
||||
Record email on signup
|
||||
Change urls
|
||||
Poll vote highlights entire option
|
||||
Poll vote doesn't disappear checkbox
|
||||
Total voters per poll
|
||||
Chat archives
|
||||
Only last 100 (50?) chat messages are loaded on page load
|
||||
Adjust quote preview postioning
|
||||
|
||||
Port from old code:
|
||||
Images
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user