Skip to content

E
edx-platform
Commit a9ca84da by Calen Pennington
Options

Merge pull request #853 from MITx/feature/tomg/style-polishing 

numerous style tweaks and user management page
parents 6e4fe502 8d78073a
Showing with 244 additions and 83 deletions
cms/static/coffee/src/views/unit.coffee
...@@ -65,24 +65,26 @@ class CMS.Views.UnitEdit extends Backbone.View ...@@ -65,24 +65,26 @@ class CMS.Views.UnitEdit extends Backbone.View
showNewComponentForm: (event) => showNewComponentForm: (event) =>
event.preventDefault() event.preventDefault()
@$newComponentItem.addClass('adding') @$newComponentItem.addClass('adding')
$(event.target).slideUp(150) $(event.target).fadeOut(150)
@$newComponentItem.css('height', @$newComponentTypePicker.outerHeight())
@$newComponentTypePicker.slideDown(250) @$newComponentTypePicker.slideDown(250)
showComponentTemplates: (event) => showComponentTemplates: (event) =>
event.preventDefault() event.preventDefault()
type = $(event.currentTarget).data('type') type = $(event.currentTarget).data('type')
@$newComponentTypePicker.slideUp(250) @$newComponentTypePicker.fadeOut(250)
@$(".new-component-#{type}").slideDown(250) @$(".new-component-#{type}").fadeIn(250)
closeNewComponent: (event) => closeNewComponent: (event) =>
event.preventDefault() event.preventDefault()
@$newComponentTypePicker.slideUp(250) @$newComponentTypePicker.slideUp(250)
@$newComponentTemplatePickers.slideUp(250) @$newComponentTemplatePickers.slideUp(250)
@$newComponentButton.slideDown(250) @$newComponentButton.fadeIn(250)
@$newComponentItem.removeClass('adding') @$newComponentItem.removeClass('adding')
@$newComponentItem.find('.rendered-component').remove() @$newComponentItem.find('.rendered-component').remove()
@$newComponentItem.css('height', @$newComponentButton.outerHeight())
saveNewComponent: (event) => saveNewComponent: (event) =>
event.preventDefault() event.preventDefault()
......
cms/static/sass/_content-types.scss
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
padding-left: 14px; padding-left: 14px;
background-position: 8px center; background-position: 8px center;
background-repeat: no-repeat; background-repeat: no-repeat;
vertical-align: middle;
} }
.videosequence-icon { .videosequence-icon {
......
cms/static/sass/_courseware.scss
...@@ -65,6 +65,7 @@ input.courseware-unit-search-input { ...@@ -65,6 +65,7 @@ input.courseware-unit-search-input {
.expand-collapse-icon { .expand-collapse-icon {
float: left; float: left;
margin: 16px 6px 16px 16px; margin: 16px 6px 16px 16px;
@include transition(none);
} }
.drag-handle { .drag-handle {
......
cms/static/sass/_graphics.scss
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
height: 11px; height: 11px;
margin-right: 10px; margin-right: 10px;
background: url(../img/expand-collapse-icons.png) no-repeat; background: url(../img/expand-collapse-icons.png) no-repeat;
@include transition(none);
&.expand { &.expand {
top: 1px; top: 1px;
...@@ -204,6 +205,14 @@ ...@@ -204,6 +205,14 @@
background: url(../img/large-slide-icon.png) center no-repeat; background: url(../img/large-slide-icon.png) center no-repeat;
} }
.large-html-icon {
display: inline-block;
width: 100px;
height: 60px;
margin-right: 5px;
background: url(../img/html-icon.png) center no-repeat;
}
.large-textbook-icon { .large-textbook-icon {
display: inline-block; display: inline-block;
width: 100px; width: 100px;
......
cms/static/sass/_login.scss
...@@ -77,4 +77,15 @@ ...@@ -77,4 +77,15 @@
text-align: right; text-align: right;
font-size: 13px; font-size: 13px;
} }
#login_error,
#register_error {
display: none;
margin-bottom: 30px;
padding: 5px 10px;
border-radius: 3px;
background: $error-red;
font-size: 14px;
color: #fff;
}
} }
\ No newline at end of file
cms/static/sass/_unit.scss
...@@ -129,7 +129,7 @@ ...@@ -129,7 +129,7 @@
height: 100%; height: 100%;
border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0;
border: 1px solid #d1ddec; border: 1px solid #d1ddec;
background: url(../img/drag-handles.png) center no-repeat #d1ddec; background: url(../img/white-drag-handles.png) center no-repeat #d1ddec;
cursor: move; cursor: move;
@include transition(all .15s); @include transition(all .15s);
} }
...@@ -209,7 +209,10 @@ ...@@ -209,7 +209,10 @@
.new-component, .new-component,
.new-component-templates { .new-component-templates {
display: none; display: none;
position: absolute;
width: 100%;
padding: 20px; padding: 20px;
@include clearfix;
.cancel-button { .cancel-button {
@include blue-button; @include blue-button;
...@@ -379,26 +382,44 @@ ...@@ -379,26 +382,44 @@
@include box-shadow(none); @include box-shadow(none);
} }
.draft-tag,
.hidden-tag,
.private-tag,
.has-new-draft-tag {
font-size: 8px;
}
.window-contents > ol { .window-contents > ol {
@include tree-view; @include tree-view;
.section-item {
display: inline-block;
width: 100%;
font-size: 11px;
padding: 2px 8px 4px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
@include box-sizing(border-box);
}
ol { ol {
.section-item { .section-item {
padding-left: 30px; padding-left: 20px;
} }
.new-unit-item { .new-unit-item {
margin-left: 30px; margin-left: 20px;
} }
} }
ol ol { ol ol {
.section-item { .section-item {
padding-left: 50px; padding-left: 34px;
} }
.new-unit-item { .new-unit-item {
margin: 0 0 15px 50px; margin: 0 0 10px 41px;
} }
} }
} }
......
cms/static/sass/_users.scss 0 → 100644
.users {
.user-overview {
@extend .window;
padding: 30px 40px;
.details {
margin-bottom: 20px;
font-size: 14px;
}
}
.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;
label {
display: inline-block;
margin-right: 10px;
}
.email-input {
width: 350px;
padding: 8px 8px 10px;
border-color: $darkGrey;
}
.add-button {
@include blue-button;
}
.cancel-button {
@include white-button;
}
}
.user-list {
border: 1px solid $mediumGrey;
border-top: none;
background: $lightGrey;
li {
position: relative;
padding: 10px 20px;
border-bottom: 1px solid $mediumGrey;
&:last-child {
border-bottom: none;
}
span {
display: inline-block;
}
.user-name {
width: 30%;
font-weight: 700;
}
.item-actions {
top: 9px;
}
}
}
}
\ No newline at end of file
cms/static/sass/base-style.scss
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
@import "unit"; @import "unit";
@import "assets"; @import "assets";
@import "static-pages"; @import "static-pages";
@import "users";
@import "course-info"; @import "course-info";
@import "landing"; @import "landing";
@import "graphics"; @import "graphics";
......
cms/templates/login.html
...@@ -30,36 +30,37 @@ ...@@ -30,36 +30,37 @@
<script type="text/javascript"> <script type="text/javascript">
(function() { (function() {
function getCookie(name) { function getCookie(name) {
return $.cookie(name); return $.cookie(name);
} }
function postJSON(url, data, callback) { function postJSON(url, data, callback) {
$.ajax({type:'POST', $.ajax({type:'POST',
url: url, url: url,
dataType: 'json', dataType: 'json',
data: data, data: data,
success: callback, success: callback,
headers : {'X-CSRFToken':getCookie('csrftoken')} headers : {'X-CSRFToken':getCookie('csrftoken')}
}); });
} }
$('form#login_form').submit(function(e) { $('form#login_form').submit(function(e) {
e.preventDefault(); e.preventDefault();
var submit_data = $('#login_form').serialize(); var submit_data = $('#login_form').serialize();
postJSON('/login_post', postJSON('/login_post',
submit_data, submit_data,
function(json) { function(json) {
if(json.success) { if(json.success) {
location.href="${reverse('index')}"; location.href = "${reverse('index')}";
} else if($('#login_error').length == 0) { } else if($('#login_error').length == 0) {
$('#login_form').prepend('<div id="login_error">Email or password is incorrect.</div>'); $('#login_form').prepend('<div id="login_error">Email or password is incorrect.</div>');
$('#login_error').slideDown(150);
} else { } else {
$('#login_error').stop().css("background-color", "#933").animate({ backgroundColor: "#333"}, 2000); $('#login_error').stop().slideDown(150);
} }
} }
); );
}); });
})(this) })(this)
</script> </script>
......
cms/templates/manage_users.html
<%inherit file="base.html" /> <%inherit file="base.html" />
<%block name="title">Course Staff Manager</%block> <%block name="title">Course Staff Manager</%block>
<%block name="bodyclass">users</%block>
<%include file="widgets/header.html"/> <%include file="widgets/header.html"/>
<%block name="content"> <%block name="content">
<section class="main-container"> <div class="main-wrapper">
<div class="inner-wrapper">
<h1>Users</h1>
<h2>Course Staff</h2> <article class="user-overview">
<div> <div class="details">
<p> <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 source staff below. Please note that they must have already registered and verified their account.</p>
The following list of users have been designated as course staff. This means that these users will </div>
have permissions to modify course content. You may add additional source staff below. Please note that they <div class="list-header">
must have already registered and verified their account. <a href="#" class="new-user-button wip-box">
</p> <span class="plus-icon"></span>New User
</a>
</div>
<div class="new-user-form">
<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">save</a>
<a href="#" class="cancel-button">cancel</a>
</div>
<div>
<ol class="user-list">
% for user in staff:
<li>
<span class="user-name">${user.username}</span>
<span class="user-email">${user.email}</span>
<div class="item-actions">
<a href="#" class="delete-button"><span class="delete-icon"></span></a>
</div>
</li>
% endfor
</ol>
</div>
<div id="result"></div>
</article>
</div> </div>
<div> </div>
<ol>
% for user in staff:
<li>${user.email} (${user.username}) <a href='#' class='remove-user' data-id='${user.email}'>remove</a></li>
% endfor
</ol>
</div>
<label>email:&nbsp;</label><input type="text" id="email" autocomplete="Off" placeholder="email@example.com..." size="40"/>
<a href="#" id="add_user" class="button" />add as course staff</a>
<div id="result"></div>
</section>
</%block> </%block>
<%block name="jsextra"> <%block name="jsextra">
<script type="text/javascript"> <script type="text/javascript">
var $newUserForm;
function showNewUserForm(e) {
e.preventDefault();
$newUserForm.slideDown(150);
}
function hideNewUserForm(e) {
e.preventDefault();
$newUserForm.slideUp(150);
}
$(document).ready(function() { $(document).ready(function() {
$("#add_user").click(function() { $newUserForm = $('.new-user-form');
$.ajax({ $newUserForm.find('.cancel-button').bind('click', hideNewUserForm);
url: "${add_user_postback_url}",
type: "POST", $('.new-user-button').bind('click', showNewUserForm);
dataType: "json",
contentType: "application/json", $('#add_user').click(function() {
data:JSON.stringify({ 'email': $('#email').val()}), $.ajax({
}).done(function(data) { url: '${add_user_postback_url}',
if (data.ErrMsg != undefined) type: 'POST',
$("#result").empty().append(data.ErrMsg); dataType: 'json',
else contentType: 'application/json',
location.reload(); data:JSON.stringify({ 'email': $('#email').val()}),
}) }).done(function(data) {
if (data.ErrMsg != undefined)
$('#result').empty().append(data.ErrMsg);
else
location.reload();
}) })
});
$(".remove-user").click(function() { $('.remove-user').click(function() {
$.ajax({ $.ajax({
url: "${remove_user_postback_url}", url: '${remove_user_postback_url}',
type: "POST", type: 'POST',
dataType: "json", dataType: 'json',
contentType: "application/json", contentType: 'application/json',
data:JSON.stringify({ 'email': $(this).data('id')}), data:JSON.stringify({ 'email': $(this).data('id')}),
}).done(function() { }).done(function() {
location.reload(); location.reload();
}) })
}); });
}); });
</script> </script>
</%block> </%block>
\ No newline at end of file
cms/templates/signup.html
...@@ -81,7 +81,7 @@ ...@@ -81,7 +81,7 @@
if(json.success) { if(json.success) {
$('#register').html(json.value); $('#register').html(json.value);
} else { } else {
$('#register_error').html(json.value).stop().css("background-color", "#933").animate({ backgroundColor: "#333"}, 2000); $('#register_error').html(json.value).stop().slideDown(150);
} }
} }
); );
......
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