creation of a courseware preview menu to contain staff view toggle.
This commit is contained in:
committed by
Andy Armstrong
parent
55d2f1d547
commit
c4e8673db0
@@ -1,3 +1,6 @@
|
||||
// lms - base
|
||||
// ====================
|
||||
|
||||
// html {
|
||||
// overflow-y: scroll;
|
||||
// }
|
||||
|
||||
@@ -360,12 +360,14 @@ $dashboard-course-cover-border: $light-gray;
|
||||
|
||||
// MISC: course assets
|
||||
$content-wrapper-bg: $white;
|
||||
$course-bg-color: #d6d6d6;
|
||||
$course-bg-image: url(../images/bg-texture.png);
|
||||
$course-bg-color: #f2f2f2;
|
||||
$account-content-wrapper-bg: shade($body-bg, 2%);
|
||||
$course-profile-bg: rgb(245,245,245);
|
||||
$course-header-bg: rgba(255,255,255, 0.93);
|
||||
|
||||
// MISC: course background texture
|
||||
//$course-bg-image: url(../images/bg-texture.png);
|
||||
|
||||
// MISC: borders
|
||||
$border-color-1: rgb(190,190,190);
|
||||
$border-color-2: rgb(200,200,200);
|
||||
|
||||
@@ -32,6 +32,7 @@
|
||||
|
||||
// course - base
|
||||
@import 'course/layout/courseware_header';
|
||||
@import 'course/layout/courseware_preview';
|
||||
@import 'course/layout/footer';
|
||||
@import 'course/base/mixins';
|
||||
@import 'course/base/base';
|
||||
|
||||
@@ -31,6 +31,7 @@
|
||||
|
||||
// course - base
|
||||
@import 'course/layout/courseware_header';
|
||||
@import 'course/layout/courseware_preview';
|
||||
@import 'course/layout/footer';
|
||||
@import 'course/base/mixins';
|
||||
@import 'course/base/base';
|
||||
|
||||
@@ -1,8 +1,13 @@
|
||||
// lms - course - base
|
||||
// ====================
|
||||
|
||||
body {
|
||||
min-width: 980px;
|
||||
min-height: 100%;
|
||||
background-image: $course-bg-image;
|
||||
background-color: $course-bg-color;
|
||||
|
||||
//for background texture:
|
||||
//background-image: $course-bg-image;
|
||||
}
|
||||
|
||||
body, h1, h2, h3, h4, h5, h6, p, p a:link, p a:visited, a, label {
|
||||
@@ -27,7 +32,7 @@ a {
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 20px 0 0 0;
|
||||
padding: 0;
|
||||
|
||||
> div {
|
||||
display: table;
|
||||
@@ -53,6 +58,7 @@ form.choicegroup {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
textarea,
|
||||
input[type="text"],
|
||||
input[type="email"],
|
||||
|
||||
@@ -1,3 +1,14 @@
|
||||
// lms - course - extends
|
||||
// ====================
|
||||
|
||||
// lms inner wrapper
|
||||
%inner-wrapper {
|
||||
margin: 0 auto;
|
||||
max-width: 1180px;
|
||||
width: flex-grid(12);
|
||||
}
|
||||
|
||||
// Older Course Extends - to review/remove with LMS cleanup
|
||||
h1.top-header {
|
||||
border-bottom: 1px solid $border-color-2;
|
||||
@include text-align(left);
|
||||
|
||||
@@ -1,22 +1,20 @@
|
||||
nav.course-material {
|
||||
.wrapper-course-material {
|
||||
@include clearfix();
|
||||
@include box-sizing(border-box);
|
||||
border-bottom: none;
|
||||
margin: 0px auto 0px;
|
||||
padding: 0px;
|
||||
margin: 0 auto 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
|
||||
.inner-wrapper {
|
||||
margin: 0 auto;
|
||||
max-width: 1200px;
|
||||
width: flex-grid(12);
|
||||
.course-material{
|
||||
@extend %inner-wrapper;
|
||||
}
|
||||
|
||||
ol.course-tabs {
|
||||
@include border-top-radius(4px);
|
||||
@include clearfix();
|
||||
padding: 28px 0 10px 0;
|
||||
@include margin-left(10px);
|
||||
padding: ($baseline*0.75) 0 ($baseline*0.75) 0;
|
||||
|
||||
li {
|
||||
@include float(left);
|
||||
@@ -30,7 +28,7 @@ nav.course-material {
|
||||
}
|
||||
|
||||
&.prominent + li {
|
||||
padding-left: 15px;
|
||||
padding-left: ($baseline*0.75);
|
||||
border-left: 1px solid #333;
|
||||
}
|
||||
|
||||
@@ -39,7 +37,7 @@ nav.course-material {
|
||||
color: #555;
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: 10px 13px 12px;
|
||||
padding: ($baseline/2) 13px 12px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
@@ -74,7 +72,7 @@ nav.course-material {
|
||||
header.global.slim {
|
||||
box-shadow: 0 1px 2px $shadow-l1;
|
||||
height: auto;
|
||||
padding: 5px 0 10px 0;
|
||||
padding: ($baseline/4) 0 ($baseline/2) 0;
|
||||
border-bottom: 1px solid $outer-border-color;
|
||||
background: $header-bg;
|
||||
|
||||
@@ -119,7 +117,7 @@ header.global.slim {
|
||||
}
|
||||
|
||||
h1.logo {
|
||||
margin: 0 10px 0 13px;
|
||||
margin: 0 ($baseline/2) 0 0;
|
||||
@include padding-right(20px);
|
||||
|
||||
&:before {
|
||||
|
||||
27
lms/static/sass/course/layout/_courseware_preview.scss
Normal file
27
lms/static/sass/course/layout/_courseware_preview.scss
Normal file
@@ -0,0 +1,27 @@
|
||||
.wrapper-preview-menu {
|
||||
@include clearfix();
|
||||
@include box-sizing(border-box);
|
||||
margin: 0 auto 0;
|
||||
padding: ($baseline*0.75);
|
||||
width: 100%;
|
||||
background-color: $gray-l3;
|
||||
|
||||
.preview-menu {
|
||||
@extend %inner-wrapper;
|
||||
}
|
||||
|
||||
.preview-actions {
|
||||
display: inline-block;
|
||||
|
||||
.action-preview {
|
||||
display: inline-block;
|
||||
|
||||
.action-preview-label {
|
||||
display: inline-block;
|
||||
margin-right: ($baseline/2);
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,52 +0,0 @@
|
||||
nav.course-material {
|
||||
@include clearfix();
|
||||
@include box-sizing(border-box);
|
||||
background: none;
|
||||
margin: 0px auto 0px;
|
||||
padding: 0px;
|
||||
width: 100%;
|
||||
|
||||
.inner-wrapper {
|
||||
margin: 0 auto;
|
||||
max-width: 1200px;
|
||||
width: flex-grid(12);
|
||||
}
|
||||
|
||||
ol.course-tabs {
|
||||
@include border-top-radius(4px);
|
||||
@include clearfix();
|
||||
padding: 10px 0 0 0;
|
||||
|
||||
li {
|
||||
@include float(left);
|
||||
list-style: none;
|
||||
|
||||
a {
|
||||
color: darken($lighter-base-font-color, 20%);
|
||||
display: block;
|
||||
text-align: center;
|
||||
padding: 8px 13px 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 1px rgb(255,255,255);
|
||||
|
||||
&:hover, &:focus {
|
||||
color: $base-font-color;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.course-content {
|
||||
margin-top: ($baseline*1.5);
|
||||
|
||||
.courseware {
|
||||
min-height: 300px;
|
||||
}
|
||||
}
|
||||
@@ -139,7 +139,7 @@
|
||||
}
|
||||
|
||||
// active navigation
|
||||
nav.course-material ol.course-tabs li a.active, nav.course-material .xmodule_SequenceModule nav.sequence-nav ol.course-tabs li a.seq_video.active, .xmodule_SequenceModule nav.sequence-nav nav.course-material ol.course-tabs li a.seq_video.active {
|
||||
nav.wrapper-course-material ol.course-tabs li a.active, nav.wrapper-course-material .xmodule_SequenceModule nav.sequence-nav ol.course-tabs li a.seq_video.active, .xmodule_SequenceModule nav.sequence-nav nav.wrapper-course-material ol.course-tabs li a.seq_video.active {
|
||||
background-color: #333;
|
||||
background-color: rgba(0, 0, 0, .4);
|
||||
}
|
||||
|
||||
@@ -23,9 +23,35 @@ def url_class(is_active):
|
||||
user_is_enrolled = user.is_authenticated() and CourseEnrollment.is_enrolled(user, course.id)
|
||||
%>
|
||||
|
||||
% if show_preview_menu:
|
||||
<nav class="wrapper-preview-menu">
|
||||
<div class="preview-menu">
|
||||
<ol class="preview-actions">
|
||||
<li class="action-preview">
|
||||
<form action="#" class="action-preview-form" method="post">
|
||||
<label for="action-preview-select" class="action-preview-label">${_("previewing as:")}</label>
|
||||
<select class="action-preview-select" id="action-preview-select" name="select">
|
||||
<option value="staff" ${"selected" if not is_student_masquerade else ""}>${_("Staff")}</option>
|
||||
<option value="student" ${"selected" if is_student_masquerade and not masquerade_group_id else ""}>${_("Student")}</option>
|
||||
% if cohorted_user_partition:
|
||||
% for group in sorted(cohorted_user_partition.groups, key=lambda group: group.name):
|
||||
<option value="group.id" data-group-id="${group.id}" ${"selected" if masquerade_group_id == group.id else ""}>
|
||||
${_("Student in {content_group}").format(content_group=group.name)}
|
||||
</option>
|
||||
% endfor
|
||||
% endif
|
||||
</select>
|
||||
<button type="submit" class="sr" name="submit" value="submit">${_("set preview mode")}</button>
|
||||
</form>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</nav>
|
||||
% endif
|
||||
|
||||
% if disable_tabs is UNDEFINED or not disable_tabs:
|
||||
<nav class="${active_page} course-material">
|
||||
<div class="inner-wrapper">
|
||||
<nav class="${active_page} wrapper-course-material">
|
||||
<div class="course-material">
|
||||
<ol class="course-tabs">
|
||||
% for tab in CourseTabList.iterate_displayable(course, settings, user.is_authenticated(), has_access(user, 'staff', course, course.id), user_is_enrolled):
|
||||
<%
|
||||
|
||||
Reference in New Issue
Block a user