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

refactor css layout

Browse Source
This commit is contained in:
iou1name 2018-09-19 15:56:59 -04:00
parent be467e003d
commit 52b6ba01e4
7 changed files with 249 additions and 238 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
jinja2/base.html
View File

@ -4,30 +4,11 @@
<meta charset="utf-8"> <meta charset="utf-8">
<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> <script type="text/javascript" src="{{ static('base.js') }}"></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>
{% block head %}{% endblock %} {% block head %}{% endblock %}
</head> </head>
<body> <body>
<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="toggleHeader();" href="javascript:void(0);">⏫</a></li>
<li><a href="{{ url('homepage:index') }}">Home</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 %}"> <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="toggleHeader();" href="javascript:void(0);">⏬</a></li>
</ul> </ul>
{#<br /> <!-- TODO: make this more exact. -->#} <ul id="alerts">
<div id="pageMessages">
<ul class="pageMessages">
{% 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>
{% endfor %} {% endfor %}
</ul> </ul>
</div>
<div id="content">{% block content %}{% endblock %}</div> <div id="content">{% block content %}{% endblock %}</div>
</div>
</body> </body>
</html> </html>

9
quest/jinja2/quest/quest.html
View File

@ -2,6 +2,9 @@
{% block title %}{{ quest.title }}{% endblock %} {% block title %}{{ quest.title }}{% endblock %}
{% block head %} {% block head %}
<link rel="stylesheet" type="text/css" href="{{ static('quest.css') }}"> <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> <script>
const quest_id = {{ quest.id }}; const quest_id = {{ quest.id }};
const page_num = {{ page_num }}; const page_num = {{ page_num }};
@ -26,7 +29,6 @@
</li> </li>
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div id="questContainer">
<div id="questPane"> <div id="questPane">
<center><h1>{{ quest.title }}</h1></center> <center><h1>{{ quest.title }}</h1></center>
<div id="questPosts"> <div id="questPosts">
@ -87,7 +89,7 @@
{% endif %} {% endif %}
{% endif %} {% endif %}
</div> </div>
</div><br /> </div><br>
{% endfor %} {% endfor %}
</div> </div>
{% if request.user == quest.owner %} {% if request.user == quest.owner %}
@ -138,8 +140,6 @@
</div> </div>
{% endif %} {% endif %}
</div> </div>
<br />
<br />
<div id="chatPane"> <div id="chatPane">
<h1>Chat</h1> <h1>Chat</h1>
<div id="chatWindow"> <div id="chatWindow">
@ -159,6 +159,5 @@
</div> </div>
<div id="messageTextDiv"><textarea id="messageTextArea"></textarea></div> <div id="messageTextDiv"><textarea id="messageTextArea"></textarea></div>
</div> </div>
</div>
<div id="preview" style="display:none;"></div> <div id="preview" style="display:none;"></div>
{% endblock %} {% endblock %}

75
quest/static/quest.css
View File

@ -8,14 +8,12 @@ h3 {
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
#questContainer {
display: flex;
overflow: auto;
}
#questPane { #questPane {
float: left;
box-sizing: border-box;
padding-left: 5%; padding-left: 5%;
width: 65%; padding-right: 5%;
width: 70%;
} }
.questPost { .questPost {
@ -33,60 +31,6 @@ h3 {
width: 100%; 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 { .pollOption {
width: 100%; width: 100%;
margin: 0.1em; margin: 0.1em;
@ -153,7 +97,7 @@ h3 {
} }
#chatPane { #chatPane {
height: 100%; height: calc(100% - var(--header-height));
width: 30%; width: 30%;
right: 0; right: 0;
position: fixed; position: fixed;
@ -165,7 +109,7 @@ h3 {
border: 1px solid #ccc; border: 1px solid #ccc;
padding: 0.25em; padding: 0.25em;
overflow: auto; overflow: auto;
flex: 1; flex: auto;
} }
.messageContent { .messageContent {
@ -184,16 +128,15 @@ h3 {
} }
#messageTextDiv { #messageTextDiv {
padding-bottom: 1em; padding-bottom: 0.25em;
width: 100%;
display: flex;
flex-direction: column;
} }
#messageTextArea { #messageTextArea {
resize: none; resize: none;
box-sizing: border-box; box-sizing: border-box;
height: 5em; height: 5em;
width: 100%;
padding: 0;
} }
#preview { #preview {

53
quest/static/questQM.css Normal file
View 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;
}

31
static/base.css
View File

@ -1,11 +1,25 @@
:root {
--header-height: 1.6em;
}
body {
margin: 0;
}
#globalWrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.header { .header {
position: fixed; position: sticky;
top: 0; top: 0;
left: 0;
width: 100%;
list-style-type: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 100%;
height: var(--header-height);
list-style-type: none;
background-color: #dddddd; background-color: #dddddd;
} }
@ -20,3 +34,12 @@
#headerHidden { #headerHidden {
width: auto; width: auto;
} }
#alerts {
margin: 0;
}
#content {
flex: auto;
overflow: auto;
}

19
static/base.js Normal file
View 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
View File

@ -19,14 +19,9 @@ Improvements:
More options for text posts (lists and so on) More options for text posts (lists and so on)
More rigorous input checking in events.py More rigorous input checking in events.py
New post displays chat message New post displays chat message
Record email on signup
Change urls
Poll vote highlights entire option Poll vote highlights entire option
Poll vote doesn't disappear checkbox Poll vote doesn't disappear checkbox
Total voters per poll Total voters per poll
Chat archives Chat archives
Only last 100 (50?) chat messages are loaded on page load Only last 100 (50?) chat messages are loaded on page load
Adjust quote preview postioning Adjust quote preview postioning
Port from old code:
Images