update video uploads page

EDUCATOR-1037

cms/static/js/spec/views/active_video_upload_list_spec.js

@@ -57,6 +57,20 @@ define(
                 jasmine.Ajax.uninstall();
             });
 
+            it('renders correct text in file drag/drop area', function() {
+                var messages = {
+                        '.video-uploads-header': this.view.uploadHeader,
+                        '.video-upload-text': this.view.uploadText.toString(),
+                        '.video-max-file-size-text': this.view.maxSizeText,
+                        '.video-allowed-extensions-text': this.view.supportedVideosText
+                    },
+                    self = this;
+
+                Object.keys(messages).forEach(function(messageClass) {
+                    expect(self.view.$(messageClass).html()).toEqual(messages[messageClass]);
+                });
+            });
+
             it('should trigger file selection when either the upload button or the drop zone is clicked', function() {
                 var clickSpy = jasmine.createSpy();
                 clickSpy.and.callFake(function(event) { event.preventDefault(); });

cms/static/js/views/active_video_upload_list.js

@@ -23,10 +23,18 @@ define([
                 'drop .file-drop-area': 'dragleave'
             },
 
+            uploadHeader: gettext('Upload Videos'),
+            uploadText: HtmlUtils.interpolateHtml(
+                gettext('Drag and drop or {spanStart}browse your computer{spanEnd}.'),
+                {
+                    spanStart: HtmlUtils.HTML('<span class="upload-text-link">'),
+                    spanEnd: HtmlUtils.HTML('</span>')
+                }
+            ),
             defaultFailureMessage: gettext('This may be happening because of an error with our server or your internet connection. Try refreshing the page or making sure you are online.'),  // eslint-disable-line max-len
 
             initialize: function(options) {
-                this.template = HtmlUtils.template(activeVideoUploadListTemplate)({});
+                this.template = HtmlUtils.template(activeVideoUploadListTemplate);
                 this.collection = new Backbone.Collection();
                 this.itemViews = [];
                 this.listenTo(this.collection, 'add', this.addUpload);
@@ -38,6 +46,19 @@ define([
                 if (options.uploadButton) {
                     options.uploadButton.click(this.chooseFile.bind(this));
                 }
+
+                this.maxSizeText = StringUtils.interpolate(
+                    gettext('Maximum file size: {maxFileSize} GB'),
+                    {
+                        maxFileSize: this.videoUploadMaxFileSizeInGB
+                    }
+                );
+                this.supportedVideosText = edx.StringUtils.interpolate(
+                    gettext('Supported file types: {supportedVideoTypes}'),
+                    {
+                        supportedVideoTypes: this.videoSupportedFileFormats.join(', ')
+                    }
+                );
             },
 
             render: function() {
@@ -45,7 +66,12 @@ define([
 
                 HtmlUtils.setHtml(
                     this.$el,
-                    this.template
+                    this.template({
+                        uploadHeader: this.uploadHeader,
+                        uploadText: this.uploadText,
+                        maxSizeText: this.maxSizeText,
+                        supportedVideosText: this.supportedVideosText
+                    })
                 );
                 _.each(this.itemViews, this.renderUploadView.bind(this));
                 this.$uploadForm = this.$('.file-upload-form');

cms/static/sass/views/_video-upload.scss

@@ -4,14 +4,6 @@
     @include box-sizing(border-box);
   }
 
-  .content-primary {
-    @extend .ui-col-wide;
-  }
-
-  .content-supplementary {
-    @extend .ui-col-narrow;
-  }
-
   .nav-actions {
 
     .fa-cloud-upload {
@@ -23,15 +15,15 @@
 
   .file-upload-form {
     @include clearfix();
-    margin-bottom: ($baseline*1.5);
     width: 100%;
 
     .file-drop-area {
       border: 2px dashed $gray-l3;
       border-radius: ($baseline/5);
-      padding: ($baseline*3);
+      padding: ($baseline*1.25);
       background: $white;
-      text-align: center;
+      @include text-align(center);
+      cursor: pointer;
 
       &:hover,
       &.is-dragged {
@@ -39,6 +31,35 @@
         border-style: solid;
         border-color: $blue-l4;
       }
+
+      &:hover .upload-text-link {
+        text-decoration:underline;
+      }
+
+      .fa-cloud-upload{
+        font-size:7em;
+        vertical-align: top;
+        @include margin-right(0.1em);
+      }
+
+      .text-container {
+        display: inline-block;
+        @include text-align(left);
+
+        .upload-text-link {
+          color: $ui-link-color;
+        }
+
+        .video-uploads-header {
+          font-size: 1.5em;
+          margin-bottom: .25em;
+          font-weight: 600
+        }
+
+        .video-max-file-size-text {
+          margin-top: ($baseline/2);
+        }
+      }
     }
   }