Commit 22f58606 by Albert (AJ) St. Aubin Committed by GitHub

Merge pull request #14564 from edx/aj/TNL-6347_headers

Aj/tnl 6347 headers
parents b69b5864 7c7c2718
......@@ -15,7 +15,6 @@ h2 {
font: normal 1.2em/1.2em $sans-serif;
letter-spacing: 1px;
margin-bottom: ($baseline*0.75);
text-transform: uppercase;
-webkit-font-smoothing: antialiased;
}
......@@ -289,4 +288,4 @@ th {
}
}
}
}
\ No newline at end of file
}
<form class="forum-new-post-form">
<h3 class="thread-title"><%- gettext("Add a Post") %></h3>
<h2 class="thread-title"><%- gettext("Add a Post") %></h2>
<% if (mode === 'inline') { %>
<button class="btn-default add-post-cancel">
<span class="sr"><%- gettext('Cancel') %></span>
......
<h3 class="thread-title"><%- gettext("Editing post") %></h3>
<h2 class="thread-title"><%- gettext("Editing post") %></h2>
<ul class="post-errors"></ul>
<div class="forum-edit-post-form-wrapper"></div>
<div class="post-field">
......
......@@ -17,7 +17,7 @@
</div>
<% } %>
<div class="post-header-content">
<h4 class="post-title"><%- title %></h4>
<h2 class="post-title"><%- title %></h2>
<p class="posted-details">
<%
var timeAgoHtml = interpolate(
......
......@@ -24,7 +24,7 @@
</div>
<% if (can_create_comment && !readOnly) { %>
<form class="discussion-reply-new" data-id="<%- id %>">
<h4><%- gettext("Add a response:") %></h4>
<h3><%- gettext("Add a response:") %></h3>
<ul class="discussion-errors"></ul>
<div class="reply-body" data-id="<%- id %>"></div>
<div class="reply-post-control">
......
......@@ -45,7 +45,7 @@ class CourseWikiPage(CoursePage):
"""
Return the name of the article
"""
return str(self.q(css='.main-article h1').text[0])
return str(self.q(css='.main-article .entry-title').text[0])
class CourseWikiSubviewPage(CoursePage): # pylint: disable=abstract-method
......
......@@ -187,10 +187,10 @@ class CourseDateSummaryTest(SharedModuleStoreTestCase):
self.client.login(username='mrrobot', password='test')
html_elements = [
'<h4 class="handouts-header">Important Course Dates</h4>',
'<h3 class="hd hd-3 handouts-header">Important Course Dates</h3>',
'<div class="date-summary-container">',
'<div class="date-summary date-summary-todays-date">',
'<h3 class="heading localized-datetime"',
'<span class="hd hd-4 heading localized-datetime"',
'data-datetime="2015-01-02 00:00:00+00:00"',
'data-string="Today is {date}"',
'data-timezone="None"'
......@@ -209,10 +209,10 @@ class CourseDateSummaryTest(SharedModuleStoreTestCase):
response = self.client.get(url)
html_elements = [
'<h4 class="handouts-header">Important Course Dates</h4>',
'<h3 class="hd hd-3 handouts-header">Important Course Dates</h3>',
'<div class="date-summary-container">',
'<div class="date-summary date-summary-todays-date">',
'<h3 class="heading localized-datetime"',
'<span class="hd hd-4 heading localized-datetime"',
'data-datetime="2015-01-02 00:00:00+00:00"',
'data-string="Today is {date}"',
'data-timezone="America/Los_Angeles"'
......
......@@ -2,7 +2,7 @@
<section class="home-header">
<span class="label"><%- gettext("Discussion Home") %></span>
<% if (window.courseName) { %>
<h1 class="home-title"><%- window.courseName %></h1>
<h2 class="home-title"><%- window.courseName %></h2>
<% } %>
</section>
......
......@@ -169,7 +169,7 @@ class TestInstructorDashboard(ModuleStoreTestCase, LoginEnrollmentTestCase, XssT
response = self.client.get(self.url)
# enrollment information visible
self.assertIn('<h3 class="hd hd-3">Enrollment Information</h3>', response.content)
self.assertIn('<h4 class="hd hd-4">Enrollment Information</h4>', response.content)
self.assertIn('<th scope="row">Verified</th>', response.content)
self.assertIn('<th scope="row">Audit</th>', response.content)
self.assertIn('<th scope="row">Honor</th>', response.content)
......
......@@ -34,7 +34,6 @@ h1, h2, h3, h4, h5, h6 {
h1 {
color: $base-font-color;
font: normal 2em/1.4em $sans-serif;
letter-spacing: 1px;
margin-bottom: ($baseline*1.5);
text-align: center;
}
......@@ -42,9 +41,7 @@ h1 {
h2 {
color: $lighter-base-font-color;
font: normal 1.2em/1.2em $serif;
letter-spacing: 1px;
margin-bottom: ($baseline*0.75);
text-transform: uppercase;
-webkit-font-smoothing: antialiased;
}
......
......@@ -80,7 +80,7 @@
}
.header-global {
h2 {
.course-header {
display: none;
}
}
......
......@@ -32,7 +32,7 @@ $headings-base-color: $gray-d2;
%hd-2 {
font-size: em(18);
font-size: 1.5em;
font-weight: $headings-font-weight-bold;
line-height: 1.4em;
}
......
......@@ -18,8 +18,6 @@ body.view-in-course {
.wrapper-header {
min-width: auto;
padding-right: 2%;
padding-left: 2%;
}
}
......
......@@ -29,7 +29,7 @@ $notification-background: rgb(255, 255, 255) !default
.page-title {
margin-bottom: 5px;
color: $dark-gray1;
font-size: 24px;
text-transform: none;
}
.page-subtitle {
......@@ -65,14 +65,6 @@ div.info-wrapper {
width: 100%;
display: block;
h1,h3 {
@include text-align(left);
@extend %t-strong;
@extend %t-title6;
margin-bottom: $baseline;
font-style: normal;
}
div.upgrade-banner {
// This banner uses the Pattern Library's defined variables
@include border-left(0px);
......@@ -133,6 +125,7 @@ div.info-wrapper {
font-weight: font-weight(semi-bold);
font-size: font-size(large);
line-height: $base-line-height;
margin: 0;
}
.view-verified-info {
margin-top: $baseline/4;
......@@ -315,7 +308,6 @@ div.info-wrapper {
@extend %t-title6;
margin-bottom: 0;
padding: 12px 26px 20px 0;
font-style: normal;
}
ul {
......
......@@ -149,10 +149,6 @@
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
.progress-certificates-title {
float: none;
}
}
}
......
......@@ -242,7 +242,7 @@
}
}
h1 {
.instructor-dashboard-title {
@extend .top-header;
display: inline-block;
margin-bottom: ($baseline*.75);
......
......@@ -68,6 +68,7 @@
padding: ($baseline/4) 0 ($baseline/2) 0;
border-bottom: 1px solid $outer-border-color;
background: $header-bg;
line-height: 1.4;
.wrapper-header {
padding-top: ($baseline/4);
......@@ -117,35 +118,12 @@
padding-top: ($baseline/4);
}
h1.logo {
.logo {
margin: 0 ($baseline/2) 0 0;
@include padding-right(20px);
&:before {
@extend %faded-vertical-divider;
content: "";
display: block;
height: 35px;
position: absolute;
@include right(3px);
top: 0;
width: 1px;
}
&:after {
@extend %faded-vertical-divider-light;
content: "";
display: block;
height: 35px;
position: absolute;
right: 0;
top: 0;
width: 1px;
}
img {
height: 30px;
width: auto;
vertical-align: middle;
}
}
......@@ -154,26 +132,21 @@
display: none;
}
h2 {
display: block;
width: 65%;
.course-header {
@include float(left);
font-size: 0.9em;
font-weight: 600;
color: $lighter-base-font-color;
letter-spacing: 0;
margin-top: 9px;
margin-bottom: 0;
text-transform: none;
text-shadow: 0 1px 0 #fff;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
@include margin(10px, 10px, 0px, 10px);
display: inline-block;
width: 65%;
font-weight: font-weight(normal);
font-size: font-size(base);
line-height: 1.5;
.provider {
font: inherit;
font-weight: bold;
}
}
a#signup {
......
......@@ -132,6 +132,17 @@
letter-spacing: 0;
}
.entry-title {
padding-bottom: 8px;
margin-bottom: 22px;
border-bottom: 1px solid $light-gray;
font-size: 1.6em;
font-weight: bold;
color: $base-font-color;
text-transform: none;
letter-spacing: 0;
}
.main-article {
float: left;
width: flex-grid(9);
......
......@@ -9,6 +9,10 @@
box-shadow: 0 1px 5px 0 $shadow-l1;
background: $header-bg;
.logo-header {
display: inline;
}
.wrapper-header {
@include clearfix();
box-sizing: border-box;
......@@ -27,7 +31,6 @@
.logo {
@include float(left);
@include margin-left(10px);
@include margin-right(10px);
margin-top: 4px;
margin-bottom: 0;
......@@ -38,6 +41,9 @@
@include float(left);
@include margin(12px, 10px, 0px, 10px);
color: $lms-label-color;
.provider {
font-weight: bold;
}
}
.wrapper-user-menu {
......
......@@ -18,7 +18,11 @@
max-width: grid-width(12);
}
h1.logo {
.logo-header {
display: inline;
}
.logo {
@include float(left);
@include margin(-2px, 39px, 0, 0);
position: relative;
......@@ -388,7 +392,7 @@
}
}
h1.logo {
.logo {
@include float(left);
margin: -2px 39px 0 10px;
position: relative;
......@@ -422,8 +426,13 @@
}
}
.logo-header {
display: inline;
}
.nav-account-management {
margin: 0 auto;
display: inline;
}
.guest {
......
......@@ -60,9 +60,9 @@ from openedx.core.djangolib.markup import HTML, Text
<div class="container">
<div class="home">
<div class="page-header-main">
<h3 class="page-title">${_("Welcome to {org}'s {course_name}!").format(org=course.display_org_with_default, course_name=course.display_number_with_default)}
<h2 class="hd hd-2 page-title">${_("Welcome to {org}'s {course_name}!").format(org=course.display_org_with_default, course_name=course.display_number_with_default)}
<div class="page-subtitle">${course.display_name_with_default}</div>
</h3>
</h2>
</div>
% if last_accessed_courseware_url:
<div class="page-header-secondary">
......@@ -89,7 +89,7 @@ from openedx.core.djangolib.markup import HTML, Text
<img src="${STATIC_URL}images/edx-verified-mini-cert.png">
</div>
<div class="upgrade-msg">
<h4 class="msg-title">${_("Give yourself an additional incentive to complete")}</h4>
<h3 class="msg-title">${_("Give yourself an additional incentive to complete")}</h3>
<p class="view-verified-info">${_("Earn a verified certificate.")}
<a href="https://www.edx.org/verified-certificate" target="_blank">${_("Learn More")}</a>
</p>
......@@ -101,7 +101,7 @@ from openedx.core.djangolib.markup import HTML, Text
</div>
% endif
<h4>${_("Course Updates and News")}</h4>
<h3 class="hd hd-3">${_("Course Updates and News")}</h3>
${HTML(get_course_info_section(request, masquerade_user, course, 'updates'))}
## CourseTalk widget
......@@ -115,7 +115,7 @@ from openedx.core.djangolib.markup import HTML, Text
<section aria-label="${_('Handout Navigation')}" class="handouts">
% if SelfPacedConfiguration.current().enable_course_home_improvements:
<h4 class="handouts-header">${_("Important Course Dates")}</h4>
<h3 class="hd hd-3 handouts-header">${_("Important Course Dates")}</h3>
## Should be organized by date, last date appearing at the bottom
% for course_date in get_course_date_blocks(course, user):
......@@ -123,13 +123,13 @@ from openedx.core.djangolib.markup import HTML, Text
<div class="date-summary date-summary-${course_date.css_class}">
% if course_date.title:
% if course_date.title == 'current_datetime':
<h3 class="heading localized-datetime" data-datetime="${course_date.date}" data-string="${_(u'Today is {date}')}" data-timezone="${user_timezone}" data-language="${user_language}"></h3>
<span class="hd hd-4 heading localized-datetime" data-datetime="${course_date.date}" data-string="${_(u'Today is {date}')}" data-timezone="${user_timezone}" data-language="${user_language}"></span>
% else:
<h3 class="heading">${course_date.title}</h3>
<span class="hd hd-4 heading">${course_date.title}</span>
% endif
% endif
% if course_date.date and course_date.title != 'current_datetime':
<h4 class="date localized-datetime" data-format="shortDate" data-datetime="${course_date.date}" data-timezone="${user_timezone}" data-language="${user_language}" data-string="${_(course_date.relative_datestring)}"></h4>
<p class="hd hd-4 date localized-datetime" data-format="shortDate" data-datetime="${course_date.date}" data-timezone="${user_timezone}" data-language="${user_language}" data-string="${_(course_date.relative_datestring)}"></p>
% endif
% if course_date.description:
<p class="description">${course_date.description}</p>
......@@ -143,16 +143,16 @@ from openedx.core.djangolib.markup import HTML, Text
</div>
% endfor
% endif
<h4 class="handouts-header">${_(course.info_sidebar_name)}</h4>
<h3 class="hd hd-3 handouts-header">${_(course.info_sidebar_name)}</h3>
${HTML(get_course_info_section(request, masquerade_user, course, 'handouts'))}
</section>
% else:
<section class="updates">
<h4 class="handouts-header">${_("Course Updates and News")}</h4>
<h3 class="hd hd-3 handouts-header">${_("Course Updates and News")}</h3>
${HTML(get_course_info_section(request, masquerade_user, course, 'guest_updates'))}
</section>
<section aria-label="${_('Handout Navigation')}" class="handouts">
<h4 class="handouts-header">${_("Course Handouts")}</h4>
<h3 class="hd hd-3 handouts-header">${_("Course Handouts")}</h3>
${HTML(get_course_info_section(request, masquerade_user, course, 'guest_handouts'))}
</section>
% endif <!-- if course authenticated -->
......
......@@ -48,9 +48,9 @@ from django.utils.http import urlquote_plus
<a class="instructor-info-action studio-view" href="${studio_url}">${_("View Grading in studio")}</a>
</div>
% endif
<h3 class="hd hd-3 progress-certificates-title">
<h2 class="hd hd-2 progress-certificates-title">
${_("Course Progress for Student '{username}' ({email})").format(username=student.username, email=student.email)}
</h3>
</h2>
%if certificate_data:
<div class="wrapper-msg wrapper-auto-cert">
......@@ -145,11 +145,11 @@ from django.utils.http import urlquote_plus
%if courseware_summary:
<section class="chapters">
<h3 class="hd hd-4 sr">${_('Details for each chapter')}</h3>
<h2 class="sr">${_('Details for each chapter')}</h2>
%for chapter in courseware_summary:
%if not chapter['display_name'] == "hidden":
<section aria-labelledby="chapter_${loop.index}">
<h4 class="hd hd-4" id="chapter_${loop.index}">${ chapter['display_name']}</h4>
<h3 class="hd hd-3" id="chapter_${loop.index}">${ chapter['display_name']}</h3>
<div class="sections">
%for section in chapter['sections']:
<div>
......@@ -158,7 +158,7 @@ from django.utils.http import urlquote_plus
total = section.all_total.possible
percentageString = "{0:.0%}".format( float(earned)/total) if earned > 0 and total > 0 else ""
%>
<h5 class="hd hd-5">
<h4 class="hd hd-4">
<a href="${reverse('courseware_section', kwargs=dict(course_id=course.id.to_deprecated_string(), chapter=chapter['url_name'], section=section.url_name))}">
${ section.display_name}
%if total > 0 or earned > 0:
......@@ -170,7 +170,7 @@ from django.utils.http import urlquote_plus
%if total > 0 or earned > 0:
<span> ${"({0:.3n}/{1:.3n}) {2}".format( float(earned), float(total), percentageString )}</span>
%endif
</h5>
</h4>
<p>
%if section.format is not None:
${section.format}
......
......@@ -5,7 +5,7 @@ from openedx.core.djangolib.markup import HTML, Text
%>
%if settings.FEATURES.get('DISPLAY_ANALYTICS_ENROLLMENTS') or section_data.get('enrollment_message'):
<h3 class="hd hd-3">${_("Enrollment Information")}</h3>
<h4 class="hd hd-4">${_("Enrollment Information")}</h4>
<div class="enrollment-wrapper">
%if settings.FEATURES.get('DISPLAY_ANALYTICS_ENROLLMENTS'):
## Translators: 'track' refers to the enrollment type ('honor', 'verified', or 'audit')
......@@ -41,7 +41,7 @@ from openedx.core.djangolib.markup import HTML, Text
%endif
<div class="basic-wrapper">
<h3 class="hd hd-3">${_("Basic Course Information")}</h3>
<h4 class="hd hd-4">${_("Basic Course Information")}</h4>
<ul class="list-input">
<li class="field text is-not-editable" id="field-course-organization">
......@@ -119,7 +119,7 @@ from openedx.core.djangolib.markup import HTML, Text
%if settings.FEATURES.get('ENABLE_INSTRUCTOR_BACKGROUND_TASKS'):
<div class="running-tasks-container action-type-container">
<hr>
<h3 class="hd hd-3"> ${_("Pending Tasks")} </h3>
<h4 class="hd hd-4"> ${_("Pending Tasks")} </h4>
<div class="running-tasks-section">
<p>${_("The status for any active tasks appears in a table below.")} </p>
<br />
......@@ -136,7 +136,7 @@ from openedx.core.djangolib.markup import HTML, Text
<hr>
<p>
<div class="toggle-wrapper">
<h3 class="hd hd-3 title">${_("Course Warnings")}:</h3>
<h4 class="hd hd-4 title">${_("Course Warnings")}:</h4>
<div class="triangle"></div>
</div>
<div class="course-errors-visibility-wrapper">
......
......@@ -89,7 +89,7 @@ from django.core.urlresolvers import reverse
<div class="instructor-dashboard-wrapper-2">
<main id="main" aria-label="Content" tabindex="-1">
<section class="instructor-dashboard-content-2" id="instructor-dashboard-content">
<h1 class="hd hd-1">${_("Instructor Dashboard")}</h1>
<h2 class="hd hd-2 instructor-dashboard-title">${_("Instructor Dashboard")}</h2>
<div class="wrap-instructor-info studio-view">
%if studio_url:
<a class="instructor-info-action" href="${studio_url}">${_("View Course in Studio")}</a>
......@@ -118,7 +118,7 @@ from django.core.urlresolvers import reverse
% for section_data in sections:
<section id="${ section_data['section_key'] }" class="idash-section" aria-labelledby="header-${section_data['section_key']}">
<h2 class="hd hd-2" id="header-${ section_data['section_key'] }">${ section_data['section_display_name'] }</h2>
<h3 class="hd hd-3" id="header-${ section_data['section_key'] }">${ section_data['section_display_name'] }</h3>
<%include file="${ section_data['section_key'] }.html" args="section_data=section_data" />
</section>
% endfor
......
......@@ -49,33 +49,37 @@ site_status_msg = get_site_status_msg(course_id)
</%block>
<header id="global-navigation" class="header-global ${"slim" if course else ""}" >
<nav class="wrapper-header" aria-label="${_('Global')}">
<h1 class="logo">
<a href="${marketing_link('ROOT')}">
<%block name="navigation_logo">
<%
logo_url = get_enterprise_customer_logo_url(request)
logo_size = 'ec-logo-size'
if logo_url is None:
logo_url = branding_api.get_logo_url(is_secure)
logo_size = ''
%>
<img class="${logo_size}" src="${logo_url}" alt="${_("{platform_name} Home Page").format(platform_name=static.get_platform_name())}"/>
</%block>
</a>
</h1>
<h1 class="hd logo-header">
<div class="logo">
<a href="${marketing_link('ROOT')}">
<%block name="navigation_logo">
<%
logo_url = get_enterprise_customer_logo_url(request)
logo_size = 'ec-logo-size'
if logo_url is None:
logo_url = branding_api.get_logo_url(is_secure)
logo_size = ''
%>
<img class="${logo_size}" src="${logo_url}" alt="${_("{platform_name} Home Page").format(platform_name=static.get_platform_name())}"/>
</%block>
</a>
</div>
% if course:
<h2 class="course-header"><span class="provider">${course.display_org_with_default}:</span>
<span class="course-number">${course.display_number_with_default}</span>
<%
display_name = course.display_name_with_default
if settings.FEATURES.get('CUSTOM_COURSES_EDX', False):
ccx = get_current_ccx(course.id)
if ccx:
display_name = ccx.display_name
%>
<span class="course-name">${display_name}</span></h2>
% endif
% if course:
<div class="course-header">
<span class="provider">${course.display_org_with_default}:</span>
<span class="course-number">${course.display_number_with_default}</span>
<%
display_name = course.display_name_with_default
if settings.FEATURES.get('CUSTOM_COURSES_EDX', False):
ccx = get_current_ccx(course.id)
if ccx:
display_name = ccx.display_name
%>
<span class="course-name">${display_name}</span>
</div>
% endif
</h1>
% if user.is_authenticated():
<ol class="left nav-global list-inline authenticated">
......
<%page expression_filter="h"/>
<%! from openedx.core.djangolib.markup import HTML %>
%if unit_title:
<h3 class="unit-title">${unit_title}</h3>
<h2 class="hd hd-2 unit-title">${unit_title}</h2>
% endif
% if show_bookmark_button:
......
......@@ -14,7 +14,7 @@
<article class="main-article" id="main-article">
{% if selected_tab != "edit" %}
<h1>{{ article.current_revision.title }}</h1>
<h3 class="entry-title">{{ article.current_revision.title }}</h3>
{% endif %}
......
......@@ -50,22 +50,24 @@ site_status_msg = get_site_status_msg(course_id)
<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">
<a href="${marketing_link('ROOT')}" itemprop="url">
<%block name="navigation_logo">
<img src="${static.url("images/logo.png")}" 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
<h1 class="hd logo-header">
<div class="logo">
<a href="${marketing_link('ROOT')}" itemprop="url">
<%block name="navigation_logo">
<img src="${static.url("images/logo.png")}" alt="${_("{platform_name} Home Page").format(platform_name=static.get_platform_name())}" itemprop="logo" />
</%block>
</a>
</div>
% if course and not disable_courseware_header:
<div 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>
</div>
% endif
</h1>
% if user.is_authenticated():
% if not course or disable_courseware_header:
......
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