Improve css for the file app

8 years ago · 0c2f84058b
parent 9c00a730f2
commit 0c2f84058b
6 changed files with 38 additions and 22 deletions
--- a/customize.dist/src/less/cryptpad.less
+++ b/customize.dist/src/less/cryptpad.less
@ -43,6 +43,15 @@ a.github-corner > svg {
    font-size: 1.02em;
 }

+.unselectable {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
 h1,h2,h3,h4,h5,h6 {
    color: @fore;

--- a/rpc.js
+++ b/rpc.js
@ -13,7 +13,7 @@ var RPC = module.exports;

 var Store = require("./storage/file");

-var DEFAULT_LIMIT = 150 * 1024 * 1024;
+var DEFAULT_LIMIT = 50 * 1024 * 1024;

 var isValidId = function (chan) {
    return /^[a-fA-F0-9]/.test(chan) ||
--- a/www/file/file.css
+++ b/www/file/file.css
@ -9,10 +9,9 @@ body {
 }
 #file {
  display: block;
-  height: 300px;
-  width: 300px;
+  height: 100%;
+  width: 100%;
  border: 2px solid black;
-  margin: 50px;
 }
 .inputfile {
  width: 0.1px;
@ -29,18 +28,23 @@ body {
  width: 50vh;
  height: 50vh;
  display: block;
-  margin: auto;
+  margin: 50px auto;
+  max-width: 80vw;
 }
 #upload-form label {
+  line-height: 50vh;
+  text-align: center;
  position: relative;
+  padding: 10px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .hovering {
  background-color: rgba(255, 0, 115, 0.5) !important;
 }
 .block {
  display: block;
-  height: 50vh;
-  width: 50vh;
 }
 .hidden {
  display: none;
@ -48,7 +52,6 @@ body {
 .inputfile + label {
  border: 2px solid black;
  background-color: rgba(50, 50, 50, 0.1);
-  margin: 50px;
  display: block;
 }
 .inputfile:focus + label,
--- a/www/file/file.less
+++ b/www/file/file.less
@ -11,10 +11,9 @@ html, body {
 }
 #file {
    display: block;
-    height: 300px;
-    width: 300px;
+    height: 100%;
+    width: 100%;
    border: 2px solid black;
-    margin: 50px;
 }

 .inputfile {
@ -34,10 +33,17 @@ html, body {
    width: 50vh;
    height: 50vh;
    display: block;
-    margin: auto;
+    margin: 50px auto;
+    max-width: 80vw;
 }
-#upload-form label{
+#upload-form label {
+    line-height: 50vh;
+    text-align: center;
    position: relative;
+    padding: 10px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }

 .hovering {
@ -46,8 +52,6 @@ html, body {

 .block {
    display: block;
-    height: 50vh;
-    width: 50vh;
 }
 .hidden {
    display: none;
@ -55,7 +59,6 @@ html, body {
 .inputfile + label {
    border: 2px solid black;
    background-color: rgba(50, 50, 50, .10);
-    margin: 50px;
    display: block;
 }

--- a/www/file/inner.html
+++ b/www/file/inner.html
@ -6,12 +6,14 @@
    <script src="/bower_components/jquery/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/file/file.css">
+    <link rel="stylesheet" href="/customize/main.css">
 </head>
 <body>
    <div id="toolbar" class="toolbar-container"></div>
    <div id="upload-form" style="display: none;">
        <input type="file" name="file" id="file" class="inputfile" />
-        <label for="file" class="block" data-localization="upload_choose">Choose a file<span class="block" id="progress">&nbsp;</span></label>
+        <label for="file" class="block unselectable" data-localization-title="upload_choose"
+            data-localization="upload_choose"><span class="block" id="progress">&nbsp;</span></label>
    </div>
    <table id="status">
        <tr>
--- a/www/file/main.js
+++ b/www/file/main.js
@ -181,11 +181,10 @@ define([
            $tr.find('.progressValue').text(Messages.upload_cancelled);
        });

-        var $tr2 = $('<tr>', {id: id}).appendTo($table);
-        $('<td>').text(obj.metadata.name).appendTo($tr2);
-        $('<td>').text(prettySize(estimate)).appendTo($tr2);
-        $('<td>', {'class': 'upProgress'}).append($progressBar).append($progressValue).appendTo($tr2);
-        $('<td>', {'class': 'upCancel'}).append($cancel).appendTo($tr2);
+        $('<td>').text(obj.metadata.name).appendTo($tr);
+        $('<td>').text(prettySize(estimate)).appendTo($tr);
+        $('<td>', {'class': 'upProgress'}).append($progressBar).append($progressValue).appendTo($tr);
+        $('<td>', {'class': 'upCancel'}).append($cancel).appendTo($tr);

        queue.next();
    };