ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-12-22 09:23:13 +01:00
Code Issues Releases Wiki Activity

fix styling for fineuploader

Browse Source
This commit is contained in:
Tim Daubenschütz 2015-06-29 13:41:37 +02:00
parent a87f2eb272
commit 867ebec134
3 changed files with 26 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
js/components/ascribe_uploader/file_drag_and_drop.js
View File

@ -7,6 +7,7 @@ import FileDragAndDropPreviewIterator from './file_drag_and_drop_preview_iterato
// Taken from: https://github.com/fedosejev/react-file-drag-and-drop
var FileDragAndDrop = React.createClass({
propTypes: {
className: React.PropTypes.string,
onDragStart: React.PropTypes.func,
onDrop: React.PropTypes.func.isRequired,
onDrag: React.PropTypes.func,
@ -110,6 +111,7 @@ var FileDragAndDrop = React.createClass({
let hasFiles = this.props.filesToUpload.filter((file) => file.status !== 'deleted' && file.status !== 'canceled').length > 0;
let className = hasFiles ? 'file-drag-and-drop has-files ' : 'file-drag-and-drop ';
className += this.props.dropzoneInactive ? 'inactive-dropzone' : 'active-dropzone';
className += ' ' + this.props.className;
return (
<div
@ -122,7 +124,7 @@ var FileDragAndDrop = React.createClass({
onDragOver={this.handleDragOver}
onDrop={this.handleDrop}
onDragEnd={this.handleDragEnd}>
{hasFiles ? null : this.props.multiple ? <span>Click or drag to add files</span> : <span>Click or drag to add a file</span>}
{hasFiles ? null : this.props.multiple ? <span className="file-drag-and-drop-dialog">Click or drag to add files</span> : <span className="file-drag-and-drop-dialog">Click or drag to add a file</span>}
<FileDragAndDropPreviewIterator
files={this.props.filesToUpload}
handleDeleteFile={this.handleDeleteFile}

11
sass/ascribe_settings.scss
View File

@ -68,12 +68,13 @@
padding-top: 1em;
padding-left: 1.5em;
padding-right: 1.5em;
cursor:pointer;
input, div, span, pre, textarea, select {
/* input, div, span, pre, textarea, select {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
} */
span {
font-weight: normal;
font-size: 0.9em;
@ -81,7 +82,7 @@
}
div {
margin-top: 10px;
/* margin-top: 10px; */
div {
padding-left: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
@ -92,6 +93,10 @@
}
}
.progressbar-container, .progressbar-progress {
margin-top: 0 !important;
}
input, pre, textarea, select {
font-weight: 400;
font-size: 1.1em;

21
sass/ascribe_uploader.scss
View File

@ -1,13 +1,15 @@
.file-drag-and-drop {
display: table-cell;
position: relative;
display: block;
outline: 1px dashed #616161;
cursor: pointer;
vertical-align: middle;
text-align: center;
height:208px;
width: 672px;
height:185px;
background-color: #FAFAFA;
transition: .1s linear background-color;
margin-top: 1em;
}
.inactive-dropzone {
@ -22,8 +24,15 @@
background-color: rgba(72, 218, 203, 0.2);
}
.file-drag-and-drop > span {
font-size: 1.5em;
.file-drag-and-drop .file-drag-and-drop-dialog {
font-size: 1.25em !important;
&:before {
content: ' ';
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
height: 100%;
}
}
.has-files {
@ -61,7 +70,7 @@
.file-drag-and-drop-preview-image .delete-file {
font-size: 3em;
margin-top: .5em;
margin-top: .3em;
color: white;
text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
cursor: pointer;