Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Studio - revising markup, templates and styling for page editing UI:

Browse Source 
* added in fixed state markup/logic
* added in collection markup/logic
* revised styling for page titles, collection, and fixed elements
This commit is contained in:
Brian Talbot
2014-03-26 15:29:35 -04:00
committed by Nimisha Asthagiri
parent d865e9096e
commit 3b0f71482e
2 changed files with 66 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
cms/static/sass/views/_static-pages.scss
View File

@@ -180,7 +180,7 @@
}
.component,
.course-nav-tab {
.course-nav-item {
position: relative;
border: 1px solid $mediumGrey;
border-top: none;
@@ -239,7 +239,7 @@
}
.component-actions,
.course-nav-tab-actions {
.course-nav-item-actions {
display: inline-block;
float: right;
margin-right: ($baseline*2);
@@ -289,30 +289,31 @@
}
// basic course nav items - overrides from above
.course-nav-tab {
.course-nav-item {
padding: ($baseline*.75) ($baseline/4) ($baseline*.75) $baseline;
background: $white;
&.fixed {
&.is-fixed {
@extend %ui-disabled;
@include transition(opacity $tmg-f2 ease-in-out 0s);
opacity: .7;
&:hover {
opacity: 1;
}
opacity: 0.5;
}
.course-nav-tab-header {
.course-nav-item-header {
display: inline-block;
width:80%;
.title {
@extend %t-title4;
font-weight: 300;
color: $gray;
}
.title-sub {
@extend %t-title7;
color: $gray-l2;
}
}
.course-nav-tab-actions {
.course-nav-item-actions {
display: inline-block;
padding: ($baseline/10);
}
@@ -335,7 +336,6 @@
@include transition(background-color $tmg-s3 linear 0s);
padding: 20px 20px 22px;
font-size: 24px;
font-weight: 300;
background: #fff;
}
@@ -395,4 +395,3 @@
outline: 0;
}
}

59
cms/templates/edit-tabs.html
View File

@@ -55,7 +55,7 @@
<article class="unit-body">
<div class="tab-list">
<ol class="course-nav-tab-list components">
<ol class="course-nav-list course components">
% for tab in tabs_to_render:
% if isinstance(tab, StaticTab):
@@ -64,20 +64,37 @@
<%
tab_name = _(tab.name)
item_names_formatted = ""
item_names = []
num_items = 0
if tab.is_collection:
item_names = [_(item.name) for item in tab.items(context_course)]
num_items = sum(1 for item in tab.items(context_course))
tab_name = tab_name + " ({0}): {1}".format(num_items, ", ".join(item_names))
css_class = "course-nav-tab course-tab"
css_class = "course-nav-item course-nav-tab course-tab"
if tab.is_movable:
css_class = css_class + " sortable-tab"
%>
% if tab.is_hideable or tab.is_movable:
<li class="${css_class}" data-tab-id="${tab.tab_id}">
<div class="course-nav-tab-header">
<h3 class="title">${tab_name}</h3>
<div class="course-nav-item-header">
% if tab.is_collection:
<h3 class="title-sub">${tab_name}</h3>
<ul class="course-nav-item-children">
% for item_name in item_names:
<li class="course-nav-item-child title">
${item_name}
</li>
% endfor
</ul>
% else:
<h3 class="title">${tab_name}</h3>
% endif
</div>
<div class="course-nav-tab-actions wrapper-actions-list">
<div class="course-nav-item-actions wrapper-actions-list">
<ul class="actions-list">
% if tab.is_hideable:
@@ -97,10 +114,38 @@
% if tab.is_movable:
<div class="drag-handle" data-tooltip="${_('Drag to reorder')}">
<span class="sr">${_("Fixed page")}</span>
<span class="sr">${_("Drag to reorder")}</span>
</div>
% else:
<div class="drag-handle is-fixed" data-tooltip="${_('This page cannot be reordered')}">
<span class="sr">${_("This page cannot be reordered")}</span>
</div>
% endif
</li>
% else:
<li class="course-nav-item course_tab is-fixed" data-tab-id="${tab.tab_id}">
<div class="course-nav-item-header">
<h3 class="title">${tab_name}</h3>
% if tab.is_collection:
<ul class="course-nav-item-children">
% for item_name in item_names:
<li class="course-nav-item-child">
${item_name}
</li>
% endfor
</ul>
% endif
</ul>
</div>
<div class="drag-handle is-fixed" data-tooltip="${_('This page cannot be reordered')}">
<span class="sr">${_("This page cannot be reordered")}</span>
</div>
</li>
% endif
% endif
% endfor