web/cryptpad
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Improve css for the file app

Browse Source
This commit is contained in:
yflory 2017-05-22 11:16:01 +02:00
parent 9c00a730f2
commit 0c2f84058b
6 changed files with 38 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
customize.dist/src/less/cryptpad.less
View File

@ -43,6 +43,15 @@ a.github-corner > svg {
font-size: 1.02em; 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 { h1,h2,h3,h4,h5,h6 {
color: @fore; color: @fore;

2
rpc.js
View File

@ -13,7 +13,7 @@ var RPC = module.exports;
var Store = require("./storage/file"); var Store = require("./storage/file");
var DEFAULT_LIMIT = 150 * 1024 * 1024; var DEFAULT_LIMIT = 50 * 1024 * 1024;
var isValidId = function (chan) { var isValidId = function (chan) {
return /^[a-fA-F0-9]/.test(chan) || return /^[a-fA-F0-9]/.test(chan) ||

17
www/file/file.css
View File

@ -9,10 +9,9 @@ body {
} }
#file { #file {
display: block; display: block;
height: 300px; height: 100%;
width: 300px; width: 100%;
border: 2px solid black; border: 2px solid black;
margin: 50px;
} }
.inputfile { .inputfile {
width: 0.1px; width: 0.1px;
@ -29,18 +28,23 @@ body {
width: 50vh; width: 50vh;
height: 50vh; height: 50vh;
display: block; display: block;
margin: auto; margin: 50px auto;
max-width: 80vw;
} }
#upload-form label { #upload-form label {
line-height: 50vh;
text-align: center;
position: relative; position: relative;
padding: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
.hovering { .hovering {
background-color: rgba(255, 0, 115, 0.5) !important; background-color: rgba(255, 0, 115, 0.5) !important;
} }
.block { .block {
display: block; display: block;
height: 50vh;
width: 50vh;
} }
.hidden { .hidden {
display: none; display: none;
@ -48,7 +52,6 @@ body {
.inputfile + label { .inputfile + label {
border: 2px solid black; border: 2px solid black;
background-color: rgba(50, 50, 50, 0.1); background-color: rgba(50, 50, 50, 0.1);
margin: 50px;
display: block; display: block;
} }
.inputfile:focus + label, .inputfile:focus + label,

17
www/file/file.less
View File

@ -11,10 +11,9 @@ html, body {
} }
#file { #file {
display: block; display: block;
height: 300px; height: 100%;
width: 300px; width: 100%;
border: 2px solid black; border: 2px solid black;
margin: 50px;
} }
.inputfile { .inputfile {
@ -34,10 +33,17 @@ html, body {
width: 50vh; width: 50vh;
height: 50vh; height: 50vh;
display: block; display: block;
margin: auto; margin: 50px auto;
max-width: 80vw;
} }
#upload-form label { #upload-form label {
line-height: 50vh;
text-align: center;
position: relative; position: relative;
padding: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
.hovering { .hovering {
@ -46,8 +52,6 @@ html, body {
.block { .block {
display: block; display: block;
height: 50vh;
width: 50vh;
} }
.hidden { .hidden {
display: none; display: none;
@ -55,7 +59,6 @@ html, body {
.inputfile + label { .inputfile + label {
border: 2px solid black; border: 2px solid black;
background-color: rgba(50, 50, 50, .10); background-color: rgba(50, 50, 50, .10);
margin: 50px;
display: block; display: block;
} }

4
www/file/inner.html
View File

@ -6,12 +6,14 @@
<script src="/bower_components/jquery/dist/jquery.min.js"></script> <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="/bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/file/file.css"> <link rel="stylesheet" href="/file/file.css">
<link rel="stylesheet" href="/customize/main.css">
</head> </head>
<body> <body>
<div id="toolbar" class="toolbar-container"></div> <div id="toolbar" class="toolbar-container"></div>
<div id="upload-form" style="display: none;"> <div id="upload-form" style="display: none;">
<input type="file" name="file" id="file" class="inputfile" /> <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> </div>
<table id="status"> <table id="status">
<tr> <tr>

9
www/file/main.js
View File

@ -181,11 +181,10 @@ define([
$tr.find('.progressValue').text(Messages.upload_cancelled); $tr.find('.progressValue').text(Messages.upload_cancelled);
}); });
var $tr2 = $('<tr>', {id: id}).appendTo($table); $('<td>').text(obj.metadata.name).appendTo($tr);
$('<td>').text(obj.metadata.name).appendTo($tr2); $('<td>').text(prettySize(estimate)).appendTo($tr);
$('<td>').text(prettySize(estimate)).appendTo($tr2); $('<td>', {'class': 'upProgress'}).append($progressBar).append($progressValue).appendTo($tr);
$('<td>', {'class': 'upProgress'}).append($progressBar).append($progressValue).appendTo($tr2); $('<td>', {'class': 'upCancel'}).append($cancel).appendTo($tr);
$('<td>', {'class': 'upCancel'}).append($cancel).appendTo($tr2);
queue.next(); queue.next();
}; };