Make the web page mobile friendly

7 years ago · fd0f3d9e46
9 changed files with 60 additions and 36 deletions
--- a/static/css/dropzone.css
+++ b/static/css/dropzone.css
@ -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;
 }
--- a/static/css/github-markdown.css
+++ b/static/css/github-markdown.css
@ -8,7 +8,8 @@
  font-size: 12px;
  line-height: 1.6;
  word-wrap: break-word;
-  width: 680px;
+  width: 80vw;
+  max-width: 680px;
  padding: 10px;
 }

--- a/static/css/linx.css
+++ b/static/css/linx.css
@ -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; 
-  width: 100%; 
-  text-align: left; 
-  vertical-align: bottom; 
-  margin-top: 5px; 
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  width: 100%;
+  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 {
--- a/static/js/bin.js
+++ b/static/js/bin.js
@ -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();

--- a/templates/404.html
+++ b/templates/404.html
@ -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 %}
--- a/templates/base.html
+++ b/templates/base.html
@ -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'>
--- a/templates/display/base.html
+++ b/templates/display/base.html
@ -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 %}>
--- a/templates/index.html
+++ b/templates/index.html
@ -17,8 +17,9 @@
        </div>

        <div id="choices">
+            <label><input name="randomize" id="randomize" type="checkbox" checked /> Randomize filename</label>
            <div id="expiry">
-                <label>File expiry: 
+                <label>File expiry:
                <select name="expires" id="expires">
                    {% for expiry in expirylist %}
                    <option value="{{ expiry.Seconds }}"{% if forloop.Last %} selected{% endif %}>{{ expiry.Human }}</option>
@ -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>
--- a/templates/paste.html
+++ b/templates/paste.html
@ -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>