Skip to content

E
edx-platform
Commit cd694608 by cahrens
Options

Merge branch 'feature/cale/cms-master' into feature/christina/misc

parents dd7ed956 fef3fd87
Showing with 489 additions and 319 deletions
cms/djangoapps/contentstore/utils.py
......@@ -116,3 +116,12 @@ def compute_unit_state(unit):
def get_date_display(date):
return date.strftime("%d %B, %Y at %I:%M %p")
def update_item(location, value):
"""
If value is None, delete the db entry. Otherwise, update it using the correct modulestore.
"""
if value is None:
get_modulestore(location).delete_item(location)
else:
get_modulestore(location).update_item(location, value)
\ No newline at end of file
cms/djangoapps/contentstore/views.py
......@@ -995,7 +995,7 @@ def get_course_settings(request, org, course, name):
course_details = CourseDetails.fetch(location)
return render_to_response('settings.html', {
'active_tab': 'settings-tab',
'active_tab': 'settings',
'context_course': course_module,
'course_details' : json.dumps(course_details, cls=CourseSettingsEncoder)
})
......
cms/djangoapps/models/settings/course_details.py
......@@ -7,6 +7,7 @@ import time
from contentstore.utils import get_modulestore
from util.converters import jsdate_to_time, time_to_date
from cms.djangoapps.models.settings import course_grading
from cms.djangoapps.contentstore.utils import update_item
class CourseDetails:
def __init__(self, location):
......@@ -117,16 +118,16 @@ class CourseDetails:
# NOTE: below auto writes to the db w/o verifying that any of the fields actually changed
# to make faster, could compare against db or could have client send over a list of which fields changed.
temploc = Location(course_location)._replace(category='about', name='syllabus')
get_modulestore(temploc).update_item(temploc, jsondict['syllabus'])
update_item(temploc, jsondict['syllabus'])
temploc = temploc._replace(name='overview')
get_modulestore(temploc).update_item(temploc, jsondict['overview'])
update_item(temploc, jsondict['overview'])
temploc = temploc._replace(name='effort')
get_modulestore(temploc).update_item(temploc, jsondict['effort'])
update_item(temploc, jsondict['effort'])
temploc = temploc._replace(name='video')
get_modulestore(temploc).update_item(temploc, jsondict['intro_video'])
update_item(temploc, jsondict['intro_video'])
# Could just generate and return a course obj w/o doing any db reads, but I put the reads in as a means to confirm
......
cms/static/client_templates/course_grade_policy.html
......@@ -64,6 +64,6 @@
<span class="tip tip-inline">total exercises that won't be graded</span>
</div>
</div>
</div> <a href="#" class="remove-item remove-grading-data"><span
class="delete-icon"></span> Delete Assignment Type</a>
</div>
<a href="#" class="delete-button standard remove-item remove-grading-data"><span class="delete-icon"></span>Delete</a>
</li>
cms/static/coffee/src/views/module_edit.coffee
......@@ -56,6 +56,7 @@ class CMS.Views.ModuleEdit extends Backbone.View
event.preventDefault()
data = @module.save()
data.metadata = @metadata()
$modalCover.hide()
@model.save(data).done( =>
# # showToastMessage("Your changes have been saved.", null, 3)
@module = null
......@@ -69,9 +70,11 @@ class CMS.Views.ModuleEdit extends Backbone.View
event.preventDefault()
@$el.removeClass('editing')
@$component_editor().slideUp(150)
$modalCover.hide()
clickEditButton: (event) ->
event.preventDefault()
@$el.addClass('editing')
$modalCover.show()
@$component_editor().slideDown(150)
@loadEdit()
cms/static/coffee/src/views/tabs.coffee
......@@ -33,6 +33,10 @@ class CMS.Views.TabsEdit extends Backbone.View
)
$('.new-component-item').before(editor.$el)
editor.$el.addClass('new')
setTimeout(=>
editor.$el.removeClass('new')
, 500)
editor.cloneTemplate(
@model.get('id'),
......
cms/static/coffee/src/views/unit.coffee
......@@ -4,7 +4,6 @@ class CMS.Views.UnitEdit extends Backbone.View
'click .new-component .cancel-button': 'closeNewComponent'
'click .new-component-templates .new-component-template a': 'saveNewComponent'
'click .new-component-templates .cancel-button': 'closeNewComponent'
'click .new-component-button': 'showNewComponentForm'
'click .delete-draft': 'deleteDraft'
'click .create-draft': 'createDraft'
'click .publish-draft': 'publishDraft'
......@@ -54,30 +53,20 @@ class CMS.Views.UnitEdit extends Backbone.View
)
)
# New component creation
showNewComponentForm: (event) =>
event.preventDefault()
@$newComponentItem.addClass('adding')
$(event.target).fadeOut(150)
@$newComponentItem.css('height', @$newComponentTypePicker.outerHeight())
@$newComponentTypePicker.slideDown(250)
showComponentTemplates: (event) =>
event.preventDefault()
type = $(event.currentTarget).data('type')
@$newComponentTypePicker.fadeOut(250)
@$(".new-component-#{type}").fadeIn(250)
@$newComponentTypePicker.slideUp(250)
@$(".new-component-#{type}").slideDown(250)
closeNewComponent: (event) =>
event.preventDefault()
@$newComponentTypePicker.slideUp(250)
@$newComponentTypePicker.slideDown(250)
@$newComponentTemplatePickers.slideUp(250)
@$newComponentButton.fadeIn(250)
@$newComponentItem.removeClass('adding')
@$newComponentItem.find('.rendered-component').remove()
@$newComponentItem.css('height', @$newComponentButton.outerHeight())
saveNewComponent: (event) =>
event.preventDefault()
......
cms/static/js/base.js
......@@ -43,6 +43,8 @@ $(document).ready(function() {
$('.unit .item-actions .delete-button').bind('click', deleteUnit);
$('.new-unit-item').bind('click', createNewUnit);
$('.collapse-all-button').bind('click', collapseAll);
// autosave when a field is updated on the subsection page
$body.on('keyup', '.subsection-display-name-input, .unit-subtitle, .policy-list-value', checkForNewValue);
$('.subsection-display-name-input, .unit-subtitle, .policy-list-name, .policy-list-value').each(function(i) {
......@@ -128,6 +130,11 @@ $(document).ready(function() {
});
});
function collapseAll(e) {
$('.branch').addClass('collapsed');
$('.expand-collapse-icon').removeClass('collapse').addClass('expand');
}
function editSectionPublishDate(e) {
e.preventDefault();
$modal = $('.edit-subsection-publish-settings').show();
......@@ -597,9 +604,11 @@ function hideToastMessage(e) {
function addNewSection(e, isTemplate) {
e.preventDefault();
$(e.target).addClass('disabled');
var $newSection = $($('#new-section-template').html());
var $cancelButton = $newSection.find('.new-section-name-cancel');
$('.new-courseware-section-button').after($newSection);
$('.courseware-overview').prepend($newSection);
$newSection.find('.new-section-name').focus().select();
$newSection.find('.section-name-form').bind('submit', saveNewSection);
$cancelButton.bind('click', cancelNewSection);
......@@ -636,11 +645,14 @@ function saveNewSection(e) {
function cancelNewSection(e) {
e.preventDefault();
$('.new-courseware-section-button').removeClass('disabled');
$(this).parents('section.new-section').remove();
}
function addNewCourse(e) {
e.preventDefault();
$(e.target).hide();
var $newCourse = $($('#new-course-template').html());
var $cancelButton = $newCourse.find('.new-course-cancel');
$('.new-course-button').after($newCourse);
......@@ -681,6 +693,7 @@ function saveNewCourse(e) {
function cancelNewCourse(e) {
e.preventDefault();
$('.new-course-button').show();
$(this).parents('section.new-course').remove();
}
......
cms/static/js/models/settings/course_details.js
......@@ -56,11 +56,12 @@ CMS.Models.Settings.CourseDetails = Backbone.Model.extend({
for (var i=0; i<videos.length; i++) {
// doesn't call parseFloat or Number b/c they stop on first non parsable and return what they have
if (!isFinite(videos[i].speed)) vid_errors.push(videos[i].speed + " is not a valid speed.");
else if (!videos[i].key) vid_errors.push(videos[i].speed + " does not have a video id");
// can't use get from client to test if video exists b/c of CORS (crossbrowser get not allowed)
// GET "http://gdata.youtube.com/feeds/api/videos/" + videokey
}
if (!_.isEmpty(vid_errors)) {
errors.intro_video = vid_errors.join('/n');
errors.intro_video = vid_errors.join(' ');
}
}
if (!_.isEmpty(errors)) return errors;
......@@ -75,8 +76,8 @@ CMS.Models.Settings.CourseDetails = Backbone.Model.extend({
_videoprefix : /\s*<video\s*youtube="/g,
// the below is lax to enable validation
_videospeedparse : /[^:]*/g, // /\d+\.?\d*(?=:)/g,
_videokeyparse : /([^,\/]+)/g,
_videonosuffix : /[^\"]+/g,
_videokeyparse : /([^,\/>]+)/g,
_videonosuffix : /[^"\/>]+/g,
_getNextMatch : function (regex, string, cursor) {
regex.lastIndex = cursor;
var result = regex.exec(string);
......@@ -112,13 +113,15 @@ CMS.Models.Settings.CourseDetails = Backbone.Model.extend({
cursor = this._videokeyparse.lastIndex + 1;
while (cursor < videostring.length && bestspeed != 1.0) {
parsedspeed = this._getNextMatch(this._videospeedparse, videostring, cursor);
cursor = this._videospeedparse.lastIndex + 1;
if (parsedspeed) cursor = this._videospeedparse.lastIndex + 1;
else break;
if (Math.abs(Number(parsedspeed) - 1.0) < Math.abs(bestspeed - 1.0)) {
bestspeed = Number(parsedspeed);
bestkey = this._getNextMatch(this._videokeyparse, videostring, cursor);
}
else this._getNextMatch(this._videokeyparse, videostring, cursor);
cursor = this._videokeyparse.lastIndex + 1;
if (this._videokeyparse.lastIndex > cursor) cursor = this._videokeyparse.lastIndex + 1;
else cursor++;
}
}
else {
......@@ -141,12 +144,13 @@ CMS.Models.Settings.CourseDetails = Backbone.Model.extend({
cursor = 0;
// parsed to "fff:kkk,fff:kkk"
var result = new Array();
if (!videostring || videostring.length == 0) return result;
while (cursor < videostring.length) {
var speed = this._getNextMatch(this._videospeedparse, videostring, cursor);
if (speed) cursor = this._videospeedparse.lastIndex + 1;
else return result;
var key = this._getNextMatch(this._videokeyparse, videostring, cursor);
cursor = this._videokeyparse.lastIndex + 1;
if (key) cursor = this._videokeyparse.lastIndex + 1;
// See the WTF above
if (_.isArray(key)) key = key[0];
result.push({speed: speed, key: key});
......
cms/static/js/views/settings/main_settings_view.js
......@@ -356,7 +356,8 @@ CMS.Views.Settings.Grading = CMS.Views.ValidatingView.extend({
return this;
},
addAssignmentType : function() {
addAssignmentType : function(e) {
e.preventDefault();
this.model.get('graders').push({});
},
fieldToSelectorMap : {
......@@ -461,7 +462,6 @@ CMS.Views.Settings.Grading = CMS.Views.ValidatingView.extend({
// 0th ele doesn't have a bar; so, will never invoke this
var cachethis = this;
return function(event, ui) {
ui.element.height("50px");
var barIndex = ui.element.index();
// min and max represent limits not labels (note, can's make smaller than 3 points wide)
var min = (barIndex < cachethis.descendingCutoffs.length ? cachethis.descendingCutoffs[barIndex]['cutoff'] + 3 : 3);
......@@ -487,7 +487,6 @@ CMS.Views.Settings.Grading = CMS.Views.ValidatingView.extend({
var cachethis = this;
return function(event, ui) {
// for some reason the resize is setting height to 0
ui.element.height("50px");
cachethis.saveCutoffs();
}
},
......@@ -503,6 +502,7 @@ CMS.Views.Settings.Grading = CMS.Views.ValidatingView.extend({
},
addNewGrade: function(e) {
e.preventDefault();
var gradeLength = this.descendingCutoffs.length; // cutoffs doesn't include fail/f so this is only the passing grades
if(gradeLength > 3) {
// TODO shouldn't we disable the button
......@@ -541,6 +541,7 @@ CMS.Views.Settings.Grading = CMS.Views.ValidatingView.extend({
},
removeGrade: function(e) {
e.preventDefault();
var domElement = $(e.currentTarget).closest('li');
var index = domElement.index();
// copy the boundary up to the next higher grade then remove
......@@ -614,8 +615,9 @@ CMS.Views.Settings.GraderView = CMS.Views.ValidatingView.extend({
}
},
deleteModel : function() {
deleteModel : function(e) {
this.model.destroy();
e.preventDefault();
}
});
\ No newline at end of file
cms/static/sass/_assets.scss
......@@ -5,14 +5,6 @@
background-color: #fff;
}
.upload-button {
@include blue-button;
float: left;
margin-right: 20px;
padding: 8px 30px 10px;
font-size: 12px;
}
.asset-library {
@include clearfix;
......
cms/static/sass/_base.scss
......@@ -6,11 +6,15 @@
body {
min-width: 980px;
background: #f3f4f5;
font-family: 'Open Sans', sans-serif;
background: rgb(240, 241, 245);
font-size: 16px;
line-height: 1.6;
color: #3c3c3c;
color: $baseFontColor;
}
body,
input {
font-family: 'Open Sans', sans-serif;
}
a {
......@@ -26,7 +30,8 @@ a {
h1 {
float: left;
font-size: 28px;
margin: 36px 6px;
font-weight: 300;
margin: 24px 6px;
}
.waiting {
......@@ -34,8 +39,7 @@ h1 {
}
.page-actions {
float: right;
margin-top: 42px;
margin-bottom: 30px;
}
.main-wrapper {
......@@ -53,13 +57,6 @@ h1 {
}
}
.window {
background: #fff;
border: 1px solid $darkGrey;
border-radius: 3px;
@include box-shadow(0 1px 2px rgba(0, 0, 0, .1));
}
.sidebar {
float: right;
width: 28%;
......@@ -80,17 +77,18 @@ footer {
input[type="text"],
input[type="email"],
input[type="password"] {
input[type="password"],
textarea.text {
padding: 6px 8px 8px;
@include box-sizing(border-box);
border: 1px solid #b0b6c2;
border: 1px solid $mediumGrey;
border-radius: 2px;
@include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3));
background-color: #edf1f5;
@include linear-gradient($lightGrey, tint($lightGrey, 90%));
background-color: $lightGrey;
@include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset);
font-family: 'Open Sans', sans-serif;
font-size: 11px;
color: #3c3c3c;
color: $baseFontColor;
outline: 0;
&::-webkit-input-placeholder,
......@@ -98,6 +96,11 @@ input[type="password"] {
&:-ms-input-placeholder {
color: #979faf;
}
&:focus {
@include linear-gradient($paleYellow, tint($paleYellow, 90%));
outline: 0;
}
}
input.search {
......@@ -107,7 +110,7 @@ input.search {
border-radius: 20px;
background: url(../img/search-icon.png) no-repeat 8px 7px #edf1f5;
font-family: 'Open Sans', sans-serif;
color: #3c3c3c;
color: $baseFontColor;
outline: 0;
&::-webkit-input-placeholder {
......@@ -126,12 +129,18 @@ code {
font-family: Monaco, monospace;
}
.CodeMirror {
font-size: 13px;
border: 1px solid $darkGrey;
background: #fff;
}
.text-editor {
width: 100%;
min-height: 80px;
padding: 10px;
@include box-sizing(border-box);
border: 1px solid #b0b6c2;
border: 1px solid $mediumGrey;
@include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3));
background-color: #edf1f5;
@include box-shadow(0 1px 2px rgba(0, 0, 0, 0.1) inset);
......@@ -173,27 +182,32 @@ code {
padding: 10px 0;
}
.details {
display: none;
margin-bottom: 30px;
font-size: 14px;
}
.window {
margin-bottom: 20px;
border: 1px solid $mediumGrey;
border-radius: 3px;
background: #fff;
@include box-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
.window-contents {
padding: 20px;
}
.details {
margin-bottom: 30px;
font-size: 14px;
}
h4 {
padding: 6px 14px;
border-bottom: 1px solid #cbd1db;
border-radius: 3px 3px 0 0;
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%);
background-color: #edf1f5;
@include box-shadow(0 1px 0 rgba(255, 255, 255, .7) inset);
border-bottom: 1px solid $mediumGrey;
border-radius: 2px 2px 0 0;
@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
background-color: $lightBluishGrey;
@include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset);
font-size: 14px;
font-weight: 600;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}
label {
......@@ -345,8 +359,9 @@ body.show-wip {
}
.new-button {
@include grey-button;
padding: 20px 0;
@include green-button;
font-size: 13px;
padding: 8px 20px 10px;
text-align: center;
&.big {
......@@ -369,6 +384,13 @@ body.show-wip {
}
}
.delete-button.standard {
&:hover {
background-color: tint($orange, 75%);
}
}
.tooltip {
position: absolute;
top: 0;
......
cms/static/sass/_cms_mixins.scss
......@@ -49,16 +49,17 @@
@mixin white-button {
@include button;
border: 1px solid $darkGrey;
border: 1px solid $mediumGrey;
border-radius: 3px;
@include linear-gradient(top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
background-color: #dfe5eb;
@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
color: #778192;
color: rgb(92, 103, 122);
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
&:hover {
background-color: #f2f6f9;
color: #778192;
background-color: rgb(222, 236, 247);
color: rgb(92, 103, 122);
}
}
......@@ -92,6 +93,28 @@
}
}
@mixin green-button {
@include button;
border: 1px solid $darkGreen;
border-radius: 3px;
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
background-color: $green;
@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
color: #fff;
&:hover {
background-color: $brightGreen;
color: #fff;
}
&.disabled {
border: 1px solid $disabledGreen !important;
background: $disabledGreen !important;
color: #fff !important;
@include box-shadow(none);
}
}
@mixin dark-grey-button {
@include button;
border: 1px solid #1c1e20;
......@@ -109,18 +132,17 @@
@mixin edit-box {
padding: 15px 20px;
border-radius: 3px;
border: 1px solid #5597dd;
@include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
background-color: #5597dd;
background-color: $lightBluishGrey2;
color: #3c3c3c;
@include box-shadow(0 1px 0 rgba(255, 255, 255, .2) inset);
label {
color: #fff;
color: $baseFontColor;
}
input,
textarea {
border: 1px solid #3c3c3c;
border: 1px solid $darkGrey;
}
textarea {
......@@ -140,21 +162,19 @@
}
.save-button {
@include orange-button;
border-color: #3c3c3c;
@include blue-button;
margin-top: 0;
}
.cancel-button {
@include white-button;
border-color: #30649C;
margin-top: 0;
}
}
@mixin tree-view {
border: 1px solid #ced2db;
background: #edf1f5;
border: 1px solid $mediumGrey;
background: $lightGrey;
.branch {
margin-bottom: 10px;
......@@ -200,15 +220,10 @@
content: "- draft";
}
.public-item:after {
content: "- public";
}
.private-item:after {
content: "- private";
}
.public-item,
.private-item {
color: #a4aab7;
}
......@@ -219,7 +234,11 @@
}
a {
color: #2c2e33;
color: $baseFontColor;
&.new-unit-item {
color: #6d788b;
}
}
ol {
......
cms/static/sass/_courseware.scss
input.courseware-unit-search-input {
float: left;
width: 260px;
background-color: #fff;
}
.courseware-overview {
}
.courseware-section {
position: relative;
background: #fff;
border: 1px solid $darkGrey;
border-radius: 3px;
margin: 10px 0;
border: 1px solid $mediumGrey;
margin-top: 15px;
padding-bottom: 12px;
@include box-shadow(0 1px 2px rgba(0, 0, 0, .1));
@include box-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
&:first-child {
margin-top: 0;
......@@ -139,6 +136,10 @@ input.courseware-unit-search-input {
}
}
.section-name-form {
margin-bottom: 15px;
}
.section-name-edit {
input {
font-size: 16px;
......@@ -192,6 +193,17 @@ input.courseware-unit-search-input {
}
}
.collapse-all-button {
float: right;
margin-top: 10px;
font-size: 13px;
color: $darkGrey;
.collapse-all-icon {
margin-right: 6px;
}
}
.new-section-name,
.new-subsection-name-input {
width: 515px;
......@@ -200,7 +212,7 @@ input.courseware-unit-search-input {
.new-section-name-save,
.new-subsection-name-save {
@include blue-button;
padding: 6px 20px 8px;
padding: 4px 20px 7px;
margin: 0 5px;
color: #fff !important;
}
......@@ -208,7 +220,7 @@ input.courseware-unit-search-input {
.new-section-name-cancel,
.new-subsection-name-cancel {
@include white-button;
padding: 2px 20px 5px;
padding: 4px 20px 7px;
color: #8891a1 !important;
}
......@@ -292,3 +304,10 @@ input.courseware-unit-search-input {
font-size: 16px;
}
}
.collapse-all-button {
float: right;
margin-top: 10px;
font-size: 13px;
color: $darkGrey;
}
\ No newline at end of file
cms/static/sass/_dashboard.scss
......@@ -36,13 +36,6 @@
}
}
.new-course-button {
@include grey-button;
display: block;
padding: 20px;
text-align: center;
}
.new-course {
padding: 15px 25px;
margin-top: 20px;
......
cms/static/sass/_graphics.scss
......@@ -34,6 +34,14 @@
background: url(../img/video-icon.png) no-repeat;
}
.upload-icon {
display: inline-block;
width: 22px;
height: 13px;
margin-right: 5px;
background: url(../img/upload-icon.png) no-repeat;
}
.list-icon {
display: inline-block;
width: 14px;
......@@ -56,6 +64,27 @@
background: url(../img/home-icon.png) no-repeat;
}
.small-home-icon {
display: inline-block;
width: 16px;
height: 14px;
background: url(../img/small-home-icon.png) no-repeat;
}
.log-out-icon {
display: inline-block;
width: 15px;
height: 13px;
background: url(../img/log-out-icon.png) no-repeat;
}
.collapse-all-icon {
display: inline-block;
width: 15px;
height: 9px;
background: url(../img/collapse-all-icon.png) no-repeat;
}
.calendar-icon {
display: inline-block;
width: 12px;
......
cms/static/sass/_header.scss
......@@ -5,18 +5,15 @@ body.no-header {
}
@mixin active {
@include linear-gradient(top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3));
@include box-shadow(0 2px 8px rgba(0, 0, 0, .7) inset);
@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
background-color: rgba(255, 255, 255, .3);
@include box-shadow(0 -1px 0 rgba(0, 0, 0, .2) inset, 0 1px 0 #fff inset);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.primary-header {
width: 100%;
height: 36px;
border-bottom: 1px solid #2c2e33;
@include linear-gradient(top, #686b76, #54565e);
font-size: 13px;
color: #fff;
@include box-shadow(0 1px 1px rgba(0, 0, 0, 0.2), 0 -1px 0px rgba(255, 255, 255, 0.05) inset);
margin-bottom: 30px;
&.active-tab-courseware #courseware-tab {
@include active;
......@@ -34,23 +31,16 @@ body.no-header {
@include active;
}
&.active-tab-import #import-tab {
&.active-tab-settings #settings-tab {
@include active;
}
#import-tab {
@include box-shadow(1px 0 0 #787981 inset, -1px 0 0 #3d3e44 inset, 1px 0 0 #787981, -1px 0 0 #3d3e44);
}
.left {
width: 750px;
&.active-tab-import #import-tab {
@include active;
}
.class-name {
max-width: 350px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
&.active-tab-export #export-tab {
@include active;
}
.drop-icon {
......@@ -63,26 +53,57 @@ body.no-header {
line-height: 18px;
}
a,
.username {
.class-nav-bar {
clear: both;
@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
background-color: $lightBluishGrey;
@include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset);
}
.class-nav {
@include clearfix;
a {
float: left;
display: inline-block;
height: 29px;
padding: 7px 15px 0;
color: #e4e6ee;
padding: 15px 25px 17px;
font-size: 15px;
color: #3c3c3c;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
&:hover {
@include linear-gradient(top, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0));
}
}
.class-nav,
.class-nav li {
li {
float: left;
}
}
.class {
@include clearfix;
height: 100%;
font-size: 12px;
color: rgb(163, 171, 184);
@include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .1));
background-color: rgb(47, 53, 63);
a {
@include box-shadow(1px 0 0 #787981 inset, -1px 0 0 #3d3e44 inset, 1px 0 0 #787981, -1px 0 0 #3d3e44);
display: inline-block;
height: 20px;
padding: 5px 10px 6px;
color: rgb(163, 171, 184);
}
&:hover {
background: rgba(255, 255, 255, .1);
.home {
position: relative;
top: 1px;
}
.log-out {
position: relative;
top: 3px;
}
}
}
\ No newline at end of file
cms/static/sass/_settings.scss
......@@ -139,24 +139,25 @@
}
&.time {
display: block !important;
width: 75px !important;
min-width: 75px !important;
}
&:focus {
@include linear-gradient(tint($blue, 80%), tint($blue, 90%));
border-color: $blue;
outline: 0;
width: 85px !important;
min-width: 85px !important;
}
&:disabled {
border-color: $mediumGrey;
color: $mediumGrey;
border: none;
@include box-shadow(none);
padding: 0;
color: $darkGrey !important;
font-weight: bold;
background: #fff;
}
}
textarea.tinymce {
border: 1px solid $darkGrey;
height: 300px;
}
input[type="checkbox"], input[type="radio"] {
}
......@@ -241,7 +242,7 @@
&.multi {
display: block;
background: tint($lightGrey, 50%);
padding: 20px 15px;
padding: 20px;
@include border-radius(4px);
@include box-sizing(border-box);
......@@ -290,10 +291,6 @@
width: 100%;
}
}
.remove-item {
float: right;
}
}
}
......@@ -304,6 +301,7 @@
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px dotted $lightGrey;
@include clearfix();
&:last-child {
border: 0;
......@@ -392,20 +390,8 @@
// editing controls - removing
.remove-item {
clear: both;
display: block;
margin-top: 10px;
opacity: 0.75;
font-size: 13px;
text-align: right;
@include transition(opacity 0.25s ease-in-out);
&:hover {
color: $blue;
opacity: 0.99;
}
.delete-button {
float: right;
}
// editing controls - preview
......@@ -497,15 +483,17 @@
.settings-grading {
.course-grading-assignment-list-item {
.setting-grading-assignment-types {
.row:nth-child(4) {
border: none;
margin-bottom: 0;
padding-bottom: 0;
.row .field.enum {
width: 684px;
}
}
.course-grading-assignment-list-item {
}
.input-list {
.row {
......@@ -718,7 +706,7 @@
}
.grade-specific-bar {
height: 50px;
height: 50px !important;
}
.grades {
......
cms/static/sass/_static-pages.scss
......@@ -7,7 +7,12 @@
}
.unit-body {
padding: 30px 40px;
padding: 0;
}
.component-editor {
border: none;
border-radius: 0;
}
.components > li {
......@@ -36,7 +41,7 @@
}
.drag-handle {
background: url(../img/drag-handles.png) center no-repeat $lightGrey;
background: url(../img/drag-handles.png) center no-repeat #fff;
}
}
......@@ -46,10 +51,10 @@
z-index: 11;
width: 35px;
border: none;
background: url(../img/drag-handles.png) center no-repeat $lightGrey;
background: url(../img/drag-handles.png) center no-repeat #fff;
&:hover {
background: url(../img/drag-handles.png) center no-repeat $lightGrey;
background: url(../img/drag-handles.png) center no-repeat #fff;
}
}
......@@ -60,16 +65,24 @@
}
.component.editing {
border-left: 1px solid $mediumGrey;
border-right: 1px solid $mediumGrey;
.xmodule_display {
display: none;
}
}
.new .xmodule_display {
background: $yellow;
}
.xmodule_display {
padding: 20px 20px 22px;
font-size: 24px;
font-weight: 300;
background: $lightGrey;
background: #fff;
@include transition(background-color 3s);
}
.static-page-item {
......
cms/static/sass/_unit.scss
......@@ -57,14 +57,10 @@
margin: 20px 40px;
&.new-component-item {
padding: 0;
padding: 20px;
border: none;
border-radius: 0;
&.adding {
background-color: $blue;
border-color: #437fbf;
}
border-radius: 3px;
background: $lightGrey;
.new-component-button {
display: block;
......@@ -85,12 +81,13 @@
border-radius: 3px 3px 0 0;
}
.new-component-type, .new-component-template {
@include clearfix;
.new-component-type {
a,
li {
display: inline-block;
}
a {
position: relative;
float: left;
width: 100px;
height: 100px;
margin-right: 10px;
......@@ -98,14 +95,8 @@
border-radius: 8px;
font-size: 13px;
line-height: 14px;
color: #fff;
text-align: center;
@include box-shadow(0 1px 1px rgba(0, 0, 0, .4), 0 1px 0 rgba(255, 255, 255, .4) inset);
@include transition(background-color .15s);
&:hover {
background-color: rgba(255, 255, 255, .2);
}
@include box-shadow(0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .4) inset);
.name {
position: absolute;
......@@ -118,23 +109,62 @@
}
}
.new-component-type,
.new-component-template {
@include clearfix;
a {
position: relative;
border: 1px solid $darkGreen;
background: $green;
color: #fff;
@include transition(background-color .15s);
&:hover {
background: $brightGreen;
}
}
}
.new-component-template {
margin-bottom: 20px;
li:first-child {
a {
border-radius: 3px 3px 0 0;
}
}
li:last-child {
a {
border-radius: 0 0 3px 3px;
}
}
a {
height: 60px;
display: block;
padding: 7px 20px;
border-bottom: none;
font-weight: 300;
}
}
.new-component,
.new-component {
text-align: center;
h5 {
color: $green;
}
}
.new-component-templates {
display: none;
position: absolute;
width: 100%;
padding: 20px;
@include clearfix;
.cancel-button {
@include blue-button;
border-color: #30649c;
@include white-button;
}
}
}
......@@ -142,7 +172,7 @@
}
.component {
border: 1px solid #d1ddec;
border: 1px solid $lightBluishGrey2;
border-radius: 3px;
background: #fff;
@include transition(none);
......@@ -157,7 +187,8 @@
}
&.editing {
border-color: #6696d7;
border: 1px solid $lightBluishGrey2;
z-index: 9999;
.drag-handle,
.component-actions {
......@@ -173,11 +204,6 @@
position: absolute;
top: 7px;
right: 9px;
@include transition(opacity .15s);
a {
color: $darkGrey;
}
}
.drag-handle {
......@@ -189,10 +215,10 @@
width: 15px;
height: 100%;
border-radius: 0 3px 3px 0;
border: 1px solid #d1ddec;
background: url(../img/white-drag-handles.png) center no-repeat #d1ddec;
border: 1px solid $lightBluishGrey2;
background: url(../img/white-drag-handles.png) center no-repeat $lightBluishGrey2;
cursor: move;
@include transition(all .15s);
@include transition(none);
}
}
......@@ -205,9 +231,6 @@
display: none;
padding: 20px;
border-radius: 2px 2px 0 0;
@include linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .1));
background-color: $blue;
color: #fff;
@include box-shadow(none);
.metadata_edit {
......@@ -224,12 +247,6 @@
}
}
.CodeMirror {
border: 1px solid #3c3c3c;
background: #fff;
color: #3c3c3c;
}
h3 {
margin-bottom: 10px;
font-size: 18px;
......@@ -446,3 +463,22 @@
display: none;
}
}
// editing units from courseware
body.unit {
.component {
padding-top: 30px;
.component-actions {
@include box-sizing(border-box);
position: absolute;
width: 811px;
padding: 15px;
top: 0;
left: 0;
border-bottom: 1px solid $lightBluishGrey2;
background: $lightGrey;
}
}
}
cms/static/sass/_users.scss
.users {
.user-overview {
@extend .window;
padding: 30px 40px;
}
.new-user-button {
@include grey-button;
margin: 5px 8px;
padding: 3px 10px 4px 10px;
font-size: 12px;
.plus-icon {
position: relative;
top: 1px;
}
}
.list-header {
@include linear-gradient(top, transparent, rgba(0, 0, 0, .1));
background-color: #ced2db;
border-radius: 3px 3px 0 0;
}
.new-user-form {
display: none;
padding: 15px 20px;
background: $mediumGrey;
background-color: $lightBluishGrey2;
#result {
display: none;
......@@ -55,21 +32,22 @@
.add-button {
@include blue-button;
padding: 5px 20px 9px;
}
.cancel-button {
@include white-button;
padding: 5px 20px 9px;
}
}
.user-list {
border: 1px solid $mediumGrey;
border-top: none;
background: $lightGrey;
background: #fff;
li {
position: relative;
padding: 10px 20px;
padding: 20px;
border-bottom: 1px solid $mediumGrey;
&:last-child {
......@@ -81,12 +59,19 @@
}
.user-name {
width: 30%;
font-weight: 700;
margin-right: 10px;
font-size: 24px;
font-weight: 300;
}
.user-email {
font-size: 14px;
font-style: italic;
color: $mediumGrey;
}
.item-actions {
top: 9px;
top: 24px;
}
}
}
......
cms/static/sass/_variables.scss
......@@ -13,13 +13,23 @@ $body-line-height: golden-ratio(.875em, 1);
$pink: rgb(182,37,104);
$error-red: rgb(253, 87, 87);
$baseFontColor: #3c3c3c;
$offBlack: #3c3c3c;
$black: rgb(0,0,0);
$white: rgb(255,255,255);
$blue: #5597dd;
$orange: #edbd3c;
$red: #b20610;
$green: #108614;
$lightGrey: #edf1f5;
$mediumGrey: #ced2db;
$mediumGrey: #b0b6c2;
$darkGrey: #8891a1;
$extraDarkGrey: #3d4043;
$paleYellow: #fffcf1;
$yellow: rgb(255, 254, 223);
$green: rgb(37, 184, 90);
$brightGreen: rgb(22, 202, 87);
$disabledGreen: rgb(124, 206, 153);
$darkGreen: rgb(52, 133, 76);
$lightBluishGrey: rgb(197, 207, 223);
$lightBluishGrey2: rgb(213, 220, 228);
cms/templates/asset_index.html
......@@ -35,9 +35,10 @@
<div class="main-wrapper">
<div class="inner-wrapper">
<h1>Asset Library</h1>
<div class="page-actions">
<a href="#" class="upload-button">Upload New File</a>
<a href="#" class="upload-button new-button">
<span class="upload-icon"></span>Upload New Asset
</a>
<input type="text" class="asset-search-input search wip-box" placeholder="search assets" style="display:none"/>
</div>
<article class="asset-library">
......
cms/templates/edit-tabs.html
......@@ -17,10 +17,12 @@
<%block name="content">
<div class="main-wrapper">
<div class="inner-wrapper">
<div>
<h1>Static Tabs</h1>
<div class="page-actions">
<a href="#" class="new-button new-tab">
<span class="plus-icon white"></span>New Page
</a>
</div>
<article class="unit-body window">
<article class="unit-body">
<div class="details">
<p>Here you can add and manage additional pages for your course. These pages will be added to the primary navigation menu alongside Courseware, Course Info, Discussion, etc.</p>
</div>
......@@ -31,9 +33,7 @@
% endfor
<li class="new-component-item">
<a href="#" class="new-button big new-tab">
<span class="plus-icon"></span>New Tab
</a>
</li>
</ol>
</div>
......
cms/templates/import.html
......@@ -8,7 +8,6 @@
<%block name="content">
<div class="main-wrapper">
<div class="inner-wrapper">
<h1>Import</h1>
<article class="import-overview">
<div class="description">
<h2>Please <a href="https://edge.edx.org/courses/edX/edx101/edX_Studio_Reference/about" target="_blank">read the documentation</a> before attempting an import!</h2>
......
cms/templates/index.html
......@@ -37,7 +37,7 @@
<h1>My Courses</h1>
<article class="my-classes">
% if user.is_active:
<a href="#" class="new-course-button"><span class="plus-icon"></span> New Course</a>
<a href="#" class="new-button new-course-button"><span class="plus-icon white"></span> New Course</a>
<ul class="class-list">
%for course, url in courses:
<li>
......
cms/templates/manage_users.html
......@@ -5,28 +5,28 @@
<%block name="content">
<div class="main-wrapper">
<div class="inner-wrapper">
<h1>Users</h1>
<article class="user-overview">
<div class="details">
<p>The following list of users have been designated as course staff. This means that these users will have permissions to modify course content. You may add additional course staff below, if you are the course instructor. Please note that they must have already registered and verified their account.</p>
</div>
<div class="list-header">
<div class="page-actions">
%if allow_actions:
<a href="#" class="new-user-button">
<span class="plus-icon"></span>New User
<a href="#" class="new-button new-user-button">
<span class="plus-icon white"></span>New User
</a>
%endif
</div>
<div class="details">
<p>The following list of users have been designated as course staff. This means that these users will have permissions to modify course content. You may add additional course staff below, if you are the course instructor. Please note that they must have already registered and verified their account.</p>
</div>
<article class="user-overview">
%if allow_actions:
<div class="new-user-form">
<form class="new-user-form">
<div id="result"></div>
<div class="form-elements">
<label>email: </label><input type="text" id="email" class="email-input" autocomplete="off" placeholder="email@example.com">
<a href="#" id="add_user" class="add-button">add user</a>
<a href="#" class="cancel-button">cancel</a>
</div>
<input type="submit" value="Add User" id="add_user" class="add-button" />
<input type="button" value="Cancel" class="cancel-button" />
</div>
</form>
%endif
<div>
<ol class="user-list">
......@@ -57,6 +57,7 @@
function showNewUserForm(e) {
e.preventDefault();
$newUserForm.slideDown(150);
$newUserForm.find('.email-input').focus();
}
function hideNewUserForm(e) {
......@@ -66,13 +67,15 @@
$('#email').val('');
}
$(document).ready(function() {
$newUserForm = $('.new-user-form');
$newUserForm.find('.cancel-button').bind('click', hideNewUserForm);
function checkForCancel(e) {
if(e.which == 27) {
e.data.$cancelButton.click();
}
}
$('.new-user-button').bind('click', showNewUserForm);
function addUser(e) {
e.preventDefault();
$('#add_user').click(function() {
$.ajax({
url: '${add_user_postback_url}',
type: 'POST',
......@@ -84,8 +87,17 @@
$('#result').show().empty().append(data.ErrMsg);
else
location.reload();
})
});
}
$(document).ready(function() {
$newUserForm = $('.new-user-form');
var $cancelButton = $newUserForm.find('.cancel-button');
$newUserForm.bind('submit', addUser);
$cancelButton.bind('click', hideNewUserForm);
$('.new-user-button').bind('click', showNewUserForm);
$body.bind('keyup', { $cancelButton: $cancelButton }, checkForCancel);
$('.remove-user').click(function() {
$.ajax({
......
cms/templates/overview.html
......@@ -98,10 +98,11 @@
<div class="main-wrapper">
<div class="inner-wrapper">
<h1>Courseware</h1>
<div class="page-actions"></div>
<div class="page-actions">
<a href="#" class="new-button new-courseware-section-button"><span class="plus-icon white"></span> New Section</a>
<a href="#" class="collapse-all-button"><span class="collapse-all-icon"></span>Collapse All</a>
</div>
<article class="courseware-overview" data-course-id="${context_course.location.url()}">
<a href="#" class="new-button big new-courseware-section-button"><span class="plus-icon"></span> New Section</a>
% for section in sections:
<section class="courseware-section branch" data-id="${section.location}">
<header>
......
cms/templates/settings.html
......@@ -93,7 +93,6 @@ from contentstore import utils
<div class="field">
<div class="input">
<input type="text" class="short" id="course-number" value="[Course No.]" disabled="disabled">
<span class="tip tip-inline">e.g. 101x</span>
<span class="tip tip-stacked">This is used in <a href="${utils.get_lms_link_for_item(context_course.location, True)}">your course URL</a>, and cannot be changed</span>
</div>
</div>
......@@ -231,8 +230,8 @@ from contentstore import utils
</div>
<div class="input">
<input type="text" class="new-item new-course-introduction-video add-video-data" id="course-introduction-video" value="" placeholder="speed:id,speed:id" autocomplete="off">
<span class="tip tip-inline">Video restrictions go here</span>
<input type="text" class="long new-course-introduction-video add-video-data" id="course-introduction-video" value="" placeholder="speed:id,speed:id" autocomplete="off">
<span class="tip tip-stacked">Video restrictions go here</span>
</div>
</div>
</div>
......@@ -251,7 +250,7 @@ from contentstore import utils
<div class="field">
<div class="input">
<input type="text" class="short time" id="course-effort" placeholder="HH:MM">
<span class="tip tip-stacked">Time students should spend on all course work</span>
<span class="tip tip-inline">Time spent on all course work</span>
</div>
</div>
</div>
......@@ -290,7 +289,6 @@ from contentstore import utils
<div class="field">
<div class="input input-existing">
<div class="current current-faculty-1-photo">
<img src="http://placehold.it/400x300&text=Faculty+Photo" alt="Faculty Photo" />
<a href="#" class="remove-item remove-faculty-photo remove-video-data"><span class="delete-icon"></span> Delete Faculty Photo</a>
</div>
</div>
......@@ -405,7 +403,7 @@ from contentstore import utils
<div class="field">
<div class="input">
<input type="text" class="short time" id="course-grading-graceperiod" value="0:00" placeholder="e.g. 10 minutes">
<span class="tip tip-stacked">leeway on due dates</span>
<span class="tip tip-inline">leeway on due dates</span>
</div>
</div>
</div>
......@@ -421,8 +419,8 @@ from contentstore import utils
<ul class="input-list course-grading-assignment-list">
</ul>
<a href="#" class="new-item new-course-grading-item add-grading-data">
<span class="plus-icon"></span>New Assignment Type
<a href="#" class="new-button new-course-grading-item add-grading-data">
<span class="plus-icon white"></span>New Assignment Type
</a>
</div>
</div>
......@@ -727,4 +725,5 @@ from contentstore import utils
</article>
</div>
</div>
<footer></footer>
</%block>
cms/templates/unit.html
......@@ -32,12 +32,9 @@
% for id in components:
<li class="component" data-id="${id}"/>
% endfor
<li class="new-component-item">
<a href="#" class="new-component-button new-button big">
<span class="plus-icon"></span>New Component
</a>
<li class="new-component-item adding">
<div class="new-component">
<h5>Select Component Type</h5>
<h5>Add New Component</h5>
<ul class="new-component-type">
% for type in sorted(component_templates.keys()):
<li>
......@@ -48,7 +45,6 @@
</li>
% endfor
</ul>
<a href="#" class="cancel-button">Cancel</a>
</div>
% for type, templates in sorted(component_templates.items()):
<div class="new-component-templates new-component-${type}">
......
cms/templates/widgets/header.html
......@@ -2,30 +2,37 @@
<% active_tab_class = 'active-tab-' + active_tab if active_tab else '' %>
<header class="primary-header ${active_tab_class}">
<nav class="inner-wrapper">
<div class="class">
<div class="inner-wrapper">
<div class="left">
<a href="/"><span class="home-icon"></span></a>
% if context_course:
<% ctx_loc = context_course.location %>
<a href="${reverse('course_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" class="class-name">${context_course.display_name}</a>
<ul class="class-nav">
<li><a href="${reverse('course_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='courseware-tab'>Courseware</a></li>
<li><a href="${reverse('course_info', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='courseinfo-tab'>Course Info</a></li>
<li><a href="${reverse('edit_tabs', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, coursename=ctx_loc.name))}" id='pages-tab'>Tabs</a></li>
<li><a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='assets-tab'>Assets</a></li>
<li><a href="${reverse('manage_users', kwargs=dict(location=ctx_loc))}" id='users-tab'>Users</a></li>
<li><a href="${reverse('course_settings', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='settings-tab'>Settings</a></li>
<li><a href="${reverse('import_course', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='import-tab'>Import</a></li>
</ul>
<a href="/" class="home"><span class="small-home-icon"></span></a> ›
<a href="${reverse('course_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" class="class-name">${context_course.display_name}</a> ›
% endif
</div>
<div class="right">
<span class="username">${ user.username }</span>
% if user.is_authenticated():
<a href="${reverse('logout')}">Log out</a>
<a href="${reverse('logout')}" class="log-out"><span class="log-out-icon"></span></a>
% else:
<a href="${reverse('login')}">Log in</a>
% endif
</div>
</div>
</div>
<nav class="class-nav-bar">
% if context_course:
<% ctx_loc = context_course.location %>
<ul class="class-nav inner-wrapper">
<li><a href="${reverse('course_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='courseware-tab'>Courseware</a></li>
<li><a href="${reverse('course_info', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='courseinfo-tab'>Course Info</a></li>
<li><a href="${reverse('edit_tabs', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, coursename=ctx_loc.name))}" id='pages-tab'>Pages</a></li>
<li><a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='assets-tab'>Assets</a></li>
<li><a href="${reverse('course_settings', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='settings-tab'>Settings</a></li>
<li><a href="${reverse('import_course', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='import-tab'>Import</a></li>
</ul>
% endif
</nav>
</header>
cms/templates/widgets/metadata-edit.html
......@@ -4,7 +4,6 @@
hlskey = hashlib.md5(module.location.url()).hexdigest()
%>
<section class="metadata_edit">
<h3>Metadata</h3>
<ul>
% for keyname in editable_metadata_fields:
<li>
......
cms/templates/widgets/video-box-unused.html
<li class="video-box">
<div class="thumb"><img src="http://placehold.it/100x65" /></div>
<div class="thumb"></div>
<div class="meta">
<strong>video-name</strong> 236mb Uploaded 6 hours ago by <em>Anant Agrawal</em>
......
cms/templates/widgets/video-box.html
<li class="video-box">
<div class="thumb"><img src="http://placehold.it/155x90" /></div>
<div class="thumb"></div>
<div class="meta">
<strong>video-name</strong> 236mb
......
common/static/coffee/src/discussion/tooltip_manager.coffee
......@@ -12,10 +12,10 @@ class @TooltipManager
'click': @hideTooltip
showTooltip: (e) =>
tooltipText = $(e.target).attr('data-tooltip')
$target = $(e.target).closest('[data-tooltip]')
tooltipText = $target.attr('data-tooltip')
@$tooltip.html(tooltipText)
@$body.append(@$tooltip)
$(e.target).children().css('pointer-events', 'none')
tooltipCoords =
x: e.pageX - (@$tooltip.outerWidth() / 2)
......@@ -26,8 +26,8 @@ class @TooltipManager
'top': tooltipCoords.y
@tooltipTimer = setTimeout ()=>
@$tooltip.show().css('opacity', 1)
@$tooltip.show().css('opacity', 1)
@tooltipTimer = setTimeout ()=>
@hideTooltip()
, 3000
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment