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