Skip to content

E
edx-platform
Commit 5db29b87 by Tom Giannattasio
Options

tweaked sidebar styles; added temp javascript functionality for sidebar

parent 1026a173
Showing with 201 additions and 39 deletions
lms/static/js/discussions-temp.js 0 → 100644
var $body;
var $browse;
var $search;
var $searchField;
var $topicDrop;
var $currentBoard;
var $tooltip;
var $newPost;
var $thread;
var $sidebar;
var $sidebarWidthStyles;
var sidebarWidth;
var tooltipTimer;
var tooltipCoords;
$(document).ready(function() {
$body = $('body');
$browse = $('.browse-search .browse');
$search = $('.browse-search .search');
$searchField = $('.post-search-field');
$topicDrop = $('.board-drop-menu');
$currentBoard = $('.current-board');
$tooltip = $('<div class="tooltip"></div>');
$sidebar = $('.sidebar');
$sidebarWidthStyles = $('<style></style>');
$body.append($sidebarWidthStyles);
sidebarWidth = $('.sidebar').width();
$browse.bind('click', showTopicDrop);
$search.bind('click', showSearch);
$topicDrop.bind('click', setTopic);
$('[data-tooltip]').bind({
'mouseover': showTooltip,
'mousemove': moveTooltip,
'mouseout': hideTooltip,
'click': hideTooltip
});
$(window).bind('resize', updateSidebarWidth);
updateSidebarWidth();
});
function showTooltip(e) {
var tooltipText = $(this).attr('data-tooltip');
$tooltip.html(tooltipText);
$body.append($tooltip);
$(this).children().css('pointer-events', 'none');
tooltipCoords = {
x: e.pageX - ($tooltip.outerWidth() / 2),
y: e.pageY - ($tooltip.outerHeight() + 15)
};
$tooltip.css({
'left': tooltipCoords.x,
'top': tooltipCoords.y
});
tooltipTimer = setTimeout(function() {
$tooltip.show().css('opacity', 1);
tooltipTimer = setTimeout(function() {
hideTooltip();
}, 3000);
}, 500);
}
function moveTooltip(e) {
tooltipCoords = {
x: e.pageX - ($tooltip.outerWidth() / 2),
y: e.pageY - ($tooltip.outerHeight() + 15)
};
$tooltip.css({
'left': tooltipCoords.x,
'top': tooltipCoords.y
});
}
function hideTooltip(e) {
$tooltip.hide().css('opacity', 0);
clearTimeout(tooltipTimer);
}
function showBrowse(e) {
$browse.addClass('is-open');
$search.removeClass('is-open');
$searchField.val('');
}
function showSearch(e) {
$search.addClass('is-open');
$browse.removeClass('is-open');
setTimeout(function() {
$searchField.focus();
}, 200);
}
function showTopicDrop(e) {
e.preventDefault();
$browse.addClass('is-dropped');
$topicDrop.show();
$browse.unbind('click', showTopicDrop);
$browse.bind('click', hideTopicDrop);
setTimeout(function() {
$body.bind('click', hideTopicDrop);
}, 0);
}
function hideTopicDrop(e) {
$browse.removeClass('is-dropped');
$topicDrop.hide();
$body.unbind('click', hideTopicDrop);
$browse.bind('click', showTopicDrop);
}
function setTopic(e) {
var $item = $(e.target).closest('a');
var boardName = $item.find('.board-name').html();
$item.parents('ul').not('.board-drop-menu').each(function(i) {
boardName = $(this).siblings('a').find('.board-name').html() + ' / ' + boardName;
});
$currentBoard.html(boardName);
var fontSize = 16;
$currentBoard.css('font-size', '16px');
while($currentBoard.width() > (sidebarWidth * .8) - 40) {
fontSize--;
if(fontSize < 11) {
break;
}
$currentBoard.css('font-size', fontSize + 'px');
}
showBrowse();
}
function updateSidebarWidth(e) {
sidebarWidth = $sidebar.width();
var titleWidth = sidebarWidth - 115;
console.log(titleWidth);
$sidebarWidthStyles.html('.discussion-body .post-list a .title { width: ' + titleWidth + 'px !important; }');
}
\ No newline at end of file
lms/static/sass/_discussion.scss
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
padding: 0 15px; padding: 0 15px;
border-radius: 3px; border-radius: 3px;
border: 1px solid #2d81ad; border: 1px solid #2d81ad;
background: -webkit-linear-gradient(top, #6dccf1, #38a8e5); @include linear-gradient(top, #6dccf1, #38a8e5);
font-size: 13px; font-size: 13px;
font-weight: 700; font-weight: 700;
line-height: 32px; line-height: 32px;
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
&:hover { &:hover {
border-color: #297095; border-color: #297095;
background: -webkit-linear-gradient(top, #4fbbe4, #2090d0); @include linear-gradient(top, #4fbbe4, #2090d0);
} }
} }
...@@ -47,7 +47,7 @@ body.discussion { ...@@ -47,7 +47,7 @@ body.discussion {
.sidebar { .sidebar {
display: table-cell; display: table-cell;
vertical-align: top; vertical-align: top;
width: 27.7%; width: 32%;
background: #f6f6f6; background: #f6f6f6;
border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px;
border-right: 1px solid #bcbcbc; border-right: 1px solid #bcbcbc;
...@@ -67,8 +67,9 @@ body.discussion { ...@@ -67,8 +67,9 @@ body.discussion {
float: left; float: left;
width: 20%; width: 20%;
height: 100%; height: 100%;
background: -webkit-linear-gradient(top, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)) #dcdcdc; @include linear-gradient(top, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
-webkit-transition: all .2s ease-out; background-color: #dcdcdc;
@include transition(all .2s ease-out);
&:hover { &:hover {
background-color: #e9e9e9; background-color: #e9e9e9;
...@@ -94,8 +95,12 @@ body.discussion { ...@@ -94,8 +95,12 @@ body.discussion {
&.is-dropped { &.is-dropped {
.board-drop-btn { .board-drop-btn {
color: #fff;
text-shadow: none; span {
color: #fff;
text-shadow: none;
}
border-color: #4b4b4b; border-color: #4b4b4b;
} }
} }
...@@ -129,7 +134,9 @@ body.discussion { ...@@ -129,7 +134,9 @@ body.discussion {
cursor: text; cursor: text;
pointer-events: auto; pointer-events: auto;
&::-webkit-input-placeholder { &::-webkit-input-placeholder,
&:-moz-placeholder,
&:-ms-input-placeholder {
opacity: 1; opacity: 1;
} }
} }
...@@ -148,6 +155,7 @@ body.discussion { ...@@ -148,6 +155,7 @@ body.discussion {
border: 1px solid transparent; border: 1px solid transparent;
text-align: center; text-align: center;
overflow: hidden; overflow: hidden;
@include transition(none);
.current-board { .current-board {
white-space: nowrap; white-space: nowrap;
...@@ -160,7 +168,7 @@ body.discussion { ...@@ -160,7 +168,7 @@ body.discussion {
color: #333; color: #333;
text-shadow: 0 1px 0 rgba(255, 255, 255, .8); text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
opacity: 0; opacity: 0;
-webkit-transition: opacity .2s; @include transition(opacity .2s);
} }
} }
...@@ -175,7 +183,7 @@ body.discussion { ...@@ -175,7 +183,7 @@ body.discussion {
margin-left: -12px; margin-left: -12px;
background: url(../images/browse-icon.png) no-repeat; background: url(../images/browse-icon.png) no-repeat;
opacity: 1; opacity: 1;
-webkit-transition: opacity .2s; @include transition(opacity .2s);
} }
.board-drop-menu { .board-drop-menu {
...@@ -214,7 +222,7 @@ body.discussion { ...@@ -214,7 +222,7 @@ body.discussion {
font-size: 11px; font-size: 11px;
line-height: 22px; line-height: 22px;
border-radius: 2px; border-radius: 2px;
background: -webkit-linear-gradient(top, #4c4c4c, #5a5a5a); @include linear-gradient(top, #4c4c4c, #5a5a5a);
} }
} }
...@@ -237,8 +245,8 @@ body.discussion { ...@@ -237,8 +245,8 @@ body.discussion {
width: 100%; width: 100%;
max-width: 30px; max-width: 30px;
margin: auto; margin: auto;
box-sizing: border-box; @include box-sizing(border-box);
-webkit-transition: all .2s; @include transition(all .2s);
} }
.post-search-field { .post-search-field {
...@@ -247,7 +255,7 @@ body.discussion { ...@@ -247,7 +255,7 @@ body.discussion {
height: 30px; height: 30px;
padding: 0; padding: 0;
margin: 14px auto; margin: 14px auto;
box-sizing: border-box; @include box-sizing(border-box);
border: 1px solid #acacac; border: 1px solid #acacac;
border-radius: 30px; border-radius: 30px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .1) inset, 0 1px 0 rgba(255, 255, 255, .5); box-shadow: 0 1px 3px rgba(0, 0, 0, .1) inset, 0 1px 0 rgba(255, 255, 255, .5);
...@@ -261,11 +269,13 @@ body.discussion { ...@@ -261,11 +269,13 @@ body.discussion {
outline: 0; outline: 0;
cursor: pointer; cursor: pointer;
pointer-events: none; pointer-events: none;
-webkit-transition: all .2s ease-out; @include transition(all .2s ease-out);
&::-webkit-input-placeholder { &::-webkit-input-placeholder,
&:-moz-placeholder,
&:-ms-input-placeholder {
opacity: 0; opacity: 0;
-webkit-transition: opacity .2s; @include transition(opacity .2s);
} }
&:focus { &:focus {
...@@ -277,7 +287,8 @@ body.discussion { ...@@ -277,7 +287,8 @@ body.discussion {
.sort-bar { .sort-bar {
height: 27px; height: 27px;
border-bottom: 1px solid #a3a3a3; border-bottom: 1px solid #a3a3a3;
background: -webkit-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)) #aeaeae; @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
background-color: #aeaeae;
box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset;
span, span,
...@@ -310,12 +321,13 @@ body.discussion { ...@@ -310,12 +321,13 @@ body.discussion {
line-height: 17px; line-height: 17px;
&:hover { &:hover {
background: -webkit-linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, .2)); @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, .2));
color: #333; color: #333;
} }
&.active { &.active {
background: -webkit-linear-gradient(top, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0)) #999; @include linear-gradient(top, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0));
background-color: #999;
color: #fff; color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .3); text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, .2) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, .2) inset;
...@@ -323,13 +335,13 @@ body.discussion { ...@@ -323,13 +335,13 @@ body.discussion {
} }
} }
.post-list-wrapper {
overflow-y: scroll;
}
.post-list { .post-list {
background-color: #ddd; background-color: #ddd;
li:last-child a {
// border-bottom: 1px solid #ddd;
}
a { a {
position: relative; position: relative;
display: block; display: block;
...@@ -379,7 +391,7 @@ body.discussion { ...@@ -379,7 +391,7 @@ body.discussion {
} }
&.active { &.active {
background: -webkit-linear-gradient(top, #96e0fd, #61c7fc); @include linear-gradient(top, #96e0fd, #61c7fc);
border-color: #4697c1; border-color: #4697c1;
box-shadow: 0 1px 0 #4697c1, 0 -1px 0 #4697c1; box-shadow: 0 1px 0 #4697c1, 0 -1px 0 #4697c1;
...@@ -389,7 +401,7 @@ body.discussion { ...@@ -389,7 +401,7 @@ body.discussion {
.votes-count, .votes-count,
.comments-count { .comments-count {
background: -webkit-linear-gradient(top, #3994c7, #4da7d3); @include linear-gradient(top, #3994c7, #4da7d3);
color: #fff; color: #fff;
&:after { &:after {
...@@ -424,7 +436,7 @@ body.discussion { ...@@ -424,7 +436,7 @@ body.discussion {
height: 16px; height: 16px;
margin-top: 9px; margin-top: 9px;
border-radius: 2px; border-radius: 2px;
background: -webkit-linear-gradient(top, #d4d4d4, #dfdfdf); @include linear-gradient(top, #d4d4d4, #dfdfdf);
font-size: 9px; font-size: 9px;
font-weight: 700; font-weight: 700;
line-height: 16px; line-height: 16px;
...@@ -448,7 +460,7 @@ body.discussion { ...@@ -448,7 +460,7 @@ body.discussion {
} }
&.new { &.new {
background: -webkit-linear-gradient(top, #84d7fe, #99e0fe); @include linear-gradient(top, #84d7fe, #99e0fe);
color: #333; color: #333;
&:after { &:after {
...@@ -464,7 +476,7 @@ body.discussion { ...@@ -464,7 +476,7 @@ body.discussion {
.discussion-column { .discussion-column {
display: table-cell; display: table-cell;
vertical-align: top; vertical-align: top;
width: 72.3%; width: 68%;
} }
.discussion-article { .discussion-article {
...@@ -542,7 +554,7 @@ body.discussion { ...@@ -542,7 +554,7 @@ body.discussion {
width: 100%; width: 100%;
height: 14px; height: 14px;
padding: 1px 5px; padding: 1px 5px;
box-sizing: border-box; @include box-sizing(border-box);
border-radius: 2px 2px 0 0; border-radius: 2px 2px 0 0;
background: #009fe2; background: #009fe2;
font-size: 9px; font-size: 9px;
...@@ -564,7 +576,7 @@ body.discussion { ...@@ -564,7 +576,7 @@ body.discussion {
padding: 0 8px; padding: 0 8px;
border-radius: 5px; border-radius: 5px;
border: 1px solid #b2b2b2; border: 1px solid #b2b2b2;
background: -webkit-linear-gradient(top, #fff 35%, #ebebeb); @include linear-gradient(top, #fff 35%, #ebebeb);
box-shadow: 0 1px 1px rgba(0, 0, 0, .15); box-shadow: 0 1px 1px rgba(0, 0, 0, .15);
font-size: 12px; font-size: 12px;
font-weight: 700; font-weight: 700;
...@@ -586,7 +598,7 @@ body.discussion { ...@@ -586,7 +598,7 @@ body.discussion {
&.is-cast { &.is-cast {
border-color: #379a42; border-color: #379a42;
background: -webkit-linear-gradient(top, #50cc5e, #3db84b); @include linear-gradient(top, #50cc5e, #3db84b);
color: #fff; color: #fff;
text-shadow: 0 1px 0 rgba(0, 0, 0, .3); text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 1px 2px rgba(0, 0, 0, .2); box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 1px 2px rgba(0, 0, 0, .2);
...@@ -607,7 +619,7 @@ body.discussion { ...@@ -607,7 +619,7 @@ body.discussion {
margin-right: 10px; margin-right: 10px;
border-radius: 27px; border-radius: 27px;
border: 1px solid #a0a0a0; border: 1px solid #a0a0a0;
background: -webkit-linear-gradient(top, #fff 35%, #ebebeb); @include linear-gradient(top, #fff 35%, #ebebeb);
box-shadow: 0 1px 1px rgba(0, 0, 0, .1); box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
.check-icon { .check-icon {
...@@ -620,7 +632,7 @@ body.discussion { ...@@ -620,7 +632,7 @@ body.discussion {
&.is-endorsed { &.is-endorsed {
border: 1px solid #4697c1; border: 1px solid #4697c1;
background: -webkit-linear-gradient(top, #6dccf1, #38a8e5); @include linear-gradient(top, #6dccf1, #38a8e5);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, .4) inset; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, .4) inset;
.check-icon { .check-icon {
...@@ -675,11 +687,11 @@ body.discussion { ...@@ -675,11 +687,11 @@ body.discussion {
width: 100%; width: 100%;
height: 31px; height: 31px;
padding: 0 10px; padding: 0 10px;
box-sizing: border-box; @include box-sizing(border-box);
border: 1px solid #b2b2b2; border: 1px solid #b2b2b2;
border-radius: 3px; border-radius: 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .1) inset; box-shadow: 0 1px 3px rgba(0, 0, 0, .1) inset;
-webkit-transition: border-color .1s; @include transition(border-color .1s);
outline: 0; outline: 0;
&:focus { &:focus {
...@@ -702,7 +714,7 @@ body.discussion { ...@@ -702,7 +714,7 @@ body.discussion {
padding: 0 12px; padding: 0 12px;
border-radius: 3px; border-radius: 3px;
border: 1px solid #b2b2b2; border: 1px solid #b2b2b2;
background: -webkit-linear-gradient(top, #fff 35%, #ebebeb); @include linear-gradient(top, #fff 35%, #ebebeb);
font-size: 13px; font-size: 13px;
line-height: 24px; line-height: 24px;
color: #737373; color: #737373;
...@@ -746,7 +758,7 @@ body.discussion { ...@@ -746,7 +758,7 @@ body.discussion {
color: #fff; color: #fff;
pointer-events: none; pointer-events: none;
opacity: 0; opacity: 0;
-webkit-transition: opacity .1s; @include transition(opacity .1s);
&:after { &:after {
content: '▾'; content: '▾';
...@@ -802,7 +814,7 @@ body.discussion { ...@@ -802,7 +814,7 @@ body.discussion {
.global-discussion-actions { .global-discussion-actions {
height: 60px; height: 60px;
background: -webkit-linear-gradient(top, #ebebeb, #d9d9d9); @include linear-gradient(top, #ebebeb, #d9d9d9);
border-radius: 0 3px 0 0; border-radius: 0 3px 0 0;
border-bottom: 1px solid #bcbcbc; border-bottom: 1px solid #bcbcbc;
} }
......
lms/templates/discussion/single_thread.html
...@@ -13,6 +13,7 @@ ...@@ -13,6 +13,7 @@
<%block name="js_extra"> <%block name="js_extra">
<%include file="_js_body_dependencies.html" /> <%include file="_js_body_dependencies.html" />
<%static:js group='discussion'/> <%static:js group='discussion'/>
<script type="text/javascript" src="${static.url('js/discussions-temp.js')}"></script>
</%block> </%block>
<%! from django.core.urlresolvers import reverse %> <%! from django.core.urlresolvers import reverse %>
......
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