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