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

studio - checklists: revised input/label HTML and adjusted styling for each

Browse Source
This commit is contained in:
Brian Talbot
2013-03-14 16:17:47 -04:00
parent ac25b02ce6
commit 13c38fa173
2 changed files with 51 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
cms/static/sass/_checklists.scss
View File

@@ -56,7 +56,7 @@ body.course.checklists {
.checklist-title {
@include transition(color .15s .25s ease-in-out);
width: flex-grid(7, 9);
width: flex-grid(6, 9);
margin: 0 flex-gutter() 0 0;
float: left;
@@ -64,14 +64,6 @@ body.course.checklists {
@include font-size(14);
display: inline-block;
vertical-align: middle;
margin-right: $baseline;
color: $gray-l4;
}
.icon-confirm {
@include font-size(20);
display: inline-block;
vertical-align: middle;
margin-right: ($baseline/2);
color: $gray-l4;
}
@@ -91,11 +83,20 @@ body.course.checklists {
.checklist-status {
@include font-size(13);
width: flex-grid(2, 9);
width: flex-grid(3, 9);
float: right;
margin-top: ($baseline/2);
text-align: right;
color: $gray-l2;
.icon-confirm {
@include font-size(20);
display: inline-block;
vertical-align: middle;
margin-left: ($baseline/2);
color: $gray-l4;
}
.status-count {
@include font-size(16);
@@ -192,13 +193,6 @@ body.course.checklists {
color: $green;
}
}
.checklist-status .icon-confirm {
@include font-size(12);
display: inline-block;
vertical-align: middle;
margin-right: ($baseline/4);
}
}
}
@@ -230,41 +224,38 @@ body.course.checklists {
border-bottom: none;
}
label {
.task-input {
display: inline-block;
vertical-align: text-top;
float: left;
width: flex-grid(7,9);
margin: ($baseline/2) flex-gutter() 0 0;
}
.task-details {
display: inline-block;
vertical-align: text-top;
float: left;
width: flex-grid(6,9);
font-weight: 500;
.task-input {
display: inline-block;
vertical-align: text-top;
margin: ($baseline/2) flex-gutter() 0 0;
.task-name {
@include transition(color .15s .25s ease-in-out);
vertical-align: baseline;
cursor: pointer;
margin-bottom: 0;
}
.task-description {
@include transition(color .15s .25s ease-in-out);
@include font-size(14);
color: $gray-l2;
}
.task-details {
display: inline-block;
vertical-align: text-top;
width: flex-grid(6,7);
.task-name {
@include transition(color .15s .25s ease-in-out);
vertical-align: baseline;
cursor: pointer;
margin-bottom: 0;
}
.task-description {
@include transition(color .15s .25s ease-in-out);
@include font-size(14);
color: $gray-l2;
}
.task-support {
@include transition(opacity .15s .25s ease-in-out);
@include font-size(12);
opacity: 0;
pointer-events: none;
}
.task-support {
@include transition(opacity .15s .25s ease-in-out);
@include font-size(12);
opacity: 0;
pointer-events: none;
}
}
@@ -273,7 +264,7 @@ body.course.checklists {
@include clearfix();
display: inline-block;
vertical-align: middle;
float: left;
float: right;
width: flex-grid(2,9);
margin: ($baseline/2) 0 0 flex-gutter();
opacity: 0;

26
cms/templates/checklists.html
View File

@@ -48,27 +48,25 @@
<section class="course-checklist" id=${'course-checklist' + str(loop.index)}>
<span class="viz viz-checklist-status"><span class="viz value viz-checklist-status-value"><span class="int">0</span>% of checklist completed</span></span>
<header>
<h3 class="checklist-title title-2" title="Collapse/Expand this Checklist">
<h3 class="checklist-title title-2 is-selectable" title="Collapse/Expand this Checklist">
<i class="ss-icon ss-symbolicons-standard icon-arrow ui-toggle-expansion">&#x25BE;</i>
<i class="ss-icon ss-symbolicons-standard icon-confirm">&#x2713;</i>${checklist['short_description']}</h3>
<span class="checklist-status status">Tasks Completed: <span class="status-count">0</span>/<span class="status-amount">4</span></span>
${checklist['short_description']}</h3>
<span class="checklist-status status">
Tasks Completed: <span class="status-count">0</span>/<span class="status-amount">4</span>
<i class="ss-icon ss-symbolicons-standard icon-confirm">&#x2713;</i>
</span>
</header>
<ul class="list list-tasks">
% for item in checklist['items']:
<li class="task">
<label for=${'course-checklist' + str(loop.parent.index) + '-task' + str(loop.index)}>
<input type="checkbox" class="task-input" name=${'course-checklist' + str(loop.parent.index) + '-task' + str(loop.index)}
id=${'course-checklist' + str(loop.parent.index) + '-task' + str(loop.index)}
value=${item['is_checked']}>
<div class="task-details">
<h4 class="task-name title title-3">${item['short_description']}</h4>
<p class="task-description">${item['long_description']}</p>
</div>
<input type="checkbox" class="task-input" name=${'course-checklist' + str(loop.parent.index) + '-task' + str(loop.index)}
id=${'course-checklist' + str(loop.parent.index) + '-task' + str(loop.index)}
value=${item['is_checked']}>
<label class="task-details" for=${'course-checklist' + str(loop.parent.index) + '-task' + str(loop.index)}>
<h4 class="task-name title title-3">${item['short_description']}</h4>
<p class="task-description">${item['long_description']}</p>
</label>
% if item['action_text'] is not '' and item['action_url'] is not '':