Commit a7048f92 by Giulio Gratta

Merge pull request #2394 from edx/giulio/highlight-notification-checkbox

Make notification checkbox more obvious
parents cac83948 90e9938e
...@@ -1296,22 +1296,30 @@ body.discussion { ...@@ -1296,22 +1296,30 @@ body.discussion {
} }
.row-item-full { .row-item-full {
.email-setting { .notification-checkbox {
display: inline-block;
text-align: center;
vertical-align: middle;
margin-left: $baseline/2;
}
.icon {
display: inline-block; display: inline-block;
padding: $baseline/4 0 $baseline/2 0;
margin-right: $baseline/2;
border-radius: 5px;
border: 1px solid gray;
.email-setting {
display: inline-block;
text-align: center;
vertical-align: middle;
margin-left: $baseline/2;
}
.icon {
display: inline-block;
}
.email-setting:checked ~ .icon {
color: $green;
}
} }
.email-setting:checked ~ .icon {
color: $green;
}
.row-description { .row-description {
display: inline-block; display: inline-block;
width:80%; width:80%;
......
...@@ -233,57 +233,61 @@ ...@@ -233,57 +233,61 @@
</script> </script>
<script type="text/template" id="discussion-home"> <script type="text/template" id="discussion-home">
<div class="discussion-article blank-slate"> <div class="discussion-article blank-slate">
<section class="home-header"> <section class="home-header">
<span class="label">${_("DISCUSSION HOME:")}</span> <span class="label">${_("DISCUSSION HOME:")}</span>
% if course and course.display_name_with_default: % if course and course.display_name_with_default:
<h1 class="home-title">${course.display_name_with_default}</h1> <h1 class="home-title">${course.display_name_with_default}</h1>
</section> % endif
</section>
% if settings.FEATURES.get('ENABLE_DISCUSSION_HOME_PANEL'):
<span class="label label-settings">${_("HOW TO USE EDX DISCUSSIONS")}</span> % if settings.FEATURES.get('ENABLE_DISCUSSION_HOME_PANEL'):
<table class="home-helpgrid"> <span class="label label-settings">${_("HOW TO USE EDX DISCUSSIONS")}</span>
<tr class="helpgrid-row helpgrid-row-navigation"> <table class="home-helpgrid">
<td class="row-title">${_("Find discussions")}</td> <tr class="helpgrid-row helpgrid-row-navigation">
<td class="row-item"> <td class="row-title">${_("Find discussions")}</td>
<i class="icon icon-reorder"></i> <td class="row-item">
<span class="row-description">${_("Focus in on specific topics")}</span> <i class="icon icon-reorder"></i>
</td> <span class="row-description">${_("Focus in on specific topics")}</span>
<td class="row-item"> </td>
<i class="icon icon-search"></i> <td class="row-item">
<span class="row-description">${_("Search for specific posts ")}</span> <i class="icon icon-search"></i>
</td> <span class="row-description">${_("Search for specific posts ")}</span>
<td class="row-item"> </td>
<i class="icon icon-sort"></i> <td class="row-item">
<span class="row-description">${_("Sort by date, vote, or comments")}</span> <i class="icon icon-sort"></i>
</td> <span class="row-description">${_("Sort by date, vote, or comments")}</span>
</tr> </td>
<tr class="helpgrid-row helpgrid-row-participation"> </tr>
<td class="row-title">${_("Engage with posts")}</td> <tr class="helpgrid-row helpgrid-row-participation">
<td class="row-item"> <td class="row-title">${_("Engage with posts")}</td>
<i class="icon icon-plus"></i> <td class="row-item">
<span class="row-description">${_("Upvote posts and good responses")}</span> <i class="icon icon-plus"></i>
</td> <span class="row-description">${_("Upvote posts and good responses")}</span>
<td class="row-item"> </td>
<i class="icon icon-flag"></i> <td class="row-item">
<span class="row-description">${_("Report Forum Misuse")}</span> <i class="icon icon-flag"></i>
</td> <span class="row-description">${_("Report Forum Misuse")}</span>
<td class="row-item"> </td>
<i class="icon icon-star"></i> <td class="row-item">
<span class="row-description">${_("Follow posts for updates")}</span> <i class="icon icon-star"></i>
</td> <span class="row-description">${_("Follow posts for updates")}</span>
</tr> </td>
<tr class="helpgrid-row helpgrid-row-notification"> </tr>
<td class="row-title">${_('Receive updates')}</td> <tr class="helpgrid-row helpgrid-row-notification">
<td class="row-item-full" colspan="3"> <td class="row-title">${_('Receive updates')}</td>
<label class="sr" for="email-setting-checkbox">${_("Toggle Notifications Setting")}</label> <td class="row-item-full" colspan="3">
<input type="checkbox" id="email-setting-checkbox" class="email-setting" name="email-notification"/> <label for="email-setting-checkbox">
<i class="icon icon-envelope"></i> <span class="sr">${_("Toggle Notifications Setting")}</span>
<span class="row-description">${_("If enabled, you will receive an email digest once a day notifying you about new, unread activity from posts you are following.")}</span> <span class="notification-checkbox">
</td> <input type="checkbox" id="email-setting-checkbox" class="email-setting" name="email-notification"/>
</tr> <i class="icon icon-envelope"></i>
</table> </span>
% endif </label>
% endif <span class="row-description">${_("Check this box to receive an email digest once a day notifying you about new, unread activity from posts you are following.")}</span>
</td>
</tr>
</table>
% endif
</div> </div>
</script> </script>
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