Skip to content

R
RecommenderXBlock
Commit e377d6c3 by swdanielli
Options

Merge pull request #2 from pmitros/pmitros/UX-cleanup-pass 

Pmitros/ux cleanup pass
parents 7f664cd8 d7ad2f08
Showing with 203 additions and 230 deletions
recommender/static/css/recommender.css
...@@ -6,4 +6,178 @@ ...@@ -6,4 +6,178 @@
.recommender_block p { .recommender_block p {
cursor: pointer; cursor: pointer;
} }.hidden { display: none;}
\ No newline at end of file
.recommender_block {
width : 100%;
}
.recommender_content {
width: 700px;
float: left;
}
.recommender_row_top {
/* overflow:scroll;
max-height:200px;*/
font-size: 20px;
background-color:rgb(204, 198, 198);
}
.recommender_row {
height: 380px;
}
.question {
width:700px;
}
.recommender_resource {
padding-top : 0.25em;
padding-bottom : 0.25em;
float:left;
width : 100%;
}
.recommender_panel {
float: right;
width: 50px;
}
.resource_list_less, .resource_list_more {
border : 1;
padding : 1;
margin : 1;
width : 95%;
border-color:gray;
border-width:1px;
border-style:solid;
border-radius:5px;
}
.recommender_header {
display : flex;
padding : 0 0 10 0;
}
.recommender_title {
flex-grow : 1;
}
.recommender_modify {
width: 700px;
float: left;
}
.descriptionImg {
height: 400px;
overflow-x: scroll;
margin-top: 2em;
float: left;
}
.recommender_vote_arrow_down {
width: 100%;
margin-left:auto;
margin-right:auto;
text-align:center;
}
.recommender_vote_arrow_up {
width: 100%;
margin-left:auto;
margin-right:auto;
text-align:center;
}
.recommender_vote_score {
width: 100%;
text-align: center;
cursor: default;
}
.recommender_recommendations { display: table; }
.pagination {
display: table;
margin: 0 auto;
}
.recommender_blurb {
display:inline-block;
vertical-align: middle;
width:525px;
overflow:hidden;
text-overflow:ellipsis;
}
.recommender_entryId, .recommender_descriptionSlot, .recommender_problematicReason {
display:none;
}
.recommender_vote_box {
display:inline-block;
vertical-align: middle;
width:50px;
}
.recommender_edit{
display:inline-block;
vertical-align: top;
float: right;
width: 40px;
}
.redTxt {
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; }
.resource_add_button { float: left; font-weight: bold; }
.resource_edit_button { float: left; }
.addSourceBlockTitle, .editSourceBlockTitle, .flagSourceBlockTitle {
margin-bottom: 1em;
}
.editSourceBlock, .recommender_add, .flagSourceBlock {
padding-left: 1em;
}
.paginationCell {
display:table-cell;
text-align:center;
vertical-align: middle;
width:25px;
}
.backToViewButton { color: #1d9dd9; float: left; }
.recommender_modify_title { position: relative; left: 50px; overflow: auto; }
.ui-icon.problematic {
background-image: url(http://download.jqueryui.com/themeroller/images/ui-icons_ff0000_256x240.png);
}
.resource_hovered { background-color:#F2F7FA }
.recommender_modify_title_container { background: rgb(204, 198, 198); font-size: 20px; }
.nonevoting { color: rgb(204, 198, 198); }
.hide-show-icon { margin-left: 0.5em; }
.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_arrow_up.downvoting, .recommender_vote_arrow_down.upvoting { color: rgb(204, 198, 198); }
.downArrowIcon:before { content: '▼'; }
.upArrowIcon:before { content: '▲'; }
.plusIcon:before { content: '+'; }
.rightArrowIcon:before { content: '►'; }
.leftArrowIcon:before { content: '◄'; }
.moreIcon:before { content: '...'; }
.lightgreyBg { background-color: lightgrey; }
a:link { color: black; }
form { margin: 0em; }
recommender/static/html/recommender.html
<style> <style>
.hidden { display: none;}
.recommender_block {
width : 100%;
}
.recommender_content {
width: 700px;
/* width : 100%;*/
float: left;
}
.recommender_row_top {
/* overflow:scroll;
max-height:200px;*/
font-size: 20px;
background-color:rgb(204, 198, 198);
}
.recommender_row {
height: 380px;
}
.question {
width:700px;
}
.recommender_resource {
/* border : 1;*/
padding-top : 0.25em;
padding-bottom : 0.25em;
/* margin : 1;*/
/* display:table-cell;*/
float:left;
/* width:340px;*/
width : 100%;
/* border-color:gray;
border-width:1px;
border-style:solid;
border-radius:5px;*/
}
.recommender_panel {
float: right;
width: 50px;
}
.resource_list_less, .resource_list_more {
border : 1;
padding : 1;
margin : 1;
width : 95%;
border-color:gray;
border-width:1px;
border-style:solid;
border-radius:5px;
}
.recommender_header {
display : flex;
padding : 0 0 10 0;
}
.recommender_title {
flex-grow : 1;
}
.recommender_modify {
width: 700px;
float: left;
}
.descriptionImg {
height: 400px;
overflow-x: scroll;
margin-top: 2em;
float: left;
}
.recommender_vote_arrow_down {
width: 100%;
margin-left:auto;
margin-right:auto;
text-align:center;
}
.recommender_vote_arrow_up {
width: 100%;
margin-left:auto;
margin-right:auto;
text-align:center;
}
.recommender_vote_score {
width: 100%;
text-align: center;
cursor: default;
}
.recommender_recommendations { display: table; }
.pagination {
display: table;
margin: 0 auto;
}
.recommender_blurb {
display:inline-block;
vertical-align: middle;
width:525px;
overflow:hidden;
text-overflow:ellipsis;
}
.recommender_entryId, .recommender_descriptionSlot, .recommender_problematicReason {
display:none;
}
.recommender_vote_box {
display:inline-block;
vertical-align: middle;
width:50px;
}
.recommender_edit{
display:inline-block;
vertical-align: top;
float: right;
width: 40px;
}
.redTxt {
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; }
.resource_add_button { float: left; font-weight: bold; }
.resource_edit_button { float: left; }
/*.hide-show {
float: left;
font-size: small;
}*/
.addSourceBlockTitle, .editSourceBlockTitle, .flagSourceBlockTitle {
margin-bottom: 1em;
}
.editSourceBlock, .recommender_add, .flagSourceBlock {
padding-left: 1em;
}
.paginationCell {
display:table-cell;
text-align:center;
vertical-align: middle;
width:25px;
}
.backToViewButton { color: #1d9dd9; float: left; }
.recommender_modify_title { position: relative; left: 50px; overflow: auto; }
.ui-icon.problematic {
background-image: url(http://download.jqueryui.com/themeroller/images/ui-icons_ff0000_256x240.png);
}
.resource_hovered { background-color:#F2F7FA }
.recommender_modify_title_container { background: rgb(204, 198, 198); font-size: 20px; }
.nonevoting { color: rgb(204, 198, 198); }
.hide-show-icon { margin-left: 0.5em; }
.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_arrow_up.downvoting, .recommender_vote_arrow_down.upvoting { color: rgb(204, 198, 198); }
/*.tooltip {
display:none;
background-color:#ffa;
border:1px solid #cc9;
padding:3px;
font-size:13px;
-moz-box-shadow: 2px 2px 11px #666;
-webkit-box-shadow: 2px 2px 11px #666;
} */
/*
[title]{
position:relative;
}
[title]:after{
content:attr(title);
color:#fff;
background:#333;
background:rgba(51,51,51,0.75);
padding:5px;
position:absolute;
left:-9999px;
opacity:0;
bottom:100%;
white-space:nowrap;
-webkit-transition:0.25s linear opacity;
}
[title]:hover:after{
left:5px;
opacity:1;
}*/
.downArrowIcon:before { content: '▼'; }
.upArrowIcon:before { content: '▲'; }
.plusIcon:before { content: '+'; }
.rightArrowIcon:before { content: '►'; }
.leftArrowIcon:before { content: '◄'; }
.moreIcon:before { content: '...'; }
.lightgreyBg { background-color: lightgrey; }
a:link { color: black; }
form { margin: 0em; }
</style> </style>
<div class="recommender_block"> <div class="recommender_block">
...@@ -249,24 +31,42 @@ form { margin: 0em; } ...@@ -249,24 +31,42 @@ form { margin: 0em; }
</div> </div>
<div class='pagination'> </div> <div class='pagination'> </div>
<div class="recommender_description"> <div class="recommender_description">
<div class="descriptionImg"></div> <div class="descriptionImg">
<div> This is a list of resources your fellow students
thought might be helpful. If you find another useful
resource, either on edx.org or elsewhere, please add
it. If you can improve the description or preview of a
resource, please do so as well. If you find a resource
helpful, upvote it. If it's not so helpful, downvote
it. If it has issues (illegal material, incorrect, etc.),
please flag it and let us know the reason. </div>
</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="flagSourceBlock"> <div class="flagSourceBlock">
<div class="flagSourceBlockTitle">Give or edit the reason why you flagged this resource, or unflag it.</div> <div class="flagSourceBlockTitle">Why would you like to flag this resource?</div>
Reason: <input type="text" class="flag_reason" style="height: 25px; position: relative; left: 10px;"><br> <input type="text"
<input type="button" value="Save the reason" class="flag_reason_submit" style="margin-top: 0.5em"> class="flag_reason"
<input type="button" value="Unflag the resource" class="unflag_button" style="margin-top: 0.5em"> style="height: 25px; position: relative; left: 10px; width:100%"
name="flag_rationale"
placeholder="Reason for why this resource should be removed"/><br>
<input type="button" value="Flag resource" class="flag_reason_submit" style="margin-top: 0.5em;">
</div> </div>
<div class="editSourceBlock"> <div class="editSourceBlock">
</div> </div>
<div class="recommender_add"> <div class="recommender_add">
<div class="addSourceBlockTitle">Recommend a new helpful resource for this problem with a short description, hyperlink, and previewing screenshot to the new resource.</div> <div class="addSourceBlockTitle">Suggest a resource which can help other students with this problem.</div>
Description: <input type="text" class="in_title" style="height: 25px; position: relative; left: 10px;"><br> Description <input type="text"
HyperLink: <input type="text" class="in_url" style="height: 25px; position: relative; left: 22px;"><br> class="in_title"
style="height: 25px; position: relative; left: 10px; width:100%"
placeholder="Provide a meaningful description so other students know whether this is useful to them"/><br/>
Location <input type="text"
class="in_url"
style="height: 25px; position: relative; left: 22px; width:100%"
placeholder="http://en.wikipedia.org/wiki/Edx"/><br/>
<form id="addResourceForm" action="http://danielswli.s3.amazonaws.com/" method="post" enctype="multipart/form-data"> <form id="addResourceForm" action="http://danielswli.s3.amazonaws.com/" method="post" enctype="multipart/form-data">
<input type="hidden" name="acl" value="public-read"> <input type="hidden" name="acl" value="public-read">
<input type="hidden" name="Content-Type" value="image/jpeg"> <input type="hidden" name="Content-Type" value="image/jpeg">
......
recommender/static/js/src/recommender.js
...@@ -89,7 +89,7 @@ function RecommenderXBlock(runtime, element) { ...@@ -89,7 +89,7 @@ function RecommenderXBlock(runtime, element) {
$('.recommender_add').show(); $('.recommender_add').show();
$('.recommender_content').hide(); $('.recommender_content').hide();
$('.recommender_modify').show(); $('.recommender_modify').show();
$('.recommender_modify_title').text('Recommend new resource'); $('.recommender_modify_title').text('Suggest resource');
}); });
/* change between different mode (resource list or add/edit mode) */ /* change between different mode (resource list or add/edit mode) */
...@@ -399,7 +399,7 @@ function RecommenderXBlock(runtime, element) { ...@@ -399,7 +399,7 @@ function RecommenderXBlock(runtime, element) {
$('.flagSourceBlock').show(); $('.flagSourceBlock').show();
$('.recommender_content').hide(); $('.recommender_content').hide();
$('.recommender_modify').show(); $('.recommender_modify').show();
$('.recommender_modify_title').text('Reason for flagging the resource'); $('.recommender_modify_title').text('Flag Resource');
var flagDiv = $(this); var flagDiv = $(this);
var flaggedResourceDiv = $(this).parent().parent(); var flaggedResourceDiv = $(this).parent().parent();
......
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