Skip to content

E
edx-platform
Commit 9b09d043 by Brian Talbot
Options

studio - adding introduction areas to all templates and infrastructure for its contnet

parent 47c117bf
Showing with 141 additions and 85 deletions
cms/static/js/base.js
...@@ -41,6 +41,12 @@ $(document).ready(function() { ...@@ -41,6 +41,12 @@ $(document).ready(function() {
$('body').addClass('js'); $('body').addClass('js');
// lean/simple modal
$('a[rel*=modal]').leanModal({overlay : 0.80, closeButton: '.action-modal-close' });
$('a.action-modal-close').click(function(e){
(e).preventDefault();
});
// nav - dropdown related // nav - dropdown related
$body.click(function(e){ $body.click(function(e){
$('.nav-dropdown .nav-item .wrapper-nav-sub').removeClass('is-shown'); $('.nav-dropdown .nav-item .wrapper-nav-sub').removeClass('is-shown');
......
cms/static/sass/_base.scss
...@@ -225,7 +225,30 @@ h1 { ...@@ -225,7 +225,30 @@ h1 {
.introduction { .introduction {
@include font-size(14); @include font-size(14);
width: flex-grid(12);
margin: 0 0 $baseline 0; margin: 0 0 $baseline 0;
.copy strong {
font-weight: 600;
}
&.has-links {
@include clearfix();
.copy {
float: left;
width: flex-grid(8,12);
margin-right: flex-gutter();
}
.nav-introduction-supplementary {
@include font-size(13);
float: right;
width: flex-grid(4,12);
display: block;
text-align: right;
}
}
} }
} }
...@@ -743,6 +766,72 @@ hr.divide { ...@@ -743,6 +766,72 @@ hr.divide {
// ==================== // ====================
// js dependant
body.js {
// lean/simple modal window
.content-modal {
@include border-bottom-radius(2px);
@include box-sizing(border-box);
@include box-shadow(0 2px 4px $shadow-d1);
position: relative;
display: none;
width: 700px;
overflow: hidden;
border: 1px solid $gray-d1;
padding: ($baseline);
background: $white;
.action-modal-close {
@include transition(top .25s ease-in-out);
@include border-bottom-radius(3px);
position: absolute;
top: -3px;
right: $baseline;
padding: ($baseline/4) ($baseline/2) 0 ($baseline/2);
background: $gray-l3;
text-align: center;
.label {
@include text-sr();
}
.ss-icon {
@include font-size(18);
color: $white;
}
&:hover {
background: $blue;
top: 0;
}
}
img {
@include box-sizing(border-box);
width: 100%;
overflow-y: scroll;
padding: ($baseline/10);
border: 1px solid $gray-l4;
}
.title {
@include font-size(18);
margin: 0 0 ($baseline/2) 0;
font-weight: 600;
color: $gray-d3;
}
.description {
@include font-size(13);
margin-top: ($baseline/2);
color: $gray-l1;
}
}
}
// ====================
// works in progress // works in progress
body.hide-wip { body.hide-wip {
......
cms/static/sass/_dashboard.scss
...@@ -43,6 +43,7 @@ ...@@ -43,6 +43,7 @@
color: #3c3c3c; color: #3c3c3c;
} }
// view live button
.view-live-button { .view-live-button {
z-index: 10000; z-index: 10000;
position: absolute; position: absolute;
......
cms/static/sass/_index.scss
...@@ -350,67 +350,4 @@ ...@@ -350,67 +350,4 @@
} }
} }
} }
}
// js dependant \ No newline at end of file
&.js {
.content-modal {
@include border-bottom-radius(2px);
@include box-sizing(border-box);
@include box-shadow(0 2px 4px $shadow-d1);
position: relative;
display: none;
width: 700px;
overflow: hidden;
border: 1px solid $gray-d1;
padding: ($baseline);
background: $white;
.action-modal-close {
@include transition(top .25s ease-in-out);
@include border-bottom-radius(3px);
position: absolute;
top: -3px;
right: $baseline;
padding: ($baseline/4) ($baseline/2) 0 ($baseline/2);
background: $gray-l3;
text-align: center;
.label {
@include text-sr();
}
.ss-icon {
@include font-size(18);
color: $white;
}
&:hover {
background: $blue;
top: 0;
}
}
img {
@include box-sizing(border-box);
width: 100%;
overflow-y: scroll;
padding: ($baseline/10);
border: 1px solid $gray-l4;
}
.title {
@include font-size(18);
margin: 0 0 ($baseline/2) 0;
font-weight: 600;
color: $gray-d3;
}
.description {
@include font-size(13);
margin-top: ($baseline/2);
color: $gray-l1;
}
}
}
}
cms/templates/course_info.html
...@@ -60,6 +60,14 @@ ...@@ -60,6 +60,14 @@
</header> </header>
</div> </div>
<div class="wrapper-content wrapper">
<section class="content">
<div class="introduction">
<p clas="copy">Course updates are announcements or notifications you want to share with your class. Other course authors have used them for important exam/date reminders, change in schedules, and to call out any important step students need to take while enrolled in the course.</p>
</div>
</section>
</div>
<div class="main-wrapper"> <div class="main-wrapper">
<div class="inner-wrapper"> <div class="inner-wrapper">
<div class="course-info-wrapper"> <div class="course-info-wrapper">
......
cms/templates/edit-tabs.html
...@@ -35,8 +35,15 @@ ...@@ -35,8 +35,15 @@
<div class="wrapper-content wrapper"> <div class="wrapper-content wrapper">
<section class="content"> <section class="content">
<div class="introduction"> <div class="introduction has-links">
<p>On this page, you can add and manage additional pages for your course. These pages will be added to the primary navigation menu alongside Courseware, Course Info, Discussion, etc.</p> <p class="copy">Static Pages are additional pages that supplment your Courseware. Other course authors have used them to share a syllabus, external resources, and additional reading.</p>
<nav class="nav-introduction-supplementary">
<ul>
<li class="nav-item">
<a rel="modal" href="#preview-lms-staticpages">How do Static Tabs look to students in my course?</a>
</li>
</ul>
</nav>
</div> </div>
</section> </section>
</div> </div>
...@@ -44,7 +51,7 @@ ...@@ -44,7 +51,7 @@
<div class="main-wrapper"> <div class="main-wrapper">
<div class="inner-wrapper"> <div class="inner-wrapper">
<article class="unit-body"> <article class="unit-body">
<div class="tab-list"> <div class="tab-list">
<ol class='components'> <ol class='components'>
% for id in components: % for id in components:
...@@ -59,4 +66,17 @@ ...@@ -59,4 +66,17 @@
</article> </article>
</div> </div>
</div> </div>
<div class="content-modal" id="preview-lms-staticpages">
<h3 class="title">How Static Pages are Used in Your Course</h3>
<figure>
<img src="/static/img/preview-lms-staticpages.png" alt="Preview of how Static Pages are used in your course" />
<figcaption class="description">These pages will be presented in your course's main navigation alongside Courseware, Course Info, Discussion, etc.</figcaption>
</figure>
<a href="#" rel="view" class="action action-modal-close">
<i class="ss-icon ss-symbolicons-block">&#x2421;</i>
<span class="label">close modal</span>
</a>
</div>
</%block> </%block>
\ No newline at end of file
cms/templates/howitworks.html
...@@ -182,18 +182,4 @@ ...@@ -182,18 +182,4 @@
<span class="label">close modal</span> <span class="label">close modal</span>
</a> </a>
</div> </div>
</%block>
<%block name="jsextra">
<script type="text/javascript">
(function() {
// lean modal window
$('a[rel*=modal]').leanModal({overlay : 0.50, closeButton: '.action-modal-close' });
$('a.action-modal-close').click(function(e){
(e).preventDefault();
});
})(this)
</script>
</%block> </%block>
\ No newline at end of file
cms/templates/index.html
...@@ -54,6 +54,14 @@ ...@@ -54,6 +54,14 @@
</header> </header>
</div> </div>
<div class="wrapper-content wrapper">
<section class="content">
<div class="introduction">
<p class="copy"><strong>Welcome, ${ user.username }</strong>. Here are all of the courses you are currently authoring in Studio:</p>
</div>
</section>
</div>
<div class="main-wrapper"> <div class="main-wrapper">
<div class="inner-wrapper"> <div class="inner-wrapper">
<article class="my-classes"> <article class="my-classes">
......
cms/templates/settings.html
...@@ -55,7 +55,7 @@ from contentstore import utils ...@@ -55,7 +55,7 @@ from contentstore import utils
<section class="content"> <section class="content">
<!-- <div class="introduction"> <!-- <div class="introduction">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p> <p class="copy">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
</div> --> </div> -->
<article class="content-primary" role="main"> <article class="content-primary" role="main">
......
cms/templates/settings_graders.html
...@@ -52,7 +52,7 @@ from contentstore import utils ...@@ -52,7 +52,7 @@ from contentstore import utils
<section class="content"> <section class="content">
<!-- <div class="introduction"> <!-- <div class="introduction">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p> <p class="copy">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
</div> --> </div> -->
<article class="content-primary" role="main"> <article class="content-primary" role="main">
......
cms/templates/widgets/header.html
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
</div> </div>
<nav class="nav-course primary nav-dropdown" role="navigation"> <nav class="nav-course primary nav-dropdown" role="navigation">
<h2 class="sr">PH207x's Navigation:</h2> <h2 class="sr">${context_course.display_name}'s Navigation:</h2>
<ol> <ol>
<li class="nav-item nav-course-courseware"> <li class="nav-item nav-course-courseware">
......
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