Skip to content

E
edx-platform
Commit 3495cebf by marco
Options

modified html for discussion home to use tables instead of lists, cleaned up styling as well

parent 9eca5577
Showing with 80 additions and 92 deletions
lms/static/sass/_discussion.scss
...@@ -68,7 +68,7 @@ ...@@ -68,7 +68,7 @@
font-family: 'Monaco', monospace; font-family: 'Monaco', monospace;
font-size: 13px; font-size: 13px;
line-height: 1.6; line-height: 1.6;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; box-shadow: 0 1px 3px $black-t0 inset;
} }
@mixin discussion-wmd-preview { @mixin discussion-wmd-preview {
...@@ -1365,35 +1365,27 @@ body.discussion { ...@@ -1365,35 +1365,27 @@ body.discussion {
} }
} }
.helpgrid-list { .helpgrid-row {
list-style-type: none;
padding: 0;
margin: 0;
.helpgrid-row {
border-bottom: 1px solid #b2b2b2; border-bottom: 1px solid #b2b2b2;
.row-title { .row-title {
padding: 30px $baseline; padding: 30px $baseline;
display: inline-block; //width: 15%;
width: 15%;
background-color: $gray-l4; background-color: $gray-l4;
font-size: 12px; font-size: 12px;
} }
.row-item-full, .row-item { .row-item-full, .row-item {
display: inline-block;
font-size: 12px; font-size: 12px;
padding-left: $baseline/2; padding-left: $baseline/2;
width: 23%; width: 30%;
vertical-align: middle; vertical-align: middle;
.icon { .icon {
padding: 0 $baseline/2; padding: 0 $baseline/2;
font-size: 24px; font-size: 24px;
display: inline-block;
vertical-align: middle; vertical-align: middle;
display: table-cell;
} }
.icon-stack i { .icon-stack i {
...@@ -1401,22 +1393,23 @@ body.discussion { ...@@ -1401,22 +1393,23 @@ body.discussion {
} }
.row-description { .row-description {
display: inline-block;
width: 70%;
vertical-align: middle; vertical-align: middle;
display: table-cell;
} }
} }
.row-item-full { .row-item-full {
width: 77%;
.row-setting {
display: table-cell;
vertical-align: middle;
}
.row-description { .row-description {
width: 80%;
padding-left: 15px; padding-left: 15px;
} }
} }
} }
}
.helpgrid-row-navigation { .helpgrid-row-navigation {
.icon-reorder {color: $light-gray;} .icon-reorder {color: $light-gray;}
......
lms/templates/discussion/index.html
...@@ -22,82 +22,77 @@ ...@@ -22,82 +22,77 @@
<%include file="_new_post.html" /> <%include file="_new_post.html" />
<section class="discussion container" id="discussion-container" data-roles="${roles}" data-course-id="${course_id}" data-user-info="${user_info}" data-threads="${threads}" data-thread-pages="${thread_pages}" data-content-info="${annotated_content_info}" data-flag-moderator="${flag_moderator}"> <section class="discussion container" id="discussion-container" data-roles="${roles}" data-course-id="${course_id}" data-user-info="${user_info}" data-threads="${threads}" data-thread-pages="${thread_pages}" data-content-info="${annotated_content_info}" data-flag-moderator="${flag_moderator}">
<div class="discussion-body"> <div class="discussion-body">
<div class="sidebar"></div> <div class="sidebar"></div>
<div class="discussion-column"> <div class="discussion-column">
<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>
<h1 class="home-title">${course.display_name_with_default}</h1> <h1 class="home-title">${course.display_name_with_default}</h1>
<p class="home-description">Welcome to ${course.display_name_with_default}s Discussion Home. Select a discussion from the left, or review your profile, participation and email notification settings below. </section>
</p> <section class="home-stats">
</section> <div class="label-area">
<section class="home-stats"> <span class="label"> PROFILE, PARTICIPATION</span>
<div class="label-area"> <a href="#" class="profile-link">Your profile Name</a>
<span class="label"> PROFILE, PARTICIPATION</span> </div>
<a href="#" class="profile-link">Your profile Name</a> <div class="stats-grouping">
</div> <div class="profile-stat profile-stat-posts">
<div class="stats-grouping"> <span class="count count-posts">5</span>
<div class="profile-stat profile-stat-posts"> <span class="profile-stat-label">POSTS</span>
<span class="count count-posts">5</span> </div>
<span class="profile-stat-label">POSTS</span> <div class="profile-stat profile-stat-comments">
</div> <span class="count count-comments">12</span>
<div class="profile-stat profile-stat-comments"> <span class="profile-stat-label">COMMENTS</span>
<span class="count count-comments">12</span> </div>
<span class="profile-stat-label">COMMENTS</span> <div class="profile-stat profile-stat-following">
</div> <span class="count count-following">9</span>
<div class="profile-stat profile-stat-following"> <span class="profile-stat-label">FOLLOWING</span>
<span class="count count-following">9</span> </div>
<span class="profile-stat-label">FOLLOWING</span> </div>
</div> </section>
</div> <span class="label label-settings">HOW TO USE EDX DISCUSSIONS</span>
</section> <table class="home-helpgrid">
<span class="label label-settings">HOW TO USE EDX DISCUSSIONS</span> <tr class="helpgrid-row helpgrid-row-navigation">
<section class="home-helpgrid"> <td class="row-title">Find discussions</td>
<ul class="helpgrid-list"> <td class="row-item">
<li class="helpgrid-row helpgrid-row-navigation"> <i class="icon icon-reorder"></i>
<span class="row-title">Find discussions</span> <span class="row-description">Focus in on specific topics</span>
<div class="row-item"> </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-search"></i>
</div> <span class="row-description">Search for specific posts </span>
<div 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-sort"></i>
</div> <span class="row-description">Sort by date, vote, or comments </span>
<div class="row-item"> </td>
<i class="icon icon-sort"></i> </tr>
<span class="row-description">Sort by date, vote, or comments </span> <tr class="helpgrid-row helpgrid-row-participation">
</div> <td class="row-title">Engage with posts</td>
</li> <td class="row-item">
<li class="helpgrid-row helpgrid-row-participation"> <i class="icon icon-plus"></i>
<span class="row-title">Engage with posts</span> <span class="row-description">Upvote posts and good responses</span>
<div class="row-item"> </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-flag"></i>
</div> <span class="row-description">Report Forum Misuse</span>
<div 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-star"></i>
</div> <span class="row-description">Follow posts for updates</span>
<div class="row-item"> </td>
<i class="icon icon-star"></i> </tr>
<span class="row-description">Follow posts for updates</span> <tr class="helpgrid-row helpgrid-row-notification">
</div> <td class="row-title">Receive updates</td>
</li> <td class="row-item-full" colspan="3">
<li class="helpgrid-row helpgrid-row-notification"> <i class="icon icon-envelope"></i>
<span class="row-title">Receive updates</span>
<div class="row-item-full">
<i class="icon icon-envelope"></i>
<span class="row-setting"><input type="checkbox" name="email-notification"></input></span> <span class="row-setting"><input type="checkbox" name="email-notification"></input></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="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>
</div> </td>
</li> </tr>
</ul> </table>
</section> </div>
</div>
</div>
</div>
</div> </div>
</section> </section>
......
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