Commit c619e1ec by Chris Rodriguez

Adding UXPL classnames to headings

parent e3ddb02c
......@@ -55,9 +55,9 @@ def see_a_multi_step_component(step, category):
if category == 'HTML':
html_matcher = {
'Text': '\n \n',
'Announcement': '<h3>Announcement Date</h3>',
'Zooming Image Tool': '<h3>Zooming Image Tool</h3>',
'E-text Written in LaTeX': '<h3>Example: E-text page</h3>',
'Announcement': '<h3 class="hd hd-2">Announcement Date</h3>',
'Zooming Image Tool': '<h3 class="hd hd-2">Zooming Image Tool</h3>',
'E-text Written in LaTeX': '<h3 class="hd hd-2">Example: E-text page</h3>',
'Raw HTML': '<p>This template is similar to the Text template. The only difference is',
}
actual_html = world.css_html(selector, index=idx)
......
......@@ -125,6 +125,9 @@ def my_display_name_change_is_persisted_on_save(step):
@step('the problem display name is "(.*)"$')
def verify_problem_display_name(step, name):
"""
name is uppercased because the heading styles are uppercase in css
"""
assert_equal(name, world.browser.find_by_css('.problem-header').text)
......
......@@ -75,6 +75,7 @@
// ====================
@import 'xmodule/modules/css/module-styles.scss';
@import 'xmodule/descriptors/css/module-styles.scss';
@import 'xmodule/headings';
@import 'elements/xmodules'; // styling for Studio-specific contexts
@import 'developer'; // used for any developer-created scss that needs further polish/refactoring
......
/*
* This comes from the UXPL, and is modified for use.
* The UXPL isn't available retroactively, so this shims
* the headings from the UXPL with what we're using in
* the platform to better sync things up in the meantime.
* It is scoped to #seq_content, specifically for xblock.
*
* Once the UXPl is fitted retroactively, this can be removed.
*/
$headings-count: 8;
$headings-font-weight-light: 200;
$headings-font-weight-normal: 400;
$headings-font-weight-bold: 600;
$headings-base-font-family: inherit;
$headings-base-color: $gray-d2;
%reset-headings {
margin: 0;
font-weight: $headings-font-weight-normal;
font-size: inherit;
line-height: inherit;
color: $headings-base-color;
}
%hd-1 {
margin-bottom: 1.41575em !important;
font-size: 2em !important;
line-height: 1.4em !important;
}
%hd-2 {
margin-bottom: 1em !important;
font-size: 1.5em !important;
font-weight: $headings-font-weight-normal !important;
line-height: 1.4em !important;
}
%hd-3 {
margin-bottom: ($baseline / 2) !important;
font-size: 1.35em !important;
font-weight: $headings-font-weight-normal !important;
line-height: 1.4em !important;
}
%hd-4 {
margin-bottom: ($baseline / 2) !important;
font-size: 1.25em !important;
font-weight: $headings-font-weight-bold !important;
line-height: 1.4em !important;
}
%hd-5 {
margin-bottom: ($baseline / 2) !important;
font-size: 1.1em !important;
font-weight: $headings-font-weight-bold !important;
line-height: 1.4em !important;
}
%hd-6 {
margin-bottom: ($baseline / 2) !important;
font-size: 1em !important;
font-weight: $headings-font-weight-bold !important;
line-height: 1.4em !important;
}
%hd-7 {
margin-bottom: ($baseline / 4);
font-size: 14px;
font-weight: $headings-font-weight-bold;
text-transform: uppercase;
line-height: 1.6em;
letter-spacing: 1px;
}
%hd-8 {
margin-bottom: ($baseline / 8);
font-size: 12px;
font-weight: $headings-font-weight-bold;
text-transform: uppercase;
line-height: 1.5em;
letter-spacing: 1px;
}
.wrapper-xblock {
.hd-1,
.hd-2,
.hd-3,
.hd-4,
.hd-5,
.hd-6,
.hd-7,
.hd-8 {
@extend %reset-headings;
}
// ----------------------------
// #CANNED
// ----------------------------
// canned heading classes
@for $i from 1 through $headings-count {
.hd-#{$i} {
@extend %hd-#{$i};
}
}
h3 {
@extend %hd-2;
font-weight: $headings-font-weight-normal !important;
// override external modules and xblocks that use inline CSS
text-transform: initial;
}
}
......@@ -336,7 +336,7 @@
<section id="problem_i4x-AndyA-ABT101-problem-46d2b65d793549e2876729d55df9a2cb" class="problems-wrapper" data-problem-id="i4x://AndyA/ABT101/problem/46d2b65d793549e2876729d55df9a2cb" data-url="/preview/xblock/i4x:;_;_AndyA;_ABT101;_problem;_46d2b65d793549e2876729d55df9a2cb/handler/xmodule_handler" data-progress_status="none" data-progress_detail="0/1">
<h3 class="problem-header">
<h3 class="hd hd-2 problem-header">
Multiple Choice
</h3>
......
......@@ -13,11 +13,6 @@ $annotatable--body-font-size: em(14);
.annotatable-header {
margin-bottom: .5em;
.annotatable-title {
font-size: em(22);
text-transform: uppercase;
padding: ($baseline/10) ($baseline/5);
}
}
.annotatable-section {
......
<section class='xblock xblock-student_view xmodule_display xmodule_AnnotatableModule' data-type='Annotatable'>
<div class="annotatable-wrapper">
<div class="annotatable-header">
<div class="annotatable-title">First Annotation Exercise</div>
<h3 class="hd hd-2 annotatable-title">First Annotation Exercise</h2>
</div>
<div class="annotatable-section">
<div class="annotatable-section-title">
......@@ -32,4 +32,3 @@
<div class="problem"><a class="annotation-return" href="javascript:void(0)">Return to Annotation</a></div>
<div class="problem"><a class="annotation-return" href="javascript:void(0)">Return to Annotation</a></div>
<div class="problem"><a class="annotation-return" href="javascript:void(0)">Return to Annotation</a></div>
......@@ -8,7 +8,7 @@
<section id="problem_i4x-Me-19_002-problem-Numerical_Input" class="problems-wrapper" data-problem-id="i4x://Me/19.002/problem/Numerical_Input" data-url="/courses/Me/19.002/Test/modx/i4x://Me/19.002/problem/Numerical_Input" data-progress_status="done" data-progress_detail="1/1">
<h3 class="problem-header">
<h3 class="hd hd-2 problem-header">
Numerical Input
</h3>
......
<h3 class="problem-header">Custom Javascript Display and Grading</h3>
<h3 class="hd hd-2 problem-header">Custom Javascript Display and Grading</h3>
<div class="problem">
<div>
......
<h3 class="problem-header">Problem Header</h3>
<h3 class="hd hd-2 problem-header">Problem Header</h3>
<div class='problem-progress'></div>
......
<h3 class="problem-header">Problem Header</h3>
<h3 class="hd hd-2 problem-header">Problem Header</h3>
<div class='problem-progress'></div>
......
......@@ -710,7 +710,7 @@ describe 'MarkdownEditingDescriptor', ->
""")
expect(data).toEqual("""<problem>
<p>Not a header</p>
<h3 class="problem-header">A header</h3>
<h3 class="hd hd-2 problem-header">A header</h3>
<p>Multiple choice w/ parentheticals</p>
<multiplechoiceresponse>
......
......@@ -202,7 +202,7 @@ class @MarkdownEditingDescriptor extends XModule.Descriptor
xml = xml.replace(/\r\n/g, '\n');
// replace headers
xml = xml.replace(/(^.*?$)(?=\n\=\=+$)/gm, '<h3 class="problem-header">$1</h3>');
xml = xml.replace(/(^.*?$)(?=\n\=\=+$)/gm, '<h3 class="hd hd-2 problem-header">$1</h3>');
xml = xml.replace(/\n^\=\=+$/gm, '');
// Pull out demand hints, || a hint ||
......
......@@ -5,14 +5,14 @@ data: |
<p>To use this template, replace the example text with your own text.</p>
<p>When you add the component, be sure to select <strong>Settings</strong>
to specify a <strong>Display Name</strong> and other values that apply.</p>
<h3>Announcement Date</h3>
<h3 class="hd hd-2">Announcement Date</h3>
<section class='update-description'>
<section class='primary'>
<p>Short note that introduces the topic</p>
<p class='author'>Instructor's name</p>
</section>
<h4>Heading for announcement 1</h4>
<h4 class="hd hd-4">Heading for announcement 1</h4>
<p>Announcement 1 text</p>
<h4>Heading for announcement 2</h4>
<h4 class="hd hd-4">Heading for announcement 2</h4>
<p>Announcement 2 text</p>
</section>
\ No newline at end of file
</section>
......@@ -2,7 +2,7 @@
metadata:
display_name: IFrame Tool
data: |
<h3>IFrame Tool</h3>
<h3 class="hd hd-2">IFrame Tool</h3>
<p>Use the IFrame tool to embed an exercise or tool from any web site into your course content. For example, the tool below allows learners to experiment with how the shape of a triangle affects a line that is derived from the triangle.</p>
<p>Exercises in an IFrame are not graded. To embed graded exercises, use a Custom JavaScript Problem.</p>
<p>The following code is the HTML format required to use the IFrame tool. For the IFrame in this template, you must replace the values in <i>italics</i>.</p>
......
......@@ -2,7 +2,7 @@
metadata:
display_name: Full Screen Image Tool
data: |
<h3>Full Screen Image Tool</h3>
<h3 class="hd hd-2">Full Screen Image Tool</h3>
<p>Use the Full Screen Image tool to allow learners to open and zoom in on a larger version of an image in your course.</p>
<p>With the Full Screen Image tool, learners can see the image's details as well as its context within the unit.</p>
<p>To enable users to view the larger image, you wrap the smaller image in a link to the larger version of the image.</p>
......
......@@ -12,7 +12,7 @@ metadata:
data: |
<html>
<h3>Example: E-text page</h3>
<h3 class="hd hd-2">Example: E-text page</h3>
<p>You can write complex equations in LaTeX.</p>
<p>When you add the component, be sure to select <strong>Settings</strong>
to specify a <strong>Display Name</strong> and other values that apply.</p>
......
......@@ -2,7 +2,7 @@
metadata:
display_name: Zooming Image Tool
data: |
<h3>Zooming Image Tool</h3>
<h3 class="hd hd-2">Zooming Image Tool</h3>
<p>Use the Zooming Image Tool to enable learners to see details of large, complex images.</p>
<p>With the Zooming Image Tool, the learner can move the mouse pointer over a part of the image to enlarge it and see more detail.</p>
<p>To use the Zooming Image Tool, you must first add the <a href="http://files.edx.org/jquery.loupeAndLightbox.js" target="_blank">jquery.loupeAndLightbox.js JavaScript file</a> to your course.</p>
......
......@@ -20,45 +20,50 @@
scrollbar-track-color: #F5F5F5;
}
.mce-content-body h1 {
.mce-content-body h1,
.mce-content-body .hd-1 {
color: #3c3c3c;
font-weight: normal;
font-size: 2em;
line-height: 1.4em;
letter-spacing: 1px;
margin: 0 0 1.416em 0;
margin: 0 0 1.41575em 0;
}
.mce-content-body h2 {
.mce-content-body h2,
.mce-content-body .hd-2,
.mce-content-body h3 {
color: #646464;
font-weight: 300;
font-size: 1.2em;
line-height: 1.2em;
letter-spacing: 1px;
margin-bottom: 15px;
font-size: 1.6em;
line-height: 1.4em;
margin-bottom: 1.6em;
text-transform: uppercase;
-webkit-font-smoothing: antialiased;
}
.mce-content-body h3, .mce-content-body h4, .mce-content-body h5, .mce-content-body h6 {
.mce-content-body .hd-3,
.mce-content-body h4,
.mce-content-body .hd-4,
.mce-content-body h5,
.mce-content-body .hd-5,
.mce-content-body h6,
.mce-content-body .hd-6 {
margin: 0 0 10px 0;
font-weight: 600;
}
.mce-content-body h3 {
font-size: 1.2em;
}
.mce-content-body h4 {
font-size: 1em;
.mce-content-body h4,
.mce-content-body .hd-4 {
font-size: 1.4em;
}
.mce-content-body h5 {
font-size: .83em;
.mce-content-body h5,
.mce-content-body .hd-5 {
font-size: 1.2em;
}
.mce-content-body h6 {
font-size: 0.75em;
.mce-content-body h6,
.mce-content-body .hd-6 {
font-size: 1em;
}
.mce-content-body p {
......
......@@ -44,5 +44,5 @@ class LibraryContentXBlockWrapper(PageObject):
"""
Gets headers of all child XBlocks as list of strings
"""
child_blocks_headers = self.q(css=self._bounded_selector("div[data-id] h3.problem-header"))
child_blocks_headers = self.q(css=self._bounded_selector("div[data-id] .problem-header"))
return frozenset(child.text for child in child_blocks_headers)
......@@ -115,7 +115,7 @@ class AnnotatableProblemTest(UniqueCourseTest):
self.courseware_page.visit()
annotation_component_page = AnnotationComponentPage(self.browser)
self.assertEqual(
annotation_component_page.component_name, 'TEST ANNOTATION MODULE'.format()
annotation_component_page.component_name, 'Test Annotation Module'.format()
)
return annotation_component_page
......
......@@ -630,10 +630,11 @@ class YouTubeVideoTest(VideoBaseTest):
"""
Scenario: Multiple videos in sequentials all load and work, switching between sequentials
Given it has videos "A,B" in "Youtube" mode in position "1" of sequential
And videos "E,F" in "Youtube" mode in position "2" of sequential
And videos "C,D" in "Youtube" mode in position "2" of sequential
"""
self.verticals = [
[{'display_name': 'A'}, {'display_name': 'B'}], [{'display_name': 'C'}, {'display_name': 'D'}]
[{'display_name': 'A'}, {'display_name': 'B'}],
[{'display_name': 'C'}, {'display_name': 'D'}]
]
tab1_video_names = ['A', 'B']
......@@ -651,15 +652,16 @@ class YouTubeVideoTest(VideoBaseTest):
# go to video
self.navigate_to_video()
execute_video_steps(tab1_video_names)
# go to second sequential position
# import ipdb; ipdb.set_trace()
self.go_to_sequential_position(2)
execute_video_steps(tab2_video_names)
# go back to first sequential position
# we are again playing tab 1 videos to ensure that switching didn't broke some video functionality.
# import ipdb; ipdb.set_trace()
self.go_to_sequential_position(1)
execute_video_steps(tab1_video_names)
......
......@@ -115,6 +115,9 @@ def when_i_navigate_to_an_item_in_a_sequence(step):
@step(u'I see the content of the section')
def then_i_see_the_content_of_the_section(step):
"""
Uppercasing the title here since CSS does it on the front-end
"""
wait_for_problem('Problem 2')
......
......@@ -40,6 +40,9 @@ def fill_inputs(_step):
@step('I see the result with words count')
def see_result(_step):
"""
Uppercasing since CSS capitalizes the headings
"""
strong_css = '.your_words strong'
target_text = set([world.css_text(strong_css, i) for i in range(2)])
assert set(['text1', 'text2']) == target_text
......
......@@ -66,3 +66,6 @@
// responsive
@import 'base/layouts'; // temporary spot for responsive course
// xmodule
@import 'xmodule/headings';
/*
* This comes from the UXPL, and is modified for use.
* The UXPL isn't available retroactively, so this shims
* the headings from the UXPL with what we're using in
* the platform to better sync things up in the meantime.
* It is scoped to #seq_content, specifically for xblock.
*
* Once the UXPl is fitted retroactively, this can be removed.
*/
$headings-count: 8;
$headings-font-weight-light: 200;
$headings-font-weight-normal: 400;
$headings-font-weight-bold: 600;
$headings-base-font-family: inherit;
$headings-base-color: $gray-d2;
%reset-headings {
margin: 0;
font-weight: $headings-font-weight-normal;
font-size: inherit;
line-height: inherit;
color: $headings-base-color;
}
%hd-1 {
margin-bottom: 1.41575em !important;
font-size: 2em !important;
line-height: 1.4em !important;
}
%hd-2 {
margin-bottom: 1em !important;
font-size: 1.5em !important;
font-weight: $headings-font-weight-normal !important;
line-height: 1.4em !important;
}
%hd-3 {
margin-bottom: ($baseline / 2) !important;
font-size: 1.35em !important;
font-weight: $headings-font-weight-normal !important;
line-height: 1.4em !important;
}
%hd-4 {
margin-bottom: ($baseline / 2) !important;
font-size: 1.25em !important;
font-weight: $headings-font-weight-bold !important;
line-height: 1.4em !important;
}
%hd-5 {
margin-bottom: ($baseline / 2) !important;
font-size: 1.1em !important;
font-weight: $headings-font-weight-bold !important;
line-height: 1.4em !important;
}
%hd-6 {
margin-bottom: ($baseline / 2) !important;
font-size: 1em !important;
font-weight: $headings-font-weight-bold !important;
line-height: 1.4em !important;
}
%hd-7 {
margin-bottom: ($baseline / 4);
font-size: 14px;
font-weight: $headings-font-weight-bold;
text-transform: uppercase;
line-height: 1.6em;
letter-spacing: 1px;
}
%hd-8 {
margin-bottom: ($baseline / 8);
font-size: 12px;
font-weight: $headings-font-weight-bold;
text-transform: uppercase;
line-height: 1.5em;
letter-spacing: 1px;
}
#seq_content {
.hd-1,
.hd-2,
.hd-3,
.hd-4,
.hd-5,
.hd-6,
.hd-7,
.hd-8 {
@extend %reset-headings;
}
// ----------------------------
// #CANNED
// ----------------------------
// canned heading classes
@for $i from 1 through $headings-count {
.hd-#{$i} {
@extend %hd-#{$i};
}
}
h3 {
@extend %hd-2;
font-weight: $headings-font-weight-normal !important;
// override external modules and xblocks that use inline CSS
text-transform: initial;
}
}
......@@ -3,7 +3,7 @@
<div class="annotatable-wrapper">
<div class="annotatable-header">
% if display_name is not UNDEFINED and display_name is not None:
<div class="annotatable-title">${display_name}</div>
<h3 class="hd hd-3 annotatable-title">${display_name}</h3>
% endif
</div>
......
......@@ -9,7 +9,7 @@
<% }) %>
</nav>
<% } %>
<h3 class="page-title"><%- title %></h3>
<h3 class="hd hd-2 page-title"><%- title %></h3>
<p class="page-description"><%- description %></p>
</div>
<div class="page-header-secondary"></div>
......
......@@ -11,7 +11,7 @@
<div class="annotatable-wrapper">
<div class="annotatable-header">
% if display_name is not UNDEFINED and display_name is not None:
<div class="annotatable-title">${display_name}</div>
<h3 class="hd hd-2 annotatable-title">${display_name}</h3>
% endif
</div>
% if instructions_html is not UNDEFINED and instructions_html is not None:
......@@ -27,12 +27,12 @@
% endif
<div class="annotatable-section">
<div class="annotatable-content">
<div id="imageHolder" class="openseadragon1">
<div id="imageHolder" class="openseadragon1">
<%namespace name='static' file='/static_content.html'/>
${static.css(group='style-vendor-tinymce-content', raw=True)}
${static.css(group='style-vendor-tinymce-skin', raw=True)}
${static.css(group='style-xmodule-annotations', raw=True)}
</div>
</div>
<div id="catchDIV">
<div class="annotationListContainer">${_('Note: only instructors may annotate.')}</div>
</div>
......@@ -57,9 +57,9 @@
$(this).parents('.annotatable-section:first').find('.annotatable-instructions')[slideMethod]();
}
$('.annotatable-toggle-instructions').on('click', onClickHideInstructions);
//Grab uri of the course
var parts = window.location.href.split("/"),
var parts = window.location.href.split("/"),
uri = '',
courseid;
for (var index = 0; index <= 9; index += 1) uri += parts[index]+"/"; //Get the unit url
......@@ -79,16 +79,16 @@
optionsAnnotator: {
permissions:{
user: {
id:"${user.email}",
id:"${user.email}",
name:"${user.username}"
},
userString: function (user) {
if (user && user.name)
if (user && user.name)
return user.name;
return user;
},
userId: function (user) {
if (user && user.id)
if (user && user.id)
return user.id;
return user;
},
......@@ -112,7 +112,7 @@
}
for (_i = 0, _len = tokens.length; _i < _len; _i++) {
token = tokens[_i];
if (this.userId(user) === token) {
return true;
......@@ -199,7 +199,7 @@
window.osda = osda;
// END TODO
var userId = ('${default_tab}'.toLowerCase() === 'instructor') ?
var userId = ('${default_tab}'.toLowerCase() === 'instructor') ?
'${instructor_email}':
'${user.email}';
......
......@@ -3,7 +3,7 @@ import json
from django.utils.translation import ugettext as _
%>
<h3 class="problem-header">
<h3 class="hd hd-2 problem-header">
## Translators: "External resource" means that this learning module is hosted on a platform external to the edX LMS
${display_name} (${_('External resource')})
</h3>
......@@ -51,13 +51,13 @@ from django.utils.translation import ugettext as _
></iframe>
% endif
% elif not hide_launch:
<h4 class="error_message">
<h4 class="hd hd-4 error_message">
${_('Please provide launch_url. Click "Edit", and fill in the required fields.')}
</h4>
% endif
% if has_score and comment:
<h4 class="problem-feedback-label">${_("Feedback on your work from the grader:")}</h4>
<h4 class="hd hd-4 problem-feedback-label">${_("Feedback on your work from the grader:")}</h4>
<div class="problem-feedback">
## sanitized with bleach in view
${comment}
......
<%! from django.utils.translation import ugettext as _ %>
<%namespace name='static' file='static_content.html'/>
<h3 class="problem-header">
<h3 class="hd hd-2 problem-header">
${ problem['name'] }
</h3>
......
......@@ -7,7 +7,7 @@ ${static.css(group='style-xmodule-annotations', raw=True)}
<div class="annotatable-wrapper">
<div class="annotatable-header">
% if display_name is not UNDEFINED and display_name is not None:
<div class="annotatable-title">${display_name}</div>
<h3 class="hd hd-2 annotatable-title">${display_name}</h3>
% endif
</div>
% if instructions_html is not UNDEFINED and instructions_html is not None:
......@@ -186,10 +186,10 @@ ${static.css(group='style-xmodule-annotations', raw=True)}
window.ova = ova;
// END TODO
if (typeof Annotator.Plugin["Grouping"] === 'function')
if (typeof Annotator.Plugin["Grouping"] === 'function')
ova.annotator.addPlugin("Grouping");
var userId = ('${default_tab}'.toLowerCase() === 'instructor') ?
var userId = ('${default_tab}'.toLowerCase() === 'instructor') ?
'${instructor_email}':
'${user.email}';
......
<%! from django.utils.translation import ugettext as _ %>
% if display_name is not UNDEFINED and display_name is not None:
<h3>${display_name}</h3>
<h3 class="hd hd-2">${display_name}</h3>
% endif
<div
......@@ -23,7 +23,7 @@
<div class="video-player-pre"></div>
<section class="video-player">
<div id="${id}"></div>
<h4 class="video-error hidden">${_('No playable video sources found.')}</h4>
<h4 class="hd hd-4 video-error hidden">${_('No playable video sources found.')}</h4>
</section>
<div class="video-player-post"></div>
<div class="closed-captions"></div>
......
......@@ -7,7 +7,7 @@ ${static.css(group='style-xmodule-annotations', raw=True)}
<div class="annotatable-wrapper">
<div class="annotatable-header">
% if display_name is not UNDEFINED and display_name is not None:
<div class="annotatable-title">${display_name}</div>
<h3 class="hd hd-2 annotatable-title">${display_name}</h3>
% endif
</div>
% if instructions_html is not UNDEFINED and instructions_html is not None:
......@@ -184,7 +184,7 @@ ${static.css(group='style-xmodule-annotations', raw=True)}
// END TODO
ova.annotator.addPlugin('Tags');
var userId = ('${default_tab}'.toLowerCase() === 'instructor') ?
var userId = ('${default_tab}'.toLowerCase() === 'instructor') ?
'${instructor_email}':
'${user.email}';
......
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