Merge pull request #858 from appirio-tech/feature/submission-bughunt-fixes

Feature/submission bughunt fixes

Author: vikasrohit

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) <br> 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 <br> 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)

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)"
     )

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

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

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,37 +27,37 @@ 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;
       right: 0px;
     }
   }
 
-  .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 {

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 {