clean up HTML, CSS, and JavaScript for CSP
In order to implement Content-Security-Policy, the inlined style, event handlers, and scripts all have to go. This commit completes this work.
This commit is contained in:
parent
84f38026eb
commit
44172ec98a
|
@ -80,6 +80,16 @@ body {
|
|||
padding: 5px 5px 5px 5px;
|
||||
}
|
||||
|
||||
#info #filename,
|
||||
#editform #filename {
|
||||
width: 232px;
|
||||
}
|
||||
|
||||
#info #extension,
|
||||
#editform #extension {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
#info .float-left {
|
||||
margin-top: 2px;
|
||||
margin-right: 20px;
|
||||
|
@ -181,7 +191,7 @@ body {
|
|||
}
|
||||
|
||||
.clear {
|
||||
clear:both;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
#upload_header {
|
||||
|
@ -248,6 +258,65 @@ body {
|
|||
padding-top: 1px;
|
||||
}
|
||||
|
||||
.oopscontent {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.oopscontent img {
|
||||
width: 400px;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.editor {
|
||||
width: 705px;
|
||||
height: 450px;
|
||||
border-color: #cccccc;
|
||||
}
|
||||
|
||||
/* Content display {{{ */
|
||||
.display-audio,
|
||||
.display-file {
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.display-image {
|
||||
margin-bottom: -6px;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.display-pdf {
|
||||
width: 910px;
|
||||
height: 800px;
|
||||
}
|
||||
|
||||
.display-video {
|
||||
width: 800px;
|
||||
}
|
||||
|
||||
.scrollable {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.storycontent {
|
||||
background-color: #f0e0d6;
|
||||
}
|
||||
|
||||
#editform,
|
||||
#editform .editor {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#codeb {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
#editor {
|
||||
display: none;
|
||||
height: 800px;
|
||||
font-size: 11px;
|
||||
}
|
||||
/* }}} */
|
||||
|
||||
/* cat.js */
|
||||
.qq-uploader { position:relative; width: 100%;}
|
||||
|
||||
|
@ -694,4 +763,4 @@ THE SOFTWARE.
|
|||
.hint--bounce:before, .hint--bounce:after {
|
||||
-webkit-transition: opacity 0.3s ease, visibility 0.3s ease, -webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
|
||||
-moz-transition: opacity 0.3s ease, visibility 0.3s ease, -moz-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
|
||||
transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); }
|
||||
transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); }
|
||||
|
|
|
@ -8,7 +8,7 @@ function init() {
|
|||
|
||||
editA.setAttribute("href", "#");
|
||||
editA.addEventListener('click', function(ev) {
|
||||
edit();
|
||||
edit(ev);
|
||||
return false;
|
||||
});
|
||||
editA.innerHTML = "edit";
|
||||
|
@ -22,14 +22,16 @@ function init() {
|
|||
editor.getSession().setMode("ace/mode/" + lang);
|
||||
editor.setTheme("ace/theme/tomorrow");
|
||||
|
||||
document.getElementById('save').addEventListener('click', paste);
|
||||
document.getElementById('wordwrap').addEventListener('click', wrap);
|
||||
}
|
||||
|
||||
|
||||
function edit() {
|
||||
function edit(ev) {
|
||||
|
||||
navlist.remove();
|
||||
document.getElementById("filename").remove();
|
||||
document.getElementById("foarm").style.display = "block";
|
||||
document.getElementById("editform").style.display = "block";
|
||||
|
||||
var normalcontent = document.getElementById("normal-content");
|
||||
normalcontent.removeChild(document.getElementById("normal-code"));
|
||||
|
@ -44,14 +46,12 @@ function edit() {
|
|||
}
|
||||
|
||||
|
||||
function paste() {
|
||||
|
||||
function paste(ev) {
|
||||
document.getElementById("newcontent").value = editor.getSession().getValue();
|
||||
document.forms["reply"].submit();
|
||||
|
||||
}
|
||||
|
||||
function wrap() {
|
||||
function wrap(ev) {
|
||||
if (document.getElementById("wordwrap").checked) {
|
||||
document.getElementById("codeb").style.wordWrap = "break-word";
|
||||
document.getElementById("codeb").style.whiteSpace = "pre-wrap";
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<a href="/"><img style="border:0;" src='/static/images/404.jpg' width='400'></a>
|
||||
<a href="/"><img src='/static/images/404.jpg'></a>
|
||||
{% endblock %}
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
{% extends "base.html" %}
|
||||
|
||||
{% block main %}
|
||||
<audio controls style='width: 500px;' preload='auto'>
|
||||
<source src='/selif/{{ filename }}'>
|
||||
<a href='/selif/{{ filename }}'>Download it instead</a>
|
||||
<audio class="display-audio" controls preload='auto'>
|
||||
<source src='/selif/{{ filename }}'>
|
||||
<a href='/selif/{{ filename }}'>Download it instead</a>
|
||||
</audio>
|
||||
{% endblock %}
|
||||
|
||||
|
|
|
@ -2,20 +2,20 @@
|
|||
|
||||
{% block head %}
|
||||
{% if extra.extension == "story" %}
|
||||
<link href="/static/css/highlight/story.css" rel="stylesheet" type="text/css" />
|
||||
<link href="/static/css/highlight/story.css" rel="stylesheet" type="text/css">
|
||||
{% else %}
|
||||
<link href="/static/css/highlight/tomorrow.css" rel="stylesheet" type="text/css" />
|
||||
<link href="/static/css/highlight/tomorrow.css" rel="stylesheet" type="text/css">
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block innercontentmore %} style="overflow: auto;" {% endblock %}
|
||||
{% block mainmore %} {% if extra.extension == "story" %} style="background-color: #f0e0d6;"{% endif %} {% endblock %}
|
||||
{% block innercontentmore %} class="scrollable"{% endblock %}
|
||||
{% block mainmore %} {% if extra.extension == "story" %} class="storycontent"{% endif %} {% endblock %}
|
||||
|
||||
{% block infoleft %}
|
||||
<div id="foarm" style="display: none;">
|
||||
<div id="editform">
|
||||
<form id="reply" action='/upload' method='post' >
|
||||
<div class="right">
|
||||
<select id="expiry" name="expires">
|
||||
<select id="expiry" name="expires">
|
||||
<option disabled=disabled>Expires:</option>
|
||||
<option value="0">never</option>
|
||||
<option value="60">a minute</option>
|
||||
|
@ -25,29 +25,27 @@
|
|||
<option value="604800">a week</option>
|
||||
<option value="2419200">a month</option>
|
||||
<option value="29030400">a year</option>
|
||||
</select>
|
||||
</select>
|
||||
|
||||
<button id="save" onclick="paste()">save</button>
|
||||
</div>
|
||||
<button id="save">save</button>
|
||||
</div>
|
||||
|
||||
<input style ="width:232px;" class="codebox" name='filename' id="filename" type='text' value="" placeholder="filename (empty for random filename)" />.<input id="extension" class="codebox" style="width:30px;" name='extension' type='text' value="{{ extra.extension }}" placeholder="txt" />
|
||||
<input class="codebox" name='filename' id="filename" type='text' value="" placeholder="filename (empty for random filename)">.<input id="extension" class="codebox" name='extension' type='text' value="{{ extra.extension }}" placeholder="txt">
|
||||
|
||||
|
||||
<textarea name='content' id="newcontent" class="editor" style="display: none;"></textarea>
|
||||
<textarea name='content' id="newcontent" class="editor"></textarea>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
</form>
|
||||
{% endblock %}
|
||||
|
||||
{%block infomore %}
|
||||
<label>wrap <input id="wordwrap" type="checkbox" onclick="wrap()" checked /></label> |
|
||||
<label>wrap <input id="wordwrap" type="checkbox" checked></label> |
|
||||
{% endblock %}
|
||||
|
||||
{% block main %}
|
||||
<div id="normal-content" class="normal {% if extra.lang_hl != "story" %}fixed{% endif %}">
|
||||
<pre id="normal-code"><code id="codeb" style="white-space: pre-wrap;" class="{{ extra.lang_hl }}">{{ extra.contents }}</code></pre>
|
||||
<div id="editor" style="display: none; height: 800px; font-size: 11px;" data-lang="{{ extra.lang_ace }}">{{ extra.contents }}</div>
|
||||
<pre id="normal-code"><code id="codeb" class="{{ extra.lang_hl }}">{{ extra.contents }}</code></pre>
|
||||
<div id="editor" data-lang="{{ extra.lang_ace }}">{{ extra.contents }}</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
{% extends "base.html" %}
|
||||
|
||||
{% block main %}
|
||||
<div class="normal" style="width: 500px;">
|
||||
<p class="center">You are requesting <a href="/selif/{{ filename }}">{{ filename }}</a>, <a href="/selif/{{ filename }}">click here</a> to download.</p>
|
||||
<div class="normal display-file">
|
||||
<p class="center">You are requesting <a href="/selif/{{ filename }}">{{ filename }}</a>, <a href="/selif/{{ filename }}">click here</a> to download.</p>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
|
@ -2,6 +2,6 @@
|
|||
|
||||
{% block main %}
|
||||
<a href="/selif/{{ filename }}">
|
||||
<img style="margin-bottom: -6px; max-width: 800px;" src="/selif/{{ filename }}" />
|
||||
<img class="display-image" src="/selif/{{ filename }}" />
|
||||
</a>
|
||||
{% endblock %}
|
||||
|
|
|
@ -1,10 +1,7 @@
|
|||
{% extends "base.html" %}
|
||||
|
||||
{% block main %}
|
||||
<object data="/selif/{{ filename }}"
|
||||
type="application/pdf"
|
||||
width=910
|
||||
height=800>
|
||||
<object class="display-pdf" data="/selif/{{ filename }}" type="application/pdf">
|
||||
|
||||
<p>It appears your Web browser is not configured to display PDF files.
|
||||
No worries, just <a href="/selif/{{ filename }}">click here to download the PDF file.</a></p>
|
||||
|
|
|
@ -1,10 +1,8 @@
|
|||
{% extends "base.html" %}
|
||||
|
||||
{% block main %}
|
||||
<div id='video'>
|
||||
<video controls autoplay width="800">
|
||||
<source src="/selif/{{ filename }}"/>
|
||||
</video>
|
||||
</div>
|
||||
|
||||
<video class="display-video" controls autoplay>
|
||||
<source src="/selif/{{ filename }}"/>
|
||||
<a href='/selif/{{ filename }}'>Download it instead</a>
|
||||
</video>
|
||||
{% endblock %}
|
||||
|
|
|
@ -36,7 +36,7 @@
|
|||
<div class="clear"></div>
|
||||
</form>
|
||||
<div id="uploads"></div>
|
||||
<div style="clear:both;"></div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<script src="/static/js/dropzone.js"></script>
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
{% block content %}
|
||||
<div id="main">
|
||||
<div id='inner_content' style='width: 400px'>
|
||||
<div id='inner_content' class='oopscontent'>
|
||||
<p>{{ error_message|default:"Oops! Something went wrong." }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
<form id="reply" action='/upload' method='post'>
|
||||
<div id="main">
|
||||
<div id="info" class="ninfo">
|
||||
<input style ="width:232px;" class="codebox" name='filename' id="filename" type='text' value="" placeholder="filename (empty for random filename)" />.<span class="hint--top hint--bounce" data-hint="Enable syntax highlighting by adding the extension"><input id="extension" class="codebox" style="width:40px;" name='extension' type='text' value="" placeholder="txt" /></span>
|
||||
<input class="codebox" name='filename' id="filename" type='text' value="" placeholder="filename (empty for random filename)" />.<span class="hint--top hint--bounce" data-hint="Enable syntax highlighting by adding the extension"><input id="extension" class="codebox" name='extension' type='text' value="" placeholder="txt" /></span>
|
||||
|
||||
<div class="right">
|
||||
<select id="expiry" name="expires">
|
||||
|
@ -27,7 +27,7 @@
|
|||
</div>
|
||||
|
||||
<div id="inner_content">
|
||||
<textarea name='content' id="content" class="editor" style="width: 705px; height: 450px; border-color: #cccccc;"></textarea>
|
||||
<textarea name='content' id="content" class="editor"></textarea>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
@ -37,4 +37,4 @@
|
|||
</form>
|
||||
|
||||
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
|
|
Loading…
Reference in New Issue