Skip to content

E
edx-platform
Commit fbd0f1be by Kevin Chugh
Options

wire up static HTML to allow panel functionality

parents 978d33ba f94ec6cf
Showing with 232 additions and 29 deletions
lms/static/fonts/vendor/fontawesome-webfont.svg 0 → 100755
This source diff could not be displayed because it is too large. You can view the blob instead.
lms/static/sass/_discussion-old.scss
...@@ -68,7 +68,10 @@ ...@@ -68,7 +68,10 @@
width: 16px; width: 16px;
height: 17px; height: 17px;
margin: 7px 7px 0 0; margin: 7px 7px 0 0;
background: url(../images/new-post-icon.png) no-repeat; font-size: 16px;
padding-right: $baseline/2;
vertical-align: middle;
color: $white;
} }
.post-search { .post-search {
......
lms/static/sass/application.scss.mako
@import 'bourbon/bourbon'; // lms - css application architecture
// ====================
// libs and resets *do not edit*
@import 'bourbon/bourbon'; // lib - bourbon
// VENDOR + REBASE *referenced/used vendor presentation and reset*
// ====================
@import 'base/reset'; @import 'base/reset';
@import 'base/font_face'; @import 'vendor/font-awesome';
// BASE *default edX offerings*
// ====================
// base - utilities
@import 'base/mixins'; @import 'base/mixins';
@import 'base/variables'; @import 'base/variables';
...@@ -19,10 +32,16 @@ ...@@ -19,10 +32,16 @@
% endif % endif
@import 'base/base'; @import 'base/base';
// base - assets
@import 'base/font_face';
@import 'base/extends'; @import 'base/extends';
@import 'base/animations'; @import 'base/animations';
// base - starter
@import 'base/base';
// Multicourse styles // shared - course
@import 'shared/forms'; @import 'shared/forms';
@import 'shared/footer'; @import 'shared/footer';
@import 'shared/header'; @import 'shared/header';
...@@ -31,6 +50,7 @@ ...@@ -31,6 +50,7 @@
@import 'shared/modal'; @import 'shared/modal';
@import 'shared/activation_messages'; @import 'shared/activation_messages';
// shared - platform
@import 'multicourse/home'; @import 'multicourse/home';
@import 'multicourse/dashboard'; @import 'multicourse/dashboard';
@import 'multicourse/account'; @import 'multicourse/account';
...@@ -46,7 +66,8 @@ ...@@ -46,7 +66,8 @@
@import 'multicourse/help'; @import 'multicourse/help';
@import 'multicourse/edge'; @import 'multicourse/edge';
// applications
@import 'discussion'; @import 'discussion';
@import 'news'; @import 'news';
@import 'shame'; @import 'shame'; // shame file - used for any bad-form/orphaned scss that knowingly violate edX FED architecture/standards (see - http://csswizardry.com/2013/04/shame-css/)
lms/static/sass/base/_variables.scss
// lms - utilities - variables
// ====================
$baseline: 20px; $baseline: 20px;
// grid
$gw-column: 80px; $gw-column: 80px;
$gw-gutter: 20px; $gw-gutter: 20px;
...@@ -9,6 +13,9 @@ $fg-max-columns: 12; ...@@ -9,6 +13,9 @@ $fg-max-columns: 12;
$fg-max-width: 1400px; $fg-max-width: 1400px;
$fg-min-width: 810px; $fg-min-width: 810px;
// ====================
// fonts
$sans-serif: 'Open Sans', $verdana; $sans-serif: 'Open Sans', $verdana;
$monospace: Monaco, 'Bitstream Vera Sans Mono', 'Lucida Console', monospace; $monospace: Monaco, 'Bitstream Vera Sans Mono', 'Lucida Console', monospace;
$body-font-family: $sans-serif; $body-font-family: $sans-serif;
...@@ -22,12 +29,115 @@ $base-font-color: rgb(60,60,60); ...@@ -22,12 +29,115 @@ $base-font-color: rgb(60,60,60);
$lighter-base-font-color: rgb(100,100,100); $lighter-base-font-color: rgb(100,100,100);
$very-light-text: #fff; $very-light-text: #fff;
$white: rgb(255,255,255); // ====================
// colors - new reorganized colors
$black: rgb(0,0,0); $black: rgb(0,0,0);
$blue: rgb(29,157,217); $black-t0: rgba(0,0,0,0.125);
$pink: rgb(182,37,104); $black-t1: rgba(0,0,0,0.25);
$yellow: rgb(255, 252, 221); $black-t2: rgba(0,0,0,0.50);
$black-t3: rgba(0,0,0,0.75);
$white: rgb(255,255,255);
$white-t0: rgba(255,255,255,0.125);
$white-t1: rgba(255,255,255,0.25);
$white-t2: rgba(255,255,255,0.50);
$white-t3: rgba(255,255,255,0.75);
$gray: rgb(127,127,127);
$gray-l1: tint($gray,20%);
$gray-l2: tint($gray,40%);
$gray-l3: tint($gray,60%);
$gray-l4: tint($gray,80%);
$gray-l5: tint($gray,90%);
$gray-l6: tint($gray,95%);
$gray-d1: shade($gray,20%);
$gray-d2: shade($gray,40%);
$gray-d3: shade($gray,60%);
$gray-d4: shade($gray,80%);
//new blue
$pink: rgb(183,37,103);
$pink-l1: tint($pink,20%);
$pink-l2: tint($pink,40%);
$pink-l3: tint($pink,60%);
$pink-l4: tint($pink,80%);
$pink-l5: tint($pink,90%);
$pink-d1: shade($pink,20%);
$pink-d2: shade($pink,40%);
$pink-d3: shade($pink,60%);
$pink-d4: shade($pink,80%);
$pink-s1: saturate($pink,15%);
$pink-s2: saturate($pink,30%);
$pink-s3: saturate($pink,45%);
$pink-u1: desaturate($pink,15%);
$pink-u2: desaturate($pink,30%);
$pink-u3: desaturate($pink,45%);
$red: rgb(178, 6, 16); $red: rgb(178, 6, 16);
$red-l1: tint($red,20%);
$red-l2: tint($red,40%);
$red-l3: tint($red,60%);
$red-l4: tint($red,80%);
$red-l5: tint($red,90%);
$red-d1: shade($red,20%);
$red-d2: shade($red,40%);
$red-d3: shade($red,60%);
$red-d4: shade($red,80%);
$red-s1: saturate($red,15%);
$red-s2: saturate($red,30%);
$red-s3: saturate($red,45%);
$red-u1: desaturate($red,15%);
$red-u2: desaturate($red,30%);
$red-u3: desaturate($red,45%);
$green: rgb(37, 184, 90);
$green-l1: tint($green,20%);
$green-l2: tint($green,40%);
$green-l3: tint($green,60%);
$green-l4: tint($green,80%);
$green-l5: tint($green,90%);
$green-d1: shade($green,20%);
$green-d2: shade($green,40%);
$green-d3: shade($green,60%);
$green-d4: shade($green,80%);
$green-s1: saturate($green,15%);
$green-s2: saturate($green,30%);
$green-s3: saturate($green,45%);
$green-u1: desaturate($green,15%);
$green-u2: desaturate($green,30%);
$green-u3: desaturate($green,45%);
//new yellow
$orange: rgb(237, 189, 60);
$orange-l1: tint($orange,20%);
$orange-l2: tint($orange,40%);
$orange-l3: tint($orange,60%);
$orange-l4: tint($orange,80%);
$orange-l5: tint($orange,90%);
$orange-d1: shade($orange,20%);
$orange-d2: shade($orange,40%);
$orange-d3: shade($orange,60%);
$orange-d4: shade($orange,80%);
$orange-s1: saturate($orange,15%);
$orange-s2: saturate($orange,30%);
$orange-s3: saturate($orange,45%);
$orange-u1: desaturate($orange,15%);
$orange-u2: desaturate($orange,30%);
$orange-u3: desaturate($orange,45%);
$shadow: rgba(0,0,0,0.2);
$shadow-l1: rgba(0,0,0,0.1);
$shadow-l2: rgba(0,0,0,0.05);
$shadow-d1: rgba(0,0,0,0.4);
// ====================
// colors - old variables
$blue: rgb(29,157,217); //old blue
$yellow: rgb(255, 252, 221); //old yellow
$error-red: rgb(253, 87, 87); $error-red: rgb(253, 87, 87);
$light-gray: rgb(221, 221, 221); $light-gray: rgb(221, 221, 221);
$dark-gray: rgb(51, 51, 51); $dark-gray: rgb(51, 51, 51);
...@@ -40,7 +150,7 @@ $light-gray: #ddd; ...@@ -40,7 +150,7 @@ $light-gray: #ddd;
$dark-gray: #333; $dark-gray: #333;
// edx.org-related // edx.org-related
$m-gray-l1: rgb(203,203,203); $m-gray-l1: rgb(203,203,203);
$m-gray-l2: rgb(246,246,246); $m-gray-l2: rgb(246,246,246);
$m-gray: rgb(153,153,153); $m-gray: rgb(153,153,153);
$m-gray-d1: rgb(102,102,102); $m-gray-d1: rgb(102,102,102);
......
lms/templates/discussion/_discussion_course_navigation.html
...@@ -3,6 +3,6 @@ ...@@ -3,6 +3,6 @@
<%block name="extratabs"> <%block name="extratabs">
% if has_permission(user, 'create_thread', course.id): % if has_permission(user, 'create_thread', course.id):
<li class="right"><a href="#" class="new-post-btn"><span class="new-post-icon"></span>New Post</a></li> <li class="right"><a href="#" class="new-post-btn"><span class="icon icon-edit new-post-icon"></span>New Post</a></li>
% endif % endif
</%block> </%block>
\ No newline at end of file
lms/templates/discussion/_discussion_module.html
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="discussion-module" data-discussion-id="${discussion_id | h}"> <div class="discussion-module" data-discussion-id="${discussion_id | h}">
<a class="discussion-show control-button" href="javascript:void(0)" data-discussion-id="${discussion_id | h}"><span class="show-hide-discussion-icon"></span><span class="button-text">Show Discussion</span></a> <a class="discussion-show control-button" href="javascript:void(0)" data-discussion-id="${discussion_id | h}"><span class="show-hide-discussion-icon"></span><span class="button-text">Show Discussion</span></a>
<a href="#" class="new-post-btn"><span class="new-post-icon"></span>New Post</a> <a href="#" class="new-post-btn"><span class="icon icon-edit new-post-icon"></span>New Post</a>
</div> </div>
lms/templates/discussion/_filter_dropdown.html
...@@ -11,12 +11,12 @@ ...@@ -11,12 +11,12 @@
</%def> </%def>
<%def name="render_entry(entries, entry)"> <%def name="render_entry(entries, entry)">
<li><a href="#"><span class="board-name" data-discussion_id='${json.dumps(entries[entry])}' cohorted = "${entries[entry]['id'] in cohorted_commentables}">${entry}</span></a></li> <li><a href="#" class="drop-menu-entry"><span class="board-name" data-discussion_id='${json.dumps(entries[entry])}' cohorted = "${entries[entry]['id'] in cohorted_commentables}">${entry}</span></a></li>
</%def> </%def>
<%def name="render_category(categories, category)"> <%def name="render_category(categories, category)">
<li> <li>
<a href="#"><span class="board-name">${category}</span></a> <a href="#" class="drop-menu-parent-category"><span class="board-name">${category}</span></a>
<ul> <ul>
${render_dropdown(categories[category])} ${render_dropdown(categories[category])}
</ul> </ul>
...@@ -29,21 +29,21 @@ ...@@ -29,21 +29,21 @@
</div> </div>
<ul class="browse-topic-drop-menu"> <ul class="browse-topic-drop-menu">
<li> <li>
<a href="#"> <a href="#" class="drop-menu-meta-category">
<span class="board-name" data-discussion_id='#all'>Show All Discussions</span> <span class="board-name" data-discussion_id='#all'>Show All Discussions</span>
</a> </a>
</li> </li>
%if flag_moderator: %if flag_moderator:
<li> <li>
<a href="#"> <a href="#">
<span class="board-name" data-discussion_id='#flagged'>Show Flagged Discussions</span> <span class="board-name" data-discussion_id='#flagged'><i class="icon-flag" style="padding-right:5px;"></i>Show Flagged Discussions</span>
</a> </a>
</li> </li>
%endif %endif
<li> <li>
<a href="#"> <a href="#" class="drop-menu-meta-category">
<span class="board-name" data-discussion_id='#following'>Following</span> <span class="board-name" data-discussion_id='#following'><i class="icon-star" style="padding-right:5px;"></i>Posts I'm Following</span>
</a> </a>
</li> </li>
${render_dropdown(category_map)} ${render_dropdown(category_map)}
......
lms/templates/discussion/_thread_list_template.html
<script type="text/template" id="thread-list-template"> <script type="text/template" id="thread-list-template">
<div class="browse-search"> <div class="browse-search">
<div class="home">
<a href="#" class="home-icon">
<i class="icon-home"></i>
</a>
</div>
<div class="browse is-open"> <div class="browse is-open">
<a href="#" class="browse-topic-drop-icon"></a> <a href="#" class="browse-topic-drop-icon"></a>
<a href="#" class="browse-topic-drop-btn"><span class="current-board">Show All Discussions</span> <span class="drop-arrow">▾</span></a> <a href="#" class="browse-topic-drop-btn"><span class="current-board">Show All Discussions</span> <span class="drop-arrow">▾</span></a>
......
lms/templates/discussion/_underscore_templates.html
...@@ -48,17 +48,17 @@ ...@@ -48,17 +48,17 @@
<div class="post-body">${'<%- body %>'}</div> <div class="post-body">${'<%- body %>'}</div>
<div class="discussion-flag-abuse notflagged" data-role="thread-flag" data-tooltip="Report Misuse"> <div class="discussion-flag-abuse notflagged" data-role="thread-flag" data-tooltip="Report Misuse">
<i class="icon"></i><span class="flag-label">Report Misuse</span></div> <i class="icon icon-flag"></i><span class="flag-label">Report Misuse</span></div>
% if course and has_permission(user, 'openclose_thread', course.id): % if course and has_permission(user, 'openclose_thread', course.id):
<div class="admin-pin discussion-pin notpinned" data-role="thread-pin" data-tooltip="pin this thread"> <div class="admin-pin discussion-pin notpinned" data-role="thread-pin" data-tooltip="pin this thread">
<i class="icon"></i><span class="pin-label">Pin Thread</span></div> <i class="icon icon-pushpin"></i><span class="pin-label">Pin Thread</span></div>
%else: %else:
${"<% if (pinned) { %>"} ${"<% if (pinned) { %>"}
<div class="discussion-pin notpinned" data-role="thread-pin" data-tooltip="pin this thread"> <div class="discussion-pin notpinned" data-role="thread-pin" data-tooltip="pin this thread">
<i class="icon"></i><span class="pin-label">Pin Thread</span></div> <i class="icon icon-pushpin"></i><span class="pin-label">Pin Thread</span></div>
${"<% } %>"} ${"<% } %>"}
% endif % endif
...@@ -126,7 +126,7 @@ ...@@ -126,7 +126,7 @@
</header> </header>
<div class="response-local"><div class="response-body">${"<%- body %>"}</div> <div class="response-local"><div class="response-body">${"<%- body %>"}</div>
<div class="discussion-flag-abuse notflagged" data-role="thread-flag" data-tooltip="report misuse"> <div class="discussion-flag-abuse notflagged" data-role="thread-flag" data-tooltip="report misuse">
<i class="icon"></i><span class="flag-label">Report Misuse</span></div> <i class="icon icon-flag"></i><span class="flag-label">Report Misuse</span></div>
</div> </div>
<ul class="moderator-actions response-local"> <ul class="moderator-actions response-local">
<li style="display: none"><a class="action-edit" href="javascript:void(0)"><span class="edit-icon"></span> Edit</a></li> <li style="display: none"><a class="action-edit" href="javascript:void(0)"><span class="edit-icon"></span> Edit</a></li>
...@@ -150,8 +150,8 @@ ...@@ -150,8 +150,8 @@
<script type="text/template" id="response-comment-show-template"> <script type="text/template" id="response-comment-show-template">
<div id="comment_${'<%- id %>'}"> <div id="comment_${'<%- id %>'}">
<div class="response-body">${'<%- body %>'}</div> <div class="response-body">${'<%- body %>'}</div>
<div class="discussion-flag-abuse notflagged" data-role="thread-flag" data-tooltip="report misuse"> <div class="discussion-flag-abuse notflagged" data-role="thread-flag" data-tooltip="Report Misuse">
<i class="icon"></i><span class="flag-label"></span></div> <i class="icon icon-flag"></i><span class="flag-label"></span></div>
<p class="posted-details">&ndash;posted <span class="timeago" title="${'<%- created_at %>'}">${'<%- created_at %>'}</span> by <p class="posted-details">&ndash;posted <span class="timeago" title="${'<%- created_at %>'}">${'<%- created_at %>'}</span> by
${"<% if (obj.username) { %>"} ${"<% if (obj.username) { %>"}
<a href="${'<%- user_url %>'}" class="profile-link">${'<%- username %>'}</a> <a href="${'<%- user_url %>'}" class="profile-link">${'<%- username %>'}</a>
......
lms/templates/discussion/index.html
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<%block name="headextra"> <%block name="headextra">
<%static:css group='course'/> <%static:css group='course'/>
<%include file="_js_head_dependencies.html" /> <%include file="_js_head_dependencies.html" />
</%block> </%block>
<%block name="js_extra"> <%block name="js_extra">
...@@ -26,12 +26,75 @@ ...@@ -26,12 +26,75 @@
<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">
<h1>${course.display_name_with_default} Discussion</h1> <section class="home-header">
<span class="label">DISCUSSION HOME:</span>
<h1 class="home-title">${course.display_name_with_default}</h1>
</section>
<section class="home-stats">
<div class="label-area">
<span class="label"> PROFILE, PARTICIPATION</span>
<a href="#" class="profile-link">Your profile Name</a>
</div>
<div class="stats-grouping">
<div class="profile-stat profile-stat-posts">
<span class="count count-posts">5</span>
<span class="profile-stat-label">POSTS</span>
</div>
<div class="profile-stat profile-stat-comments">
<span class="count count-comments">12</span>
<span class="profile-stat-label">COMMENTS</span>
</div>
<div class="profile-stat profile-stat-following">
<span class="count count-following">9</span>
<span class="profile-stat-label">FOLLOWING</span>
</div>
</div>
</section>
<span class="label label-settings">HOW TO USE EDX DISCUSSIONS</span>
<table class="home-helpgrid">
<tr class="helpgrid-row helpgrid-row-navigation">
<td class="row-title">Find discussions</td>
<td class="row-item">
<i class="icon icon-reorder"></i>
<span class="row-description">Focus in on specific topics</span>
</td>
<td class="row-item">
<i class="icon icon-search"></i>
<span class="row-description">Search for specific posts </span>
</td>
<td class="row-item">
<i class="icon icon-sort"></i>
<span class="row-description">Sort by date, vote, or comments </span>
</td>
</tr>
<tr class="helpgrid-row helpgrid-row-participation">
<td class="row-title">Engage with posts</td>
<td class="row-item">
<i class="icon icon-plus"></i>
<span class="row-description">Upvote posts and good responses</span>
</td>
<td class="row-item">
<i class="icon icon-flag"></i>
<span class="row-description">Report Forum Misuse</span>
</td>
<td class="row-item">
<i class="icon icon-star"></i>
<span class="row-description">Follow posts for updates</span>
</td>
</tr>
<tr class="helpgrid-row helpgrid-row-notification">
<td class="row-title">Receive updates</td>
<td class="row-item-full" colspan="3">
<i class="icon icon-envelope"></i>
<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>
</td>
</tr>
</table>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<%include file="_underscore_templates.html" /> <%include file="_underscore_templates.html" />
<%include file="_thread_list_template.html" /> <%include file="_thread_list_template.html" />
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