grading - finalized style/states for grading UI on courseware overview
This commit is contained in:
Brian Talbot
@@ -71,13 +71,13 @@ input.courseware-unit-search-input {
|
||||
min-height: 75px;
|
||||
@include clearfix();
|
||||
|
||||
.item-details, .section-published-date, .gradable-status {
|
||||
float: left;
|
||||
.item-details, .section-published-date {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.item-details {
|
||||
padding: 20px 0 10px 0;
|
||||
width: 800px;
|
||||
@include clearfix();
|
||||
|
||||
.section-name {
|
||||
float: left;
|
||||
@@ -115,6 +115,7 @@ input.courseware-unit-search-input {
|
||||
}
|
||||
|
||||
.section-published-date {
|
||||
float: left;
|
||||
width: 265px;
|
||||
margin-right: 10px;
|
||||
padding: 4px 10px;
|
||||
@@ -144,106 +145,107 @@ input.courseware-unit-search-input {
|
||||
padding: 3px 15px 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gradable-status {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
width: 145px;
|
||||
.gradable-status {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 70px;
|
||||
width: 145px;
|
||||
|
||||
.status-label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 2px;
|
||||
display: none;
|
||||
width: 100px;
|
||||
padding: 10px 20px 10px 10px;
|
||||
@include border-radius(3px);
|
||||
background: $lightGrey;
|
||||
color: $lightGrey;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
line-height: 16px;
|
||||
.status-label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 2px;
|
||||
display: none;
|
||||
width: 105px;
|
||||
padding: 10px 20px 10px 10px;
|
||||
@include border-radius(3px);
|
||||
background: $lightGrey;
|
||||
color: $lightGrey;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.menu-toggle {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 5px;
|
||||
padding: 5px;
|
||||
color: $lightGrey;
|
||||
|
||||
&:hover, &.is-active {
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
z-index: 1;
|
||||
display: block;
|
||||
opacity: 0.0;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 2px;
|
||||
margin: 0;
|
||||
padding: 8px 12px;
|
||||
background: $white;
|
||||
border: 1px solid $mediumGrey;
|
||||
font-size: 12px;
|
||||
@include border-radius(4px);
|
||||
@include box-shadow(0 1px 2px rgba(0, 0, 0, .2));
|
||||
@include transition(opacity .15s);
|
||||
|
||||
|
||||
li {
|
||||
width: 115px;
|
||||
margin-bottom: 3px;
|
||||
padding-bottom: 3px;
|
||||
border-bottom: 1px solid $lightGrey;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
border: none;
|
||||
|
||||
a {
|
||||
color: $darkGrey;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
|
||||
&.is-selected {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// dropdown state
|
||||
&.is-active {
|
||||
|
||||
.menu {
|
||||
z-index: 1000;
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
.menu-toggle {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 5px;
|
||||
padding: 5px;
|
||||
color: $lightGrey;
|
||||
z-index: 10000;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover, &.is-active {
|
||||
color: $blue;
|
||||
}
|
||||
// set state
|
||||
&.is-set {
|
||||
|
||||
.menu-toggle {
|
||||
color: $blue;
|
||||
}
|
||||
|
||||
.menu {
|
||||
z-index: 1;
|
||||
.status-label {
|
||||
display: block;
|
||||
opacity: 0.0;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 2px;
|
||||
margin: 0;
|
||||
padding: 8px 12px;
|
||||
background: $white;
|
||||
border: 1px solid $mediumGrey;
|
||||
font-size: 12px;
|
||||
@include border-radius(4px);
|
||||
@include box-shadow(0 1px 2px rgba(0, 0, 0, .2));
|
||||
@include transition(opacity .15s);
|
||||
|
||||
|
||||
li {
|
||||
width: 115px;
|
||||
margin-bottom: 3px;
|
||||
padding-bottom: 3px;
|
||||
border-bottom: 1px solid $lightGrey;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
border: none;
|
||||
|
||||
a {
|
||||
color: $darkGrey;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
|
||||
&.is-selected {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// dropdown state
|
||||
&.is-active {
|
||||
|
||||
.menu {
|
||||
z-index: 1000;
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
.menu-toggle {
|
||||
z-index: 10000;
|
||||
}
|
||||
}
|
||||
|
||||
// set state
|
||||
&.is-set {
|
||||
|
||||
.menu-toggle {
|
||||
color: $blue;
|
||||
}
|
||||
|
||||
.status-label {
|
||||
display: block;
|
||||
color: $blue;
|
||||
}
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -303,20 +305,20 @@ input.courseware-unit-search-input {
|
||||
}
|
||||
|
||||
.gradable-status {
|
||||
float: left;
|
||||
float: right;
|
||||
position: relative;
|
||||
top: -4px;
|
||||
right: 50px;
|
||||
width: 145px;
|
||||
|
||||
.status-label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 2px;
|
||||
top: 2px;
|
||||
right: -5px;
|
||||
display: none;
|
||||
width: 100px;
|
||||
padding: 10px 20px 10px 10px;
|
||||
width: 110px;
|
||||
padding: 5px 20px 5px 10px;
|
||||
@include border-radius(3px);
|
||||
background: $lightGrey;
|
||||
color: $lightGrey;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
@@ -371,6 +373,7 @@ input.courseware-unit-search-input {
|
||||
}
|
||||
|
||||
a {
|
||||
color: $blue;
|
||||
|
||||
&.is-selected {
|
||||
font-weight: bold;
|
||||
|
||||
@@ -145,24 +145,24 @@
|
||||
<span class="published-status"><strong>Will Release:</strong> ${start_date_str} at ${start_time_str}</span>
|
||||
<a href="#" class="edit-button" data-date="${start_date_str}" data-time="${start_time_str}" data-id="${section.location}">Edit</a>
|
||||
%endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gradable-status">
|
||||
<h4 class="status-label">Not Graded</h4>
|
||||
|
||||
<div class="gradable-status">
|
||||
<h4 class="status-label">Not Graded</h4>
|
||||
|
||||
<a class="menu-toggle" href="#">
|
||||
<span class="ss-icon ss-standard">✓</span>
|
||||
</a>
|
||||
|
||||
<ul class="menu">
|
||||
<li><a class="is-selected" href="#">Homework</a></li>
|
||||
<li><a href="#">Finger Exercises</a></li>
|
||||
<li><a href="#">Lab</a></li>
|
||||
<li><a href="#">Midterm Exam</a></li>
|
||||
<li><a href="#">Final Exam</a></li>
|
||||
<li><a class="gradable-status-notgraded" href="#">Not Graded</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<a class="menu-toggle" href="#">
|
||||
<span class="ss-icon ss-standard">✓</span>
|
||||
</a>
|
||||
|
||||
<ul class="menu">
|
||||
<li><a class="is-selected" href="#">Homework</a></li>
|
||||
<li><a href="#">Finger Exercises</a></li>
|
||||
<li><a href="#">Lab</a></li>
|
||||
<li><a href="#">Midterm Exam</a></li>
|
||||
<li><a href="#">Final Exam</a></li>
|
||||
<li><a class="gradable-status-notgraded" href="#">Not Graded</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="item-actions">
|
||||
|
||||
Reference in New Issue
Block a user