Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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.

Browse Source
This commit is contained in:
marco
2013-08-13 14:42:34 -04:00
parent 910523eee5
commit ab81000665
5 changed files with 483 additions and 429 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
common/lib/xmodule/xmodule/css/capa/display.scss
View File

@@ -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 {

693
common/lib/xmodule/xmodule/css/combinedopenended/display.scss
View File

@@ -23,8 +23,8 @@ h2 {
div.name{
padding-bottom: 15px;
h2{
display: inline;
h2 {
display: inline;
}
.progress-container {
@@ -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%;
width: 100%;
height: 40px;
.inner {
float: left;
height: 5px;
margin-top: $baseline;
border-top: 1px dotted #ddd;
width: 85%;
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 {
@@ -286,12 +285,12 @@ div.combined-rubric-container {
}
}
label.choicegroup_partialcorrect {
&:before {
margin-right: 15px;
content: url('../images/partially-correct-icon.png');
}
label.choicegroup_partialcorrect {
&:before {
margin-right: 15px;
content: url('../images/partially-correct-icon.png');
}
}
label.choicegroup_incorrect {
&:before {
@@ -300,150 +299,184 @@ div.combined-rubric-container {
}
}
}
div.result-container {
padding-top: 10px;
padding-bottom: 5px;
.evaluation {
padding-top: $baseline/2;
padding-bottom: $baseline/4;
p {
margin-bottom: 1px;
.evaluation {
p {
margin-bottom: 1px;
}
}
.feedback-on-feedback {
height: 100px;
margin-right: 0;
}
.evaluation-response {
margin-bottom: 2px;
header {
a {
font-size: .85em;
}
}
}
.evaluation-scoring {
.scoring-list {
margin-left: 3px;
list-style-type: none;
li {
display:inline;
margin-left: 0;
&:first-child {
margin-left: 0;
}
}
.feedback-on-feedback {
height: 100px;
margin-right: 0px;
}
.evaluation-response {
margin-bottom: 2px;
header {
a {
font-size: .85em;
}
label {
font-size: .9em;
}
}
}
.evaluation-scoring {
.scoring-list {
list-style-type: none;
margin-left: 3px;
}
li {
&:first-child {
margin-left: 0px;
}
display:inline;
margin-left: 0px;
.submit-message-container {
margin: $baseline/2 0;
}
label {
font-size: .9em;
}
}
.external-grader-message {
margin-bottom: $baseline/4;
section {
padding-left: $baseline;
background-color: #fafafa;
color: #2c2c2c;
font-family: monospace;
font-size: 1em;
padding-top: $baseline/2;
padding-bottom:30px;
header {
font-size: 1.4em;
}
.shortform {
font-weight: bold;
}
.longform {
padding: 0;
margin: 0;
.result-errors {
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;
}
}
}
.submit-message-container {
margin: 10px 0px ;
}
.external-grader-message {
margin-bottom: 5px;
section {
padding-left: 20px;
background-color: #FAFAFA;
color: #2C2C2C;
font-family: monospace;
font-size: 1em;
padding-top: 10px;
padding-bottom:30px;
header {
font-size: 1.4em;
.result-output {
margin: $baseline/4;
padding: $baseline 0 15px 50px;
border-top: 1px solid #ddd;
border-left: 20px solid #fafafa;
h4 {
font-size: 1em;
font-family: monospace;
}
.shortform {
font-weight: bold;
dl {
margin: 0;
}
.longform {
padding: 0px;
margin: 0px;
dt {
margin-top: $baseline;
}
.result-errors {
margin: 5px;
padding: 10px 10px 10px 40px;
background: url('../images/incorrect-icon.png') center left no-repeat;
li {
color: #B00;
}
}
dd {
margin-left: 24pt;
}
}
.result-output {
margin: 5px;
padding: 20px 0px 15px 50px;
border-top: 1px solid #DDD;
border-left: 20px solid #FAFAFA;
.markup-text{
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;
}
bs {
color: #bb0000;
}
dl {
margin: 0px;
}
dt {
margin-top: 20px;
}
dd {
margin-left: 24pt;
}
}
.markup-text{
margin: 5px;
padding: 20px 0px 15px 50px;
border-top: 1px solid #DDD;
border-left: 20px solid #FAFAFA;
bs {
color: #BB0000;
}
bg {
color: #BDA046;
}
}
bg {
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;
padding: 0;
list-style-type: none;
list-style: none;
li {
&.rubric-list-item {
margin-bottom: 0;
padding: 0;
border-radius: $baseline/4;
}
ul.rubric-list{
margin: 0 $baseline $baseline/2 $baseline;
padding: 0;
list-style: none;
list-style-type: none;
li {
&.rubric-list-item {
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;
}
}
@@ -490,188 +523,186 @@ section.open-ended-child {
}
}
p {
&.answer {
margin-top: -2px;
}
&.status {
margin: 8px 0 0 $baseline/2;
text-indent: -9999px;
}
p {
&.answer {
margin-top: -2px;
}
div.unanswered {
p.status {
@include inline-block();
background: url('../images/unanswered-icon.png') center center no-repeat;
height: 14px;
width: 14px;
}
&.status {
margin: 8px 0 0 $baseline/2;
text-indent: -9999px;
}
}
div.correct, div.ui-icon-check {
p.status {
@include inline-block();
width: 25px;
height: 20px;
background: url('../images/correct-icon.png') center center no-repeat;
}
input {
border-color: green;
}
}
div.processing {
p.status {
@include inline-block();
width: 20px;
height: 20px;
background: url('../images/spinner.gif') center center no-repeat;
}
input {
border-color: #aaa;
}
}
div.incorrect, div.ui-icon-close {
p.status {
@include inline-block();
width: 20px;
height: 20px;
background: url('../images/incorrect-icon.png') center center no-repeat;
text-indent: -9999px;
}
input {
border-color: red;
}
}
> span {
display: block;
margin-bottom: lh(.5);
}
p.answer {
div.unanswered {
p.status {
@include inline-block();
margin-bottom: 0;
margin-left: 10px;
width: 14px;
height: 14px;
background: url('../images/unanswered-icon.png') center center no-repeat;
}
}
div.correct, div.ui-icon-check {
p.status {
@include inline-block();
width: 25px;
height: 20px;
background: url('../images/correct-icon.png') center center no-repeat;
}
input {
border-color: green;
}
}
div.processing {
p.status {
@include inline-block();
width: 20px;
height: 20px;
background: url('../images/spinner.gif') center center no-repeat;
}
input {
border-color: #aaa;
}
}
div.incorrect, div.ui-icon-close {
p.status {
@include inline-block();
width: 20px;
height: 20px;
background: url('../images/incorrect-icon.png') center center no-repeat;
text-indent: -9999px;
}
input {
border-color: red;
}
}
> span {
display: block;
margin-bottom: lh(.5);
}
p.answer {
@include inline-block();
margin-bottom: 0;
margin-left: $baseline/2;
&:before {
content: "Answer: ";
font-weight: bold;
display: inline;
}
&:empty {
&:before {
content: "Answer: ";
font-weight: bold;
display: inline;
}
&:empty {
&:before {
display: none;
}
display: none;
}
}
}
span {
&.unanswered, &.ui-icon-bullet {
@include inline-block();
position: relative;
top: 4px;
width: 14px;
height: 14px;
background: url('../images/unanswered-icon.png') center center no-repeat;
}
&.processing, &.ui-icon-processing {
@include inline-block();
position: relative;
top: 6px;
width: 25px;
height: 20px;
background: url('../images/spinner.gif') center center no-repeat;
}
&.correct, &.ui-icon-check {
@include inline-block();
position: relative;
top: 6px;
width: 25px;
height: 20px;
background: url('../images/correct-icon.png') center center no-repeat;
}
&.incorrect, &.ui-icon-close {
@include inline-block();
position: relative;
top: 6px;
width: 20px;
height: 20px;
background: url('../images/incorrect-icon.png') center center no-repeat;
}
}
.reload {
float:right;
margin: $baseline/2;
}
div.short-form-response {
@include clearfix;
overflow-y: auto;
margin-bottom: 0;
padding: $baseline/2;
min-height: 20px;
height: auto;
border: 1px solid #ddd;
background: #f6f6f6;
}
.grader-status {
@include clearfix;
margin: $baseline/2 0;
padding: $baseline/2;
border-radius: 5px;
background: #f6f6f6;
span {
&.unanswered, &.ui-icon-bullet {
@include inline-block();
position: relative;
top: 4px;
width: 14px;
height: 14px;
background: url('../images/unanswered-icon.png') center center no-repeat;
}
&.processing, &.ui-icon-processing {
@include inline-block();
position: relative;
top: 6px;
width: 25px;
height: 20px;
background: url('../images/spinner.gif') center center no-repeat;
}
&.correct, &.ui-icon-check {
@include inline-block();
position: relative;
top: 6px;
width: 25px;
height: 20px;
background: url('../images/correct-icon.png') center center no-repeat;
}
&.incorrect, &.ui-icon-close {
@include inline-block();
position: relative;
top: 6px;
width: 20px;
height: 20px;
background: url('../images/incorrect-icon.png') center center no-repeat;
}
display: block;
float: left;
overflow: hidden;
margin: -7px 7px 0 0;
text-indent: -9999px;
}
.reload {
float:right;
margin: 10px;
.grading {
margin: 0 7px 0 0;
padding-left: 25px;
background: url('../images/info-icon.png') left center no-repeat;
text-indent: 0;
}
div.short-form-response {
@include clearfix;
overflow-y: auto;
p {
float: left;
margin-bottom: 0;
padding: $baseline/2;
height: auto;
min-height: 20px;
border: 1px solid #ddd;
background: #f6f6f6;
line-height: 20px;
}
.grader-status {
@include clearfix;
margin-bottom: $baseline;
padding: 9px;
border: 1px solid #ddd;
border-top: 0;
background: #f6f6f6;
&.file {
margin-top: $baseline;
padding: $baseline 0 0 0;
border: 0;
border-top: 1px solid #eee;
background: #fff;
span {
display: block;
p.debug {
display: none;
}
input {
float: left;
overflow: hidden;
margin: -7px 7px 0 0;
text-indent: -9999px;
}
.grading {
margin: 0 7px 0 0;
padding-left: 25px;
background: url('../images/info-icon.png') left center no-repeat;
text-indent: 0;
}
p {
float: left;
margin-bottom: 0;
line-height: 20px;
}
&.file {
margin-top: $baseline;
padding: $baseline 0 0 0;
border: 0;
border-top: 1px solid #eee;
background: #fff;
p.debug {
display: none;
}
input {
float: left;
}
}
}
}
form.option-input {
margin: -$baseline/2 0 $baseline;
@@ -688,19 +719,20 @@ section.open-ended-child {
margin-left: .75rem;
}
ul.rubric-list{
margin: 0;
padding: 0;
list-style-type: none;
list-style: none;
li {
&.rubric-list-item {
margin-bottom: 0;
padding: 0;
border-radius: $baseline/4;
}
ul.rubric-list{
margin: 0;
padding: 0;
list-style-type: none;
list-style: none;
li {
&.rubric-list-item {
margin-bottom: 0;
padding: 0;
border-radius: $baseline/4;
}
}
}
ol {
margin-bottom: lh();
@@ -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;
}
}
}

200
lms/static/sass/course/_staff_grading.scss
View File

@@ -1,46 +1,50 @@
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;
}
&.rubric-list-item{
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{
overflow-y: auto;
height: 150px;
background: #F6F6F6;
border: 1px solid #ddd;
@include clearfix;
@include clearfix;
overflow-y: auto;
height: 150px;
border: 1px solid #ddd;
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
{
margin-bottom: 2px;
}
p
{
margin-left:2px;
}
.submission-wrapper {
padding: 2px;
padding-bottom: 15px;
h3 {
margin-bottom: 2px;
}
p {
margin-left: 2px;
}
}
.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;
}

2
lms/templates/combinedopenended/combined_open_ended_results.html
View File

@@ -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>

6
lms/templates/peer_grading/peer_grading_problem.html
View File

@@ -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">