Skip to content

E
edx-platform
Commit ab810006 by marco
Options

visual styling changes to staff grading and peer grading, along with additional… 

visual styling changes to staff grading and peer grading, along with additional instances of the use of the baseline variable instead of pixel definitions for padding and margins.
parent 910523ee
Showing with 234 additions and 180 deletions
common/lib/xmodule/xmodule/css/capa/display.scss
......@@ -282,10 +282,9 @@ section.problem {
.grader-status {
@include clearfix;
margin-bottom: $baseline;
padding: 9px;
border: 1px solid #ddd;
border-top: 0;
margin: $baseline/2 0;
padding: $baseline/2;
border-radius: 5px;
background: #F6F6F6;
span {
......@@ -311,11 +310,11 @@ section.problem {
}
&.file {
background: #fff;
margin-top: $baseline;
padding: $baseline 0 0 0;
border: 0;
border-top: 1px solid #eee;
background: #fff;
p.debug {
display: none;
......@@ -335,8 +334,8 @@ section.problem {
.feedback-on-feedback {
height: 100px;
margin-right: $baseline;
height: 100px;
}
.evaluation-response {
......
common/lib/xmodule/xmodule/css/combinedopenended/display.scss
......@@ -23,7 +23,7 @@ h2 {
div.name{
padding-bottom: 15px;
h2{
h2 {
display: inline;
}
......@@ -77,8 +77,8 @@ div.problemwrapper {
}
.assessments-container {
padding: $baseline/2 $baseline $baseline/2 $baseline/2;
float: right;
padding: $baseline/2 $baseline $baseline/2 $baseline/2;
.assessment-text {
display: inline-block;
......@@ -93,9 +93,9 @@ div.problemwrapper {
}
.result-container {
float:left;
float: left;
width: 100%;
position:relative;
position: relative;
}
}
......@@ -107,7 +107,7 @@ section.legend-container {
display: inline;
padding: $baseline/2;
width: 20%;
background-color : #eee;
background-color: #eee;
font-size: .9em;
}
}
......@@ -119,18 +119,18 @@ section.combined-open-ended-status {
display: table-cell;
padding: $baseline/2;
width: 30px;
border-right: 1px solid lightgray;
background-color: #eee;
color: #2c2c2c;
font-size: .9em;
border-right: 1px solid lightgray;
&:first-child {
border-radius: $baseline/4 0 0 $baseline/4;
}
&:last-child {
border-radius: 0 $baseline/4 $baseline/4 0;
border-right: 0px;
border-radius: 0 $baseline/4 $baseline/4 0;
}
&:only-child {
......@@ -183,37 +183,36 @@ section.combined-open-ended-status {
.icon-caret-right {
display: inline-block;
vertical-align: baseline;
margin-right: ($baseline/4);
vertical-align: baseline;
}
}
// Problem Section Controls
// Problem Section Controls
.visibility-control, .visibility-control-prompt {
display: block;
height: 40px;
width: 100%;
height: 40px;
.inner {
float: left;
height: 5px;
margin-top: $baseline;
border-top: 1px dotted #ddd;
width: 85%;
height: 5px;
border-top: 1px dotted #ddd;
}
}
.section-header {
display: block;
text-align: center;
width: 15%;
float: right;
padding-top: $baseline/2;
width: 15%;
text-align: center;
font-size: .9em;
}
// Rubric Styling
.wrapper-score-selection {
......@@ -221,7 +220,6 @@ section.combined-open-ended-status {
padding: 0 $baseline/2;
width: 20px;
vertical-align: middle;
}
.wrappable {
......@@ -240,17 +238,17 @@ section.combined-open-ended-status {
span.rubric-category {
display: block;
margin-bottom: $baseline/2;
padding-top: $baseline/2;
width: 100%;
border-bottom: 1px solid lightgray;
font-size: 1.1em;
padding-top: $baseline/2;
margin-bottom: $baseline/2;
}
div.combined-rubric-container {
margin: 15px;
padding-bottom: 5px;
padding-top: 10px;
padding-top: $baseline/2;
padding-bottom: $baseline/4;
ul.rubric-list {
margin: 0 $baseline $baseline/2 $baseline;
......@@ -265,10 +263,11 @@ div.combined-rubric-container {
}
}
}
h4 {
padding-top: 10px;
border-top: 1px solid;
padding-top: $baseline/2;
border-color: lightgray;
border-top: 1px solid;
}
span.rubric-category {
......@@ -302,10 +301,10 @@ div.combined-rubric-container {
}
div.result-container {
padding-top: 10px;
padding-bottom: 5px;
.evaluation {
padding-top: $baseline/2;
padding-bottom: $baseline/4;
.evaluation {
p {
margin-bottom: 1px;
}
......@@ -313,28 +312,31 @@ div.result-container {
.feedback-on-feedback {
height: 100px;
margin-right: 0px;
margin-right: 0;
}
.evaluation-response {
margin-bottom: 2px;
header {
a {
font-size: .85em;
}
}
}
.evaluation-scoring {
.scoring-list {
list-style-type: none;
margin-left: 3px;
list-style-type: none;
li {
display:inline;
margin-left: 0;
&:first-child {
margin-left: 0px;
margin-left: 0;
}
display:inline;
margin-left: 0px;
label {
font-size: .9em;
......@@ -342,20 +344,23 @@ div.result-container {
}
}
}
.submit-message-container {
margin: 10px 0px ;
margin: $baseline/2 0;
}
.external-grader-message {
margin-bottom: 5px;
margin-bottom: $baseline/4;
section {
padding-left: 20px;
background-color: #FAFAFA;
color: #2C2C2C;
padding-left: $baseline;
background-color: #fafafa;
color: #2c2c2c;
font-family: monospace;
font-size: 1em;
padding-top: 10px;
padding-top: $baseline/2;
padding-bottom:30px;
header {
font-size: 1.4em;
}
......@@ -365,35 +370,36 @@ div.result-container {
}
.longform {
padding: 0px;
margin: 0px;
padding: 0;
margin: 0;
.result-errors {
margin: 5px;
padding: 10px 10px 10px 40px;
margin: $baseline/4;
padding: $baseline/2 $baseline/2 $baseline/2 $baseline*2;
background: url('../images/incorrect-icon.png') center left no-repeat;
li {
color: #B00;
}
}
.result-output {
margin: 5px;
padding: 20px 0px 15px 50px;
border-top: 1px solid #DDD;
border-left: 20px solid #FAFAFA;
margin: $baseline/4;
padding: $baseline 0 15px 50px;
border-top: 1px solid #ddd;
border-left: 20px solid #fafafa;
h4 {
font-family: monospace;
font-size: 1em;
font-family: monospace;
}
dl {
margin: 0px;
margin: 0;
}
dt {
margin-top: 20px;
margin-top: $baseline;
}
dd {
......@@ -402,47 +408,74 @@ div.result-container {
}
.markup-text{
margin: 5px;
padding: 20px 0px 15px 50px;
border-top: 1px solid #DDD;
border-left: 20px solid #FAFAFA;
margin: $baseline/4;
padding: $baseline 0 15px 50px;
border-top: 1px solid #ddd;
border-left: 20px solid #fafafa;
bs {
color: #BB0000;
color: #bb0000;
}
bg {
color: #BDA046;
color: #bda046;
}
}
}
}
}
.rubric-result-container {
padding: 2px;
margin: 0px;
display : inline;
.rubric-result {
font-size: .9em;
padding: 2px;
display: inline-table;
}
padding: 2px;
margin: 0px;
display : inline;
}
}
div.rubric {
ul.rubric-list{
margin: 0;
margin: 0 $baseline $baseline/2 $baseline;
padding: 0;
list-style-type: none;
list-style: none;
list-style-type: none;
li {
&.rubric-list-item {
margin-bottom: 0;
padding: 0;
margin-bottom: 2px;
padding: $baseline/2;
border-radius: $baseline/4;
&:hover {
background-color: #eee;
}
.wrapper-score-selection {
display: table-cell;
padding: 0 $baseline/2;
width: 20px;
vertical-align: middle;
}
.wrappable {
display: table-cell;
padding: $baseline/4;
}
}
}
}
span.rubric-category {
display: block;
width: 100%;
border-bottom: 1px solid lightgray;
font-weight: bold;
font-size: .9em;
}
}
......@@ -503,9 +536,9 @@ section.open-ended-child {
div.unanswered {
p.status {
@include inline-block();
background: url('../images/unanswered-icon.png') center center no-repeat;
height: 14px;
width: 14px;
height: 14px;
background: url('../images/unanswered-icon.png') center center no-repeat;
}
}
......@@ -557,7 +590,7 @@ section.open-ended-child {
p.answer {
@include inline-block();
margin-bottom: 0;
margin-left: 10px;
margin-left: $baseline/2;
&:before {
content: "Answer: ";
......@@ -612,7 +645,7 @@ section.open-ended-child {
.reload {
float:right;
margin: 10px;
margin: $baseline/2;
}
div.short-form-response {
......@@ -620,18 +653,17 @@ section.open-ended-child {
overflow-y: auto;
margin-bottom: 0;
padding: $baseline/2;
height: auto;
min-height: 20px;
height: auto;
border: 1px solid #ddd;
background: #f6f6f6;
}
.grader-status {
@include clearfix;
margin-bottom: $baseline;
padding: 9px;
border: 1px solid #ddd;
border-top: 0;
margin: $baseline/2 0;
padding: $baseline/2;
border-radius: 5px;
background: #f6f6f6;
span {
......@@ -670,7 +702,6 @@ section.open-ended-child {
float: left;
}
}
}
form.option-input {
......@@ -693,6 +724,7 @@ section.open-ended-child {
padding: 0;
list-style-type: none;
list-style: none;
li {
&.rubric-list-item {
margin-bottom: 0;
......@@ -860,18 +892,49 @@ section.open-ended-child {
.oe-tools {
display: inline-block;
padding-left: $baseline;
width: 100%;
border-radius: 5px;
.oe-tools-label {
font-size: 0.8em;
display: inline-block;
padding: $baseline/2;
vertical-align: middle;
padding: 10px;
font-size: 0.8em;
}
.next-step-button {
margin: $baseline/2;
}
.reset-button {
vertical-align: middle;
}
}
// Staff Grading
.problem-list-container {
margin: $baseline/2;
.instructions {
padding-bottom: $baseline/2;
}
}
.staff-grading {
.breadcrumbs {
padding: $baseline/10;
background-color: #f6f6f6;
border-radius: 5px;
margin-bottom: $baseline/2;
}
.prompt-wrapper {
padding-top: $baseline/2;
.meta-info-wrapper {
padding: $baseline/2;
border-radius: $baseline/4;
}
}
}
lms/static/sass/course/_staff_grading.scss
div.staff-grading,
div.peer-grading{
padding: $baseline;
border: none;
textarea.feedback-area {
margin: 0;
height: 75px;
margin: 0px;
}
ul.rubric-list{
margin: 0;
padding: 0;
list-style-type: none;
padding:0;
margin:0;
li {
&.rubric-list-item{
margin-bottom: 0px;
padding: 0px;
margin-bottom: 0;
padding: 0;
}
}
}
h1 {
margin : 0 0 0 10px;
margin: 0 0 0 $baseline/2;
}
h2{
a
{
h2 {
a {
text-size: .5em;
}
}
div {
margin: 0px;
margin: 0;
&.submission-container{
@include clearfix;
overflow-y: auto;
height: 150px;
background: #F6F6F6;
border: 1px solid #ddd;
@include clearfix;
background: #F6F6F6;
}
}
label {
margin: 0px;
margin: 0;
padding: 2px;
min-width: 50px;
background-color: white;
......@@ -58,143 +62,127 @@ div.peer-grading{
display: none;
}
.problem-list
{
text-align: center;
table-layout: auto;
.problem-list {
width:100%;
th
{
table-layout: auto;
text-align: center;
th {
padding: 2px;
}
td
{
padding:2px;
td {
padding: 2px;
}
td.problem-name
{
text-align:left;
td.problem-name {
text-align: left;
}
.ui-progressbar
{
height:1em;
margin:0px;
padding:0px;
.ui-progressbar {
margin: 0;
padding: 0;
height: 1em;
}
}
.prompt-information-container,
.rubric-wrapper,
.calibration-feedback-wrapper,
.grading-container
{
padding: 2px;
.grading-container {
padding: $baseline/2 0;
}
.error-container
{
background-color: #FFCCCC;
.error-container {
margin-left: 0;
padding: 2px;
margin-left: 0px;
background-color: #ffcccc;
}
.submission-wrapper
{
h3
{
.submission-wrapper {
padding: 2px;
padding-bottom: 15px;
h3 {
margin-bottom: 2px;
}
p
{
margin-left:2px;
p {
margin-left: 2px;
}
padding: 2px;
padding-bottom: 15px;
}
.meta-info-wrapper
{
background-color: #eee;
.meta-info-wrapper {
padding:2px;
div
{
display : inline;
background-color: #eee;
div {
display: inline;
}
}
.message-container,
.grading-message
{
background-color: $yellow;
.grading-message {
margin-left: 0;
padding: 2px;
margin-left:0px;
background-color: $yellow;
}
.breadcrumbs
{
margin-top:2px;
margin-left:0px;
margin-bottom:2px;
.breadcrumbs {
margin: $baseline/2 $baseline/4;
font-size: .8em;
}
.instructions-panel
{
.instructions-panel {
@include clearfix;
margin-right:2px;
> div
{
padding: 2px;
> div {
margin-bottom: 5px;
padding: 2px;
width: 47.6%;
background: #eee;
width:47.6%;
h3
{
text-align:center;
text-transform:uppercase;
h3 {
color: #777;
text-align: center;
text-transform: uppercase;
}
p
{
p{
color: #777;
}
}
.calibration-panel
{
float:left;
.calibration-panel {
float: left;
}
.grading-panel
{
float:right;
.grading-panel {
float: right;
}
.current-state
{
background: #1D9DD9;
h3, p
{
.current-state {
background: #1d9dd9;
h3, p {
color: white;
}
}
@include clearfix;
}
.collapsible {
margin-left: 0;
.collapsible
{
margin-left: 0px;
header
{
margin-top:2px;
margin-bottom:2px;
header {
margin-top: 2px;
margin-bottom: 2px;
font-size: 1.2em;
}
}
.interstitial-page
{
.interstitial-page {
text-align: center;
input[type=button]
{
margin-top: 20px;
input[type=button] {
margin-top: $baseline;
}
}
padding: 15px;
border: none;
}
lms/templates/combinedopenended/combined_open_ended_results.html
......@@ -12,7 +12,7 @@
<span class="section-header section-header-rubric">Submitted Rubric</span>
</div>
<div class="oe-tools rubric-header">
<span class="oe-tools-label">Assessment Tools: </span>
<span class="oe-tools-label"></span>
<button class="rubric-collapse" href="#">Show Score Only</button>
% if len(results)>1:
<a href="#" class="rubric-previous-button">Previous</a>
......
lms/templates/peer_grading/peer_grading_problem.html
......@@ -14,7 +14,11 @@
</div>
<div class="prompt-wrapper">
<h2>${_('Prompt')} <a href="#" class="question-header">${_('(Hide)')}</a></h2>
<div class="visibility-control visibility-control-rubric">
<div class="inner">
</div>
<span class="section-header section-header-rubric">${_('Hide Prompt')}</span>
</div>
<div class="prompt-information-container">
<section>
<div class="prompt-container">
......
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