Skip to content

E
edx-platform
Commit 1a6f0641 by Kyle Fiedler
Options

added new tooltips and styles for new tool tips 

--HG--
branch : kf-tooltips
parent 98f646a5
Showing with 130 additions and 116 deletions
courseware.html
......@@ -4,8 +4,12 @@
<!-- TODO: http://docs.jquery.com/Plugins/Validation -->
<script type="text/javascript">
$(function() {
${init}
});
${init}
$(".sequence-nav li a").hover(function(){
$(this).siblings().toggle();
});
});
</script>
</%block>
......
main.html
......@@ -85,6 +85,7 @@
<script type="text/javascript" src="/static/js/schematic.js"></script>
<script type="text/javascript" src="/static/js/cktsim.js"></script>
<script>
// Feedback form
$(function() {
......@@ -117,6 +118,5 @@ $(function(){
</script>
<%block name="js_extra"/>
</body>
</html>
sass/application.scss
......@@ -4,7 +4,7 @@
@import "base/reset", "base/font-face";
@import "base/variables", "base/functions", "base/extends", "base/base";
@import "layout/layout", "layout/header", "layout/footer", "layout/leanmodal";
@import "jquery-ui-1.8.16.custom";
@import "plugins/jquery-ui-1.8.16.custom";
// pages
@import "courseware/courseware", "courseware/sidebar", "courseware/video", "courseware/sequence-nav", "courseware/amplifier";
......
sass/courseware/_sequence-nav.scss
......@@ -6,102 +6,150 @@ nav.sequence-nav {
display: table-row;
float: left;
width: flex-grid(7.5,9) + flex-gutter();
position: relative;
a {
@extend .block-link;
}
.inactive {
background-repeat: no-repeat;
li {
display: table-cell;
.inactive {
background-repeat: no-repeat;
&:hover {
background-color: lighten(#F6EFD4, 3%);
&:hover {
background-color: lighten(#F6EFD4, 3%);
}
}
}
.visited {
background-color: shade(#F6EFD4, 10%);
background-repeat: no-repeat;
border-color: shade(#F6EFD4, 10%);
.visited {
background-color: shade(#F6EFD4, 10%);
background-repeat: no-repeat;
border-color: shade(#F6EFD4, 10%);
&:hover {
background-color: #F6EFD4;
&:hover {
background-color: #F6EFD4;
background-position: center center;
}
}
}
.active {
// @include box-shadow(inset -1px 0 0 darken(#F6EFD4, 20%), inset 1px 0 0 darken(#F6EFD4, 20%));
@include box-shadow(0 1px 0 #fff);
background-color: #fff;
background-repeat: no-repeat;
&:hover {
.active {
// @include box-shadow(inset -1px 0 0 darken(#F6EFD4, 20%), inset 1px 0 0 darken(#F6EFD4, 20%));
@include box-shadow(0 1px 0 #fff);
background-color: #fff;
background-repeat: no-repeat;
&:hover {
background-color: #fff;
background-position: center;
}
}
}
li {
@include box-shadow(1px 0 0 #fff);
background-position: center center;
border: none;
border-right: 1px solid darken(#F6EFD4, 10%);
cursor: pointer;
display: table-cell;
padding: 14px 4px;
width: 28px;
a {
@include box-shadow(1px 0 0 #fff);
background-position: center center;
border: none;
border-right: 1px solid darken(#F6EFD4, 10%);
cursor: pointer;
padding: 14px 4px;
width: 28px;
height: 17px;
// @media screen and (max-width: 800px) {
// padding: 12px 8px;
// }
//video
&.seq_video_inactive {
@extend .inactive;
background-image: url('/static/images/sequence-nav/video-icon-normal.png');
background-position: center;
}
// @media screen and (max-width: 800px) {
// padding: 12px 8px;
// }
&.seq_video_visited {
@extend .visited;
background-image: url('/static/images/sequence-nav/video-icon-visited.png');
background-position: center;
}
//video
&.seq_video_inactive {
@extend .inactive;
background-image: url('/static/images/sequence-nav/video-icon-normal.png');
}
&.seq_video_active {
@extend .active;
background-image: url('/static/images/sequence-nav/video-icon-current.png');
background-position: center;
}
&.seq_video_visited {
@extend .visited;
background-image: url('/static/images/sequence-nav/video-icon-visited.png');
}
//other
&.seq_other_inactive {
@extend .inactive;
background-image: url('/static/images/sequence-nav/document-icon-normal.png');
background-position: center;
}
&.seq_video_active {
@extend .active;
background-image: url('/static/images/sequence-nav/video-icon-current.png');
}
&.seq_other_visited {
@extend .visited;
background-image: url('/static/images/sequence-nav/document-icon-visited.png');
background-position: center;
}
//other
&.seq_other_inactive {
@extend .inactive;
background-image: url('/static/images/sequence-nav/document-icon-normal.png');
}
&.seq_other_active {
@extend .active;
background-image: url('/static/images/sequence-nav/document-icon-current.png');
background-position: center;
}
&.seq_other_visited {
@extend .visited;
background-image: url('/static/images/sequence-nav/document-icon-visited.png');
}
//vertical & problems
&.seq_vertical_inactive, &.seq_problem_inactive {
@extend .inactive;
background-image: url('/static/images/sequence-nav/list-icon-normal.png');
background-position: center;
}
&.seq_other_active {
@extend .active;
background-image: url('/static/images/sequence-nav/document-icon-current.png');
}
&.seq_vertical_visited, &.seq_problem_visited {
@extend .visited;
background-image: url('/static/images/sequence-nav/list-icon-visited.png');
background-position: center;
}
//vertical & problems
&.seq_vertical_inactive, &.seq_problem_inactive {
@extend .inactive;
background-image: url('/static/images/sequence-nav/list-icon-normal.png');
}
&.seq_vertical_active, &.seq_problem_active {
@extend .active;
background-image: url('/static/images/sequence-nav/list-icon-current.png');
background-position: center;
}
}
&.seq_vertical_visited, &.seq_problem_visited {
@extend .visited;
background-image: url('/static/images/sequence-nav/list-icon-visited.png');
}
p {
position: absolute;
display: none;
background: #B3A87E;
padding: 6px;
white-space: pre-wrap;
z-index: 99;
margin: 4px 0 0 -5px;
text-shadow: 0 -1px 0 darken(#B3A87E, 10%);
color: #fff;
&:empty {
background: none;
&::after {
display: none;
}
}
&.seq_vertical_active, &.seq_problem_active {
@extend .active;
background-image: url('/static/images/sequence-nav/list-icon-current.png');
&::after {
background: #B3A87E;
content: " ";
display: block;
height: 10px;
position: absolute;
top: -5px;
left: 18px;
@include transform(rotate(45deg));
@include transition();
width: 10px;
}
}
}
}
......
sass/courseware/_video.scss
......@@ -167,33 +167,6 @@ section.course-content {
@include inline-block();
}
}
// ol#video_speeds {
// @extend .clearfix;
// background: #333;
// border: 1px solid #000;
// font-weight: bold;
// @include inline-block();
// padding: 0 lh();
// position: absolute;
// right: 79px;
// @include box-shadow(inset 0 1px 0 #555);
// li {
// cursor: pointer;
// float: left;
// margin-bottom: 0;
// margin-right: lh(.5);
// &:last-child {
// margin-right: 0;
// }
// &:hover {
// color: $mit-red;
// }
// }
// }
}
a.hide-subtitles {
......
seq_module.html
<nav class="sequence-nav">
<ol>
% for t in range(1,1+len(items)):
<li class="seq_inactive" id="tt_${ t }">&nbsp;</li>
<li><a href="#" class="seq_inactive" id="tt_${ t }"></a></li>
% endfor
</ol>
......@@ -11,8 +11,5 @@
</ul>
</nav>
<!-- <td colspan=${ len(items) }> -->
<div id="seq_content"></div>
<!-- </td> -->
<div id="seq_content"></div>
seq_module.js
......@@ -54,7 +54,7 @@ function ${ id }goto(i) {
function ${ id }setup_click(i) {
$('#tt_'+i).click(function(eo) { ${ id }goto(i);});
$('#tt_'+i).addClass("seq_"+${ id }types[i]+"_inactive");
$('#tt_'+i).attr("title", ${ id }titles[i-1]);
$('#tt_'+i).parent().append("<p>" + ${ id }titles[i-1] + "</p>");
}
......
video.html
......@@ -69,14 +69,6 @@
$(this).text((link_text == 'on') ? 'off' : 'on');
return false;
});
/* $('.speeds ol').hide();
$('.speeds h3 a').click(function() {
$('.speeds ol').toggle();
return false;
});*/
});
</script>
</%block>
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