Skip to content

R
RecommenderXBlock
Commit 544c831d by Piotr Mitros
Options

Merge pull request #3 from pmitros/pyfile_upload 

Pyfile upload
parents e377d6c3 b09ccad1
Showing with 200 additions and 63 deletions
recommender/static/css/recommender.css
...@@ -6,7 +6,9 @@ ...@@ -6,7 +6,9 @@
.recommender_block p { .recommender_block p {
cursor: pointer; cursor: pointer;
}.hidden { display: none;} }
.hidden { display: none;}
.recommender_block { .recommender_block {
width : 100%; width : 100%;
...@@ -17,17 +19,30 @@ ...@@ -17,17 +19,30 @@
float: left; float: left;
} }
.recommender_row_top { .recommender_row_top, .recommender_modify_title_container {
/* overflow:scroll; /* overflow:scroll;
max-height:200px;*/ max-height:200px;*/
font-size: 20px; font-size: 14px;
background-color:rgb(204, 198, 198); padding-top: 0.5em;
padding-left: 0.5em;
background-color: #f5efef;
height: 28px;
color: #948f8f;
} }
.recommender_row_top:before { content: 'Show'; }
.recommender_row_top.resource_list_expanded:before { content: 'Hide'; }
.recommender_row { .recommender_row {
height: 380px; height: 380px;
} }
.recommender_title {
flex-grow : 1;
max-height: 65px;
overflow-y: scroll;
}
.question { .question {
width:700px; width:700px;
} }
...@@ -61,20 +76,31 @@ ...@@ -61,20 +76,31 @@
padding : 0 0 10 0; padding : 0 0 10 0;
} }
.recommender_title {
flex-grow : 1;
}
.recommender_modify { .recommender_modify {
width: 700px; width: 700px;
float: left; /* float: left; */
} }
.descriptionImg { .descriptionImg {
height: 400px; /*height: 400px;
overflow-x: scroll; overflow-x: scroll;
margin-top: 2em; margin-top: 2em;
float: left; float: left;*/
height: 600px;
width: 700px;
margin-top: 2em;
}
.descriptionText {
padding: 0.5em;
background-color: #f5efef;
color: #948f8f;
}
.previewingImg {
margin-top: 1em;
max-width: 100%;
max-height: 100%;
} }
.recommender_vote_arrow_down { .recommender_vote_arrow_down {
...@@ -95,6 +121,7 @@ ...@@ -95,6 +121,7 @@
width: 100%; width: 100%;
text-align: center; text-align: center;
cursor: default; cursor: default;
font-weight: 900;
} }
.recommender_recommendations { display: table; } .recommender_recommendations { display: table; }
...@@ -107,12 +134,12 @@ ...@@ -107,12 +134,12 @@
.recommender_blurb { .recommender_blurb {
display:inline-block; display:inline-block;
vertical-align: middle; vertical-align: middle;
width:525px; width:585px;
overflow:hidden; overflow:hidden;
text-overflow:ellipsis; word-wrap: break-word;
} }
.recommender_entryId, .recommender_descriptionSlot, .recommender_problematicReason { .recommender_entryId, .recommender_descriptionImg, .recommender_problematicReason, .recommender_descriptionText {
display:none; display:none;
} }
...@@ -133,9 +160,9 @@ ...@@ -133,9 +160,9 @@
color: red; color: red;
} }
.recommender_vote_arrow_down, .recommender_vote_arrow_up, .recommender_title, .resource_edit_button, .flagResource, .resource_add_button, .hide-show, .paginationCell, .backToViewButton { cursor: pointer; } .recommender_vote_arrow_down, .recommender_vote_arrow_up, .recommender_title, .resource_edit_button, .flagResource, .staffEdition, .resource_add_button, .hide-show, .paginationCell, .backToViewButton { cursor: pointer; }
.resource_add_button { float: left; font-weight: bold; } .resource_add_button { text-align: right; font-weight: bold; }
.resource_edit_button { float: left; } .resource_edit_button { float: left; }
.addSourceBlockTitle, .editSourceBlockTitle, .flagSourceBlockTitle { .addSourceBlockTitle, .editSourceBlockTitle, .flagSourceBlockTitle {
margin-bottom: 1em; margin-bottom: 1em;
...@@ -153,22 +180,36 @@ ...@@ -153,22 +180,36 @@
} }
.backToViewButton { color: #1d9dd9; float: left; } .backToViewButton { color: #1d9dd9; float: left; }
.recommender_modify_title { position: relative; left: 50px; overflow: auto; }
.flag_reason_submit, .edit_submit, .add_submit { margin-top: 0.5em; }
.delete_resource, .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);
} }
.in_title, .edit_title, .in_descriptionText, .edit_descriptionText {
height: 75px;
margin-left: 0.5em;
width:100%;
}
.in_url, .edit_url, .flag_reason {
height: 25px;
margin-left: 0.5em;
width:100%;
}
.resource_hovered { background-color:#F2F7FA } .resource_hovered { background-color:#F2F7FA }
.recommender_modify_title_container { background: rgb(204, 198, 198); font-size: 20px; } .recommender_modify_title { float: right; padding-right: 2em; overflow: auto; }
.nonevoting { color: rgb(204, 198, 198); }
.hide-show-icon { margin-left: 0.5em; } .hide-show-icon { margin-left: 0.5em; }
.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: red; }
.recommender_vote_arrow_up.downvoting, .recommender_vote_arrow_down.upvoting { color: rgb(204, 198, 198); } .recommender_vote_arrow_up.downvoting, .recommender_vote_arrow_down.upvoting { color: #948f8f; }
.downArrowIcon:before { content: '▼'; } .downArrowIcon:before { content: '▼'; }
...@@ -177,7 +218,7 @@ ...@@ -177,7 +218,7 @@
.rightArrowIcon:before { content: '►'; } .rightArrowIcon:before { content: '►'; }
.leftArrowIcon:before { content: '◄'; } .leftArrowIcon:before { content: '◄'; }
.moreIcon:before { content: '...'; } .moreIcon:before { content: '...'; }
.lightgreyBg { background-color: lightgrey; } .lightgreyBg { background-color: #948f8f; }
a:link { color: black; } a:link, a:visited { color: black; }
form { margin: 0em; } form { margin: 0em; }
recommender/static/html/recommender.html
<style> <style>
</style> </style>
<div class="recommender_block"> <div class="recommender_block">
<div class="recommender_recommendations"> <div class="recommender_recommendations">
<div class="recommender_content"> <div class="recommender_content">
<div class="recommender_row_top hide-show resource_list_expanded"> <div class="recommender_row_top hide-show resource_list_expanded">
Related resources<div class='recommender_panel'><span class="resource_add_button plusIcon"></span> <span class='hide-show-icon upArrowIcon'></span> </div> Related Resources<div class='recommender_panel'> <span class='hide-show-icon upArrowIcon'></span> </div>
</div> </div>
<div class='recommender_row_inner'> <div class='recommender_row_inner'>
<div class="recommender_row"> <div class="recommender_row">
<div class="noResourceIntro hidden">
This will be a list of resources your fellow students
thought might be helpful, but it is empty currently.
If you find useful resources, either on edx.org or
elsewhere, please add it.
</div>
% for elem in resources: % for elem in resources:
<% <%
if elem['id'] in downvotes: if elem['id'] in downvotedIds:
voteMode = "downvoting" voteMode = "downvoting"
elif elem['id'] in upvotes: elif elem['id'] in upvotedIds:
voteMode = 'upvoting' voteMode = 'upvoting'
else: else:
voteMode = 'nonevoting' voteMode = ''
if elem['id'] in flagId: if elem['id'] in flaggedIds:
flagMode = 'problematic' flagMode = 'problematic'
reason = flagReason[flagId.index(elem['id'])] reason = flaggedReasons[flaggedIds.index(elem['id'])]
else: else:
flagMode = '' flagMode = ''
reason = '' reason = ''
%> %>
<%include file="resourcebox.html" args="id=elem['id'],title=elem['title'],votes=elem['votes'],url=elem['url'],description=elem['description'],isProblematic=flagMode,problematicReason=reason,voteMode=voteMode" /> <%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" />
% endfor % endfor
<div class="recommender_resourceTemplate hidden">
<div class="recommender_vote_box">
<div class="recommender_vote_arrow_up" role="button" aria-label="upvote" tabindex="0"><b>↑</b></div>
<div class="recommender_vote_score"></div>
<div class="recommender_vote_arrow_down" role="button" aria-label="downvote" tabindex="0"><b>↓</b></div>
</div>
<div class="recommender_blurb">
<div class="recommender_title"><a href="" target="_blank"></a></div>
<div class="recommender_descriptionText"></div>
<div class="recommender_descriptionImg"></div>
<div class="recommender_entryId"></div>
<div class="recommender_problematicReason"></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>
</div>
<div class="resource_add_button">Add new resource &gt;&gt;</div>
<div class='pagination'>
<div class="paginationRowTemplate hidden">
<div class="paginationCell leftArrowIcon"></div>
<div class="paginationCell moreIcon leftMoreIcon" style="cursor: default;"></div>
<div class="paginationCell lightgreyBg"></div>
<div class="paginationCell moreIcon rightMoreIcon" style="cursor: default;"></div>
<div class="paginationCell rightArrowIcon"></div>
</div>
</div> </div>
<div class='pagination'> </div>
<div class="recommender_description"> <div class="recommender_description">
<div class="descriptionImg"> <div class="descriptionImg">
<div> 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
it. If you can improve the description or preview of a it. If you can improve the description or preview of a
resource, please do so as well. If you find a resource resource, please do so as well. If you find a resource
helpful, upvote it. If it's not so helpful, downvote helpful, upvote it. If it&rsquo;s not so helpful, downvote
it. If it has issues (illegal material, incorrect, etc.), it. If it has issues (illegal material, incorrect, etc.),
please flag it and let us know the reason. </div> please flag it and let us know the reason. </div>
</div>
<img class="previewingImg hidden" src=""/>
</div>
</div> </div>
</div> </div>
</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="staffEditionBlock">
<div class="staffEditionBlockTitle">Delete, endorse or de-endorse a resource.</div>
<input type="button" value="Delete resource" class="delete_resource">
<input type="button" value="Endorse resource" class="endorse_resource hidden">
<input type="button" value="De-endorse resource" class="deendorse_resource hidden">
<!-- TODO: endorsement and de-endorsement -->
</div>
<div class="flagSourceBlock"> <div class="flagSourceBlock">
<div class="flagSourceBlockTitle">Why would you like to flag this resource?</div> <div class="flagSourceBlockTitle">Why would you like to flag this resource?</div>
<input type="text" <input type="text"
class="flag_reason" class="flag_reason"
style="height: 25px; position: relative; left: 10px; width:100%" 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" style="margin-top: 0.5em;">
</div> </div>
<div class="editSourceBlock"> <div class="editSourceBlock">
<div class="editSourceBlockTitle">Edit the description, hypelink, and previewing screenshot for the selected resource.</div>
<div style="float: left">Title&nbsp;</div><div class = 'redTxt'>*</div>
<textarea
class="edit_title"
placeholder="Provide a meaningful title so other students know whether this is useful to them"></textarea><br/>
<div style="float: left">Location&nbsp;</div><div class = 'redTxt'>*</div>
<input type="text"
class="edit_url"
placeholder="http://en.wikipedia.org/wiki/Edx"/><br/>
<div style="float: left">Description&nbsp;</div>
<textarea
class="edit_descriptionText"
placeholder="Provide a meaningful description so other students know whether this is useful to them"></textarea><br/>
<form method="post" id="editResourceForm">
Previewing screenshot: <input type="file" name="file"><br/>
<input type="button" value="Save change" class="edit_submit" disabled >
</form>
</div> </div>
<div class="recommender_add"> <div class="recommender_add">
<div class="addSourceBlockTitle">Suggest a resource which can help other students with this problem.</div> <div class="addSourceBlockTitle">Suggest a resource which can help other students with this problem.</div>
Description <input type="text" <div style="float: left">Title&nbsp;</div><div class = 'redTxt'>*</div>
class="in_title" <textarea
style="height: 25px; position: relative; left: 10px; width:100%" class="in_title"
placeholder="Provide a meaningful description so other students know whether this is useful to them"/><br/> placeholder="Provide a meaningful title so other students know whether this is useful to them"></textarea><br/>
Location <input type="text" <div style="float: left">Location&nbsp;</div><div class = 'redTxt'>*</div>
class="in_url" <input type="text"
style="height: 25px; position: relative; left: 22px; width:100%" class="in_url"
placeholder="http://en.wikipedia.org/wiki/Edx"/><br/> placeholder="http://en.wikipedia.org/wiki/Edx"/><br/>
<form id="addResourceForm" action="http://danielswli.s3.amazonaws.com/" method="post" enctype="multipart/form-data"> <div style="float: left">Description&nbsp;</div>
<input type="hidden" name="acl" value="public-read"> <textarea
<input type="hidden" name="Content-Type" value="image/jpeg"> class="in_descriptionText"
<input type="hidden" name="AWSAccessKeyId" value="AKIAIRDHSV6YZJZ4RFGA"> placeholder="Provide a meaningful description so other students know whether this is useful to them"></textarea><br/>
<input type="hidden" name="key" value=""> <form method="post" id="addResourceForm">
Previewing screenshot: <input type="file" name="file"><br/>
<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,id,isProblematic,problematicReason,voteMode"/> <%page args="title,votes,url,description,descriptionText,id,isProblematic,problematicReason,voteMode"/>
<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>
<div class="recommender_vote_score ${voteMode}"><b>${votes}</b></div> <div class="recommender_vote_score ${voteMode}">${votes}</div>
<div class="recommender_vote_arrow_down ${voteMode}" role="button" aria-label="downvote" tabindex="0"><b>↓</b></div> <div class="recommender_vote_arrow_down ${voteMode}" role="button" aria-label="downvote" tabindex="0"><b>↓</b></div>
</div> </div>
<div class="recommender_blurb"> <div class="recommender_blurb">
<div class="recommender_title"><a href="${url}" target="_blank">${title}</a></div> <div class="recommender_title"><a href="${url}" target="_blank">${title}</a></div>
<div class="recommender_descriptionSlot">${description}</div> <div class="recommender_descriptionText">${descriptionText}</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> </div>
......
recommender/static/js/src/cats.js 0 → 100644
var tooltipsCats = [
'.resource_add_button',
'.resource_edit_button',
'.recommender_vote_arrow_up',
'.recommender_vote_arrow_down',
'.recommender_vote_score',
'.recommender_blurb',
'.previewingImg',
'.in_title',
'.in_url',
'.edit_title',
'.edit_url',
'.backToViewButton',
'.flag_reason',
'.flagResource',
'.flagResource.problematic',
'.recommender_row_top',
'.recommender_row_top.resource_list_expanded'
];
var tooltipsCatsText = {
'.resource_add_button': 'Recommend a new helpful resource for this problem with a short description, hyperlink, and previewing screenshot to the new resource',
'.resource_edit_button': 'Edit the description, hypelink, and previewing screenshot of this resource',
'.recommender_vote_arrow_up': 'Upvote for a helpful resource',
'.recommender_vote_arrow_down': 'Downvote for an irrelevant resource',
'.recommender_vote_score': 'Votes',
'.recommender_blurb': 'The title of a helpful resource',
'.previewingImg': 'Previewing screenshot',
'.in_title': 'Type in the description of the resource',
'.in_url': 'Type in the hyperlink to the resource',
'.edit_title': 'Type in the description of the resource',
'.edit_url': 'Type in the hyperlink to the resource',
'.backToViewButton': 'Back to list of related resources',
'.flag_reason': 'Type in the reason why you flag the resource',
'.flagResource': 'Flag this resource as problematic and give the reason',
'.flagResource.problematic': 'Unflag this problematic resource or edit the reason for it',
'.recommender_row_top': 'Select for expanding resource list',
'.recommender_row_top.resource_list_expanded': 'Select to hide the list'
};
\ No newline at end of file
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