Skip to content

E
edx-platform
Commit 60032047 by marco
Options

added jquery tabs for problem editor, but a bug in rendering is stumping me, will fix tomorrow.

parent 18f2f97e
Showing with 117 additions and 39 deletions
cms/static/sass/_unit.scss
......@@ -3,6 +3,12 @@
margin: 40px;
}
//Problem selector requirements - TO DO: Marco -determine placement, integration for this
.js .tabs .tab {
display: none;
}
//end problem selector reqs
.main-column {
clear: both;
float: left;
......@@ -143,8 +149,8 @@
a {
position: relative;
border: 1px solid $darkGreen;
background: tint($green,20%);
border: 1px solid $lightBluishGrey2;
background: tint($mediumGrey,20%);
color: #fff;
@include transition(background-color .15s);
......@@ -154,13 +160,26 @@
}
}
.problem-type-tabs {
list-style-type: none;
width: 100%;
li {
}
a{
display: block;
width: 70px;
height:25px;
}
}
.new-component-template {
margin-bottom: 20px;
li:last-child {
a {
border-radius: 0 0 3px 3px;
border-bottom: 1px solid $darkGreen;
border-bottom: 1px solid $mediumGrey;
}
}
......@@ -180,13 +199,16 @@
.name {
float: left;
.ss-icon {
.problem-selector-icon {
@include transition(opacity .15s);
position: relative;
display: inline-block;
top: 1px;
font-size: 13px;
margin-right: 5px;
opacity: 0.5;
width: 17;
height: 21px;
vertical-align: middle;
background: url(../img/problem-selector-icons.png) no-repeat;
}
}
......
cms/templates/base.html
......@@ -31,6 +31,7 @@
<script type="text/javascript" src="${static.url('js/vendor/markitup/sets/wiki/set.js')}"></script>
<script src="${static.url('js/vendor/symbolset.ss-standard.js')}"></script>
<script src="${static.url('js/vendor/symbolset.ss-symbolicons.js')}"></script>
<script src="${static.url('js/vendor/jquery.tabs.js')}"></script>
<%static:js group='main'/>
<%static:js group='module-js'/>
......
cms/templates/unit.html
......@@ -13,12 +13,20 @@
state: '${unit_state}'
})
});
$(document).ready(function() {
$('body').addClass('js');
// tabs
$('.tab-group').tabs();
});
$('.new-component-template').each(function(){
$emptyEditor = $(this).find('.empty');
$(this).prepend($emptyEditor);
});
});
</script>
</%block>
......@@ -56,38 +64,85 @@
</div>
% for type, templates in sorted(component_templates.items()):
<div class="new-component-templates new-component-${type}">
<h3 class="title">Select <span class="type">${type}</span> component type:</h3>
<ul class="new-component-template">
% for name, location, has_markdown, is_empty in templates:
% if is_empty:
<li class="editor-md empty">
<a href="#" data-location="${location}">
<span class="name"><i class="ss-icon ss-symbolicons-block">&#xE714;</i> ${name}</span>
<span class="editor-indicator">Simple <span class="sr">Editor</span></span>
</a>
</li>
% elif has_markdown:
<li class="editor-md">
<a href="#" data-location="${location}">
<span class="name"><i class="ss-icon ss-symbolicons-block">&#xE714;</i> ${name}</span>
<span class="editor-indicator">Simple <span class="sr">Editor</span></span>
</a>
</li>
% else:
<li class="editor-manual">
<a href="#" data-location="${location}">
<span class="name"><i class="ss-icon ss-symbolicons-block">&#x1F527;</i> ${name}</span>
<span class="editor-indicator">Advanced <span class="sr">Editor</span></span>
</a>
</li>
% endif
%endfor
</ul>
<div class="tab-group">
<ul class="problem-type-tabs nav-tabs">
<li class="current">
<a class="link-tab" href="#tab1">Standard</a>
</li>
<li>
<a class="link-tab" href="#tab2">Advanced</a>
</li>
</ul>
<div class="tabs">
<div class="tab current" id="tab1">
<ul class="new-component-template">
<span> Tab 1 </span>
% for name, location, has_markdown, is_empty in templates:
% if is_empty:
<li class="editor-md empty">
<a href="#" data-location="${location}">
<span class="name"><i class="problem-selector-icons ss-symbolicons-block">&#xE714;</i> ${name}</span>
</a>
</li>
% elif has_markdown:
<li class="editor-md">
<a href="#" data-location="${location}">
<span class="name"><i class="problem-selector-icons ss-symbolicons-block">&#xE714;</i> ${name}</span>
</a>
</li>
% else:
<li class="editor-manual">
<a href="#" data-location="${location}">
<span class="name"><i class="problem-selector-icons ss-symbolicons-block">&#x1F527;</i> ${name}</span>
</a>
</li>
% endif
%endfor
</ul>
</div>
<div class="tab" id="tab2">
<ul class="new-component-template" id="tab2">
<span> Tab 2 </span>
% for name, location, has_markdown, is_empty in templates:
% if is_empty:
<li class="editor-md empty">
<a href="#" data-location="${location}">
<span class="name"><i class="ss-icon ss-symbolicons-block">&#xE714;</i> ${name}</span>
<span class="editor-indicator">Simple <span class="sr">Editor</span></span>
</a>
</li>
% elif has_markdown:
<li class="editor-md">
<a href="#" data-location="${location}">
<span class="name"><i class="ss-icon ss-symbolicons-block">&#xE714;</i> ${name}</span>
<span class="editor-indicator">Simple <span class="sr">Editor</span></span>
</a>
</li>
% else:
<li class="editor-manual">
<a href="#" data-location="${location}">
<span class="name"><i class="ss-icon ss-symbolicons-block">&#x1F527;</i> ${name}</span>
<span class="editor-indicator">Advanced <span class="sr">Editor</span></span>
</a>
</li>
% endif
%endfor
</ul>
</div>
</div>
</div>
<a href="#" class="cancel-button">Cancel</a>
</div>
% endfor
......
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