more defined header, new icons, cleaner static tabs page
This commit is contained in:
Tom Giannattasio
committed by
Brian Talbot
Brian Talbot
parent
95dfc730dc
commit
39a882e278
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
@@ -6,7 +6,7 @@
|
||||
|
||||
body {
|
||||
min-width: 980px;
|
||||
background: #eaebed;
|
||||
background: #eaecf3;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: #3c3c3c;
|
||||
@@ -28,7 +28,6 @@ a {
|
||||
}
|
||||
|
||||
h1 {
|
||||
display: none;
|
||||
float: left;
|
||||
font-size: 28px;
|
||||
font-weight: 300;
|
||||
@@ -40,7 +39,7 @@ h1 {
|
||||
}
|
||||
|
||||
.page-actions {
|
||||
margin-bottom: 25px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.main-wrapper {
|
||||
@@ -177,6 +176,12 @@ code {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.details {
|
||||
display: none;
|
||||
margin-bottom: 30px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.window {
|
||||
margin-bottom: 20px;
|
||||
|
||||
@@ -184,11 +189,6 @@ code {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.details {
|
||||
margin-bottom: 30px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
padding: 6px 14px;
|
||||
border-bottom: 1px solid #cbd1db;
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
|
||||
input.courseware-unit-search-input {
|
||||
float: left;
|
||||
width: 260px;
|
||||
@@ -9,9 +8,9 @@ input.courseware-unit-search-input {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
border-radius: 3px;
|
||||
margin-top: 15px;
|
||||
margin: 15px 0;
|
||||
padding-bottom: 12px;
|
||||
@include box-shadow(0 1px 1px rgba(0,0,0,0.2), 0 0 0 1px rgba(0, 0, 0, 0.1));
|
||||
@include box-shadow(0 1px 1px rgba(0, 0, 0, .2));
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
@@ -192,17 +191,6 @@ input.courseware-unit-search-input {
|
||||
}
|
||||
}
|
||||
|
||||
.collapse-all-button {
|
||||
float: right;
|
||||
margin-top: 10px;
|
||||
font-size: 13px;
|
||||
color: $darkGrey;
|
||||
|
||||
.collapse-all-icon {
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.new-section-name,
|
||||
.new-subsection-name-input {
|
||||
width: 515px;
|
||||
@@ -219,7 +207,7 @@ input.courseware-unit-search-input {
|
||||
.new-section-name-cancel,
|
||||
.new-subsection-name-cancel {
|
||||
@include white-button;
|
||||
padding: 2px 20px 5px;
|
||||
padding: 4px 20px 7px;
|
||||
color: #8891a1 !important;
|
||||
}
|
||||
|
||||
|
||||
@@ -5,16 +5,16 @@ body.no-header {
|
||||
}
|
||||
|
||||
@mixin active {
|
||||
color: #3c3c3c;
|
||||
border-bottom: 3px solid $mediumGrey;
|
||||
color: $blue;
|
||||
@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
|
||||
background-color: rgba(255, 255, 255, .3);
|
||||
@include box-shadow(0 -1px 0 rgba(0, 0, 0, .2) inset, 0 1px 0 #fff inset);
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.primary-header {
|
||||
width: 100%;
|
||||
margin-bottom: 25px;
|
||||
border-top: 6px solid $blue;
|
||||
border-bottom: 1px solid $mediumGrey;
|
||||
background: #fff;
|
||||
margin-bottom: 30px;
|
||||
|
||||
&.active-tab-courseware #courseware-tab {
|
||||
@include active;
|
||||
@@ -48,17 +48,25 @@ body.no-header {
|
||||
|
||||
.class-nav-bar {
|
||||
clear: both;
|
||||
@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
|
||||
background-color: rgb(197, 207, 223);
|
||||
@include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset, 0 1px 1px rgba(0, 0, 0, 0.1));
|
||||
}
|
||||
|
||||
.class-nav {
|
||||
@include clearfix;
|
||||
border-top: 1px solid $mediumGrey;
|
||||
@include clearfix;
|
||||
|
||||
a {
|
||||
float: left;
|
||||
display: inline-block;
|
||||
padding: 20px 25px 22px;
|
||||
padding: 15px 25px 17px;
|
||||
font-size: 15px;
|
||||
color: #3c3c3c;
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
|
||||
|
||||
&:hover {
|
||||
@include linear-gradient(top, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0));
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
@@ -69,13 +77,16 @@ body.no-header {
|
||||
.class {
|
||||
@include clearfix;
|
||||
font-size: 12px;
|
||||
color: $darkGrey;
|
||||
color: rgb(163, 171, 184);
|
||||
@include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .1));
|
||||
background-color: rgb(47, 53, 63);
|
||||
@include box-shadow(0 -1px 3px rgba(0, 0, 0, 0.6) inset);
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
padding: 5px 10px 6px;
|
||||
color: $darkGrey;
|
||||
color: rgb(163, 171, 184);
|
||||
}
|
||||
|
||||
.home {
|
||||
|
||||
@@ -6,12 +6,8 @@
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.new-tab {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.unit-body {
|
||||
padding: 30px 40px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.components > li {
|
||||
@@ -40,7 +36,7 @@
|
||||
}
|
||||
|
||||
.drag-handle {
|
||||
background: url(../img/drag-handles.png) center no-repeat $lightGrey;
|
||||
background: url(../img/drag-handles.png) center no-repeat #fff;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -50,7 +46,7 @@
|
||||
z-index: 11;
|
||||
width: 35px;
|
||||
border: none;
|
||||
background: url(../img/drag-handles.png) center no-repeat $lightGrey;
|
||||
background: url(../img/drag-handles.png) center no-repeat #fff;
|
||||
|
||||
&:hover {
|
||||
background: url(../img/drag-handles.png) center no-repeat $lightGrey;
|
||||
@@ -73,7 +69,7 @@
|
||||
padding: 20px 20px 22px;
|
||||
font-size: 24px;
|
||||
font-weight: 300;
|
||||
background: $lightGrey;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.static-page-item {
|
||||
|
||||
@@ -17,18 +17,15 @@
|
||||
<%block name="content">
|
||||
<div class="main-wrapper">
|
||||
<div class="inner-wrapper">
|
||||
<div>
|
||||
<h1>Static Tabs</h1>
|
||||
</div>
|
||||
<article class="unit-body window">
|
||||
<div class="details">
|
||||
<p>Here 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>
|
||||
</div>
|
||||
<div class="list-header">
|
||||
<div class="page-actions">
|
||||
<a href="#" class="new-button new-tab">
|
||||
<span class="plus-icon white"></span>New Tab
|
||||
</a>
|
||||
</div>
|
||||
<article class="unit-body">
|
||||
<div class="details">
|
||||
<p>Here 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>
|
||||
</div>
|
||||
<div class="tab-list">
|
||||
<ol class='components'>
|
||||
% for id in components:
|
||||
|
||||
@@ -98,7 +98,6 @@
|
||||
|
||||
<div class="main-wrapper">
|
||||
<div class="inner-wrapper">
|
||||
<h1>Courseware</h1>
|
||||
<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="collapse-all-button"><span class="collapse-all-icon"></span>Collapse All</a>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<%! from django.core.urlresolvers import reverse %>
|
||||
|
||||
<% active_tab_class = 'active-tab-' + active_tab if active_tab else '' %>
|
||||
<header class="primary-header ${active_tab_class}">
|
||||
<div class="inner-wrapper">
|
||||
<div class="class">
|
||||
<header class="primary-header ${active_tab_class}">
|
||||
<div class="class">
|
||||
<div class="inner-wrapper">
|
||||
<div class="left">
|
||||
% if context_course:
|
||||
<% ctx_loc = context_course.location %>
|
||||
@@ -21,19 +21,17 @@
|
||||
% endif
|
||||
</div>
|
||||
</div>
|
||||
<nav class="class-nav-bar">
|
||||
% if context_course:
|
||||
<% ctx_loc = context_course.location %>
|
||||
<ul class="class-nav">
|
||||
<li><a href="${reverse('course_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='courseware-tab'>Courseware</a></li>
|
||||
<li><a href="${reverse('course_info', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='courseinfo-tab'>Course Info</a></li>
|
||||
<li><a href="${reverse('edit_tabs', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, coursename=ctx_loc.name))}" id='pages-tab'>Tabs</a></li>
|
||||
<li><a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='assets-tab'>Assets</a></li>
|
||||
<li><a href="${reverse('manage_users', kwargs=dict(location=ctx_loc))}" id='users-tab'>Users</a></li>
|
||||
<li><a href="${reverse('course_settings', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='settings-tab'>Settings</a></li>
|
||||
<li><a href="${reverse('import_course', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='import-tab'>Import</a></li>
|
||||
</ul>
|
||||
% endif
|
||||
</nav>
|
||||
</div>
|
||||
<nav class="class-nav-bar">
|
||||
% if context_course:
|
||||
<% ctx_loc = context_course.location %>
|
||||
<ul class="class-nav inner-wrapper">
|
||||
<li><a href="${reverse('course_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='courseware-tab'>Courseware</a></li>
|
||||
<li><a href="${reverse('edit_tabs', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, coursename=ctx_loc.name))}" id='pages-tab'>Tabs</a></li>
|
||||
<li><a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='assets-tab'>Assets</a></li>
|
||||
<li><a href="${reverse('course_settings', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='settings-tab'>Settings</a></li>
|
||||
<li><a href="${reverse('import_course', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='import-tab'>Import</a></li>
|
||||
</ul>
|
||||
% endif
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
Reference in New Issue
Block a user