Skip to content

R
RecommenderXBlock
Commit b4f3596d by swdanielli
Options

Merge pull request #12 from pmitros/swdanielli/staffview 

Swdanielli/staffview
parents 8e92fe86 919bf688
Showing with 106 additions and 80 deletions
recommender/static/css/recommender.css
...@@ -80,7 +80,7 @@ ...@@ -80,7 +80,7 @@
} }
.descriptionImg { .descriptionImg {
max-height: 800px; max-height: 1020px;
max-width: 700px; max-width: 700px;
margin-top: 2em; margin-top: 2em;
} }
...@@ -93,6 +93,25 @@ ...@@ -93,6 +93,25 @@
color: #948f8f; color: #948f8f;
} }
.show_problematic_reasons {
max-height: 200px;
overflow: auto;
padding: 0.5em;
background-color: #B4053D;
color: white;
}
.show_endorsed_reasons {
max-height: 200px;
overflow: auto;
padding: 0.5em;
background-color: rgb(69, 194, 10);
color: white;
}
.show_problematic_reasons:before { content: 'This resource was flagged problematic by students.'; }
.show_endorsed_reasons:before { content: 'This resource was endorsed by course staff.'; }
.previewingImg { .previewingImg {
margin-top: 1em; margin-top: 1em;
max-width: 700px; max-width: 700px;
...@@ -137,7 +156,7 @@ ...@@ -137,7 +156,7 @@
.recommender_endorse { width:15px; display: inline-block; } .recommender_endorse { width:15px; display: inline-block; }
.recommender_entryId, .recommender_descriptionImg, .recommender_problematicReason, .recommender_descriptionText { .recommender_entryId, .recommender_descriptionImg, .recommender_problematicReason, .recommender_descriptionText, .recommender_endorse_reason {
display:none; display:none;
} }
...@@ -155,20 +174,20 @@ ...@@ -155,20 +174,20 @@
} }
.redTxt { .redTxt {
color: red; color: #B4053D;
} }
.recommender_vote_arrow_down, .recommender_vote_arrow_up, .resource_edit_button, .flagResource, .s3info_add_button, .staffEdition, .resource_add_button, .hide-show, .paginationCell, .backToViewButton, .checkIcon { cursor: pointer; } .recommender_vote_arrow_down, .recommender_vote_arrow_up, .resource_edit_button, .flagResource, .s3info_add_button, .deendorse, .resource_add_button, .hide-show, .paginationCell, .backToViewButton, .endorse, .resource_ranking_for_deendorsement_button { cursor: pointer; }
.s3info_add_button { float: right; background-color: rgba(0,0,0,0.05); padding: 0.3em 1em 0.3em 1em;} .s3info_add_button { float: right; background-color: rgba(0,0,0,0.05); padding: 0.3em 1em 0.3em 1em;}
.resource_add_button { float: right; background-color: rgba(0,0,0,0.05); padding: 0.3em 1em 0.3em 1em;} .resource_add_button { float: right; background-color: rgba(0,0,0,0.05); padding: 0.3em 1em 0.3em 1em;}
.resource_edit_button { float: left; } .resource_edit_button { float: left; }
.addSourceBlockTitle, .editSourceBlockTitle, .flagSourceBlockTitle, .s3InfoBlockTitle, .staffEditionBlockTitle { .addResourceBlockTitle, .editResourceBlockTitle, .flagResourceBlockTitle, .s3InfoBlockTitle, .deendorseBlockTitle, .endorseBlockTitle {
margin-bottom: 1em; margin-bottom: 1em;
} }
.editSourceBlock, .recommender_add, .flagSourceBlock { .editResourceBlock, .addResourceBlock, .flagResourceBlock {
padding-left: 1em; padding-left: 1em;
} }
...@@ -181,9 +200,14 @@ ...@@ -181,9 +200,14 @@
.backToViewButton { color: #1d9dd9; float: left; } .backToViewButton { color: #1d9dd9; float: left; }
.flag_reason_submit, .edit_submit, .add_submit { margin-top: 0.5em; } .flag_reason_submit, .edit_submit, .add_submit, .deendorse_resource, .endorse_resource { margin-top: 0.5em; }
input[type="button"]:not([DISABLED]){
background-image: linear-gradient(#1d9dd9,#1d9dd9);
color: white;
}
.delete_resource, .endorse_resource, .deendorse_resource { margin-top: 0.5em; float:left; } .endorse_resource, .deendorse_resource { margin-top: 0.5em; float:left; }
.ui-icon.problematic { .ui-icon.problematic {
background-image: url(http://download.jqueryui.com/themeroller/images/ui-icons_ff0000_256x240.png); background-image: url(http://download.jqueryui.com/themeroller/images/ui-icons_ff0000_256x240.png);
...@@ -194,7 +218,7 @@ ...@@ -194,7 +218,7 @@
margin-left: 0.5em; margin-left: 0.5em;
width:100%; width:100%;
} }
.in_url, .edit_url, .flag_reason, .aws_access_key, .aws_secret_key, .bucketName, .uploadedFileUrl,.uploadedFileDir { .in_url, .edit_url, .flag_reason, .deendorse_reason, .endorse_reason, .aws_access_key, .aws_secret_key, .bucketName, .uploadedFileUrl, .uploadedFileDir {
height: 25px; height: 25px;
margin-left: 0.5em; margin-left: 0.5em;
width:100%; width:100%;
...@@ -210,12 +234,27 @@ ...@@ -210,12 +234,27 @@
.recommender_vote_score, .recommender_vote_arrow_up, .recommender_vote_arrow_down { color: #948f8f; } .recommender_vote_score, .recommender_vote_arrow_up, .recommender_vote_arrow_down { color: #948f8f; }
.recommender_vote_score.upvoting, .recommender_vote_arrow_up.upvoting { color: rgb(69, 194, 10); } .recommender_vote_score.upvoting, .recommender_vote_arrow_up.upvoting { color: rgb(69, 194, 10); }
.recommender_vote_score.downvoting, .recommender_vote_arrow_down.downvoting { color: red; } .recommender_vote_score.downvoting, .recommender_vote_arrow_down.downvoting { color: #B4053D; }
.recommender_vote_arrow_up.downvoting, .recommender_vote_arrow_down.upvoting { color: #948f8f; } .recommender_vote_arrow_up.downvoting, .recommender_vote_arrow_down.upvoting { color: #948f8f; }
.checkIcon:not(.endorsed) { color: #DFD3D3; display: none; } .resource_ranking_for_deendorsement_button:not(.deendorsement_mode) {
.checkIcon.endorsed { color: rgb(69, 194, 10); } float: right;
.checkIcon:before { content: '✔'; } background-color: rgba(0,0,0,0.05);
padding: 0.3em 1em 0.3em 1em;
color: black;
}
.resource_ranking_for_deendorsement_button.deendorsement_mode {
float: right;
background-color: #B4053D;
padding: 0.3em 1em 0.3em 1em;
color: white;
}
.resource_ranking_for_deendorsement_button:not(deendorsement_mode):before { content: 'Ordinary '; }
.resource_ranking_for_deendorsement_button.deendorsement_mode:before { content: 'De-endorsement '; }
.endorse:not(.endorsed) { color: #DFD3D3; display: none; }
.endorse.endorsed { color: rgb(69, 194, 10); }
.endorse:before { content: '✔'; }
.downArrowIcon:before { content: '▼'; } .downArrowIcon:before { content: '▼'; }
.upArrowIcon:before { content: '▲'; } .upArrowIcon:before { content: '▲'; }
.plusIcon:before { content: '+'; } .plusIcon:before { content: '+'; }
......
recommender/static/html/recommender.html
...@@ -18,8 +18,11 @@ ...@@ -18,8 +18,11 @@
<% <%
if elem['id'] in endorsed_recommendation_ids: if elem['id'] in endorsed_recommendation_ids:
endorseMode = 'endorsed' endorseMode = 'endorsed'
endorsed_index = endorsed_recommendation_ids.index(elem['id'])
endorsed_reason = endorsed_recommendation_reasons[endorsed_index]
else: else:
endorseMode = '' endorseMode = ''
endorsed_reason = ''
if elem['id'] in downvoted_ids: if elem['id'] in downvoted_ids:
voteMode = "downvoting" voteMode = "downvoting"
...@@ -35,7 +38,7 @@ ...@@ -35,7 +38,7 @@
flagMode = '' flagMode = ''
reason = '' reason = ''
%> %>
<%include file="resourcebox.html" args="id=elem['id'],title=elem['title'],votes=elem['votes'],url=elem['url'],description=elem['description'],descriptionText=elem['descriptionText'],isProblematic=flagMode,problematicReason=reason,voteMode=voteMode,endorseMode=endorseMode" /> <%include file="resourcebox.html" args="id=elem['id'],title=elem['title'],votes=elem['votes'],url=elem['url'],description=elem['description'],descriptionText=elem['descriptionText'],isProblematic=flagMode,problematicReason=reason,voteMode=voteMode,endorseMode=endorseMode,endorsedReason=endorsed_reason" />
% endfor % endfor
<div class="recommender_resourceTemplate hidden"> <div class="recommender_resourceTemplate hidden">
<div class="recommender_vote_box"> <div class="recommender_vote_box">
...@@ -49,14 +52,15 @@ ...@@ -49,14 +52,15 @@
<div class="recommender_descriptionImg"></div> <div class="recommender_descriptionImg"></div>
<div class="recommender_entryId"></div> <div class="recommender_entryId"></div>
<div class="recommender_problematicReason"></div> <div class="recommender_problematicReason"></div>
<div class="recommender_endorse_reason"></div>
</div> </div>
<div class="recommender_endorse"><div class="checkIcon"></div></div> <div class="recommender_endorse"><div class="endorse"></div></div>
<div class="recommender_edit"> <span class="ui-icon ui-icon-pencil resource_edit_button"></span> <span class="ui-icon ui-icon-flag flagResource "></span></div> <div class="recommender_edit"> <span class="ui-icon ui-icon-pencil resource_edit_button"></span> <span class="ui-icon ui-icon-flag flagResource "></span></div>
</div> </div>
</div> </div>
<div class="resource_add_button">Add new resource &gt;&gt;</div> <div class="resource_add_button">Add new resource &gt;&gt;</div>
<div class="clearFix"></div> <div class="clearFix"></div>
<div class="s3info_add_button">Set S3 information</div> <div class="resource_ranking_for_deendorsement_button hidden">mode</div>
<div class="clearFix"></div> <div class="clearFix"></div>
<div class='pagination'> <div class='pagination'>
<div class="paginationRowTemplate hidden"> <div class="paginationRowTemplate hidden">
...@@ -69,6 +73,10 @@ ...@@ -69,6 +73,10 @@
</div> </div>
<div class="recommender_description"> <div class="recommender_description">
<div class="descriptionImg"> <div class="descriptionImg">
<div class='show_endorsed_reasons hidden'></div>
<div class="clearFix"></div>
<div class='show_problematic_reasons hidden'></div>
<div class="clearFix"></div>
<div class='descriptionText'> This is a list of resources your fellow students <div class='descriptionText'> This is a list of resources your fellow students
thought might be helpful. If you find another useful thought might be helpful. If you find another useful
resource, either on edx.org or elsewhere, please add resource, either on edx.org or elsewhere, please add
...@@ -85,22 +93,32 @@ ...@@ -85,22 +93,32 @@
</div> </div>
<div class='recommender_modify'> <div class='recommender_modify'>
<div class='recommender_modify_title_container'><div class='backToViewButton'>&lt; Related resources</div><div class='recommender_modify_title'></div></div> <div class='recommender_modify_title_container'><div class='backToViewButton'>&lt; Related resources</div><div class='recommender_modify_title'></div></div>
<div class="s3InfoBlock"> <div class="deendorseBlock">
<div class="s3InfoBlockTitle">Provide your s3 information for file uploading.</div> <div class="deendorseBlockTitle">Deendorse this resource and give the reason why you do that.</div>
</div> <input type="text"
<div class="staffEditionBlock"> class="deendorse_reason"
<div class="staffEditionBlockTitle">Delete a resource.</div> name="deendorse_rationale"
placeholder="Reason for why this resource should be removed"/><br/>
<input type="button" value="Deendorse resource" class="deendorse_resource"/>
</div>
<div class="endorseBlock">
<div class="endorseBlockTitle">Endorse this resource and give the reason why you do that.</div>
<input type="text"
class="endorse_reason"
name="endorse_rationale"
placeholder="Reason for why this resource should be endorsed"/><br/>
<input type="button" value="Endorse resource" class="endorse_resource"/>
</div> </div>
<div class="flagSourceBlock"> <div class="flagResourceBlock">
<div class="flagSourceBlockTitle">Why would you like to flag this resource? The staff will review all flagged resources, and remove inappropriate ones (spam, incorrect, abusive, etc.). Giving a clear reason will help us do this efficiently. </div> <div class="flagResourceBlockTitle">Why would you like to flag this resource? The staff will review all flagged resources, and remove inappropriate ones (spam, incorrect, abusive, etc.). Giving a clear reason will help us do this efficiently. </div>
<input type="text" <input type="text"
class="flag_reason" class="flag_reason"
name="flag_rationale" name="flag_rationale"
placeholder="Reason for why this resource should be removed"/><br/> placeholder="Reason for why this resource should be removed"/><br/>
<input type="button" value="Flag resource" class="flag_reason_submit"> <input type="button" value="Flag resource" class="flag_reason_submit"/>
</div> </div>
<div class="editSourceBlock"> <div class="editResourceBlock">
<div class="editSourceBlockTitle">Edit the resource and make it more helpful for other students with this problem. Please do not give the answer directly.</div> <div class="editResourceBlockTitle">Edit the resource and make it more helpful for other students with this problem. Please do not give the answer directly.</div>
<div style="float: left">Title&nbsp;</div><div class = 'redTxt'>*</div> <div style="float: left">Title&nbsp;</div><div class = 'redTxt'>*</div>
<textarea <textarea
class="edit_title" class="edit_title"
...@@ -114,12 +132,12 @@ ...@@ -114,12 +132,12 @@
class="edit_descriptionText" class="edit_descriptionText"
placeholder="Provide a meaningful description so other students know whether this is useful to them"></textarea><br/> placeholder="Provide a meaningful description so other students know whether this is useful to them"></textarea><br/>
<form method="post" class="editResourceForm"> <form method="post" class="editResourceForm">
Preview screenshot: <input type="file" name="file" class='editResourceScreenshot'><br/> Preview screenshot: <input type="file" name="file" class='editResourceScreenshot'/><br/>
<input type="button" value="Save change" class="edit_submit" disabled > <input type="button" value="Save change" class="edit_submit" disabled/>
</form> </form>
</div> </div>
<div class="recommender_add"> <div class="addResourceBlock">
<div class="addSourceBlockTitle">Suggest a resource which can help other students with this problem. Please do not give the answer directly.</div> <div class="addResourceBlockTitle">Suggest a resource which can help other students with this problem. Please do not give the answer directly.</div>
<div style="float: left">Title&nbsp;</div><div class = 'redTxt'>*</div> <div style="float: left">Title&nbsp;</div><div class = 'redTxt'>*</div>
<textarea <textarea
class="in_title" class="in_title"
...@@ -133,8 +151,8 @@ ...@@ -133,8 +151,8 @@
class="in_descriptionText" class="in_descriptionText"
placeholder="Provide a meaningful description so other students know whether this is useful to them"></textarea><br/> placeholder="Provide a meaningful description so other students know whether this is useful to them"></textarea><br/>
<form method="post" class="addResourceForm"> <form method="post" class="addResourceForm">
Preview screenshot: <input type="file" name="file" class='addResourceScreenshot'><br/> Preview screenshot: <input type="file" name="file" class='addResourceScreenshot'/><br/>
<input type="button" value="Add resource" class="add_submit" disabled > <input type="button" value="Add resource" class="add_submit" disabled/>
</form> </form>
</div> </div>
</div> </div>
......
recommender/static/html/resourcebox.html
<%page args="title,votes,url,description,descriptionText,id,isProblematic,problematicReason,voteMode,endorseMode "/> <%page args="title,votes,url,description,descriptionText,id,isProblematic,problematicReason,voteMode,endorseMode,endorsedReason"/>
<div class="recommender_resource"> <div class="recommender_resource">
<div class="recommender_vote_box"> <div class="recommender_vote_box">
<div class="recommender_vote_arrow_up ${voteMode}" role="button" aria-label="upvote" tabindex="0"><b>↑</b></div> <div class="recommender_vote_arrow_up ${voteMode}" role="button" aria-label="upvote" tabindex="0"><b>↑</b></div>
...@@ -11,7 +11,8 @@ ...@@ -11,7 +11,8 @@
<div class="recommender_descriptionImg">${description}</div> <div class="recommender_descriptionImg">${description}</div>
<div class="recommender_entryId">${id}</div> <div class="recommender_entryId">${id}</div>
<div class="recommender_problematicReason">${problematicReason}</div> <div class="recommender_problematicReason">${problematicReason}</div>
<div class="recommender_endorse_reason">${endorsedReason}</div>
</div> </div>
<div class="recommender_endorse"><div class="checkIcon ${endorseMode}"></div></div> <div class="recommender_endorse"><div class="endorse ${endorseMode}"></div></div>
<div class="recommender_edit"> <span class="ui-icon ui-icon-pencil resource_edit_button"></span> <span class="ui-icon ui-icon-flag flagResource ${isProblematic}"></span></div> <div class="recommender_edit"> <span class="ui-icon ui-icon-pencil resource_edit_button"></span> <span class="ui-icon ui-icon-flag flagResource ${isProblematic}"></span></div>
</div> </div>
recommender/static/js/src/cats.js
...@@ -5,7 +5,7 @@ var tooltipsCatsPerResource = [ ...@@ -5,7 +5,7 @@ var tooltipsCatsPerResource = [
'.recommender_vote_score', '.recommender_vote_score',
'a', 'a',
'.flagResource', '.flagResource',
'.staffEdition', '.deendorse',
'.checkIcon.endorsed' '.checkIcon.endorsed'
]; ];
...@@ -23,7 +23,8 @@ var tooltipsCats = [ ...@@ -23,7 +23,8 @@ var tooltipsCats = [
'.bucketName', '.bucketName',
'.uploadedFileDir', '.uploadedFileDir',
'.delete_resource', '.delete_resource',
'.recommender_row_top.resource_list_expanded' '.recommender_row_top.resource_list_expanded',
'.resource_ranking_for_deendorsement_button.deendorsement_mode'
]; ];
var tooltipsEditCats = [ var tooltipsEditCats = [
...@@ -40,7 +41,7 @@ var tooltipsCatsText = { ...@@ -40,7 +41,7 @@ var tooltipsCatsText = {
'.recommender_vote_arrow_down': 'Downvote if the resource is not helpful', '.recommender_vote_arrow_down': 'Downvote if the resource is not helpful',
'.recommender_vote_score': 'Votes', // '.recommender_vote_score': 'Votes', //
'a': 'Resource title', // TODO: I would suggest making the description be the tooltip. 'a': 'Resource title', // TODO: I would suggest making the description be the tooltip.
'.staffEdition': 'Add Amazon S3 information for file uploading or delete this resource; these functions are restricted to course staff', '.deendorse': 'Deendorse this resource and give the reason why you do that',
'.previewingImg': 'Preview image (typically, a screenshot)', '.previewingImg': 'Preview image (typically, a screenshot)',
'.in_title': 'Give a short (1-3 sentence) summary of the resource; ideally, this should be concise, but give enough detail to let students know whether this resources is useful to them', '.in_title': 'Give a short (1-3 sentence) summary of the resource; ideally, this should be concise, but give enough detail to let students know whether this resources is useful to them',
'.in_url': 'Cut-and-paste the URL of the resource.', '.in_url': 'Cut-and-paste the URL of the resource.',
...@@ -53,62 +54,29 @@ var tooltipsCatsText = { ...@@ -53,62 +54,29 @@ var tooltipsCatsText = {
'.backToViewButton': 'Go back to the main list', '.backToViewButton': 'Go back to the main list',
'.flag_reason': 'Give a meaningful reason for why this resource should be removed', '.flag_reason': 'Give a meaningful reason for why this resource should be removed',
'.flagResource': 'Flag this resource as problematic and give your reason', '.flagResource': 'Flag this resource as problematic and give your reason',
'.aws_access_key': 'Give the access key of your Amazon s3 account',
'.aws_secret_key': 'Give the secret key of your Amazon s3 account',
'.bucketName': 'Give the bucket name of your Amazon s3 account',
'.uploadedFileDir': 'Give the path (relative to root directory) of the directory for storing uploaded files',
'.delete_resource': 'Delete this resource', '.delete_resource': 'Delete this resource',
'.recommender_row_top': 'Show a list of student-recommented related resources', '.recommender_row_top': 'Show a list of student-recommented related resources',
'.recommender_row_top.resource_list_expanded': 'Hide the recommendations list', '.recommender_row_top.resource_list_expanded': 'Hide the recommendations list',
'.checkIcon': 'Check the icon to endorse this resource', '.checkIcon': 'Check the icon to endorse this resource',
'.checkIcon.endorsed': 'This resource is endorsed by staff' '.checkIcon.endorsed': 'This resource is endorsed by staff',
'.resource_ranking_for_deendorsement_button': 'Click to view resources for de-endorsement',
'.resource_ranking_for_deendorsement_button.deendorsement_mode': 'Click to view resources in ordinary decreasing-vote order'
}; };
var uploadFileError = [ var uploadFileError = [
'FILE_TYPE_ERROR', 'FILE_TYPE_ERROR',
'IMPROPER_S3_SETUP', 'IMPROPER_S3_SETUP',
'{"success": "Submission aborted!' '{"success": "Submission aborted!',
'FILE_SIZE_ERROR'
]; ];
var uploadFileErrorText = { var uploadFileErrorText = {
'FILE_TYPE_ERROR': 'Please upload an image in GIF/JPG/PNG', 'FILE_TYPE_ERROR': 'Please upload an image in GIF/JPG/PNG',
'IMPROPER_S3_SETUP': 'The configuration of Amazon S3 is not properly set', 'IMPROPER_S3_SETUP': 'The configuration of Amazon S3 is not properly set',
'{"success": "Submission aborted!': 'Size of uploaded file exceeds threshold' '{"success": "Submission aborted!': 'Size of uploaded file exceeds threshold',
'FILE_SIZE_ERROR': 'Size of uploaded file exceeds threshold'
}; };
var s3_info_buttons = [ var problematic_ressons_prefix = '<br/>Here is a list of reasons why students think this resource problematic: <br/>&nbsp;&nbsp;&nbsp;&nbsp;'
"submit_s3_info" var endorsed_ressons_prefix = '<br/>The reason why it is endorsed is: <br/>&nbsp;&nbsp;&nbsp;&nbsp;'
]; var reason_separator = '<br/>&nbsp;&nbsp;&nbsp;&nbsp;'
var s3_info_buttons_text = {
"submit_s3_info": "Add Amazon S3 information for file uploading"
};
var s3_info_textareas = [
'aws_access_key',
'aws_secret_key',
'bucketName',
'uploadedFileDir'
];
var s3_info_textareas_text = {
'aws_access_key': 'Amazon S3 access key',
'aws_secret_key': 'Amazon S3 secret key',
'bucketName': 'Bucket name of your Amazon S3',
'uploadedFileDir': 'Directory for your uploaded files'
};
var s3_info_textareas_placeholder = {
'aws_access_key': '',
'aws_secret_key': '',
'bucketName': 'danielswli',
'uploadedFileDir': 'uploads/'
};
var staff_edit_buttons = [
'delete_resource',
];
var staff_edit_buttons_text = {
'delete_resource': "Delete resource",
};
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