Make the web page mobile friendly

This commit is contained in:
Simon Alfassa 2018-06-09 19:31:44 +02:00 committed by Andrei Marcu
parent 5340f23f4d
commit fd0f3d9e46
9 changed files with 60 additions and 36 deletions

View File

@ -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;
} }

View File

@ -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;
} }

View File

@ -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 {

View File

@ -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();

View File

@ -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 %}

View File

@ -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'>

View File

@ -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 %}>

View File

@ -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>

View File

@ -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>