diff --git a/app/directives/tc-fp-file-input/tc-fp-file-input.directive.js b/app/directives/tc-fp-file-input/tc-fp-file-input.directive.js
index 08fd3ce7a..ca4d7b366 100644
--- a/app/directives/tc-fp-file-input/tc-fp-file-input.directive.js
+++ b/app/directives/tc-fp-file-input/tc-fp-file-input.directive.js
@@ -32,12 +32,15 @@ import _ from 'lodash'
scope.filePath += _.join([userId, scope.fieldId, (new Date()).valueOf()], '-') + '.zip'
}
var dragAreaClasses = 'tc-fp-file-drag-drop'
- // set extensions
+ var dragText = ''
+ // set mimeTypes
if (scope.fieldId.indexOf('ZIP') > -1) {
- scope.extensions = '.zip'
+ scope.mimeTypes = 'application/zip'
+ dragText = 'Drag and drop your .zip file here (500MB max)
or'
} else if (scope.fieldId.indexOf('DESIGN_COVER') > -1) {
- scope.extensions = '.png,.jpeg,.jpg,.bmp'
+ scope.mimeTypes = 'image/png,image/jpeg,image/bmp'
dragAreaClasses += ' tc-fp-file-drag-drop-image'
+ dragText = 'Drag and drop your .png or .jpg file here
or'
}
// set default services
@@ -63,8 +66,9 @@ import _ from 'lodash'
input.setAttribute('data-fp-services', scope.fpServices)
input.setAttribute('data-fp-button-class', 'tc-btn')
input.setAttribute('data-fp-drag-class', dragAreaClasses)
+ input.setAttribute('data-fp-drag-text', dragText)
input.setAttribute('data-fp-multiple', false)
- input.setAttribute('data-fp-extensions', scope.extensions)
+ input.setAttribute('data-fp-mimetypes', scope.mimeTypes)
input.setAttribute('data-fp-store-location', 's3')
input.setAttribute('data-fp-store-container', scope.fpContainer)
input.setAttribute('data-fp-store-path', scope.filePath)
diff --git a/app/directives/tc-fp-file-input/tc-fp-file-input.jade b/app/directives/tc-fp-file-input/tc-fp-file-input.jade
index 971f95ab5..bafe07691 100644
--- a/app/directives/tc-fp-file-input/tc-fp-file-input.jade
+++ b/app/directives/tc-fp-file-input/tc-fp-file-input.jade
@@ -1,6 +1,6 @@
.tc-file-field__label
label.tc-label {{labelText}}
- span.lowercase(ng-if="showFileType") {{ ' *(.' + fileType + ')'}}
+ //- span.lowercase(ng-if="showFileType") {{ ' *(.' + fileType + ')'}}
.tc-file-field__inputs
.tc-label__wrapper
@@ -11,6 +11,5 @@
ng-model="ngModel",
ng-required="mandatory",
data-fp-button-text="Pick A File",
- data-fp-drag-text=" ",
on-success="onFileSeleted(event.fpfile)"
)
diff --git a/app/submissions/submit-design-files/submit-design-files.controller.js b/app/submissions/submit-design-files/submit-design-files.controller.js
index b215d0ec4..8b7b1fb8b 100644
--- a/app/submissions/submit-design-files/submit-design-files.controller.js
+++ b/app/submissions/submit-design-files/submit-design-files.controller.js
@@ -10,6 +10,7 @@ import _ from 'lodash'
function SubmitDesignFilesController($scope, $window, $stateParams, logger, UserService, SubmissionsService, challengeToSubmitTo) {
if (!challengeToSubmitTo.challenge) { return }
+ var challengeTitle = challengeToSubmitTo.challenge.name
var vm = this
vm.urlRegEx = new RegExp(/^(http(s?):\/\/)?(www\.)?[a-zA-Z0-9\.\-\_]+(\.[a-zA-Z]{2,3})+(\/[a-zA-Z0-9\_\-\s\.\/\?\%\#\&\=]*)?$/)
@@ -36,6 +37,7 @@ import _ from 'lodash'
stockArts: [],
hasAgreedToTerms: false
}
+ vm.progressTitle = ''
var userId = parseInt(UserService.getUserIdentity().userId)
@@ -114,6 +116,8 @@ import _ from 'lodash'
vm.errorInUpload = false
vm.uploadProgress = 0
vm.showProgress = true
+ vm.progressTitle = 'Uploading submission for "' + challengeTitle + '"'
+ vm.uploadProgressMessage = 'Hey, your work is AWESOME! Please don’t close the window while the upload is in progress, or you’ll lose all files!'
vm.preparing = true
vm.finishing = false
vm.finished = false
@@ -178,6 +182,8 @@ import _ from 'lodash'
vm.preparing = false
vm.finishing = false
vm.finished = true
+ vm.progressTitle = 'Submission completed for "' + challengeTitle + '"'
+ vm.uploadProgressMessage = 'Thanks for participating! We\'ve received your submission and will send you an email shortly to confirm and explain what happens next.'
}
} else {
// assume it to be error condition
diff --git a/app/submissions/submit-design-files/submit-design-files.jade b/app/submissions/submit-design-files/submit-design-files.jade
index 36ce18f46..5e3ec6735 100644
--- a/app/submissions/submit-design-files/submit-design-files.jade
+++ b/app/submissions/submit-design-files/submit-design-files.jade
@@ -23,7 +23,7 @@
p Please be sure to double-check that you have submitted the correct files and that your JPG files (if applicable) are in RGB color mode.
- a(ng-href="https://help.{{DOMAIN}}/hc/en-us/articles/219122667-Formatting-Your-Submission-for-Design-Challenges") Learn more about formatting your submission file
+ a(ng-href="https://help.{{DOMAIN}}/hc/en-us/articles/219122667-Formatting-Your-Submission-for-Design-Challenges") Learn more about formatting your submission file.
.form-block__fields
.fieldset.files
@@ -161,12 +161,12 @@
modal.transition(show="vm.showProgress", background-click-close="false", style="background-color:white;")
.upload-progress(ng-class="{'upload-progress--error': vm.errorInUpload}")
.upload-progress__title
- p Uploading submission for "{{submissions.challengeTitle}}"
+ p {{ vm.progressTitle }}
img.upload-progress__image(src=require("../../../assets/images/skills/id-180.svg"), ng-hide="vm.errorInUpload")
img.upload-progress__image--error(src=require("../../../assets/images/robot-embarresed.svg"), ng-show="vm.errorInUpload")
- p.upload-progress__message(ng-hide="vm.errorInUpload") Hey, your work is AWESOME! Please don’t close the window while the upload is in progress, or you’ll lose all files!
+ p.upload-progress__message(ng-hide="vm.errorInUpload") {{ vm.uploadProgressMessage}}
p.upload-progress__message--error(ng-show="vm.errorInUpload") Oh, that’s embarrassing! One of the files couldn’t be uploaded, I’m so sorry.
@@ -177,7 +177,6 @@ modal.transition(show="vm.showProgress", background-click-close="false", style="
p Finishing...
.upload-progress__finished(ng-show="vm.finished && !vm.errorInUpload")
- p Finished!
.upload-progess__links
a.tc-btn.tc-btn-s(ng-href="https://www.{{DOMAIN}}/challenge-details/{{submissions.challengeId}}/?type={{submissions.track}}") Back to the challenge
diff --git a/assets/css/directives/tc-fp-file-input.directive.scss b/assets/css/directives/tc-fp-file-input.directive.scss
index 45cf8f418..cbf3b9651 100644
--- a/assets/css/directives/tc-fp-file-input.directive.scss
+++ b/assets/css/directives/tc-fp-file-input.directive.scss
@@ -18,17 +18,6 @@ tc-fp-file-input {
width: 240px;
}
- .tc-file-field__input::after {
- content: 'or';
- font-size: 12px;
- line-height: 15px;
- color: $tc-gray-30;
- bottom: 85px;
- position: absolute;
- left: 50%;
- transform: translateX(-50%)
- }
-
.tc-btn {
margin-bottom: 5px;
position: absolute;
@@ -38,15 +27,30 @@ tc-fp-file-input {
z-index: 1;
}
+ .tc-label__asterisk {
+ right: 0px;
+ }
+
.tc-fp-file-drag-drop {
width: calc(100% - 4px);
- position: absolute;
left: 0;
top: 0;
height: 190px;
width: 240px;
position: relative;
+ color: $tc-gray-50 !important;
+ padding: 25px !important;
+ margin-left: 0px !important;
+ text-align: center;
+
+ // div used to show progress bar for drop upload
+ > div {
+ position: absolute;
+ left: 0;
+ top: 0;
+ }
+ // span used for showing remove button
> span {
position: absolute;
top: 0px;
@@ -54,21 +58,6 @@ tc-fp-file-input {
}
}
- .tc-fp-file-drag-drop::after {
- content: 'Drag and drop your .zip file here (500MB max)';
- color: $tc-gray-50;
- top: 25px;
- position: absolute;
- width: 198px;
- text-align: center;
- left: 50%;
- transform: translateX(-50%)
- }
-
- .tc-fp-file-drag-drop-image::after {
- content: 'Drag and Drop your PNG or JPG file here';
- }
-
&.file-uploaded {
.tc-file-field__input::after,
.tc-fp-file-drag-drop::after {
diff --git a/assets/css/submissions/submit-file.scss b/assets/css/submissions/submit-file.scss
index 8d5939ee5..9bbf75bde 100644
--- a/assets/css/submissions/submit-file.scss
+++ b/assets/css/submissions/submit-file.scss
@@ -79,7 +79,7 @@ tc-fp-file-input {
flex-wrap: wrap;
justify-content: space-around;
- @media screen and (min-width: 1000px) {
+ @media screen and (min-width: 875px) {
justify-content: space-between;
}
}
@@ -158,6 +158,8 @@ modal {
line-height: 19px;
color: $accent-gray;
margin-top: 40px;
+ padding: 0px 40px;
+ text-align: center;
}
.upload-progress__progress-bar {
@@ -193,6 +195,12 @@ modal {
}
}
}
+
+ .upload-progress__error-action {
+ button:not(:first-child) {
+ margin-left: 10px;
+ }
+ }
}
.upload-progess__links {