Skip to content

E
edx-platform
Commit 1559b86e by Tom Giannattasio
Options

added new post markup, style and basic interactions

parent 3a254380
Showing with 313 additions and 0 deletions
lms/static/js/discussions-temp.js
...@@ -9,6 +9,8 @@ var $newPost; ...@@ -9,6 +9,8 @@ var $newPost;
var $thread; var $thread;
var $sidebar; var $sidebar;
var $sidebarWidthStyles; var $sidebarWidthStyles;
var $formTopicDropBtn;
var $formTopicDropMenu;
var sidebarWidth; var sidebarWidth;
var tooltipTimer; var tooltipTimer;
var tooltipCoords; var tooltipCoords;
...@@ -22,7 +24,10 @@ $(document).ready(function() { ...@@ -22,7 +24,10 @@ $(document).ready(function() {
$topicDrop = $('.board-drop-menu'); $topicDrop = $('.board-drop-menu');
$currentBoard = $('.current-board'); $currentBoard = $('.current-board');
$tooltip = $('<div class="tooltip"></div>'); $tooltip = $('<div class="tooltip"></div>');
$newPost = $('.new-post-article');
$sidebar = $('.sidebar'); $sidebar = $('.sidebar');
$formTopicDropBtn = $('.new-post-article .topic-drop-btn');
$formTopicDropMenu = $('.new-post-article .topic-drop-menu');
$sidebarWidthStyles = $('<style></style>'); $sidebarWidthStyles = $('<style></style>');
$body.append($sidebarWidthStyles); $body.append($sidebarWidthStyles);
...@@ -31,6 +36,9 @@ $(document).ready(function() { ...@@ -31,6 +36,9 @@ $(document).ready(function() {
$browse.bind('click', showTopicDrop); $browse.bind('click', showTopicDrop);
$search.bind('click', showSearch); $search.bind('click', showSearch);
$topicDrop.bind('click', setTopic); $topicDrop.bind('click', setTopic);
$formTopicDropBtn.bind('click', showFormTopicDrop);
$formTopicDropMenu.bind('click', setFormTopic);
$('.new-post-btn').bind('click', newPost);
$('[data-tooltip]').bind({ $('[data-tooltip]').bind({
'mouseover': showTooltip, 'mouseover': showTooltip,
...@@ -145,4 +153,40 @@ function updateSidebarWidth(e) { ...@@ -145,4 +153,40 @@ function updateSidebarWidth(e) {
var titleWidth = sidebarWidth - 115; var titleWidth = sidebarWidth - 115;
console.log(titleWidth); console.log(titleWidth);
$sidebarWidthStyles.html('.discussion-body .post-list a .title { width: ' + titleWidth + 'px !important; }'); $sidebarWidthStyles.html('.discussion-body .post-list a .title { width: ' + titleWidth + 'px !important; }');
}
function newPost(e) {
$newPost.slideDown(300);
}
function showFormTopicDrop(e) {
$formTopicDropBtn.addClass('is-dropped');
$formTopicDropMenu.show();
$formTopicDropBtn.unbind('click', showFormTopicDrop);
$formTopicDropBtn.bind('click', hideFormTopicDrop);
setTimeout(function() {
$body.bind('click', hideFormTopicDrop);
}, 0);
}
function hideFormTopicDrop(e) {
$formTopicDropBtn.removeClass('is-dropped');
$formTopicDropMenu.hide();
$body.unbind('click', hideFormTopicDrop);
$formTopicDropBtn.unbind('click', hideFormTopicDrop);
$formTopicDropBtn.bind('click', showFormTopicDrop);
}
function setFormTopic(e) {
$formTopicDropBtn.removeClass('is-dropped');
hideFormTopicDrop();
var $item = $(e.target);
var boardName = $item.html();
$item.parents('ul').not('.topic-drop-menu').each(function(i) {
boardName = $(this).siblings('a').html() + ' / ' + boardName;
});
$formTopicDropBtn.html(boardName + ' <span class="drop-arrow">▾</span>');
} }
\ No newline at end of file
lms/static/sass/_discussion.scss
...@@ -18,6 +18,25 @@ ...@@ -18,6 +18,25 @@
} }
} }
@mixin white-button {
display: block;
height: 35px;
padding: 0 15px;
border-radius: 3px;
border: 1px solid #444;
background: -webkit-linear-gradient(top, #eee, #ccc);
font-size: 13px;
font-weight: 700;
line-height: 32px;
color: #333;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15);
&:hover {
background: -webkit-linear-gradient(top, #fff, #ddd);
}
}
...@@ -39,6 +58,205 @@ body.discussion { ...@@ -39,6 +58,205 @@ body.discussion {
background: url(../images/new-post-icon.png) no-repeat; background: url(../images/new-post-icon.png) no-repeat;
} }
} }
.new-post-article {
display: none;
margin-top: 20px;
.inner-wrapper {
max-width: 1180px;
min-width: 760px;
margin: auto;
}
.left-column {
float: left;
width: 32%;
padding: 40px;
box-sizing: border-box;
label {
font-size: 22px;
font-weight: 700;
color: #fff;
text-shadow: none;
}
.topic-drop {
position: relative;
ul {
list-style: none;
margin: 0;
padding: 0;
}
}
.topic-drop-btn {
position: relative;
z-index: 10000;
@include white-button;
height: 40px;
margin-top: 15px;
line-height: 36px;
.drop-arrow {
float: right;
color: #999;
line-height: 36px;
}
}
.topic-drop-menu {
display: none;
position: absolute;
top: 40px;
left: 0;
z-index: 9999;
width: 100%;
box-sizing: border-box;
background: #737373;
border: 1px solid #333;
box-shadow: 0 2px 50px rgba(0, 0, 0, .4);
a {
display: block;
padding: 10px 15px;
border-top: 1px solid #5f5f5f;
font-size: 14px;
font-weight: 700;
color: #eee;
&:hover {
background-color: #666;
}
}
li li {
a {
padding-left: 39px;
background: url(../images/nested-icon.png) no-repeat 17px 10px;
}
}
li li li {
a {
padding-left: 63px;
background: url(../images/nested-icon.png) no-repeat 41px 10px;
}
}
}
}
.right-column {
float: left;
width: 68%;
padding: 40px;
box-sizing: border-box;
}
}
.new-post-form {
width: 100%;
margin-bottom: 20px;
border-radius: 3px;
background: rgba(0, 0, 0, .55);
color: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 rgba(255, 255, 255, .5);
@include clearfix;
.form-row {
margin-bottom: 20px;
}
.new-post-body {
position: relative;
width: 100%;
height: 200px;
z-index: 1;
padding: 10px;
box-sizing: border-box;
border: 1px solid #333;
border-radius: 3px 3px 0 0;
background: #fff;
font-family: 'Monaco', monospace;
font-size: 13px;
line-height: 1.6;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset;
}
.new-post-preview {
position: relative;
width: 100%;
height: 50px;
margin-top: -1px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #333;
border-radius: 0 0 3px 3px;
background: #e6e6e6;
color: #333;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset;
}
.new-post-preview-label {
position: absolute;
top: 4px;
left: 4px;
font-size: 11px;
color: #aaa;
text-transform: uppercase;
}
.new-post-title,
.new-post-tags {
width: 100%;
height: 40px;
padding: 0 10px;
box-sizing: border-box;
border-radius: 3px;
border: 1px solid #333;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
color: #333;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) inset;
}
.new-post-title {
font-weight: 700;
}
.submit {
@include blue-button;
float: left;
height: 37px;
margin-top: 10px;
padding-bottom: 2px;
border-color: #333;
&:hover {
border-color: #222;
}
}
.new-post-cancel {
@include white-button;
float: left;
margin: 10px 0 0 15px;
}
.options {
margin-top: 40px;
label {
display: inline;
margin-left: 8px;
font-size: 15px;
color: #fff;
text-shadow: none;
}
}
}
} }
.discussion-body { .discussion-body {
......
lms/templates/discussion/single_thread.html
...@@ -52,6 +52,56 @@ ...@@ -52,6 +52,56 @@
</div> </div>
</nav> </nav>
<article class="new-post-article">
<div class="inner-wrapper">
<form class="new-post-form">
<div class="left-column">
<label>Create new post in:</label>
<div class="topic-drop">
<a href="#" class="topic-drop-btn">Homework / Week 1 <span class="drop-arrow">▾</span></a>
<ul class="topic-drop-menu">
<li><a href="#">All</a></li>
<li><a href="#">Following</a></li>
<li><a href="#">General</a></li>
<li>
<a href="#">Homework</a>
<ul>
<li><a href="#">Week 1</a></li>
<li>
<a href="#">Week 2</a>
<ul>
<li><a href="#">Problem 1</a></li>
<li><a href="#">Problem 2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class="options">
<input type="checkbox" name="follow" id="new-post-follow" checked><label for="new-post-follow">follow this post</label>
<br>
<input type="checkbox" name="follow" id="new-post-anonymous" checked><label for="new-post-anonymous">post anonymously</label>
</div>
</div>
<div class="right-column">
<div class="form-row">
<input type="text" class="new-post-title" name="title" placeholder="Title">
</div>
<div class="form-row">
<textarea class="new-post-body" name="body" placeholder="Enter your question or comment…"></textarea>
<div class="new-post-preview"><span class="new-post-preview-label">Preview</span></div>
</div>
<div class="form-row">
<input type="text" class="new-post-tags" name="tags" placeholder="Tags">
</div>
<input type="submit" class="submit" value="Add post">
<a href="#" class="new-post-cancel">Cancel</a>
</div>
</form>
</div>
</article>
<div class="discussion container"> <div class="discussion container">
<div class="discussion-body"> <div class="discussion-body">
<div class="sidebar"> <div class="sidebar">
......
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