Skip to content

E
edx-platform
Commit 2fca2d38 by Brian Talbot
Options

Merge pull request #299 from edx/talbs/studio-helpnav 

Studio - Help Links Addition and Small UI Revisions to Main Navigation
parents f1cf0357 b560f434
Showing with 213 additions and 38 deletions
cms/static/img/logo-edx-studio.png
cms/static/img/logo-edx-studio.png

2.4 KB | W: | H:

cms/static/img/logo-edx-studio.png

4.67 KB | W: | H:

cms/static/img/logo-edx-studio.png
cms/static/img/logo-edx-studio.png
cms/static/img/logo-edx-studio.png
cms/static/img/logo-edx-studio.png
  • 2-up
  • Swipe
  • Onion skin
cms/static/js/base.js
......@@ -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');
}
......
cms/static/sass/_variables.scss
......@@ -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%);
......
cms/static/sass/elements/_controls.scss
......@@ -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;
}
}
}
// ====================
......
cms/static/sass/elements/_navigation.scss
......@@ -18,20 +18,161 @@ nav {
// ====================
// primary
// tabs
// ====================
// right hand side
// dropdown
.nav-dd {
// ====================
.title {
// tabs
.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;
}
// dropdown
// 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;
}
}
}
}
cms/static/sass/elements/_tender-widget.scss
......@@ -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;
}
\ No newline at end of file
}
cms/static/sass/views/_index.scss
......@@ -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 {
......
cms/templates/asset_index.html
......@@ -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">&gt; </span>Files &amp; Uploads
</h1>
......
cms/templates/course_info.html
......@@ -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">&gt; </span>Course Updates
</h1>
......
cms/templates/edit-tabs.html
......@@ -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">&gt; </span>Static Pages
</h1>
......
cms/templates/overview.html
......@@ -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">&gt; </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>
......
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