Make the web page mobile friendly
This commit is contained in:
parent
5340f23f4d
commit
fd0f3d9e46
|
@ -31,11 +31,18 @@
|
||||||
border: 2px solid #FAFBFC;
|
border: 2px solid #FAFBFC;
|
||||||
}
|
}
|
||||||
|
|
||||||
#dropzone { width: 400px;
|
#dropzone {
|
||||||
|
width: 400px;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media(max-width: 450px) {
|
||||||
|
#dropzone {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
#uploads {
|
#uploads {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -8,7 +8,8 @@
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
width: 680px;
|
width: 80vw;
|
||||||
|
max-width: 680px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -71,32 +71,26 @@ body {
|
||||||
-webkit-box-shadow: 1px 1px 1px 1px #ccc;
|
-webkit-box-shadow: 1px 1px 1px 1px #ccc;
|
||||||
box-shadow: 1px 1px 1px 1px #ccc;
|
box-shadow: 1px 1px 1px 1px #ccc;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dinfo #filename {
|
||||||
|
margin: 2px 15px 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#info {
|
#info {
|
||||||
text-align: left;
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
padding: 5px 5px 5px 5px;
|
padding: 5px 5px 5px 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#info #filename,
|
|
||||||
#editform #filename {
|
|
||||||
width: 232px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#info #extension,
|
#info #extension,
|
||||||
#editform #extension {
|
#editform #extension {
|
||||||
width: 40px;
|
width: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#info .float-left {
|
#info .text-right {
|
||||||
margin-top: 2px;
|
|
||||||
margin-right: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#info .right {
|
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -115,6 +109,11 @@ body {
|
||||||
color: #556A7F;
|
color: #556A7F;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#info input[type=checkbox] {
|
||||||
|
margin: 0;
|
||||||
|
vertical-align: bottom;
|
||||||
|
}
|
||||||
|
|
||||||
#footer {
|
#footer {
|
||||||
color: gray;
|
color: gray;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
|
@ -158,7 +157,8 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.fixed {
|
.fixed {
|
||||||
width: 800px;
|
width: 80vw;
|
||||||
|
max-width: 800px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.needs-border {
|
.needs-border {
|
||||||
|
@ -245,19 +245,28 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
#choices {
|
#choices {
|
||||||
float: left;
|
display: flex;
|
||||||
width: 100%;
|
align-items: center;
|
||||||
text-align: left;
|
flex-wrap: wrap;
|
||||||
vertical-align: bottom;
|
justify-content: space-between;
|
||||||
margin-top: 5px;
|
width: 100%;
|
||||||
|
margin-top: 5px;
|
||||||
font-size:13px;
|
font-size:13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#choices label:first-child {
|
||||||
|
margin-right: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
#expiry {
|
#expiry {
|
||||||
float: right;
|
|
||||||
padding-top: 1px;
|
padding-top: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#randomize {
|
||||||
|
vertical-align: bottom;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.oopscontent {
|
.oopscontent {
|
||||||
width: 400px;
|
width: 400px;
|
||||||
}
|
}
|
||||||
|
@ -267,8 +276,13 @@ body {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.error-404 img {
|
||||||
|
max-width: 90vw;
|
||||||
|
}
|
||||||
|
|
||||||
.editor {
|
.editor {
|
||||||
width: 705px;
|
width: 90vw;
|
||||||
|
max-width: 705px;
|
||||||
height: 450px;
|
height: 450px;
|
||||||
border-color: #cccccc;
|
border-color: #cccccc;
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
|
@ -287,7 +301,7 @@ body {
|
||||||
/* Content display {{{ */
|
/* Content display {{{ */
|
||||||
.display-audio,
|
.display-audio,
|
||||||
.display-file {
|
.display-file {
|
||||||
width: 500px;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.display-image {
|
.display-image {
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
// @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3-or-Later
|
// @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3-or-Later
|
||||||
|
|
||||||
var navlist = document.getElementById("info").getElementsByClassName("right")[0];
|
var navlist = document.getElementById("info").getElementsByClassName("text-right")[0];
|
||||||
|
|
||||||
init();
|
init();
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,7 @@
|
||||||
{% extends "base.html" %}
|
{% extends "base.html" %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<a href="{{ sitepath }}"><img src='{{ sitepath }}static/images/404.jpg'></a>
|
<div class="error-404">
|
||||||
|
<a href="{{ sitepath }}"><img src='{{ sitepath }}static/images/404.jpg'></a>
|
||||||
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
@ -3,6 +3,7 @@
|
||||||
<head>
|
<head>
|
||||||
<title>{% block title %}{{ sitename }}{% endblock %}</title>
|
<title>{% block title %}{{ sitename }}{% endblock %}</title>
|
||||||
<meta charset='utf-8' content='text/html' http-equiv='content-type'>
|
<meta charset='utf-8' content='text/html' http-equiv='content-type'>
|
||||||
|
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
|
||||||
<link href='{{ sitepath }}static/css/linx.css' media='screen, projection' rel='stylesheet' type='text/css'>
|
<link href='{{ sitepath }}static/css/linx.css' media='screen, projection' rel='stylesheet' type='text/css'>
|
||||||
<link href='{{ sitepath }}static/css/hint.css' rel='stylesheet' type='text/css'>
|
<link href='{{ sitepath }}static/css/hint.css' rel='stylesheet' type='text/css'>
|
||||||
<link href='{{ sitepath }}static/images/favicon.gif' rel='icon' type='image/gif'>
|
<link href='{{ sitepath }}static/images/favicon.gif' rel='icon' type='image/gif'>
|
||||||
|
|
|
@ -7,11 +7,11 @@
|
||||||
{% block content %}
|
{% block content %}
|
||||||
|
|
||||||
<div id="info" class="dinfo">
|
<div id="info" class="dinfo">
|
||||||
<div class="float-left" id="filename">
|
<div id="filename">
|
||||||
{{ filename }}
|
{{ filename }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="right">
|
<div class='text-right'>
|
||||||
{% if expiry %}
|
{% if expiry %}
|
||||||
<span>file expires in {{ expiry }}</span> |
|
<span>file expires in {{ expiry }}</span> |
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
@ -22,7 +22,6 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% block infoleft %}{% endblock %}
|
{% block infoleft %}{% endblock %}
|
||||||
<div class="clear"></div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="main" {% block mainmore %}{% endblock %}>
|
<div id="main" {% block mainmore %}{% endblock %}>
|
||||||
|
|
|
@ -17,8 +17,9 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="choices">
|
<div id="choices">
|
||||||
|
<label><input name="randomize" id="randomize" type="checkbox" checked /> Randomize filename</label>
|
||||||
<div id="expiry">
|
<div id="expiry">
|
||||||
<label>File expiry:
|
<label>File expiry:
|
||||||
<select name="expires" id="expires">
|
<select name="expires" id="expires">
|
||||||
{% for expiry in expirylist %}
|
{% for expiry in expirylist %}
|
||||||
<option value="{{ expiry.Seconds }}"{% if forloop.Last %} selected{% endif %}>{{ expiry.Human }}</option>
|
<option value="{{ expiry.Seconds }}"{% if forloop.Last %} selected{% endif %}>{{ expiry.Human }}</option>
|
||||||
|
@ -26,7 +27,6 @@
|
||||||
</select>
|
</select>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<label><input name="randomize" id="randomize" type="checkbox" checked /> Randomize filename</label>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="clear"></div>
|
<div class="clear"></div>
|
||||||
</form>
|
</form>
|
||||||
|
|
|
@ -4,17 +4,17 @@
|
||||||
<form id="reply" action='{{ sitepath }}upload' method='post'>
|
<form id="reply" action='{{ sitepath }}upload' method='post'>
|
||||||
<div id="main">
|
<div id="main">
|
||||||
<div id="info" class="ninfo">
|
<div id="info" class="ninfo">
|
||||||
<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>
|
||||||
|
<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">
|
</div>
|
||||||
|
<div>
|
||||||
|
<input type="submit" value="Paste">
|
||||||
<select id="expiry" name="expires">
|
<select id="expiry" name="expires">
|
||||||
<option disabled="disabled">Expires:</option>
|
<option disabled="disabled">Expires:</option>
|
||||||
{% for expiry in expirylist %}
|
{% for expiry in expirylist %}
|
||||||
<option value="{{ expiry.Seconds }}"{% if forloop.Last %} selected{% endif %}>{{ expiry.Human }}</option>
|
<option value="{{ expiry.Seconds }}"{% if forloop.Last %} selected{% endif %}>{{ expiry.Human }}</option>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
<input type="submit" value="Paste">
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue