Improve css for the file app

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

View File

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

View File

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

View File

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

View File

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