ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2025-02-14 21:10:27 +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 // Taken from: https://github.com/fedosejev/react-file-drag-and-drop
var FileDragAndDrop = React.createClass({ var FileDragAndDrop = React.createClass({
propTypes: { propTypes: {
className: React.PropTypes.string,
onDragStart: React.PropTypes.func, onDragStart: React.PropTypes.func,
onDrop: React.PropTypes.func.isRequired, onDrop: React.PropTypes.func.isRequired,
onDrag: React.PropTypes.func, 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 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 '; let className = hasFiles ? 'file-drag-and-drop has-files ' : 'file-drag-and-drop ';
className += this.props.dropzoneInactive ? 'inactive-dropzone' : 'active-dropzone'; className += this.props.dropzoneInactive ? 'inactive-dropzone' : 'active-dropzone';
className += ' ' + this.props.className;
return ( return (
<div <div
@ -122,7 +124,7 @@ var FileDragAndDrop = React.createClass({
onDragOver={this.handleDragOver} onDragOver={this.handleDragOver}
onDrop={this.handleDrop} onDrop={this.handleDrop}
onDragEnd={this.handleDragEnd}> 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 <FileDragAndDropPreviewIterator
files={this.props.filesToUpload} files={this.props.filesToUpload}
handleDeleteFile={this.handleDeleteFile} handleDeleteFile={this.handleDeleteFile}

11
sass/ascribe_settings.scss
View File

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

21
sass/ascribe_uploader.scss
View File

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