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