Merge pull request #299 from edx/talbs/studio-helpnav
Studio - Help Links Addition and Small UI Revisions to Main Navigation
This commit is contained in:
Brian Talbot
Binary file not shown.
|
Before Width: | Height: | Size: 5.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 4.7 KiB |
@@ -56,11 +56,11 @@ $(document).ready(function() {
|
||||
|
||||
// nav - dropdown related
|
||||
$body.click(function(e) {
|
||||
$('.nav-dropdown .nav-item .wrapper-nav-sub').removeClass('is-shown');
|
||||
$('.nav-dropdown .nav-item .title').removeClass('is-selected');
|
||||
$('.nav-dd .nav-item .wrapper-nav-sub').removeClass('is-shown');
|
||||
$('.nav-dd .nav-item .title').removeClass('is-selected');
|
||||
});
|
||||
|
||||
$('.nav-dropdown .nav-item .title').click(function(e) {
|
||||
$('.nav-dd .nav-item .title').click(function(e) {
|
||||
|
||||
$subnav = $(this).parent().find('.wrapper-nav-sub');
|
||||
$title = $(this).parent().find('.title');
|
||||
@@ -71,8 +71,8 @@ $(document).ready(function() {
|
||||
$subnav.removeClass('is-shown');
|
||||
$title.removeClass('is-selected');
|
||||
} else {
|
||||
$('.nav-dropdown .nav-item .title').removeClass('is-selected');
|
||||
$('.nav-dropdown .nav-item .wrapper-nav-sub').removeClass('is-shown');
|
||||
$('.nav-dd .nav-item .title').removeClass('is-selected');
|
||||
$('.nav-dd .nav-item .wrapper-nav-sub').removeClass('is-shown');
|
||||
$title.addClass('is-selected');
|
||||
$subnav.addClass('is-shown');
|
||||
}
|
||||
|
||||
@@ -47,7 +47,7 @@ $gray-d2: shade($gray,40%);
|
||||
$gray-d3: shade($gray,60%);
|
||||
$gray-d4: shade($gray,80%);
|
||||
|
||||
$blue: rgb(85, 151, 221);
|
||||
$blue: rgb(0, 159, 230);
|
||||
$blue-l1: tint($blue,20%);
|
||||
$blue-l2: tint($blue,40%);
|
||||
$blue-l3: tint($blue,60%);
|
||||
|
||||
@@ -135,7 +135,48 @@
|
||||
|
||||
// ====================
|
||||
|
||||
// layout-based buttons
|
||||
// simple dropdown button styling - should we move this elsewhere?
|
||||
.btn-dd {
|
||||
@extend .btn;
|
||||
@extend .btn-pill;
|
||||
padding:($baseline/4) ($baseline/2);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
text-align: center;
|
||||
|
||||
&:hover, &:active {
|
||||
@extend .fake-link;
|
||||
border-color: $gray-l3;
|
||||
}
|
||||
|
||||
&.current, &.active, &.is-selected {
|
||||
@include box-shadow(inset 0 1px 2px 1px $shadow-l1);
|
||||
border-color: $gray-l3;
|
||||
}
|
||||
}
|
||||
|
||||
// layout-based buttons - nav dd
|
||||
.btn-dd-nav-primary {
|
||||
@extend .btn-dd;
|
||||
background: $white;
|
||||
border-color: $white;
|
||||
color: $gray-d1;
|
||||
|
||||
&:hover, &:active {
|
||||
background: $white;
|
||||
color: $blue-s1;
|
||||
}
|
||||
|
||||
&.current, &.active {
|
||||
background: $white;
|
||||
color: $gray-d4;
|
||||
|
||||
&:hover, &:active {
|
||||
color: $blue-s1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
|
||||
@@ -3,448 +3,310 @@
|
||||
|
||||
.wrapper-header {
|
||||
@extend .depth3;
|
||||
margin: 0;
|
||||
padding: $baseline;
|
||||
border-bottom: 1px solid $gray;
|
||||
@include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.2));
|
||||
background: $white;
|
||||
height: 76px;
|
||||
@include box-shadow(0 1px 2px 0 $shadow-l1);
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
a {
|
||||
color: $baseFontColor;
|
||||
display: block;
|
||||
|
||||
&:hover, &:active {
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
margin: 0;
|
||||
padding: 0 $baseline;
|
||||
background: $white;
|
||||
|
||||
header.primary {
|
||||
@include box-sizing(border-box);
|
||||
@include clearfix();
|
||||
max-width: $fg-max-width;
|
||||
min-width: $fg-min-width;
|
||||
width: flex-grid(12);
|
||||
margin: 0 auto;
|
||||
color: $gray-l1;
|
||||
}
|
||||
|
||||
nav .nav-item {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
// ====================
|
||||
|
||||
// ====================
|
||||
// basic layout
|
||||
|
||||
// basic layout
|
||||
.wrapper-left, .wrapper-right {
|
||||
@include box-sizing(border-box);
|
||||
}
|
||||
|
||||
.wrapper-left {
|
||||
width: flex-grid(10, 12);
|
||||
float: left;
|
||||
margin-right: flex-gutter();
|
||||
}
|
||||
|
||||
.wrapper-right {
|
||||
width: flex-grid(2, 12);
|
||||
float: right;
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// specific elements - branding
|
||||
.branding, .info-course, .nav-course, .nav-account, .nav-unauth, .nav-pitch {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.branding {
|
||||
position: relative;
|
||||
margin: 0 ($baseline/2) 0 0;
|
||||
padding-right: ($baseline*0.75);
|
||||
|
||||
a {
|
||||
@extend .text-hide;
|
||||
display: block;
|
||||
width: 164px;
|
||||
height: 32px;
|
||||
background: transparent url('../img/logo-edx-studio.png') 0 0 no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// specific elements - course name/info
|
||||
.info-course {
|
||||
@include font-size(14);
|
||||
position: relative;
|
||||
margin: -3px ($baseline/2) 0 0;
|
||||
padding-right: ($baseline*0.75);
|
||||
|
||||
&:before {
|
||||
@extend .faded-vertical-divider;
|
||||
content: "";
|
||||
display: block;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
right: 1px;
|
||||
top: -8px;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
@extend .faded-vertical-divider-light;
|
||||
content: "";
|
||||
display: block;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: -12px;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.course-number, .course-org {
|
||||
@include font-size(12);
|
||||
display: inline-block;
|
||||
max-width: 70px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.course-org {
|
||||
margin-right: ($baseline/4);
|
||||
max-width: 140px;
|
||||
}
|
||||
|
||||
.course-title {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 220px;
|
||||
overflow: hidden;
|
||||
margin-top: -4px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
@include font-size(16);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// specific elements - course nav
|
||||
.nav-course {
|
||||
width: 290px;
|
||||
@extend .t-copy-sub1;
|
||||
margin-top: -($baseline/4);
|
||||
|
||||
> ol > .nav-item {
|
||||
vertical-align: bottom;
|
||||
margin: 0 ($baseline/2) 0 0;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: block;
|
||||
padding: 0 ($baseline/4);
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
color: $gray-d3;
|
||||
|
||||
.label-prefix {
|
||||
@include font-size(11);
|
||||
display: block;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
// specific nav items
|
||||
&.nav-course-courseware {
|
||||
}
|
||||
|
||||
&.nav-course-settings {
|
||||
}
|
||||
|
||||
&.nav-course-tools {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// specific elements - account-based nav
|
||||
.nav-account {
|
||||
width: 100%;
|
||||
margin-top: ($baseline*0.75);
|
||||
@include font-size(14);
|
||||
text-align: right;
|
||||
|
||||
.nav-account-username {
|
||||
width: 100%;
|
||||
|
||||
.icon-user {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: 3px;
|
||||
@include font-size(12);
|
||||
}
|
||||
|
||||
.account-username {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 80%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.icon-expand {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// UI - dropdown
|
||||
.nav-dropdown {
|
||||
|
||||
.nav-item {
|
||||
position: relative;
|
||||
|
||||
.icon-caret-down {
|
||||
@include font-size(14);
|
||||
@include transition (color 0.5s ease-in-out, opacity 0.5s ease-in-out);
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-left: 2px;
|
||||
opacity: 0.5;
|
||||
color: $gray-l2;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
.icon-caret-down {
|
||||
color: $blue;
|
||||
opacity: 1.0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper-nav-sub {
|
||||
position: absolute;
|
||||
left: -7px;
|
||||
top: 47px;
|
||||
width: 140px;
|
||||
opacity: 0.0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.nav-sub {
|
||||
@include border-radius(2px);
|
||||
@include box-sizing(border-box);
|
||||
@include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.1));
|
||||
position: relative;
|
||||
width: 100%;
|
||||
border: 1px solid $gray-l2;
|
||||
padding: ($baseline/4) ($baseline/2);
|
||||
.wrapper-l, .wrapper-r {
|
||||
background: $white;
|
||||
|
||||
&:after, &:before {
|
||||
bottom: 100%;
|
||||
border: solid transparent;
|
||||
content: " ";
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&:after {
|
||||
border-color: rgba(255, 255, 255, 0);
|
||||
border-bottom-color: #fff;
|
||||
border-width: 5px;
|
||||
right: 3px;
|
||||
margin-left: -5px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
border-color: rgba(178, 178, 178, 0);
|
||||
border-bottom-color: $gray-l2;
|
||||
border-width: 6px;
|
||||
right: 3px;
|
||||
margin-left: -6px;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: block;
|
||||
margin: 0 0 ($baseline/4) 0;
|
||||
border-bottom: 1px solid $gray-l5;
|
||||
padding: 0 0($baseline/4) 0;
|
||||
@include font-size(13);
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// UI - dropdown - specific navs
|
||||
&.nav-account {
|
||||
|
||||
.wrapper-nav-sub {
|
||||
top: 27px;
|
||||
left: auto;
|
||||
right: -13px;
|
||||
width: 110px;
|
||||
}
|
||||
|
||||
.nav-sub {
|
||||
text-align: left;
|
||||
|
||||
.icon-expand {
|
||||
top: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-sub:after {
|
||||
left: auto;
|
||||
right: 11px;
|
||||
}
|
||||
|
||||
.nav-sub:before {
|
||||
left: auto;
|
||||
right: 10px;
|
||||
}
|
||||
.wrapper-l {
|
||||
float: left;
|
||||
width: flex-grid(7,12);
|
||||
}
|
||||
|
||||
&.nav-course {
|
||||
|
||||
.nav-course-courseware {
|
||||
|
||||
.nav-sub:after {
|
||||
left: 88px;
|
||||
}
|
||||
|
||||
.nav-sub:before {
|
||||
left: 88px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-course-settings {
|
||||
|
||||
.nav-sub:after {
|
||||
left: 88px;
|
||||
}
|
||||
|
||||
.nav-sub:before {
|
||||
left: 88px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-course-tools {
|
||||
|
||||
.wrapper-nav-sub {
|
||||
top: ($baseline*1.5);
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.nav-sub:after {
|
||||
left: 68px;
|
||||
}
|
||||
|
||||
.nav-sub:before {
|
||||
left: 68px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// STATE: is-signed in
|
||||
.is-signedin {
|
||||
|
||||
&.course .branding {
|
||||
|
||||
&:before {
|
||||
@extend .faded-vertical-divider;
|
||||
content: "";
|
||||
display: block;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
right: 1px;
|
||||
top: -8px;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
@extend .faded-vertical-divider-light;
|
||||
content: "";
|
||||
display: block;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: -12px;
|
||||
width: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// STATE: not signed in
|
||||
.not-signedin {
|
||||
|
||||
.wrapper-left {
|
||||
width: flex-grid(4, 12);
|
||||
}
|
||||
|
||||
.wrapper-right {
|
||||
width: flex-grid(8, 12);
|
||||
}
|
||||
|
||||
// STATE: not signed in - unauthenticated nav
|
||||
.nav-not-signedin {
|
||||
.wrapper-r {
|
||||
float: right;
|
||||
margin-top: ($baseline/4);
|
||||
width: flex-grid(4,12);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
@include font-size(16);
|
||||
.branding, .info-course, .nav-course, .nav-account, .nav-pitch {
|
||||
@include box-sizing(border-box);
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.nav-account {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// basic layout - nav items
|
||||
nav {
|
||||
|
||||
> ol > .nav-item {
|
||||
@extend .t-action3;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: 0 $baseline 0 0;
|
||||
font-weight: 600;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.action {
|
||||
margin-top: -($baseline/4);
|
||||
display: inline-block;
|
||||
padding: ($baseline/4) ($baseline/2);
|
||||
.nav-item a {
|
||||
color: $gray-d1;
|
||||
|
||||
&:hover {
|
||||
color: $blue-s1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// basic layout - dropdowns
|
||||
.nav-dd {
|
||||
|
||||
.title {
|
||||
@extend .t-action2;
|
||||
@extend .btn-dd-nav-primary;
|
||||
@include transition(all 0.25s ease-in-out 0);
|
||||
|
||||
.label, .icon-caret-down {
|
||||
|
||||
}
|
||||
|
||||
.label {
|
||||
|
||||
}
|
||||
|
||||
.icon-caret-down {
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
.icon-caret-down {
|
||||
opacity: 1.0;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-sub .nav-item {
|
||||
|
||||
[class^="icon-"] {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: ($baseline/4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// specific elements - branding
|
||||
.branding {
|
||||
padding: ($baseline*0.75) 0;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// specific elements - course name/info
|
||||
.info-course {
|
||||
margin-right: flex-gutter();
|
||||
border-right: 1px solid $gray-l4;
|
||||
padding: ($baseline*0.75) flex-gutter() ($baseline*0.75) 0;
|
||||
|
||||
.course-org, .course-number {
|
||||
@extend .t-action4;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
max-width: 45%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.course-org {
|
||||
margin-right: ($baseline/4);
|
||||
}
|
||||
|
||||
.course-title {
|
||||
@extend .t-action2;
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
// entire link
|
||||
.course-link {
|
||||
@include transition(color 0.25s ease-in-out);
|
||||
display: block;
|
||||
color: $gray-d1;
|
||||
|
||||
&:hover {
|
||||
color: $blue-s1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// specific elements - course nav
|
||||
.nav-course {
|
||||
padding: ($baseline*0.75) 0;
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// specific elements - account-based nav
|
||||
.nav-account {
|
||||
position: relative;
|
||||
padding: ($baseline*0.75) 0;
|
||||
|
||||
.nav-sub {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.nav-account-help {
|
||||
|
||||
.wrapper-nav-sub {
|
||||
width: ($baseline*10);
|
||||
}
|
||||
}
|
||||
|
||||
// STATE: not signed in - specific items
|
||||
.nav-not-signedin-help {
|
||||
.nav-account-user {
|
||||
|
||||
.title {
|
||||
max-width: ($baseline*6.5);
|
||||
|
||||
> .label {
|
||||
display: inline-block;
|
||||
max-width: 85%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// specific elements - pitch/how it works nav
|
||||
.nav-pitch {
|
||||
position: relative;
|
||||
padding: ($baseline*0.75) 0;
|
||||
|
||||
.nav-sub {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// CASE: user signed in
|
||||
.is-signedin {
|
||||
|
||||
.wrapper-l {
|
||||
width: flex-grid(9,12);
|
||||
}
|
||||
|
||||
.wrapper-r {
|
||||
width: flex-grid(3,12);
|
||||
}
|
||||
|
||||
.branding {
|
||||
width: 20%;
|
||||
margin-right: 2%;
|
||||
}
|
||||
|
||||
.nav-account {
|
||||
top: ($baseline/4);
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// CASE: in course {
|
||||
.is-signedin.course {
|
||||
|
||||
.wrapper-header {
|
||||
|
||||
.wrapper-l {
|
||||
width: flex-grid(9,12);
|
||||
}
|
||||
|
||||
.nav-not-signedin-signup {
|
||||
margin-right: ($baseline/2);
|
||||
.wrapper-r {
|
||||
width: flex-grid(3,12);
|
||||
}
|
||||
|
||||
.branding {
|
||||
width: 20%;
|
||||
margin-right: 2%;
|
||||
}
|
||||
|
||||
.info-course {
|
||||
width: 25%;
|
||||
margin-right: 2%;
|
||||
}
|
||||
|
||||
.nav-course {
|
||||
width: 45%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// CASE: user not signed in
|
||||
.not-signedin {
|
||||
|
||||
.wrapper-header {
|
||||
|
||||
.wrapper-l {
|
||||
width: flex-grid(2,12);
|
||||
}
|
||||
|
||||
.wrapper-r {
|
||||
width: flex-grid(10,12);
|
||||
}
|
||||
|
||||
.branding {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav-pitch {
|
||||
top: ($baseline/4);
|
||||
|
||||
.nav-item {
|
||||
margin-right: ($baseline/2);
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.action-signup {
|
||||
@include blue-button;
|
||||
@@ -454,9 +316,6 @@
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-not-signedin-signin {
|
||||
|
||||
.action-signin {
|
||||
@include white-button;
|
||||
@@ -505,12 +364,13 @@ body.course.advanced .nav-course-settings-advanced,
|
||||
// course tools
|
||||
body.course.import .nav-course-tools .title,
|
||||
body.course.export .nav-course-tools .title,
|
||||
body.course.checklists .nav-course-tools .title,
|
||||
|
||||
body.course.import .nav-course-tools-import,
|
||||
body.course.export .nav-course-tools-export,
|
||||
body.course.checklists .nav-course-tools-checklists,
|
||||
|
||||
{
|
||||
|
||||
color: $blue;
|
||||
|
||||
a {
|
||||
@@ -518,52 +378,3 @@ body.course.export .nav-course-tools-export,
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
body.signup .nav-not-signedin-signin {
|
||||
|
||||
a {
|
||||
background-color: #d9e3ee;
|
||||
color: #6d788b;
|
||||
}
|
||||
}
|
||||
|
||||
body.signin .nav-not-signedin-signup {
|
||||
|
||||
a {
|
||||
background-color: #62aaf5;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// STATE: js enabled
|
||||
.js {
|
||||
|
||||
.nav-dropdown {
|
||||
|
||||
.nav-item .title {
|
||||
outline: 0;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover, &:active, &.is-selected {
|
||||
color: $blue;
|
||||
|
||||
.icon-expand {
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper-nav-sub {
|
||||
@include transition (opacity 1.0s ease-in-out 0s);
|
||||
opacity: 0.0;
|
||||
pointer-events: none;
|
||||
|
||||
&.is-shown {
|
||||
opacity: 1.0;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -18,20 +18,161 @@ nav {
|
||||
|
||||
// ====================
|
||||
|
||||
// primary
|
||||
|
||||
// ====================
|
||||
|
||||
// right hand side
|
||||
|
||||
// ====================
|
||||
|
||||
// tabs
|
||||
|
||||
// ====================
|
||||
|
||||
// dropdown
|
||||
.nav-dd {
|
||||
|
||||
// ====================
|
||||
.title {
|
||||
|
||||
//
|
||||
.label, .icon-caret-down {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.ui-toggle-dd {
|
||||
@include transition(rotate .25s ease-in-out .25s);
|
||||
margin-left: ($baseline/10);
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// dropped down state
|
||||
&.is-selected {
|
||||
|
||||
.ui-toggle-dd {
|
||||
@include transform(rotate(-180deg));
|
||||
@include transform-origin(50% 50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper-nav-sub {
|
||||
@include transition (opacity 1.0s ease-in-out 0s);
|
||||
position: absolute;
|
||||
top: ($baseline*2.5);
|
||||
opacity: 0.0;
|
||||
pointer-events: none;
|
||||
width: ($baseline*8);
|
||||
|
||||
|
||||
// dropped down state
|
||||
&.is-shown {
|
||||
opacity: 1.0;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-sub {
|
||||
@include border-radius(2px);
|
||||
@include box-sizing(border-box);
|
||||
@include box-shadow(0 1px 1px $shadow-l1);
|
||||
position: relative;
|
||||
width: 100%;
|
||||
border: 1px solid $gray-l3;
|
||||
padding: ($baseline/2) ($baseline*0.75);
|
||||
background: $white;
|
||||
|
||||
&:after, &:before {
|
||||
bottom: 100%;
|
||||
border: solid transparent;
|
||||
content: " ";
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// ui triangle/nub
|
||||
&:after {
|
||||
border-color: rgba(255, 255, 255, 0);
|
||||
border-bottom-color: $white;
|
||||
border-width: 10px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
border-color: rgba(178, 178, 178, 0);
|
||||
border-bottom-color: $gray-l3;
|
||||
border-width: 11px;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
@extend .t-action3;
|
||||
display: block;
|
||||
margin: 0 0 ($baseline/4) 0;
|
||||
border-bottom: 1px solid $gray-l5;
|
||||
padding: 0 0($baseline/4) 0;
|
||||
font-weight: 500;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
|
||||
&:hover, &:active {
|
||||
color: $blue-s1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// CASE: left-hand side arrow/dd
|
||||
&.ui-left {
|
||||
|
||||
.wrapper-nav-sub {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.nav-sub {
|
||||
text-align: left;
|
||||
|
||||
// ui triangle/nub
|
||||
&:after {
|
||||
left: $baseline;
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
left: $baseline;
|
||||
margin-left: -11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// CASE: right-hand side arrow/dd
|
||||
&.ui-right {
|
||||
|
||||
.wrapper-nav-sub {
|
||||
left: none;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.nav-sub {
|
||||
|
||||
// ui triangle/nub
|
||||
&:after {
|
||||
right: $baseline;
|
||||
margin-right: -10px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
right: $baseline;
|
||||
margin-right: -11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
@include box-shadow(0 2px 3px $shadow);
|
||||
height: ($baseline*35) !important;
|
||||
background: $white !important;
|
||||
border: 1px solid $gray;
|
||||
border: 2px solid $blue;
|
||||
}
|
||||
|
||||
#tender_window {
|
||||
@@ -23,11 +23,12 @@
|
||||
}
|
||||
|
||||
#tender_closer {
|
||||
color: $blue-l2 !important;
|
||||
color: $white-t2 !important;
|
||||
text-transform: uppercase;
|
||||
top: 16px !important;
|
||||
|
||||
&:hover {
|
||||
color: $blue-l4 !important;
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -42,15 +43,15 @@
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
}
|
||||
|
||||
.widget-layout .search,
|
||||
.widget-layout .tabs,
|
||||
.widget-layout .footer,
|
||||
.widget-layout .search,
|
||||
.widget-layout .tabs,
|
||||
.widget-layout .footer,
|
||||
.widget-layout .header h1 a {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.widget-layout .header {
|
||||
background: rgb(85, 151, 221);
|
||||
background: rgb(0, 159, 230);
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
@@ -264,4 +265,4 @@
|
||||
.widget-layout .form-actions .btn-post_topic:hover, .widget-layout .form-actions .btn-post_topic:active {
|
||||
background-color: #16ca57;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -72,14 +72,7 @@ body.index {
|
||||
}
|
||||
|
||||
.logo {
|
||||
@extend .text-hide;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
width: 282px;
|
||||
height: 57px;
|
||||
background: transparent url('../img/logo-edx-studio-white.png') 0 0 no-repeat;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
|
||||
@@ -40,7 +40,7 @@
|
||||
<div class="wrapper-mast wrapper">
|
||||
<header class="mast has-actions has-subtitle">
|
||||
<h1 class="page-header">
|
||||
<small class="subtitle">Course Content</small>
|
||||
<small class="subtitle">Content</small>
|
||||
<span class="sr">> </span>Files & Uploads
|
||||
</h1>
|
||||
|
||||
|
||||
@@ -44,7 +44,7 @@
|
||||
<div class="wrapper-mast wrapper">
|
||||
<header class="mast has-actions has-subtitle">
|
||||
<h1 class="page-header">
|
||||
<small class="subtitle">Course Content</small>
|
||||
<small class="subtitle">Content</small>
|
||||
<span class="sr">> </span>Course Updates
|
||||
</h1>
|
||||
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
<div class="wrapper-mast wrapper">
|
||||
<header class="mast has-actions has-subtitle">
|
||||
<h1 class="page-header">
|
||||
<small class="subtitle">Course Content</small>
|
||||
<small class="subtitle">Content</small>
|
||||
<span class="sr">> </span>Static Pages
|
||||
</h1>
|
||||
|
||||
|
||||
@@ -121,7 +121,7 @@
|
||||
<div class="wrapper-mast wrapper">
|
||||
<header class="mast has-actions has-subtitle">
|
||||
<h1 class="page-header">
|
||||
<small class="subtitle">Course Content</small>
|
||||
<small class="subtitle">Content</small>
|
||||
<span class="sr">> </span>Course Outline
|
||||
</h1>
|
||||
|
||||
@@ -165,9 +165,9 @@
|
||||
<span class="published-status">This section has not been released.</span>
|
||||
<a href="#" class="schedule-button" data-date="" data-time="" data-id="${section.location}">Schedule</a>
|
||||
%else:
|
||||
<span class="published-status"><strong>Will Release:</strong>
|
||||
<span class="published-status"><strong>Will Release:</strong>
|
||||
${date_utils.get_default_time_display(section.lms.start)}</span>
|
||||
<a href="#" class="edit-button" data-date="${start_date_str}"
|
||||
<a href="#" class="edit-button" data-date="${start_date_str}"
|
||||
data-time="${start_time_str}" data-id="${section.location}">Edit</a>
|
||||
%endif
|
||||
</div>
|
||||
|
||||
@@ -1,64 +1,85 @@
|
||||
<%! from django.core.urlresolvers import reverse %>
|
||||
|
||||
<div class="wrapper-header wrapper" id="view-top">
|
||||
<header class="primary" role="banner">
|
||||
|
||||
<div class="wrapper wrapper-left ">
|
||||
<h1 class="branding"><a href="/">edX Studio</a></h1>
|
||||
<div class="wrapper wrapper-l">
|
||||
<h1 class="branding"><a href="/"><img src="/static/img/logo-edx-studio.png" alt="edX Studio" /></a></h1>
|
||||
|
||||
% if context_course:
|
||||
<% ctx_loc = context_course.location %>
|
||||
<div class="info-course">
|
||||
<h2 class="sr">Current Course:</h2>
|
||||
<a href="${reverse('course_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">
|
||||
<span class="course-org">${ctx_loc.org}</span><span class="course-number">${ctx_loc.course}</span>
|
||||
<span class="course-title" title="${context_course.display_name_with_default}">${context_course.display_name_with_default}</span>
|
||||
<h2 class="info-course">
|
||||
<span class="sr">Current Course:</span>
|
||||
<a class="course-link" href="${reverse('course_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">
|
||||
<span class="course-org">${ctx_loc.org}</span><span class="course-number">${ctx_loc.course}</span>
|
||||
<span class="course-title" title="${context_course.display_name_with_default}">${context_course.display_name_with_default}</span>
|
||||
</a>
|
||||
</div>
|
||||
</h2>
|
||||
|
||||
<nav class="nav-course primary nav-dropdown" role="navigation">
|
||||
<nav class="nav-course nav-dd ui-left">
|
||||
<h2 class="sr">${context_course.display_name_with_default}'s Navigation:</h2>
|
||||
|
||||
<ol>
|
||||
<li class="nav-item nav-course-courseware">
|
||||
<h3 class="title"><span class="label-prefix">Course </span>Content <i class="icon-caret-down"></i></h3>
|
||||
<h3 class="title"><span class="label"><span class="label-prefix sr">Course </span>Content</span> <i class="icon-caret-down ui-toggle-dd"></i></h3>
|
||||
|
||||
<div class="wrapper wrapper-nav-sub">
|
||||
<div class="nav-sub">
|
||||
<ul>
|
||||
<li class="nav-item nav-course-courseware-outline"><a href="${reverse('course_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Outline</a></li>
|
||||
<li class="nav-item nav-course-courseware-updates"><a href="${reverse('course_info', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Updates</a></li>
|
||||
<li class="nav-item nav-course-courseware-pages"><a href="${reverse('edit_tabs', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, coursename=ctx_loc.name))}">Static Pages</a></li>
|
||||
<li class="nav-item nav-course-courseware-uploads"><a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Files & Uploads</a></li>
|
||||
<li class="nav-item nav-course-courseware-outline">
|
||||
<a href="${reverse('course_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Outline</a>
|
||||
</li>
|
||||
<li class="nav-item nav-course-courseware-updates">
|
||||
<a href="${reverse('course_info', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Updates</a>
|
||||
</li>
|
||||
<li class="nav-item nav-course-courseware-pages">
|
||||
<a href="${reverse('edit_tabs', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, coursename=ctx_loc.name))}">Static Pages</a>
|
||||
</li>
|
||||
<li class="nav-item nav-course-courseware-uploads">
|
||||
<a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Files & Uploads</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item nav-course-settings">
|
||||
<h3 class="title"><span class="label-prefix">Course </span>Settings <i class="icon-caret-down"></i></h3>
|
||||
<h3 class="title"><span class="label"><span class="label-prefix sr">Course </span>Settings</span> <i class="icon-caret-down ui-toggle-dd"></i></h3>
|
||||
|
||||
<div class="wrapper wrapper-nav-sub">
|
||||
<div class="nav-sub">
|
||||
<ul>
|
||||
<li class="nav-item nav-course-settings-schedule"><a href="${reverse('contentstore.views.get_course_settings', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Schedule & Details</a></li>
|
||||
<li class="nav-item nav-course-settings-grading"><a href="${reverse('contentstore.views.course_config_graders_page', kwargs={'org' : ctx_loc.org, 'course' : ctx_loc.course, 'name': ctx_loc.name})}">Grading</a></li>
|
||||
<li class="nav-item nav-course-settings-team"><a href="${reverse('manage_users', kwargs=dict(location=ctx_loc))}">Course Team</a></li>
|
||||
<li class="nav-item nav-course-settings-advanced"><a href="${reverse('course_advanced_settings', kwargs={'org' : ctx_loc.org, 'course' : ctx_loc.course, 'name': ctx_loc.name})}">Advanced Settings</a></li>
|
||||
<li class="nav-item nav-course-settings-schedule">
|
||||
<a href="${reverse('contentstore.views.get_course_settings', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Schedule & Details</a>
|
||||
</li>
|
||||
<li class="nav-item nav-course-settings-grading">
|
||||
<a href="${reverse('contentstore.views.course_config_graders_page', kwargs={'org' : ctx_loc.org, 'course' : ctx_loc.course, 'name': ctx_loc.name})}">Grading</a>
|
||||
</li>
|
||||
<li class="nav-item nav-course-settings-team">
|
||||
<a href="${reverse('manage_users', kwargs=dict(location=ctx_loc))}">Course Team</a>
|
||||
</li>
|
||||
<li class="nav-item nav-course-settings-advanced">
|
||||
<a href="${reverse('course_advanced_settings', kwargs={'org' : ctx_loc.org, 'course' : ctx_loc.course, 'name': ctx_loc.name})}">Advanced Settings</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item nav-course-tools">
|
||||
<h3 class="title">Tools <i class="icon-caret-down"></i></h3>
|
||||
<h3 class="title"><span class="label">Tools</span> <i class="icon-caret-down ui-toggle-dd"></i></h3>
|
||||
|
||||
<div class="wrapper wrapper-nav-sub">
|
||||
<div class="nav-sub">
|
||||
<ul>
|
||||
<li class="nav-item nav-course-tools-checklists"><a href="${reverse('checklists', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Checklists</a></li>
|
||||
<li class="nav-item nav-course-tools-import"><a href="${reverse('import_course', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Import</a></li>
|
||||
<li class="nav-item nav-course-tools-export"><a href="${reverse('export_course', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Export</a></li>
|
||||
<li class="nav-item nav-course-tools-checklists">
|
||||
<a href="${reverse('checklists', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Checklists</a>
|
||||
</li>
|
||||
<li class="nav-item nav-course-tools-import">
|
||||
<a href="${reverse('import_course', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Import</a>
|
||||
</li>
|
||||
<li class="nav-item nav-course-tools-export">
|
||||
<a href="${reverse('export_course', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Export</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -68,34 +89,53 @@
|
||||
% endif
|
||||
</div>
|
||||
|
||||
<div class="wrapper wrapper-right">
|
||||
<div class="wrapper wrapper-r">
|
||||
% if user.is_authenticated():
|
||||
<nav class="nav-account nav-is-signedin nav-dropdown">
|
||||
<h2 class="sr">Currently logged in as:</h2>
|
||||
<nav class="nav-account nav-is-signedin nav-dd ui-right">
|
||||
<h2 class="sr">Help & Account Navigation</h2>
|
||||
|
||||
<ol>
|
||||
<li class="nav-item nav-account-username">
|
||||
<a href="#" class="title">
|
||||
<span class="account-username">
|
||||
<i class="icon-user"></i>
|
||||
${ user.username }
|
||||
</span>
|
||||
<i class="icon-caret-down"></i>
|
||||
</a>
|
||||
<li class="nav-item nav-account-help">
|
||||
<h3 class="title"><span class="label">Help</span> <i class="icon-caret-down ui-toggle-dd"></i></h3>
|
||||
|
||||
<div class="wrapper wrapper-nav-sub">
|
||||
<div class="nav-sub">
|
||||
<ul>
|
||||
<li class="nav-item nav-account-dashboard"><a href="/">My Courses</a></li>
|
||||
<li class="nav-item nav-account-help"><a href="http://help.edge.edx.org/" rel="external">Studio Help</a></li>
|
||||
<li class="nav-item nav-account-signout"><a class="action action-signout" href="${reverse('logout')}">Sign Out</a></li>
|
||||
<li class="nav-item nav-help-documentation">
|
||||
<a href="http://files.edx.org/Getting_Started_with_Studio.pdf" title="This is a PDF Document">Studio Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item nav-help-helpcenter">
|
||||
<a href="http://help.edge.edx.org/" rel="external">Studio Help Center</a>
|
||||
</li>
|
||||
<li class="nav-item nav-help-feedback">
|
||||
<a href="http://help.edge.edx.org/discussion/new" class="show-tender" title="Use our feedback tool, Tender, to share your feedback">Contact Us</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item nav-account-user">
|
||||
<h3 class="title"><span class="label"><span class="label-prefix sr">Currently signed in as:</span><span class="account-username" title="${ user.username }">${ user.username }</span></span> <i class="icon-caret-down ui-toggle-dd"></i></h3>
|
||||
|
||||
<div class="wrapper wrapper-nav-sub">
|
||||
<div class="nav-sub">
|
||||
<ul>
|
||||
<li class="nav-item nav-account-dashboard">
|
||||
<a href="/">My Courses</a>
|
||||
</li>
|
||||
<li class="nav-item nav-account-signout">
|
||||
<a class="action action-signout" href="${reverse('logout')}">Sign Out</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
% else:
|
||||
<nav class="nav-not-signedin">
|
||||
<nav class="nav-not-signedin nav-pitch">
|
||||
<h2 class="sr">You're not currently signed in</h2>
|
||||
<ol>
|
||||
<li class="nav-item nav-not-signedin-hiw">
|
||||
|
||||
Reference in New Issue
Block a user