Skip to content

E
edx-platform
Commit 13c38fa1 by Brian Talbot
Options

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

parent ac25b02c
Showing with 51 additions and 62 deletions
cms/static/sass/_checklists.scss
...@@ -56,7 +56,7 @@ body.course.checklists { ...@@ -56,7 +56,7 @@ body.course.checklists {
.checklist-title { .checklist-title {
@include transition(color .15s .25s ease-in-out); @include transition(color .15s .25s ease-in-out);
width: flex-grid(7, 9); width: flex-grid(6, 9);
margin: 0 flex-gutter() 0 0; margin: 0 flex-gutter() 0 0;
float: left; float: left;
...@@ -64,14 +64,6 @@ body.course.checklists { ...@@ -64,14 +64,6 @@ body.course.checklists {
@include font-size(14); @include font-size(14);
display: inline-block; display: inline-block;
vertical-align: middle; 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); margin-right: ($baseline/2);
color: $gray-l4; color: $gray-l4;
} }
...@@ -91,11 +83,20 @@ body.course.checklists { ...@@ -91,11 +83,20 @@ body.course.checklists {
.checklist-status { .checklist-status {
@include font-size(13); @include font-size(13);
width: flex-grid(2, 9); width: flex-grid(3, 9);
float: right; float: right;
margin-top: ($baseline/2); margin-top: ($baseline/2);
text-align: right; text-align: right;
color: $gray-l2; color: $gray-l2;
.icon-confirm {
@include font-size(20);
display: inline-block;
vertical-align: middle;
margin-left: ($baseline/2);
color: $gray-l4;
}
.status-count { .status-count {
@include font-size(16); @include font-size(16);
...@@ -192,13 +193,6 @@ body.course.checklists { ...@@ -192,13 +193,6 @@ body.course.checklists {
color: $green; 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 { ...@@ -230,41 +224,38 @@ body.course.checklists {
border-bottom: none; border-bottom: none;
} }
label { .task-input {
display: inline-block;
vertical-align: text-top;
float: left; 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; font-weight: 500;
.task-input { .task-name {
display: inline-block; @include transition(color .15s .25s ease-in-out);
vertical-align: text-top; vertical-align: baseline;
margin: ($baseline/2) flex-gutter() 0 0; cursor: pointer;
} margin-bottom: 0;
}
.task-details { .task-description {
display: inline-block; @include transition(color .15s .25s ease-in-out);
vertical-align: text-top; @include font-size(14);
width: flex-grid(6,7); color: $gray-l2;
}
.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 { .task-support {
@include transition(opacity .15s .25s ease-in-out); @include transition(opacity .15s .25s ease-in-out);
@include font-size(12); @include font-size(12);
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
}
} }
} }
...@@ -273,7 +264,7 @@ body.course.checklists { ...@@ -273,7 +264,7 @@ body.course.checklists {
@include clearfix(); @include clearfix();
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
float: left; float: right;
width: flex-grid(2,9); width: flex-grid(2,9);
margin: ($baseline/2) 0 0 flex-gutter(); margin: ($baseline/2) 0 0 flex-gutter();
opacity: 0; opacity: 0;
......
cms/templates/checklists.html
...@@ -48,27 +48,25 @@ ...@@ -48,27 +48,25 @@
<section class="course-checklist" id=${'course-checklist' + str(loop.index)}> <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> <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> <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-arrow ui-toggle-expansion">&#x25BE;</i>
${checklist['short_description']}</h3>
<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 class="checklist-status status">Tasks Completed: <span class="status-count">0</span>/<span class="status-amount">4</span></span> <i class="ss-icon ss-symbolicons-standard icon-confirm">&#x2713;</i>
</span>
</header> </header>
<ul class="list list-tasks"> <ul class="list list-tasks">
% for item in checklist['items']: % for item in checklist['items']:
<li class="task"> <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)}
<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)}
id=${'course-checklist' + str(loop.parent.index) + '-task' + str(loop.index)} value=${item['is_checked']}>
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>
<div class="task-details"> <p class="task-description">${item['long_description']}</p>
<h4 class="task-name title title-3">${item['short_description']}</h4>
<p class="task-description">${item['long_description']}</p>
</div>
</label> </label>
% if item['action_text'] is not '' and item['action_url'] is not '': % if item['action_text'] is not '' and item['action_url'] is not '':
......
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