Skip to content

E
edx-platform
Commit 70e11e82 by Brian Talbot
Options

studio - made all page heading chrome have consistent markup

parent 8976818c
Showing with 239 additions and 74 deletions
cms/static/sass/_base.scss
......@@ -49,41 +49,42 @@ h1 {
// ====================
// layout - basic
// layout - basic page header
.wrapper-mast {
margin: 0;
padding: 0 $baseline;
position: relative;
.mast {
@include clearfix();
@include font-size(16);
position: relative;
max-width: $fg-max-width;
min-width: $fg-min-width;
width: flex-grid(12);
margin: 0 auto $baseline auto;
border-bottom: 1px solid $gray-l4;
padding-bottom: ($baseline/2);
color: $gray-d2;
@include clearfix();
@include font-size(16);
position: relative;
max-width: $fg-max-width;
min-width: $fg-min-width;
width: flex-grid(12);
margin: 0 auto $baseline auto;
border-bottom: 1px solid $gray-l4;
padding-bottom: ($baseline/2);
color: $gray-d2;
.title-sub {
@include font-size(14);
display: block;
margin: 0;
color: $gray-l2;
}
.title-sub {
@include font-size(14);
display: block;
margin: 0;
color: $gray-l2;
}
.title, .title-1 {
@include font-size(32);
margin: 0;
padding: 0;
font-weight: 600;
color: $gray-d3;
}
.title, .title-1 {
@include font-size(32);
margin: 0;
padding: 0;
font-weight: 600;
color: $gray-d3;
}
}
}
// layout - basic page content
.wrapper-content {
margin: 0;
padding: 0 $baseline;
......@@ -131,6 +132,7 @@ h1 {
@include box-sizing(border-box);
}
// layout - primary content
.content-primary {
.title-1, .title-2, .title-3, .title-4, .title-5, .title-5 {
......@@ -162,6 +164,7 @@ h1 {
}
}
// layout - supplemental content
.content-supplementary {
.bit {
......
cms/templates/asset_index.html
......@@ -33,6 +33,24 @@
</tr>
</script>
<div class="wrapper-mast wrapper">
<header class="mast has-actions">
<div class="title">
<span class="title-sub">Course Content</span>
<h1 class="title-1">Files &amp; Uploads</h1>
</div>
<nav class="nav-actions">
<h3 class="sr">Page Actions</h3>
<ul>
<li class="nav-item">
<a href="#" class="upload-button new-button"><span class="upload-icon"></span>Upload New File</a>
</li>
</ul>
</nav>
</header>
</div>
<div class="main-wrapper">
<div class="inner-wrapper">
<div class="page-actions">
......
cms/templates/course_info.html
......@@ -42,16 +42,30 @@
</%block>
<%block name="content">
<div class="wrapper-mast wrapper">
<header class="mast has-actions">
<div class="title">
<span class="title-sub">Course Content</span>
<h1 class="title-1">Course Updates</h1>
</div>
<nav class="nav-actions">
<h3 class="sr">Page Actions</h3>
<ul>
<li class="nav-item">
<a href="#" class="new-update-button">New Update</a>
</li>
</ul>
</nav>
</header>
</div>
<div class="main-wrapper">
<div class="inner-wrapper">
<h1>Course Info</h1>
<div class="course-info-wrapper">
<div class="main-column window">
<article class="course-updates" id="course-update-view">
<h2>Course Updates & News</h2>
<a href="#" class="new-update-button">New Update</a>
<ol class="update-list" id="course-update-list"></ol>
<!-- probably replace w/ a vertical where each element of the vertical is a separate update w/ a date and html field -->
</article>
</div>
<div class="sidebar window course-handouts" id="course-handouts-view"></div>
......
cms/templates/edit-tabs.html
......@@ -15,6 +15,27 @@
</%block>
<%block name="content">
<div class="wrapper-mast wrapper">
<header class="mast has-actions">
<div class="title">
<span class="title-sub">Course Content</span>
<h1 class="title-1">Static Pages</h1>
</div>
<nav class="nav-actions">
<h3 class="sr">Page Actions</h3>
<ul>
<li class="nav-item">
<a href="#" class="toggle-button toggle-button-sections"><i class="ss-icon ss-symbolicons-block">up</i> <span class="label">Collapse All Sections</span></a>
</li>
<li class="nav-item">
<a href="#" class="new-button new-courseware-section-button"><span class="plus-icon white"></span> New Section</a>
</li>
</ul>
</nav>
</header>
</div>
<div class="main-wrapper">
<div class="inner-wrapper">
<article class="unit-body">
......@@ -22,12 +43,6 @@
<h2>Here you can add and manage additional pages for your course</h2>
<p>These pages will be added to the primary navigation menu alongside Courseware, Course Info, Discussion, etc.</p>
</div>
<div class="page-actions">
<a href="#" class="new-button new-tab">
<span class="plus-icon white"></span>New Page
</a>
</div>
<div class="tab-list">
<ol class='components'>
......
cms/templates/edit_subsection.html
......@@ -16,6 +16,34 @@
<%namespace name='datetime' module='datetime'/>
<%block name="content">
<div class="wrapper-mast wrapper">
<header class="mast has-actions">
<div class="title">
<nav class="nav-hierarchy">
<ul>
<li class="nav-item">
<a href="#">Section Name</a>
</li>
</ul>
</nav>
<h1 class="title-1">Subsection Name</h1>
</div>
<nav class="nav-actions">
<h3 class="sr">Unit Actions</h3>
<ul>
<li class="nav-item">
<a href="#">Preview Drafts</a>
</li>
<li class="nav-item">
<a href="#">View Live</a>
</li>
</ul>
</nav>
</header>
</div>
<div class="main-wrapper">
<div class="inner-wrapper">
<div class="main-column">
......
cms/templates/export.html
......@@ -6,6 +6,15 @@
<%block name="bodyclass">is-signedin course tools export</%block>
<%block name="content">
<div class="wrapper-mast wrapper">
<header class="mast">
<div class="title">
<span class="title-sub">Tools</span>
<h1 class="title-1">Course Export</h1>
</div>
</header>
</div>
<div class="main-wrapper">
<div class="inner-wrapper">
<article class="export-overview">
......
cms/templates/import.html
......@@ -6,6 +6,15 @@
<%block name="bodyclass">is-signedin course tools import</%block>
<%block name="content">
<div class="wrapper-mast wrapper">
<header class="mast">
<div class="title">
<span class="title-sub">Tools</span>
<h1 class="title-1">Course Import</h1>
</div>
</header>
</div>
<div class="main-wrapper">
<div class="inner-wrapper">
<article class="import-overview">
......
cms/templates/index.html
......@@ -33,21 +33,32 @@
</%block>
<%block name="content">
<div class="wrapper-mast wrapper">
<header class="mast has-actions">
<div class="title">
<h1 class="title-1">My Courses</h1>
</div>
<nav class="nav-actions">
<h3 class="sr">Page Actions</h3>
<ul>
<li class="nav-item">
<a href="#" class="new-button new-course-button"><span class="plus-icon white"></span> New Course</a>
</li>
</ul>
</nav>
</header>
</div>
<div class="main-wrapper">
<div class="inner-wrapper">
<h1>My Courses</h1>
<article class="my-classes">
% if user.is_active:
<a href="#" class="new-button new-course-button"><span class="plus-icon white"></span> New Course</a>
<ul class="class-list">
%for course, url in courses:
<li>
<a href="${url}" class="class-name">
<span class="class-name">${course}</span>
<!--
<span class="detail">Started: 9/21/2012</span>
<span class="detail">Ends: 10/21/2012</span>
-->
</a>
</li>
%endfor
......
cms/templates/manage_users.html
......@@ -4,15 +4,28 @@
<%block name="content">
<div class="wrapper-mast wrapper">
<header class="mast has-actions">
<div class="title">
<span class="title-sub">Tools</span>
<h1 class="title-1">Course Export</h1>
</div>
<nav class="nav-actions">
<h3 class="sr">Page Actions</h3>
<ul>
%if allow_actions:
<li class="nav-item">
<a href="#" class="new-button new-user-button"><span class="plus-icon white"></span>New User</a>
</li>
%endif
</ul>
</nav>
</header>
</div>
<div class="main-wrapper">
<div class="inner-wrapper">
<div class="page-actions">
%if allow_actions:
<a href="#" class="new-button new-user-button">
<span class="plus-icon white"></span>New User
</a>
%endif
</div>
<div class="details">
<p>The following list of users have been designated as course staff. This means that these users will have permissions to modify course content. You may add additional course staff below, if you are the course instructor. Please note that they must have already registered and verified their account.</p>
......
cms/templates/overview.html
......@@ -120,12 +120,29 @@
</div>
</div>
<div class="wrapper-mast wrapper">
<header class="mast has-actions">
<div class="title">
<span class="title-sub">Course Content</span>
<h1 class="title-1">Course Outline</h1>
</div>
<nav class="nav-actions">
<h3 class="sr">Page Actions</h3>
<ul>
<li class="nav-item">
<a href="#" class="toggle-button toggle-button-sections"><i class="ss-icon ss-symbolicons-block">up</i> <span class="label">Collapse All Sections</span></a>
</li>
<li class="nav-item">
<a href="#" class="new-button new-courseware-section-button"><span class="plus-icon white"></span> New Section</a>
</li>
</ul>
</nav>
</header>
</div>
<div class="main-wrapper">
<div class="inner-wrapper">
<div class="page-actions">
<a href="#" class="new-button new-courseware-section-button"><span class="plus-icon white"></span> New Section</a>
<a href="#" class="toggle-button toggle-button-sections"><i class="ss-icon ss-symbolicons-block">up</i> <span class="label">Collapse All Sections</span></a>
</div>
<article class="courseware-overview" data-course-id="${context_course.location.url()}">
% for section in sections:
<section class="courseware-section branch" data-id="${section.location}">
......
cms/templates/settings.html
......@@ -43,8 +43,10 @@ from contentstore import utils
<%block name="content">
<div class="wrapper-mast wrapper">
<header class="mast">
<span class="title-sub">Settings</span>
<h1 class="title-1">Schedule &amp; Details</h1>
<div class="title">
<span class="title-sub">Settings</span>
<h1 class="title-1">Schedule &amp; Details</h1>
</div>
</header>
</div>
......
cms/templates/settings_graders.html
......@@ -41,8 +41,10 @@ from contentstore import utils
<%block name="content">
<div class="wrapper-mast wrapper">
<header class="mast">
<span class="title-sub">Settings</span>
<h1 class="title-1">Grading</h1>
<div class="title">
<span class="title-sub">Settings</span>
<h1 class="title-1">Grading</h1>
</div>
</header>
</div>
......
cms/templates/unit.html
......@@ -24,22 +24,48 @@
</%block>
<%block name="content">
<div class="wrapper-mast wrapper">
<header class="mast">
<nav class="nav-hierarchy">
<div class="wrapper-alert">
<div class="alert has-actions alert-editing-draft">
<div class="copy">
<h2 class="title-3">You are editing a draft.</h2>
<p class="message">
% if published_date:
This unit was originally published on ${published_date}.
% endif</p>
</div>
<nav class="nav-actions">
<h3 class="sr">Alert Actions</h3>
<ul>
<li class="nav-item">
<a href="#">Section Name</a>
</li>
<li class="nav-item">
<a href="#">Subsection Name</a>
<a href="${published_preview_link}" rel="external" class="action action-primary">Preview the published version</a>
</li>
</ul>
</nav>
</div>
</div>
<h1 class="title-1">Unit Name</h1>
<div class="wrapper-mast wrapper">
<header class="mast has-actions">
<div class="title">
<nav class="nav-hierarchy">
<ul>
<li class="nav-item">
<a href="#">Section Name</a>
</li>
<li class="nav-item">
<a href="#">Subsection Name</a>
</li>
</ul>
</nav>
<h1 class="title-1">Unit Name</h1>
</div>
<nav class="nav-actions">
<h3 class="sr">Unit Actions</h3>
<ul>
<li class="nav-item">
<a href="#">Preview Unit</a>
......@@ -55,15 +81,21 @@
<div class="metadata status-unit">
<div class="status-visibility">
<label for="unit-visibility">Visibility:</label>
<select class="visibility-select" id="unit-visibility">
<option value="public">Public</option>
<option value="private">Private</option>
</select>
</div>
<div class="status-release">
<h3 class="label">Will be Released:</h3>
<p>to <strong>students</strong> on <strong>February 06, 2013 at 12:00 PM</strong> within <a href="">"Introduction to the Course"</a></p>
</div>
<div class="status-url">
<h3 class="label">Unit URL Title:</h3>
<p><a href="">/courseware/db0cfa58100f4ca48c614cfb618030d1/7317287782624b9b924bd70ce5ca7b2d</a></p>
</div>
</div>
</header>
......@@ -71,14 +103,6 @@
<div class="main-wrapper edit-state-${unit_state}" data-id="${unit_location}">
<div class="inner-wrapper">
<div class="alert editing-draft-alert">
<p class="alert-message"><strong>You are editing a draft.</strong>
% if published_date:
This unit was originally published on ${published_date}.
% endif
</p>
<a href="${published_preview_link}" target="_blank" class="alert-action secondary">Preview the published version</a>
</div>
<div class="main-column">
<article class="unit-body window">
<p class="unit-name-input"><label>Display Name:</label><input type="text" value="${unit.display_name}" class="unit-display-name-input" /></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