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 228 additions and 25 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 @@
width: 16px;
height: 17px;
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 {
......
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/font_face';
@import 'vendor/font-awesome';
// BASE *default edX offerings*
// ====================
// base - utilities
@import 'base/mixins';
@import 'base/variables';
......@@ -19,10 +32,16 @@
% endif
@import 'base/base';
// base - assets
@import 'base/font_face';
@import 'base/extends';
@import 'base/animations';
// Multicourse styles
// base - starter
@import 'base/base';
// shared - course
@import 'shared/forms';
@import 'shared/footer';
@import 'shared/header';
......@@ -31,6 +50,7 @@
@import 'shared/modal';
@import 'shared/activation_messages';
// shared - platform
@import 'multicourse/home';
@import 'multicourse/dashboard';
@import 'multicourse/account';
......@@ -46,7 +66,8 @@
@import 'multicourse/help';
@import 'multicourse/edge';
// applications
@import 'discussion';
@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;
// grid
$gw-column: 80px;
$gw-gutter: 20px;
......@@ -9,6 +13,9 @@ $fg-max-columns: 12;
$fg-max-width: 1400px;
$fg-min-width: 810px;
// ====================
// fonts
$sans-serif: 'Open Sans', $verdana;
$monospace: Monaco, 'Bitstream Vera Sans Mono', 'Lucida Console', monospace;
$body-font-family: $sans-serif;
......@@ -22,12 +29,115 @@ $base-font-color: rgb(60,60,60);
$lighter-base-font-color: rgb(100,100,100);
$very-light-text: #fff;
$white: rgb(255,255,255);
// ====================
// colors - new reorganized colors
$black: rgb(0,0,0);
$blue: rgb(29,157,217);
$pink: rgb(182,37,104);
$yellow: rgb(255, 252, 221);
$black-t0: rgba(0,0,0,0.125);
$black-t1: rgba(0,0,0,0.25);
$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-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);
$light-gray: rgb(221, 221, 221);
$dark-gray: rgb(51, 51, 51);
......
lms/templates/discussion/_discussion_course_navigation.html
......@@ -3,6 +3,6 @@
<%block name="extratabs">
% 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
</%block>
\ No newline at end of file
lms/templates/discussion/_discussion_module.html
......@@ -2,7 +2,7 @@
<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 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>
lms/templates/discussion/_filter_dropdown.html
......@@ -11,12 +11,12 @@
</%def>
<%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 name="render_category(categories, category)">
<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>
${render_dropdown(categories[category])}
</ul>
......@@ -29,21 +29,21 @@
</div>
<ul class="browse-topic-drop-menu">
<li>
<a href="#">
<a href="#" class="drop-menu-meta-category">
<span class="board-name" data-discussion_id='#all'>Show All Discussions</span>
</a>
</li>
%if flag_moderator:
<li>
<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>
</li>
%endif
<li>
<a href="#">
<span class="board-name" data-discussion_id='#following'>Following</span>
<a href="#" class="drop-menu-meta-category">
<span class="board-name" data-discussion_id='#following'><i class="icon-star" style="padding-right:5px;"></i>Posts I'm Following</span>
</a>
</li>
${render_dropdown(category_map)}
......
lms/templates/discussion/_thread_list_template.html
<script type="text/template" id="thread-list-template">
<div class="browse-search">
<div class="home">
<a href="#" class="home-icon">
<i class="icon-home"></i>
</a>
</div>
<div class="browse is-open">
<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>
......
lms/templates/discussion/_underscore_templates.html
......@@ -48,17 +48,17 @@
<div class="post-body">${'<%- body %>'}</div>
<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):
<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:
${"<% if (pinned) { %>"}
<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
......@@ -126,7 +126,7 @@
</header>
<div class="response-local"><div class="response-body">${"<%- body %>"}</div>
<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>
<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>
......@@ -150,8 +150,8 @@
<script type="text/template" id="response-comment-show-template">
<div id="comment_${'<%- id %>'}">
<div class="response-body">${'<%- body %>'}</div>
<div class="discussion-flag-abuse notflagged" data-role="thread-flag" data-tooltip="report misuse">
<i class="icon"></i><span class="flag-label"></span></div>
<div class="discussion-flag-abuse notflagged" data-role="thread-flag" data-tooltip="Report Misuse">
<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
${"<% if (obj.username) { %>"}
<a href="${'<%- user_url %>'}" class="profile-link">${'<%- username %>'}</a>
......
lms/templates/discussion/index.html
......@@ -26,8 +26,71 @@
<div class="sidebar"></div>
<div class="discussion-column">
<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>
......
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