Skip to content

E
edx-platform
Commit ae52b9c4 by Andy Armstrong
Options

Merge pull request #12057 from edx/alasdair/fedx-118-pattern-library-styles-with-current-partials 

Alasdair/fedx 118 pattern library styles with current partials
parents 56d003e4 fe884029
Showing with 337 additions and 990 deletions
.coveragerc
...@@ -14,14 +14,17 @@ source = ...@@ -14,14 +14,17 @@ source =
omit = omit =
cms/envs/* cms/envs/*
cms/manage.py cms/manage.py
cms/djangoapps/contentstore/views/dev.py
cms/djangoapps/*/migrations/* cms/djangoapps/*/migrations/*
cms/djangoapps/*/features/* cms/djangoapps/*/features/*
lms/debug/*
lms/envs/* lms/envs/*
lms/djangoapps/*/migrations/* lms/djangoapps/*/migrations/*
lms/djangoapps/*/features/* lms/djangoapps/*/features/*
common/djangoapps/terrain/* common/djangoapps/terrain/*
common/djangoapps/*/migrations/* common/djangoapps/*/migrations/*
openedx/core/djangoapps/*/migrations/* openedx/core/djangoapps/*/migrations/*
openedx/core/djangoapps/debug/*
[report] [report]
ignore_errors = True ignore_errors = True
......
cms/djangoapps/contentstore/views/dev.py
...@@ -12,17 +12,3 @@ from django.http import HttpResponseNotFound ...@@ -12,17 +12,3 @@ from django.http import HttpResponseNotFound
def dev_mode(request): def dev_mode(request):
"Sample static view" "Sample static view"
return render_to_response("dev/dev_mode.html") return render_to_response("dev/dev_mode.html")
def dev_show_template(request, template):
"""
Shows the specified template as an HTML page.
e.g. /template/ux/reference/container.html shows the template under ux/reference/container.html
Note: dynamic parameters can also be passed to the page.
e.g. /template/ux/reference/container.html?name=Foo
"""
try:
return render_to_response(template, request.GET.dict())
except TopLevelLookupException:
return HttpResponseNotFound("Couldn't find template {tpl}".format(tpl=template))
cms/templates/ux/reference/index.html
## Override the default styles_version to the Pattern Library version (version 2)
<%! main_css = "style-main-v2" %>
<%page expression_filter="h"/> <%page expression_filter="h"/>
<%inherit file="../../base.html" /> <%inherit file="../../base.html" />
...@@ -22,8 +25,6 @@ ...@@ -22,8 +25,6 @@
</div> </div>
<section class="xblock xblock-student_view xmodule_display xmodule_HtmlModule"> <section class="xblock xblock-student_view xmodule_display xmodule_HtmlModule">
<ul> <ul>
<li><a href="container.html">Container page</a></li>
<li><a href="unit.html">Unit page</a></li>
<li><a href="pattern-library-test.html">Pattern Library test page</a></li> <li><a href="pattern-library-test.html">Pattern Library test page</a></li>
</ul> </ul>
</section> </section>
......
cms/templates/ux/reference/modal_access-component.html deleted 100644 → 0
<%page expression_filter="h"/>
<div class="wrapper wrapper-modal-window wrapper-modal-window-edit-xblock" aria-labelledby="modal-window-title" role="dialog">
<div class="modal-window-overlay"></div>
<div class="modal-window confirm modal-med modal-type-html modal-editor" style="top: 50px; left: 400px;" tabindex="-1" aria-labelledby="modal-window-title">
<div class="edit-xblock-modal">
<div class="modal-header">
<h2 id="modal-window-title" class="title modal-window-title">Editing visibility for: [Component Name]</h2>
</div>
<div class="modal-content">
<div class="xblock-editor" data-locator="i4x://TestU/cohorts001/chapter/748152225449412a846bc24811a5621c" data-course-key="">
<div class="xblock xblock-visibility_view">
<div class="modal-section visibility-summary">
<div class="summary-message summary-message-warning visibility-summary-message">
<i class="icon fa fa-exclamation-triangle" aria-hidden="true"></i>
<p class="copy"><span class="sr">Warning: </span>This component is contained in a unit that is hidden from students. Component visibility settings are overridden by the unit visibility settings.</p>
</div>
<!-- NOTE: use when no group configuration has been set -->
<div class="is-not-configured has-actions">
<h4 class="title">You have not set up any groups</h4>
<div class="copy">
<p>Groups are a way for you to organize content in your course with a particular student experience in mind. They are commonly used to facilitate content and pedagogical experiments as well as to provide different tracks of content.</p>
</div>
<div class="actions">
<a href="" class="action action-primary action-settings">Manage groups in this course</a>
</div>
</div>
</div>
<form class="visibility-controls-form" method="post" action="">
<div class="modal-section visibility-controls">
<h3 class="modal-section-title">Set visibility to:</h3>
<div class="modal-section-content">
<section class="visibility-controls-primary">
<ul class="list-fields list-radio">
<li class="field field-radio field-visibility-level">
<input type="radio" id="visibility-level-all" name="visibility-level" value="" class="input input-radio visibility-level-all" />
<label for="visibility-level-all" class="label">All Students and Staff</label>
</li>
<li class="field field-radio field-visibility-level">
<input type="radio" id="visibility-level-specific" name="visibility-level" value="" class="input input-radio visibility-level-specific" checked="checked" />
<label for="visibility-level-specific" class="label">Specific Groups</label>
</li>
</ul>
</section>
<!-- NOTE: @andyarmstrong, if you need this wrapper to show and hide, great. If not, please remove it from the DOM -->
<div class="wrapper-visibility-specific">
<section class="visibility-controls-secondary">
<div class="visibility-controls-group">
<h4 class="visibility-controls-title modal-subsection-title sr">Content Groups</h4>
<ul class="list-fields list-checkbox">
<li class="field field-checkbox field-visibility-content-group">
<input type="checkbox" id="visibility-content-group-NAME1" name="visibility-content-group" value="" class="input input-checkbox visibility-content-group-NAME1" />
<label for="visibility-content-group-NAME1" class="label">Content Group NAME 1</label>
</li>
<li class="field field-checkbox field-visibility-content-group">
<input type="checkbox" id="visibility-content-group-NAME2" name="visibility-content-group" value="" class="input input-checkbox visibility-content-group-NAME2" />
<label for="visibility-content-group-NAME2" class="label">Content Group NAME 2</label>
</li>
<li class="field field-checkbox field-visibility-content-group">
<input type="checkbox" id="visibility-content-group-NAME3" name="visibility-content-group" value="" class="input input-checkbox visibility-content-group-NAME3" />
<label for="visibility-content-group-NAME3" class="label">Content Group NAME 3</label>
</li>
<li class="field field-checkbox field-visibility-content-group">
<input type="checkbox" id="visibility-content-group-NAME4" name="visibility-content-group" value="" class="input input-checkbox visibility-content-group-NAME4" />
<label for="visibility-content-group-NAME4" class="label">Content Group NAME 4</label>
</li>
<!-- NOTE: @andyarmstrong, here's an example of how we would treat a group that was deleted/removed - we need a .was removed class and an additional UI element called a .note -->
<li class="field field-checkbox field-visibility-content-group was-removed">
<input type="checkbox" id="visibility-content-group-deleted1" name="visibility-content-group" value="" class="input input-checkbox visibility-content-group-deleted" checked="checked" />
<label for="visibility-content-group-deleted1" class="label">
Deleted Content Group
</label>
<span class="note">The selected group no longer exists. Choose another group or make the component visible to All Students and Staff</span>
</li>
<!-- NOTE: @andyarmstrong, here's an example of how we would treat a group that was deleted/removed - we need a .was removed class and an additional UI element called a .note -->
<li class="field field-checkbox field-visibility-content-group was-removed">
<input type="checkbox" id="visibility-content-group-deleted1" name="visibility-content-group" value="" class="input input-checkbox visibility-content-group-deleted" checked="checked" />
<label for="visibility-content-group-deleted1" class="label">
Deleted Content Group
</label>
<span class="note">The selected group no longer exists. Choose another group or make the component visible to All Students and Staff</span>
</li>
</ul>
</div>
</section>
</div>
</div>
</div>
</form>
</div><!-- .xblock -->
</div><!-- .xblock-editor -->
</div><!-- .modal-content -->
<div class="modal-actions">
<h3 class="sr">Actions</h3>
<ul>
<li class="action-item">
<a href="#" class="button action-primary action-save">Save</a>
</li>
<li class="action-item">
<a href="#" class="button action-cancel">Cancel</a>
</li>
</ul>
</div>
</div><!-- .xblock-visibility-modal -->
</div><!-- .modal-window -->
</div><!-- .wrapper-modal-window -->
cms/templates/ux/reference/modal_bulkpublish-section.html deleted 100644 → 0
<%page expression_filter="h"/>
<%! from django.utils.translation import ugettext as _ %>
<div class="wrapper wrapper-modal-window wrapper-modal-window-bulkpublish-section" aria-labelledby="modal-window-title" role="dialog">
<div class="modal-window-overlay"></div>
<div style="top: 5%; left: 30%;" class="modal-window confirm modal-med modal-type-confirm">
<div class="bulkpublish-section-modal">
<div class="modal-header">
<h2 class="title modal-window-title">Publish [section name]</h2>
</div>
<div class="modal-content">
<div class="message modal-introduction">
<p>Publish all unpublished changes for this section?</p>
</div>
<div class="modal-section bulkpublish-included">
<h3 class="modal-section-title">The following will be published:</h3>
<div class="modal-section-content">
<div class="outline outline-simple outline-bulkpublish">
<ol class="list-subsections">
<li class="outline-item outline-subsection">
<h4 class="subsection-title item-title">Subsection Title</h4>
<div class="subsection-content">
<ol class="list-units">
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title that is really really really long and may span more than just one visual line of text.</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
</ol>
</div>
</li>
<li class="outline-item outline-subsection">
<h4 class="subsection-title item-title">Subsection Title</h4>
<div class="subsection-content">
<ol class="list-units">
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title that is really really really long and may span more than just one visual line of text.</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
</ol>
</div>
</li>
<li class="outline-item outline-subsection">
<h4 class="subsection-title item-title">Subsection Title</h4>
<div class="subsection-content">
<ol class="list-units">
<ol class="list-units">
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title that is really really really long and may span more than just one visual line of text.</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
</ol>
</ol>
</div>
</li>
</ol>
</div>
</div>
</div>
</div>
<div class="modal-actions">
<h3 class="sr">Actions</h3>
<ul>
<li class="action-item">
<a href="#" class="button action-primary action-publish">Publish</a>
</li>
<li class="action-item">
<a href="#" class="button action-cancel">Cancel</a>
</li>
</ul>
</div>
</div>
</div>
</div>
cms/templates/ux/reference/modal_bulkpublish-subsection.html deleted 100644 → 0
<%page expression_filter="h"/>
<%! from django.utils.translation import ugettext as _ %>
<div class="wrapper wrapper-modal-window wrapper-modal-window-bulkpublish-subsection" aria-labelledby="modal-window-title" role="dialog">
<div class="modal-window-overlay"></div>
<div style="top: 5%; left: 30%;" class="modal-window confirm modal-med modal-type-confirm">
<div class="bulkpublish-subsection-modal">
<div class="modal-header">
<h2 class="title modal-window-title">Publish [subsection name]</h2>
</div>
<div class="modal-content">
<div class="message modal-introduction">
<p>Publish all unpublished changes for this subsection?</p>
</div>
<div class="modal-section bulkpublish-included">
<h3 class="modal-section-title">The following will be published:</h3>
<div class="modal-section-content">
<div class="outline outline-simple outline-bulkpublish">
<ol class="list-units">
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title that is really really really long and may span more than just one visual line of text.</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
<li class="outline-item outline-unit">
<span class="unit-title item-title">Unit Title</span>
</li>
</ol>
</div>
</div>
</div>
</div>
<div class="modal-actions">
<h3 class="sr">Actions</h3>
<ul>
<li class="action-item">
<a href="#" class="button action-primary action-publish">Publish</a>
</li>
<li class="action-item">
<a href="#" class="button action-cancel">Cancel</a>
</li>
</ul>
</div>
</div>
</div>
</div>
cms/templates/ux/reference/modal_bulkpublish-unit.html deleted 100644 → 0
<%page expression_filter="h"/>
<%! from django.utils.translation import ugettext as _ %>
<div class="wrapper wrapper-modal-window wrapper-modal-window-bulkpublish-unit" aria-labelledby="modal-window-title" role="dialog">
<div class="modal-window-overlay"></div>
<div style="top: 5%; left: 30%;" class="modal-window confirm modal-med modal-type-confirm">
<div class="bulkpublish-unit-modal">
<div class="modal-header">
<h2 class="title modal-window-title">Publish [unit name]</h2>
</div>
<div class="modal-content">
<div class="message modal-introduction">
<p>Publish all unpublished changes for this unit?</p>
</div>
</div>
<div class="modal-actions">
<h3 class="sr">Actions</h3>
<ul>
<li class="action-item">
<a href="#" class="button action-primary action-publish">Publish</a>
</li>
<li class="action-item">
<a href="#" class="button action-cancel">Cancel</a>
</li>
</ul>
</div>
</div>
</div>
</div>
cms/templates/ux/reference/outline_add-section.html deleted 100644 → 0
<%page expression_filter="h"/>
<div class="add-section add-item">
<a href="#" class="button button-new" data-category="" data-parent="" data-default-name="New Section">
<i class="icon fa fa-plus"></i> New Section
</a>
</div>
<!-- /add-section -->
cms/templates/ux/reference/outline_add-subsection.html deleted 100644 → 0
<%page expression_filter="h"/>
<div class="add-subsection add-item">
<a href="#" class="button button-new" data-category="" data-parent="" data-default-name="New Subsection">
<i class="icon fa fa-plus"></i> New Subsection
</a>
</div>
<!-- /add-subsection -->
cms/templates/ux/reference/outline_add-unit.html deleted 100644 → 0
<%page expression_filter="h"/>
<div class="add-unit add-item">
<a href="#" class="button button-new" data-category="" data-parent="" data-default-name="New Unit">
<i class="icon fa fa-plus"></i> New Unit
</a>
</div>
<!-- /add-unit -->
cms/templates/ux/reference/outline_section_header-collapsed.html deleted 100644 → 0
<%page expression_filter="h"/>
<div class="section-header">
<h3 class="section-header-details ui-toggle-expansion" title="Collapse/Expand this Section">
<i class="icon fa fa-caret-down icon"></i>
<span class="wrapper-section-title is-editable wrapper-xblock-field">
<span class="section-title item-title xblock-field-value">Section Title</span>
</span>
</h3>
<div class="section-header-actions">
<ul class="actions-list">
<li class="action-item action-publish">
<a href="#" data-tooltip="Publish all content" class="publish-button action-button">
<i class="icon fa fa-share-square-o"></i>
<span class="action-button-text sr">Publish all content</span>
</a>
</li>
<li class="action-item action-settings">
<a href="#" data-tooltip="Settings" class="settings-button action-button">
<i class="icon fa fa-cog"></i>
<span class="action-button-text sr">Settings</span>
</a>
</li>
<li class="action-item action-delete">
<a href="#" data-tooltip="Delete" class="delete-button action-button">
<i class="icon fa fa-trash-o"></i>
<span class="action-button-text sr">Delete</span>
</a>
</li>
<li class="action-item action-drag">
<span data-tooltip="Drag to reorder" class="drag-handle action"></span>
</li>
</ul>
</div>
</div>
<!-- /section-header -->
cms/templates/ux/reference/outline_section_header-expanded.html deleted 100644 → 0
<%page expression_filter="h"/>
<div class="section-header">
<h3 class="section-header-details ui-toggle-expansion" title="Collapse/Expand this Section">
<i class="icon fa fa-caret-down icon"></i>
<span class="wrapper-section-title is-editable wrapper-xblock-field">
<span class="section-title item-title xblock-field-value">Section Title</span>
</span>
</h3>
<div class="section-header-actions">
<ul class="actions-list">
<li class="action-item action-publish">
<a href="#" data-tooltip="Publish all content" class="publish-button action-button">
<i class="icon fa fa-share-square-o"></i>
<span class="action-button-text sr">Publish all content</span>
</a>
</li>
<li class="action-item action-settings">
<a href="#" data-tooltip="Settings" class="settings-button action-button">
<i class="icon fa fa-cog"></i>
<span class="action-button-text sr">Settings</span>
</a>
</li>
<li class="action-item action-delete">
<a href="#" data-tooltip="Delete" class="delete-button action-button">
<i class="icon fa fa-trash-o"></i>
<span class="action-button-text sr">Delete</span>
</a>
</li>
<li class="action-item action-drag">
<span data-tooltip="Drag to reorder" class="drag-handle action"></span>
</li>
</ul>
</div>
</div>
<!-- /section-header -->
cms/templates/ux/reference/outline_status_grading.html deleted 100644 → 0
<%page expression_filter="h"/>
<div class="status-grading">
<p>
<span class="sr status-grading-label">Graded as:</span>
<i class="icon fa fa-check"></i>
<span class="status-grading-value">Homework</span>
<span class="status-grading-date">Due: December 31, 2014</span>
</p>
</div>
cms/templates/ux/reference/outline_status_message-error.html deleted 100644 → 0
<%page expression_filter="h"/>
<div class="status-message">
<i class="icon fa fa-warning"></i>
<p class="status-message-copy">Critical error</p>
</div>
cms/templates/ux/reference/outline_status_message-lock.html deleted 100644 → 0
<%page expression_filter="h"/>
<div class="status-message">
<i class="icon fa fa-lock"></i>
<p class="status-message-copy">Contains Staff only content</p>
</div>
cms/templates/ux/reference/outline_status_message-unpublished_changes.html deleted 100644 → 0
<%page expression_filter="h"/>
<div class="status-message">
<i class="icon fa fa-file-o"></i>
<p class="status-message-copy">Unpublished change(s) to live content</p>
</div>
cms/templates/ux/reference/outline_status_message-unpublished_units.html deleted 100644 → 0
<%page expression_filter="h"/>
<div class="status-message">
<i class="icon fa fa-file-o"></i>
<p class="status-message-copy">Unpublished unit(s) will not be released</p>
</div>
cms/templates/ux/reference/outline_status_release-draft.html deleted 100644 → 0
<%page expression_filter="h"/>
<div class="status-release">
<p>
<span class="sr status-release-label">Release Status:</span>
<span class="status-release-value">
<i class="icon fa fa-file-o"></i>
<span class="sr">This item is</span>
</span>
<span class="status-release-date">Unscheduled</span>
</p>
</div>
cms/templates/ux/reference/outline_status_release-lock.html deleted 100644 → 0
<%page expression_filter="h"/>
<div class="status-release">
<p>
<span class="sr status-release-label">Release Status:</span>
<span class="status-release-value">
<i class="icon fa fa-lock"></i>
Will never release - Contains Staff only content
</span>
</p>
</div>
cms/templates/ux/reference/outline_status_release-released.html deleted 100644 → 0
<%page expression_filter="h"/>
<div class="status-release">
<p>
<span class="sr status-release-label">Release Status:</span>
<span class="status-release-value">
<i class="icon fa fa-check-square"></i>
Released <span class="sr">on</span>:
</span>
<span class="status-release-date">March 25, 2014</span>
</p>
</div>
cms/templates/ux/reference/outline_status_release-released_with_parent.html deleted 100644 → 0
<%page expression_filter="h"/>
<div class="status-release">
<p>
<span class="sr status-release-label">Release Status:</span>
<span class="status-release-value">
<i class="icon fa fa-check-square"></i>
Released with Section
</span>
</p>
</div>
cms/templates/ux/reference/outline_status_release-scheduled.html deleted 100644 → 0
<%page expression_filter="h"/>
<div class="status-release">
<p>
<span class="sr status-release-label">Release Status:</span>
<span class="status-release-value">
<i class="icon fa fa-clock-o"></i>
Scheduled: October 31, 2014
</span>
</p>
</div>
cms/templates/ux/reference/outline_status_release-scheduled_with_parent.html deleted 100644 → 0
<%page expression_filter="h"/>
<div class="status-release">
<p>
<span class="sr status-release-label">Release Status:</span>
<span class="status-release-value">
<i class="icon fa fa-clock-o"></i>
Scheduled: with Section
</span>
</p>
</div>
cms/templates/ux/reference/outline_subsection_header-collapsed.html deleted 100644 → 0
<%page expression_filter="h"/>
<div class="subsection-header">
<h3 class="subsection-header-details ui-toggle-expansion" title="Collapse/Expand this Subsection">
<i class="icon fa fa-caret-down icon"></i>
<span class="wrapper-subsection-title is-editable wrapper-xblock-field">
<span class="subsection-title item-title xblock-field-value">Subsection Title</span>
<!-- editor-title -->
<span class="editor">
<label class="sr" for="subsection-title_ID">Rename Subsection Name</label>
<input class="item-edit-title is-hidden" id="section-title_ID" type="text" value="" data-metadata-name="" />
</span>
<!-- /editor-title -->
</span>
</h3>
<div class="subsection-header-actions">
<ul class="actions-list">
<li class="action-item action-publish">
<a href="#" data-tooltip="Publish" class="publish-button action-button">
<i class="icon fa fa-share-square-o"></i>
<span class="action-button-text sr">Publish</span>
</a>
</li>
<li class="action-item action-settings">
<a href="#" data-tooltip="Settings" class="settings-button action-button">
<i class="icon fa fa-cog"></i>
<span class="action-button-text sr">Settings</span>
</a>
</li>
<li class="action-item action-delete">
<a href="#" data-tooltip="Delete" class="delete-button action-button">
<i class="icon fa fa-trash-o"></i>
<span class="action-button-text sr">Delete</span>
</a>
</li>
<li class="action-item action-drag">
<span data-tooltip="Drag to reorder" class="drag-handle action"></span>
</li>
</ul>
</div>
</div>
<!-- /subsection-header -->
cms/templates/ux/reference/outline_subsection_header-expanded.html deleted 100644 → 0
<%page expression_filter="h"/>
<div class="subsection-header">
<h3 class="subsection-header-details ui-toggle-expansion" title="Collapse/Expand this Subsection">
<i class="icon fa fa-caret-down icon"></i>
<span class="wrapper-subsection-title is-editable wrapper-xblock-field">
<span class="subsection-title item-title xblock-field-value">Subsection Title</span>
<!-- editor-title -->
<span class="editor">
<label class="sr" for="subsection-title_ID">Rename Subsection Name</label>
<input class="item-edit-title is-hidden" id="section-title_ID" type="text" value="" data-metadata-name="" />
</span>
<!-- /editor-title -->
</span>
</h3>
<div class="subsection-header-actions">
<ul class="actions-list">
<li class="action-item action-publish">
<a href="#" data-tooltip="Publish" class="publish-button action-button">
<i class="icon fa fa-share-square-o"></i>
<span class="action-button-text sr">Publish</span>
</a>
</li>
<li class="action-item action-settings">
<a href="#" data-tooltip="Settings" class="settings-button action-button">
<i class="icon fa fa-cog"></i>
<span class="action-button-text sr">Settings</span>
</a>
</li>
<li class="action-item action-delete">
<a href="#" data-tooltip="Delete" class="delete-button action-button">
<i class="icon fa fa-trash-o"></i>
<span class="action-button-text sr">Delete</span>
</a>
</li>
<li class="action-item action-drag">
<span data-tooltip="Drag to reorder" class="drag-handle action"></span>
</li>
</ul>
</div>
</div>
<!-- /subsection-header -->
cms/templates/ux/reference/outline_unit_header.html deleted 100644 → 0
<%page expression_filter="h"/>
<div class="unit-header">
<h3 class="unit-header-details">
<span class="unit-title item-title"><a class="unit-url" href="">Unit Name</a></span>
</h3>
<div class="unit-header-actions">
<ul class="actions-list">
<li class="action-item action-publish">
<a href="#" data-tooltip="Publish" class="publish-button action-button">
<i class="icon fa fa-share-square-o"></i>
<span class="action-button-text sr">Publish</span>
</a>
</li>
<li class="action-item action-settings">
<a href="#" data-tooltip="Settings" class="settings-button action-button">
<i class="icon fa fa-cog"></i>
<span class="action-button-text sr">Settings</span>
</a>
</li>
<li class="action-item action-delete">
<a href="#" data-tooltip="Delete" class="delete-button action-button">
<i class="icon fa fa-trash-o"></i>
<span class="action-button-text sr">Delete</span>
</a>
</li>
<li class="action-item action-drag">
<span data-tooltip="Drag to reorder" class="drag-handle action"></span>
</li>
</ul>
</div>
</div>
<!-- /unit-header -->
cms/templates/ux/reference/pattern-library-test.html
...@@ -7,17 +7,16 @@ ...@@ -7,17 +7,16 @@
<%block name="bodyclass">is-signedin pattern-library</%block> <%block name="bodyclass">is-signedin pattern-library</%block>
<%block name="content"> <%block name="content">
<h3 class="hd-6 example-set-hd">Warning Alert with Message Only</h3> <h1>Pattern Library test page</h1>
<div class="example-set">
<div class="alert alert-warning" role="alert" aria-labelledby="alert-warning-publish-title" tabindex="-1">
<span class="icon alert-icon icon-warning" aria-hidden="true"></span>
<div class="alert-message"> <div class="alert alert-warning" role="alert" tabindex="-1">
<p class="alert-copy"> <span class="icon alert-icon fa fa-exclamation-triangle" aria-hidden="true"></span>
Interesting pattern library content to come...
</p>
</div>
<div class="alert-message">
<p class="alert-copy">
Interesting pattern library content to come...
</p>
</div> </div>
</div> </div>
</%block> </%block>
cms/urls_dev.py
...@@ -7,5 +7,5 @@ from django.conf.urls import url ...@@ -7,5 +7,5 @@ from django.conf.urls import url
urlpatterns = ( urlpatterns = (
url(r'^dev_mode$', 'contentstore.views.dev.dev_mode', name='dev_mode'), url(r'^dev_mode$', 'contentstore.views.dev.dev_mode', name='dev_mode'),
url(r'^template/(?P<template>.+)$', 'contentstore.views.dev.dev_show_template'), url(r'^template/(?P<template>.+)$', 'openedx.core.djangoapps.debug.views.show_reference_template'),
) )
common/test/acceptance/pages/common/logout.py
...@@ -13,4 +13,4 @@ class LogoutPage(PageObject): ...@@ -13,4 +13,4 @@ class LogoutPage(PageObject):
url = BASE_URL + "/logout" url = BASE_URL + "/logout"
def is_browser_on_page(self): def is_browser_on_page(self):
return self.q(css='.cta-login').present return self.q(css='.btn-login').present
lms/djangoapps/debug/views.py
...@@ -45,18 +45,3 @@ def show_parameters(request): ...@@ -45,18 +45,3 @@ def show_parameters(request):
for name, value in sorted(request.POST.items()): for name, value in sorted(request.POST.items()):
html.append(escape("POST {}: {!r}".format(name, value))) html.append(escape("POST {}: {!r}".format(name, value)))
return HttpResponse("\n".join("<p>{}</p>".format(h) for h in html)) return HttpResponse("\n".join("<p>{}</p>".format(h) for h in html))
def show_reference_template(request, template):
"""
Shows the specified template as an HTML page. This is used only in debug mode to allow the UX team
to produce and work with static reference templates.
e.g. /template/ux/reference/container.html shows the template under ux/reference/container.html
Note: dynamic parameters can also be passed to the page.
e.g. /template/ux/reference/container.html?name=Foo
"""
try:
return render_to_response(template, request.GET.dict())
except TopLevelLookupException:
return HttpResponseNotFound("Couldn't find template {template}".format(template=template))
lms/static/js/header_factory.js 0 → 100644
;(function (define) {
'use strict';
define([
'edx-ui-toolkit/js/dropdown-menu/dropdown-menu-view'
],
function (DropdownMenuView) {
return function() {
var dropdownMenuView = new DropdownMenuView({
el: '.js-header-user-menu'
}).postRender();
return dropdownMenuView;
};
});
}).call(this, define || RequireJS.define);
lms/static/lms/js/build.js
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
'js/edxnotes/views/page_factory', 'js/edxnotes/views/page_factory',
'js/financial-assistance/financial_assistance_form_factory', 'js/financial-assistance/financial_assistance_form_factory',
'js/groups/views/cohorts_dashboard_factory', 'js/groups/views/cohorts_dashboard_factory',
'js/header_factory',
'js/search/course/course_search_factory', 'js/search/course/course_search_factory',
'js/search/dashboard/dashboard_search_factory', 'js/search/dashboard/dashboard_search_factory',
'js/student_account/logistration_factory', 'js/student_account/logistration_factory',
......
lms/static/sass/_build-lms-v2.scss
...@@ -5,5 +5,9 @@ ...@@ -5,5 +5,9 @@
// Configuration // Configuration
@import 'config'; @import 'config';
@import 'base/variables';
// Extensions // Extensions
@import 'shared-v2/base';
@import 'shared-v2/navigation';
@import 'shared-v2/header';
lms/static/sass/_shame.scss
...@@ -139,7 +139,7 @@ ...@@ -139,7 +139,7 @@
.verification-process { .verification-process {
//overriding reset link style for nav/header //overriding reset link style for nav/header
header.global { .header-global {
.logo a:hover, .logo:active, .logo a:focus { .logo a:hover, .logo:active, .logo a:focus {
border: none; border: none;
......
lms/static/sass/base/_extends.scss
...@@ -79,7 +79,7 @@ ...@@ -79,7 +79,7 @@
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
} }
.global { .header-global {
h2 { h2 {
display: none; display: none;
} }
......
lms/static/sass/base/_layouts.scss
...@@ -12,11 +12,11 @@ body.view-in-course { ...@@ -12,11 +12,11 @@ body.view-in-course {
} }
// courseware header // courseware header
header.global, .header-global,
header.global.slim { .header-global.slim {
width: auto; width: auto;
.nav-wrapper { .wrapper-header {
min-width: auto; min-width: auto;
padding-right: 2%; padding-right: 2%;
padding-left: 2%; padding-left: 2%;
......
lms/static/sass/course/layout/_courseware_header.scss
...@@ -72,7 +72,7 @@ ...@@ -72,7 +72,7 @@
} }
} }
header.global.slim { .header-global.slim {
box-shadow: 0 1px 2px $shadow-l1; box-shadow: 0 1px 2px $shadow-l1;
height: auto; height: auto;
padding: ($baseline/4) 0 ($baseline/2) 0; padding: ($baseline/4) 0 ($baseline/2) 0;
......
lms/static/sass/multicourse/_account.scss
...@@ -217,7 +217,7 @@ ...@@ -217,7 +217,7 @@
// aside // aside
aside { aside {
.cta { .btn {
margin: 0 0 ($baseline*2) 0; margin: 0 0 ($baseline*2) 0;
&:last-child { &:last-child {
...@@ -230,7 +230,7 @@ ...@@ -230,7 +230,7 @@
} }
} }
.cta-login { .btn-login {
h3.title, h3.title,
.instructions { .instructions {
...@@ -238,7 +238,7 @@ ...@@ -238,7 +238,7 @@
margin-bottom: 0; margin-bottom: 0;
} }
.cta-login-action { .btn-login-action {
@extend %btn-secondary-grey-outline; @extend %btn-secondary-grey-outline;
padding: ($baseline/10) ($baseline*0.75); padding: ($baseline/10) ($baseline*0.75);
@include margin-left($baseline/4); @include margin-left($baseline/4);
...@@ -631,7 +631,7 @@ ...@@ -631,7 +631,7 @@
// login // login
.view-login { .view-login {
header.global .nav-courseware .cta-login { .header-global .nav-courseware .btn-login {
display: none; display: none;
} }
...@@ -657,7 +657,7 @@ ...@@ -657,7 +657,7 @@
// password reset // password reset
.view-passwordreset { .view-passwordreset {
header.global .nav-courseware .cta-login { .header-global .nav-courseware .btn-login {
display: none; display: none;
} }
......
lms/static/sass/multicourse/_dashboard.scss
...@@ -456,7 +456,7 @@ ...@@ -456,7 +456,7 @@
} }
// TYPE: facebook share // TYPE: facebook share
&.action-facebook, { &.action-facebook {
color: $facebook-blue; color: $facebook-blue;
} }
...@@ -931,7 +931,7 @@ ...@@ -931,7 +931,7 @@
@include float(left); @include float(left);
@include margin(0, 15px, 0, 0); @include margin(0, 15px, 0, 0);
.btn, .cta { .btn {
display: inline-block; display: inline-block;
} }
...@@ -954,7 +954,7 @@ ...@@ -954,7 +954,7 @@
} }
} }
.cta { .btn {
@include float(left); @include float(left);
font: normal 0.8rem/1.2rem $sans-serif; font: normal 0.8rem/1.2rem $sans-serif;
letter-spacing: 1px; letter-spacing: 1px;
...@@ -1013,7 +1013,7 @@ ...@@ -1013,7 +1013,7 @@
&.course-status-certrendering { &.course-status-certrendering {
.cta { .btn {
margin-top: 2px; margin-top: 2px;
} }
} }
...@@ -1093,7 +1093,7 @@ ...@@ -1093,7 +1093,7 @@
@include float(left); @include float(left);
position: relative; position: relative;
.cta { .btn {
@extend %btn-pl-green-base; @extend %btn-pl-green-base;
@include float(right); @include float(right);
} }
......
lms/static/sass/shared-v2/_base.scss 0 → 100644
// LMS base styles
.content-wrapper {
margin: 0 auto;
padding: 10px;
}
lms/static/sass/shared-v2/_header.scss 0 → 100644
// LMS header styles
.header-global {
@extend %ui-depth1;
@include box-sizing(border-box);
position: relative;
width: 100%;
border-bottom: 4px solid $courseware-border-bottom-color;
box-shadow: 0 1px 5px 0 $shadow-l1;
background: $header-bg;
.wrapper-header {
@include clearfix();
@include box-sizing(border-box);
height: 74px;
margin: 0 auto;
padding: 10px 10px 0;
width: 100%;
max-width: 1180px;
.logo {
@include float(left);
@include margin-right(39px);
@include margin-left(10px);
margin-top: 4px;
margin-bottom: 0;
position: relative;
}
.left {
@include float(left);
}
.right {
@include float(right);
}
.wrapper-user-menu {
@include float(right);
margin-top: 4px;
width: auto;
}
.dropdown-menu {
@include text-align(left);
top: inherit;
}
.list-inline {
&.nav-global {
margin-top: 12px;
}
&.nav-courseware {
margin-top: 5px;
}
.item {
font-weight: font-weight(semi-bold);
text-transform: uppercase;
&.active {
a {
text-decoration: none;
color: $link-color;
}
}
}
}
}
}
lms/static/sass/shared-v2/_navigation.scss 0 → 100644
// LMS navigation styles
// skip navigation
.nav-skip {
font-size: font-size(small);
display: inline-block;
position: absolute;
left: 0;
top: -($baseline*30);
overflow: hidden;
background: $white;
border-bottom: 1px solid palette(grayscale, white);
padding: ($baseline*0.75) ($baseline/2);
&:focus,
&:active {
position: relative;
top: auto;
width: auto;
height: auto;
margin: 0;
}
}
lms/static/sass/shared/_header.scss
@import '../base/grid-settings'; @import '../base/grid-settings';
@import 'neat/neat'; // lib - Neat @import 'neat/neat'; // lib - Neat
header.global { .header-global {
@extend %ui-depth1; @extend %ui-depth1;
border-bottom: 1px solid $gray-l1; border-bottom: 1px solid $gray-l1;
box-shadow: 0 1px 5px 0 $shadow-l1; box-shadow: 0 1px 5px 0 $shadow-l1;
...@@ -330,7 +330,7 @@ header.global { ...@@ -330,7 +330,7 @@ header.global {
li, div { li, div {
display: inline-block; display: inline-block;
.cta { .btn {
@extend %m-btn-primary; @extend %m-btn-primary;
} }
} }
...@@ -340,7 +340,7 @@ header.global { ...@@ -340,7 +340,7 @@ header.global {
// marketing site design syncing // marketing site design syncing
.view-register, .view-login, .view-passwordreset { .view-register, .view-login, .view-passwordreset {
header.global nav { .header-global nav {
width: 960px; width: 960px;
} }
} }
...@@ -360,7 +360,7 @@ header.global { ...@@ -360,7 +360,7 @@ header.global {
// ==================== // ====================
// CASE: marketing/course discovery // CASE: marketing/course discovery
header.global-new { .header-global-new {
@extend %ui-depth1; @extend %ui-depth1;
/* Temp. fix until applied globally */ /* Temp. fix until applied globally */
@include box-sizing(border-box); @include box-sizing(border-box);
...@@ -852,13 +852,13 @@ header.global-new { ...@@ -852,13 +852,13 @@ header.global-new {
} }
} }
.view-register header.global-new .cta-register { .view-register .header-global-new .btn-register {
text-decoration: none; text-decoration: none;
color: $courseware-hover-color; color: $courseware-hover-color;
border-bottom-color: $courseware-border-bottom-color; border-bottom-color: $courseware-border-bottom-color;
} }
.view-login header.global-new .cta-login { .view-login .header-global-new .btn-login {
text-decoration: none; text-decoration: none;
color: $courseware-hover-color; color: $courseware-hover-color;
} }
...@@ -866,7 +866,7 @@ header.global-new { ...@@ -866,7 +866,7 @@ header.global-new {
// marketing site design syncing // marketing site design syncing
.view-register, .view-login { .view-register, .view-login {
header.global nav { .header-global nav {
width: 960px; width: 960px;
} }
} }
......
lms/static/sass/views/_verification.scss
...@@ -109,12 +109,12 @@ ...@@ -109,12 +109,12 @@
} }
// reset: navigation (needed due to edX's new global-header styling) // reset: navigation (needed due to edX's new global-header styling)
.global-new .nav-global a { .header-global-new .nav-global a {
padding-bottom: ($baseline +1); padding-bottom: ($baseline +1);
} }
// HACK: fix global header height in verification flow ECOM-1808 // HACK: fix global header height in verification flow ECOM-1808
header.global { .header-global {
height: 76px; height: 76px;
} }
......
lms/templates/main.html
...@@ -62,12 +62,19 @@ from pipeline_mako import render_require_js_path_overrides ...@@ -62,12 +62,19 @@ from pipeline_mako import render_require_js_path_overrides
<%static:css group='style-vendor'/> <%static:css group='style-vendor'/>
<%static:css group='${self.attr.main_css}'/> <%static:css group='${self.attr.main_css}'/>
% if disable_courseware_js: % if not uses_pattern_library:
% if disable_courseware_js:
<%static:js group='base_vendor'/>
<%static:js group='base_application'/>
% else:
<%static:js group='main_vendor'/>
<%static:js group='application'/>
% endif
% else:
## TODO: Update to only bring in RequireJS
## https://openedx.atlassian.net/browse/FEDX-140
<%static:js group='base_vendor'/> <%static:js group='base_vendor'/>
<%static:js group='base_application'/> <%static:js group='base_application'/>
% else:
<%static:js group='main_vendor'/>
<%static:js group='application'/>
% endif % endif
<script> <script>
...@@ -140,6 +147,7 @@ from pipeline_mako import render_require_js_path_overrides ...@@ -140,6 +147,7 @@ from pipeline_mako import render_require_js_path_overrides
% endif % endif
<%block name="js_extra"/> <%block name="js_extra"/>
<%include file="widgets/segment-io-footer.html" /> <%include file="widgets/segment-io-footer.html" />
<script type="text/javascript" src="${static.url('js/vendor/noreferrer.js')}" charset="utf-8"></script> <script type="text/javascript" src="${static.url('js/vendor/noreferrer.js')}" charset="utf-8"></script>
<script type="text/javascript" src="${static.url('js/utils/navigation.js')}" charset="utf-8"></script> <script type="text/javascript" src="${static.url('js/utils/navigation.js')}" charset="utf-8"></script>
......
lms/templates/navigation-edx.html deleted 100644 → 0
## mako
<%page expression_filter="h"/>
<%namespace name='static' file='static_content.html'/>
<%namespace file='main.html' import="login_query"/>
<%!
from django.core.urlresolvers import reverse
from django.utils.translation import ugettext as _
from microsite_configuration.templatetags.microsite import platform_name
from openedx.core.djangoapps.user_api.accounts.image_helpers import get_profile_image_urls_for_user
# App that handles subdomain specific branding
from branding import api as branding_api
# app that handles site status messages
from status.status import get_site_status_msg
%>
## Provide a hook for themes to inject branding on top.
<%block name="navigation_top" />
<%block>
<%
try:
course_id = course.id
except:
# can't figure out a better way to get at a possibly-defined course var
course_id = None
site_status_msg = get_site_status_msg(course_id)
%>
% if site_status_msg:
<div class="site-status">
<div class="inner-wrapper">
<span class="white-error-icon"></span>
<p>${site_status_msg}</p>
</div>
</div>
% endif
</%block>
<header class="${"global slim" if course and not disable_courseware_header else "global-new"}" aria-label="Main" role="banner">
<div class="${'rwd ' if responsive else ''}wrapper-header nav-container">
<h1 class="logo" itemscope="" itemtype="http://schema.org/Organization">
<a href="${marketing_link('ROOT')}" itemprop="url">
<%block name="navigation_logo">
<img src="${static.url(branding_api.get_logo_url())}" alt="${_("{platform_name} Home Page").format(platform_name=static.get_platform_name())}" itemprop="logo" />
</%block>
</a>
</h1>
% if course and not disable_courseware_header:
<h2 class="course-header">
<span class="provider">${course.display_org_with_default}:</span>
<span class="course-number">${course.display_number_with_default}</span>
<span class="course-name">${course.display_name_with_default}</span>
</h2>
% endif
% if user.is_authenticated():
% if not course or disable_courseware_header:
% if not nav_hidden:
<nav aria-label="Main" class="nav-main">
<ul class="left nav-global authenticated">
<%block name="navigation_global_links_authenticated">
<li class="nav-global-01">
<a href="${marketing_link('HOW_IT_WORKS')}">${_("How it Works")}</a>
</li>
<li class="nav-global-02">
<a href="${marketing_link('COURSES')}">${_("Find Courses")}</a>
</li>
<li class="nav-global-03">
<a href="${marketing_link('SCHOOLS')}">${_("Schools & Partners")}</a>
</li>
</%block>
</ul>
</nav>
% endif
% endif
<ul class="user">
<li class="primary">
<a href="${reverse('dashboard')}" class="user-link">
<span class="sr">${_("Dashboard for:")}</span>
<%
username = user.username
profile_image_url = get_profile_image_urls_for_user(user)['medium']
%>
<img class="user-image-frame" src="${profile_image_url}" alt="${_('Profile image for {username}').format(username=username)}">
<div class="label-username">${username}</div>
</a>
</li>
<li class="primary">
<button class="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr">${_("More options dropdown")}</span> &#9662;</button>
<ul class="dropdown-menu" aria-label="More Options" role="menu">
<%block name="navigation_dropdown_menu_links" >
<li><a href="${reverse('dashboard')}">${_("Dashboard")}</a></li>
<li><a href="${reverse('learner_profile', kwargs={'username': user.username})}">${_("Profile")}</a></li>
<li><a href="${reverse('account_settings')}">${_("Account")}</a></li>
</%block>
<li><a href="${reverse('logout')}" role="menuitem">${_("Sign Out")}</a></li>
</ul>
</li>
</ul>
% if should_display_shopping_cart_func(): # see shoppingcart.context_processor.user_has_cart_context_processor
<ul class="user">
<li class="primary">
<a class="shopping-cart" href="${reverse('shoppingcart.views.show_cart')}">
<i class="icon fa fa-shopping-cart" aria-hidden="true"></i> ${_("Shopping Cart")}
</a>
</li>
</ul>
% endif
% else:
<nav aria-label="Account" class="nav-account-management">
<div class="right nav-courseware">
<div class="nav-courseware-01">
% if not settings.FEATURES['DISABLE_LOGIN_BUTTON']:
% if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
<a class="cta cta-login" href="${reverse('course-specific-login', args=[course.id.to_deprecated_string()])}${login_query()}">${_("Sign in")}</a>
% else:
<a class="cta cta-login" href="/login${login_query()}">${_("Sign in")}</a>
% endif
% endif
</div>
% if not settings.FEATURES['DISABLE_LOGIN_BUTTON']:
% if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
<div class="nav-courseware-02">
<a class="cta cta-register nav-courseware-button" href="${reverse('course-specific-register', args=[course.id.to_deprecated_string()])}">${_("Register")}</a>
</div>
% else:
<div class="nav-courseware-02">
<a class="cta cta-register nav-courseware-button" href="/register">${_("Register")}</a>
</div>
% endif
% endif
</div>
</nav>
% endif
</div>
</header>
% if course:
<!--[if lte IE 9]>
<div class="ie-banner" aria-hidden="true">
${Text(_('{begin_strong}Warning:{end_strong} Your browser is not fully supported. We strongly recommend using {chrome_link} or {ff_link}.')).format(
begin_strong=HTML('<strong>'),
end_strong=HTML('</strong>'),
chrome_link=HTML('<a href="https://www.google.com/chrome" target="_blank">Chrome</a>'),
ff_link=HTML('<a href="http://www.mozilla.org/firefox" target="_blank">Firefox</a>'),
)
}
</div>
<![endif]-->
% endif
<%include file="help_modal.html"/>
lms/templates/register-sidebar.html
...@@ -13,10 +13,10 @@ from django.core.urlresolvers import reverse ...@@ -13,10 +13,10 @@ from django.core.urlresolvers import reverse
% if has_extauth_info is UNDEFINED: % if has_extauth_info is UNDEFINED:
<div class="cta cta-login"> <div class="btn-brand btn-login">
<h3 class="title">${_("Already registered?")}</h3> <h3 class="title">${_("Already registered?")}</h3>
<p class="instructions"> <p class="instructions">
<a class="cta-login-action" href="${reverse('signin_user')}${login_query()}"> <a class="btn-login-action" href="${reverse('signin_user')}${login_query()}">
${_("Log in")} ${_("Log in")}
</a> </a>
</p> </p>
......
lms/templates/user_dropdown.html 0 → 100644
## mako
<%page expression_filter="h"/>
<%namespace name='static' file='static_content.html'/>
<%!
from django.core.urlresolvers import reverse
from django.utils.translation import ugettext as _
from openedx.core.djangoapps.user_api.accounts.image_helpers import get_profile_image_urls_for_user
%>
% if uses_pattern_library:
<div class="wrapper-user-menu dropdown-menu-container logged-in js-header-user-menu">
<a href="${reverse('dashboard')}" class="menu-title">
<span class="sr-only">${_("Dashboard for:")}</span>
<%
username = user.username
profile_image_url = get_profile_image_urls_for_user(user)['medium']
%>
<img class="menu-image" src="${profile_image_url}" alt="">
${username}
</a>
<button type="button" class="menu-button button-more has-dropdown js-dropdown-button default-icon" aria-haspopup="true" aria-expanded="false" aria-controls="${_("Usermenu")}">
<span class="icon-fallback icon-fallback-img">
<span class="icon icon-angle-down" aria-hidden="true"></span>
<span class="text">${_("Usermenu dropdown")}</span>
</span>
</button>
<ul class="dropdown-menu list-divided is-hidden" id="${_("Usermenu")}" tabindex="-1">
<%block name="navigation_dropdown_menu_links" >
<li class="dropdown-item item has-block-link"><a href="${reverse('dashboard')}" class="action">${_("Dashboard")}</a></li>
<li class="dropdown-item item has-block-link"><a href="${reverse('learner_profile', kwargs={'username': user.username})}" class="action">${_("Profile")}</a></li>
<li class="dropdown-item item has-block-link"><a href="${reverse('account_settings')}" class="action">${_("Account")}</a></li>
</%block>
<li class="dropdown-item item has-block-link"><a href="${reverse('logout')}" role="menuitem" class="action">${_("Sign Out")}</a></li>
</ul>
</div>
% else:
<ol class="user">
<li class="primary">
<a href="${reverse('dashboard')}" class="user-link">
<span class="sr">${_("Dashboard for:")}</span>
<%
username = user.username
profile_image_url = get_profile_image_urls_for_user(user)['medium']
%>
<img class="user-image-frame" src="${profile_image_url}" alt="${_('Profile image for {username}').format(username=username)}">
<div class="label-username">${username}</div>
</a>
</li>
<li class="primary">
<button class="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr">${_("More options dropdown")}</span><span class="fa fa-sort-desc" aria-hidden="true"></span></button>
<ul class="dropdown-menu" aria-label="More Options" role="menu">
${navigation_dropdown_menu_links()}
<li class="item"><a href="${reverse('logout')}" role="menuitem">${_("Sign Out")}</a></li>
</ul>
</li>
</ol>
% endif
lms/templates/ux/reference/index.html
## Override the default styles_version to the Pattern Library version (version 2)
<%! main_css = "style-main-v2" %>
<%page expression_filter="h"/> <%page expression_filter="h"/>
<%inherit file="/main.html" /> <%inherit file="/main.html" />
<%namespace name='static' file='/static_content.html'/> <%namespace name='static' file='/static_content.html'/>
<%block name="pagetitle">UX Reference</%block> <%block name="pagetitle">UX Reference</%block>
...@@ -12,10 +16,10 @@ ...@@ -12,10 +16,10 @@
<div class="inner-wrapper"> <div class="inner-wrapper">
<div class="main-column"> <div class="main-column">
<article class="window unit-body"> <article class="window unit-body">
<h1>UX Style Reference</h1> <h2>UX Style Reference</h2>
<section class="xblock xblock-student_view xmodule_display xmodule_HtmlModule"> <section class="xblock xblock-student_view xmodule_display xmodule_HtmlModule">
<h2>Page Types</h2> <h3>Page Types</h3>
<ul> <ul>
<li><a href="pattern-library-test.html">Pattern Library test page</a></li> <li><a href="pattern-library-test.html">Pattern Library test page</a></li>
</ul> </ul>
......
lms/templates/ux/reference/pattern-library-test.html
...@@ -10,17 +10,15 @@ ...@@ -10,17 +10,15 @@
<%block name="bodyclass">pattern-library</%block> <%block name="bodyclass">pattern-library</%block>
<%block name="content"> <%block name="content">
<h3 class="hd-6 example-set-hd">Warning Alert with Message Only</h3> <h1>Pattern Library test page</h1>
<div class="example-set">
<div class="alert alert-warning" role="alert" aria-labelledby="alert-warning-publish-title" tabindex="-1">
<span class="icon alert-icon icon-warning" aria-hidden="true"></span>
<div class="alert-message"> <div class="alert alert-warning" role="alert" tabindex="-1">
<p class="alert-copy"> <span class="icon alert-icon fa fa-exclamation-triangle" aria-hidden="true"></span>
Interesting pattern library content to come...
</p>
</div>
<div class="alert-message">
<p class="alert-copy">
Interesting pattern library content to come...
</p>
</div> </div>
</div> </div>
</%block> </%block>
lms/urls.py
...@@ -966,7 +966,7 @@ if settings.DEBUG: ...@@ -966,7 +966,7 @@ if settings.DEBUG:
) )
# in debug mode, allow any template to be rendered (most useful for UX reference templates) # in debug mode, allow any template to be rendered (most useful for UX reference templates)
urlpatterns += url(r'^template/(?P<template>.+)$', 'debug.views.show_reference_template'), urlpatterns += url(r'^template/(?P<template>.+)$', 'openedx.core.djangoapps.debug.views.show_reference_template'),
if 'debug_toolbar' in settings.INSTALLED_APPS: if 'debug_toolbar' in settings.INSTALLED_APPS:
import debug_toolbar import debug_toolbar
......
openedx/core/djangoapps/debug/views.py 0 → 100644
"""
Views that are only activated when the project is running in development mode.
These views will NOT be shown on production: trying to access them will result
in a 404 error.
"""
from edxmako.shortcuts import render_to_response
from mako.exceptions import TopLevelLookupException
from django.http import HttpResponseNotFound
def show_reference_template(request, template):
"""
Shows the specified template as an HTML page. This is used only in
debug mode to allow the UX team to produce and work with static
reference templates.
e.g. http://localhost:8000/template/ux/reference/index.html
shows the template from ux/reference/index.html
Note: dynamic parameters can also be passed to the page.
e.g. /template/ux/reference/index.html?name=Foo
"""
try:
context = {
"disable_courseware_js": True,
"uses_pattern_library": True
}
context.update(request.GET.dict())
return render_to_response(template, context)
except TopLevelLookupException:
return HttpResponseNotFound("Couldn't find template {template}".format(template=template))
themes/edx.org/lms/templates/header.html
## mako ## mako
<%page expression_filter="h"/>
<%namespace name='static' file='static_content.html'/> <%namespace name='static' file='static_content.html'/>
<%namespace file='main.html' import="login_query"/> <%namespace file='main.html' import="login_query"/>
<%! <%!
...@@ -9,13 +10,20 @@ from django.utils.translation import ugettext as _ ...@@ -9,13 +10,20 @@ from django.utils.translation import ugettext as _
import branding import branding
# app that handles site status messages # app that handles site status messages
from status.status import get_site_status_msg from status.status import get_site_status_msg
from openedx.core.djangoapps.user_api.accounts.image_helpers import get_profile_image_urls_for_user
%> %>
## Provide a hook for themes to inject branding on top. ## Provide a hook for themes to inject branding on top.
<%block name="navigation_top" /> <%block name="navigation_top" />
## Add UI Toolkit components if using the Pattern Library
% if uses_pattern_library:
<%block name="js_extra">
<%static:require_module module_name="js/header_factory" class_name="HeaderFactory">
HeaderFactory();
</%static:require_module>
</%block>
% endif
<%block> <%block>
<% <%
try: try:
...@@ -35,8 +43,12 @@ site_status_msg = get_site_status_msg(course_id) ...@@ -35,8 +43,12 @@ site_status_msg = get_site_status_msg(course_id)
% endif % endif
</%block> </%block>
<header class="${"global slim" if course and not disable_courseware_header else "global-new"}" aria-label="Main" role="banner"> % if uses_pattern_library:
<div class="${'rwd ' if responsive else ''}wrapper-header nav-container"> <header class="header-global ${"slim" if course and not disable_courseware_header else ""}" aria-label="Main" role="banner">
% else:
<header class="${"header-global slim" if course and not disable_courseware_header else "header-global-new"}" aria-label="Main" role="banner">
% endif
<div class="${"rwd" if responsive else ""} wrapper-header nav-container">
<h1 class="logo" itemscope="" itemtype="http://schema.org/Organization"> <h1 class="logo" itemscope="" itemtype="http://schema.org/Organization">
<a href="${marketing_link('ROOT')}" itemprop="url"> <a href="${marketing_link('ROOT')}" itemprop="url">
<%block name="navigation_logo"> <%block name="navigation_logo">
...@@ -58,16 +70,16 @@ site_status_msg = get_site_status_msg(course_id) ...@@ -58,16 +70,16 @@ site_status_msg = get_site_status_msg(course_id)
% if not course or disable_courseware_header: % if not course or disable_courseware_header:
% if not nav_hidden or show_program_listing: % if not nav_hidden or show_program_listing:
<nav aria-label="Main" class="nav-main"> <nav aria-label="Main" class="nav-main">
<ul class="left nav-global authenticated"> <ul class="left list-inline nav-global authenticated">
% if not nav_hidden: % if not nav_hidden:
<%block name="navigation_global_links_authenticated"> <%block name="navigation_global_links_authenticated">
<li class="nav-global-01"> <li class="item nav-global-01">
<a href="${marketing_link('HOW_IT_WORKS')}">${_("How it Works")}</a> <a href="${marketing_link('HOW_IT_WORKS')}">${_("How it Works")}</a>
</li> </li>
<li class="nav-global-02"> <li class="item nav-global-02">
<a href="${marketing_link('COURSES')}">${_("Find Courses")}</a> <a href="${marketing_link('COURSES')}">${_("Find Courses")}</a>
</li> </li>
<li class="nav-global-03"> <li class="item nav-global-03">
<a href="${marketing_link('SCHOOLS')}">${_("Schools & Partners")}</a> <a href="${marketing_link('SCHOOLS')}">${_("Schools & Partners")}</a>
</li> </li>
</%block> </%block>
...@@ -86,69 +98,46 @@ site_status_msg = get_site_status_msg(course_id) ...@@ -86,69 +98,46 @@ site_status_msg = get_site_status_msg(course_id)
% endif % endif
</ul> </ul>
</nav> </nav>
% endif
% endif % endif
% endif
<ul class="user"> <%include file="user_dropdown.html"/>
<li class="primary">
<a href="${reverse('dashboard')}" class="user-link">
<span class="sr">${_("Dashboard for:")}</span>
<%
username = user.username
profile_image_url = get_profile_image_urls_for_user(user)['medium']
%>
<img class="user-image-frame" src="${profile_image_url}" alt="">
<div class="label-username">${username}</div>
</a>
</li>
<li class="primary">
<a href="#" class="dropdown" aria-haspopup="true" aria-expanded="false"><span class="sr">${_("More options dropdown")}</span> &#9662;</a>
<ul class="dropdown-menu" aria-label="More Options" role="menu">
<%block name="navigation_dropdown_menu_links" >
<li><a href="${reverse('dashboard')}">${_("Dashboard")}</a></li>
<li><a href="${reverse('learner_profile', kwargs={'username': user.username})}">${_("Profile")}</a></li>
<li><a href="${reverse('account_settings')}">${_("Account")}</a></li>
</%block>
<li><a href="${reverse('logout')}" role="menuitem">${_("Sign Out")}</a></li>
</ul>
</li>
</ul>
% if should_display_shopping_cart_func(): # see shoppingcart.context_processor.user_has_cart_context_processor % if should_display_shopping_cart_func(): # see shoppingcart.context_processor.user_has_cart_context_processor
<ul class="user"> <ul class="user">
<li class="primary"> <li class="primary">
<a class="shopping-cart" href="${reverse('shoppingcart.views.show_cart')}"> <a class="shopping-cart" href="${reverse('shoppingcart.views.show_cart')}">
<i class="icon fa fa-shopping-cart" aria-hidden="true"></i> ${_("Shopping Cart")} <i class="icon fa fa-shopping-cart" aria-hidden="true"></i> ${_("Shopping Cart")}
</a> </a>
</li> </li>
</ul> </ul>
% endif % endif
% else: % else:
<nav aria-label="Account" class="nav-account-management"> <nav aria-label="Account" class="nav-account-management">
<div class="right nav-courseware"> <div class="right nav-courseware list-inline">
<div class="nav-courseware-01"> <div class="item nav-courseware-01">
% if not settings.FEATURES['DISABLE_LOGIN_BUTTON']: % if not settings.FEATURES['DISABLE_LOGIN_BUTTON']:
% if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain: % if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
<a class="cta cta-login" href="${reverse('course-specific-login', args=[course.id.to_deprecated_string()])}${login_query()}">${_("Sign in")}</a> <a class="btn btn-login" href="${reverse('course-specific-login', args=[course.id.to_deprecated_string()])}${login_query()}">${_("Sign in")}</a>
% else: % else:
<a class="cta cta-login" href="/login${login_query()}">${_("Sign in")}</a> <a class="btn btn-login" href="/login${login_query()}">${_("Sign in")}</a>
% endif % endif
% endif % endif
</div>
% if not settings.FEATURES['DISABLE_LOGIN_BUTTON']:
% if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
<div class="nav-courseware-02">
<a class="cta cta-register nav-courseware-button" href="${reverse('course-specific-register', args=[course.id.to_deprecated_string()])}">${_("Register")}</a>
</div>
% else:
<div class="nav-courseware-02">
<a class="cta cta-register nav-courseware-button" href="/register">${_("Register")}</a>
</div> </div>
% if not settings.FEATURES['DISABLE_LOGIN_BUTTON']:
% if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
<div class="item nav-courseware-02">
<a class="btn-neutral btn-register" href="${reverse('course-specific-register', args=[course.id.to_deprecated_string()])}">${_("Register")}</a>
</div>
% else:
<div class="item nav-courseware-02">
<a class="btn-neutral btn-register" href="/register">${_("Register")}</a>
</div>
% endif
% endif % endif
% endif </div>
</div> </nav>
</nav>
% endif % endif
</div> </div>
</header> </header>
......
themes/red-theme/lms/templates/header.html
...@@ -136,15 +136,15 @@ site_status_msg = get_site_status_msg(course_id) ...@@ -136,15 +136,15 @@ site_status_msg = get_site_status_msg(course_id)
% endif % endif
</%block> </%block>
% if not settings.FEATURES['DISABLE_LOGIN_BUTTON']: % if not settings.FEATURES['DISABLE_LOGIN_BUTTON']:
% if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain: % if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
<li class="nav-global-04"> <li class="nav-global-04">
<a class="cta cta-register" href="${reverse('course-specific-register', args=[course.id.to_deprecated_string()])}">${_("Register Now")}</a> <a class="btn-neutral btn-register" href="${reverse('course-specific-register', args=[course.id.to_deprecated_string()])}">${_("Register Now")}</a>
</li> </li>
% else: % else:
<li class="nav-global-04"> <li class="nav-global-04">
<a class="cta cta-register" href="/register">${_("Register Now")}</a> <a class="btn-neutral btn-register" href="/register">${_("Register Now")}</a>
</li> </li>
% endif % endif
% endif % endif
</ol> </ol>
...@@ -152,9 +152,9 @@ site_status_msg = get_site_status_msg(course_id) ...@@ -152,9 +152,9 @@ site_status_msg = get_site_status_msg(course_id)
<li class="nav-courseware-01"> <li class="nav-courseware-01">
% if not settings.FEATURES['DISABLE_LOGIN_BUTTON']: % if not settings.FEATURES['DISABLE_LOGIN_BUTTON']:
% if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain: % if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
<a class="cta cta-login" href="${reverse('course-specific-login', args=[course.id.to_deprecated_string()])}${login_query()}">${_("Sign in")}</a> <a class="btn-brand btn-login" href="${reverse('course-specific-login', args=[course.id.to_deprecated_string()])}${login_query()}">${_("Sign in")}</a>
% else: % else:
<a class="cta cta-login" href="/login${login_query()}">${_("Sign in")}</a> <a class="btn-brand btn-login" href="/login${login_query()}">${_("Sign in")}</a>
% endif % endif
% endif % endif
</li> </li>
......
themes/stanford-style/lms/templates/register-sidebar.html
...@@ -11,10 +11,10 @@ from django.core.urlresolvers import reverse ...@@ -11,10 +11,10 @@ from django.core.urlresolvers import reverse
% if has_extauth_info is UNDEFINED: % if has_extauth_info is UNDEFINED:
<div class="cta cta-login"> <div class="btn-brand btn-login">
<h3 class="title">${_("Already registered?")}</h3> <h3 class="title">${_("Already registered?")}</h3>
<p class="instructions"> <p class="instructions">
<a class="cta-login-action" href="${reverse('signin_user')}${login_query()}"> <a class="btn-login-action" href="${reverse('signin_user')}${login_query()}">
${_("Log in")} ${_("Log in")}
</a> </a>
</p> </p>
......
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