Skip to content

E
edx-analytics-dashboard
Commit 4681d81b by Gabe Mulley
Options

Merge pull request #2 from edx/talbs/ui-static-prototypes 

UI: Static Prototype Templates
parents b3142865 ec13af48
Showing with 936 additions and 100 deletions
analytics_dashboard/courses/templates/courses/analytics.html
{% extends "base.html" %}
{% block view-name %}view-placeholder{% endblock view-name %}
{% comment %}
Individual course centric overview view
{% endcomment %}
{% block header %}
{% include "header.html" %}
{% endblock header %}
{% block view-name %}view-course-overview view-dashboard{% endblock view-name %}
{% block title %}{{ course_number }} {{ course_title }}| edX Analytics{% endblock title %}
{% block content %}
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-8">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at nisi vestibulum, interdum elit in, pellentesque velit. Curabitur lacinia sollicitudin commodo. Nam enim velit, semper et lacinia at, imperdiet sit amet arcu. Praesent dictum porta tortor, sed congue massa euismod id. Mauris dignissim turpis eu risus volutpat, vel imperdiet nunc aliquet. Morbi est ipsum, mollis eleifend condimentum quis, porttitor ut ligula. Aliquam diam risus, bibendum in justo eget, lobortis ullamcorper lorem. Vivamus elit turpis, fringilla nec magna in, condimentum lobortis nunc. Maecenas nec arcu consequat, auctor ipsum ac, malesuada orci. Sed bibendum nulla enim, quis scelerisque quam mattis vitae. In eleifend, sem eu pulvinar dictum, dui ante faucibus eros, placerat dictum orci nibh eget justo. Morbi quis adipiscing arcu. Vestibulum semper metus ac aliquam dapibus. Sed feugiat vulputate massa, ac ultricies arcu congue vel. Ut eget egestas erat. Donec molestie sem eu leo consequat, nec posuere mauris lobortis.</p>
</div>
<div class="col-xs-6 col-md-4">
<p>
Nunc in eleifend dolor, vel ornare orci. Nullam venenatis iaculis urna, vel feugiat est rutrum at. Nullam lacinia elementum nibh at condimentum. In adipiscing vel neque a mattis. Aliquam lobortis at odio et eleifend. Etiam suscipit vitae ante nec aliquet. Donec egestas velit at commodo sagittis. Ut imperdiet, turpis mattis rutrum accumsan, libero justo euismod tellus, at pulvinar orci felis sed lectus. Nullam ut sapien nec velit faucibus gravida ac ac orci. Nam feugiat massa nec bibendum tincidunt. In lobortis feugiat leo, ut laoreet lorem rutrum sit amet.
</p>
</div>
{% block nav-skip %}
<div class="sr-only">
<h2>Skip to Parts of this Page</h2>
<ul>
<li><a href="#nav">Main Navigation</a></li>
<li><a href="#content">Main Content</a></li>
<li><a href="#sidebar">Side Content + Navigation</a></li>
</ul>
</div>
{% endblock nav-skip %}
<div class="col-xs-6 col-md-4">
<p>Aliquam lacinia, felis at cursus dictum, justo augue placerat erat, sed lacinia leo quam id mauris. Maecenas venenatis ligula facilisis, vulputate purus sed, condimentum odio. Maecenas nisi nulla, pellentesque ac mollis non, aliquam in sem. Integer euismod, ipsum id cursus posuere, risus libero tristique nulla, sit amet blandit leo diam in arcu. Sed a libero interdum, suscipit dui eget, tincidunt orci. Vestibulum cursus tellus eget enim tempus, in commodo tortor fermentum. Phasellus ut dapibus eros, non condimentum purus. Proin tincidunt sem sit amet felis accumsan, sed vehicula ligula consectetur. Cras in odio urna. Aliquam ut leo aliquet, sollicitudin sem eget, pellentesque risus. Mauris at rhoncus arcu, vitae imperdiet dolor. In hac habitasse platea dictumst. Curabitur id magna leo. Maecenas aliquet vel augue et aliquam. In vitae est quis quam suscipit tempus eget sit amet lectus. Curabitur a porta lacus.</p>
</div>
{% block content %}
<div class="row">
<aside id="sidebar" class="col-sm-3 col-md-2 sidebar">
<div class="sidebar-group">
<!-- TODO: abstract this out into one view with .active logic -->
<ul class="nav nav-stacked">
<li class="active">
<a href="#">
<span class="link-label"><i class="ico fa fa-tachometer"></i> Overview</span>
<i class="link-ico fa fa-angle-right hidden-xs"></i>
</a>
</li>
<li>
<a href="#">
<span class="link-label"><i class="ico fa fa-child"></i> Enrollment</span>
<i class="link-ico fa fa-angle-right hidden-xs"></i>
</a>
</li>
<li>
<a href="#">
<span class="link-label"><i class="ico fa fa-tasks"></i> Engagement</span>
<i class="link-ico fa fa-angle-right hidden-xs"></i>
</a>
</li>
<li>
<a href="#">
<span class="link-label"><i class="ico fa fa-bar-chart-o"></i> Performance</span>
<i class="link-ico fa fa-angle-right hidden-xs"></i>
</a>
</li>
<li>
<a href="#">
<span class="link-label"><i class="ico fa fa-life-ring"></i> Help &amp; Support</span>
<i class="link-ico fa fa-angle-right hidden-xs"></i>
</a>
</li>
<li>
<a href="#">
<span class="link-label"><i class="ico fa fa-comments-o"></i> Contact</span>
<i class="link-ico fa fa-angle-right hidden-xs"></i>
</a>
</li>
</ul>
</div>
</aside>
<!-- / col -->
<div class="col-xs-6 col-md-4">
<p>Duis quis sodales ipsum, laoreet auctor ipsum. Pellentesque consequat volutpat felis ac dictum. Maecenas sodales malesuada magna, ac laoreet urna consequat ut. Nunc eget ligula eleifend, ornare diam non, vulputate nunc. In sit amet commodo mauris. Vivamus pharetra arcu gravida tincidunt interdum. Suspendisse potenti. Fusce non tellus a metus interdum bibendum. Quisque id molestie ante, vel pellentesque magna. Sed gravida eleifend erat pharetra consectetur. Suspendisse cursus justo et faucibus porttitor. Nam feugiat purus in neque sodales, sed volutpat nunc hendrerit. Etiam venenatis pretium lectus in lacinia. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam viverra turpis eu ligula condimentum placerat.</p>
</div>
<main class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" id="content">
<div class="view-head">
<h1>Overview</h1>
</div>
<div class="col-xs-6 col-md-4">
<p>Praesent sed augue et urna bibendum fringilla. Nam nisi risus, ornare in pellentesque non, volutpat eu lacus. Etiam et ultricies magna, non facilisis augue. Aliquam eleifend eget sem in pretium. Praesent enim purus, posuere at orci ac, bibendum laoreet diam. Phasellus pharetra ullamcorper aliquet. Phasellus pellentesque, purus sit amet sollicitudin semper, turpis risus viverra dui, ut consectetur dolor neque in lectus. Etiam at mi turpis.</p>
</div>
</div><!-- / .container -->
<div class="view-intro">
<p class="lead text-muted">
[Intro summary area for Overview if needed] Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
</p>
</div>
</main>
<!-- / col -->
</div>
<!-- / row -->
{% endblock content %}
{% block footer %}
{% include "footer.html" %}
{% endblock footer %}
analytics_dashboard/static/sass/_base.scss 0 → 100644
// app styling: base
// ====================
// NOTE: used for any basic styling or overriding that isn't covered by Bootstrap + theming
// + basics
// + extends
// + nav + header
// + ui: sections
// + ui: data-summary
// + ui: data-table
// + view: dashboard
// + view: system
// basics
// --------------------
html {
height: 100%;
}
a {
@include transition(color ease-in-out .25s);
}
hr.has-emphasis {
margin-top: $padding-base-vertical;
border-color: $gray-dark;
}
// extends
// --------------------
%hd-titlecased { // titlecased heading
font-family: $f-sans-serif-alt;
text-transform: uppercase;
letter-spacing: 0.2rem;
}
%ui-box { // visual emphasis/grouping box
border-radius: 3px;
box-shadow: 0 1px 1px $shadow-l1;
padding: $padding-large-vertical $padding-large-horizontal;
border: 1px solid $gray-l2;
background: $white-t;
}
// nav + header
// --------------------
.navbar-brand {
padding: 25px 15px; // needed for edX logo to render properly
.navbar-brand-logo {
display: inline-block;
vertical-align: middle;
height: 30px;
margin-right: 10px;
}
.navbar-brand-app {
@include transition(color ease-in-out .25s);
@extend %hd-titlecased;
display: inline-block;
vertical-align: middle;
color: $edx-blue;
// STATE: hover
&:hover, &:active {
color: $link-color;
}
}
}
.navbar-link {
font-weight: 600;
font-size: 16px;
font-family: $f-sans-serif;
.fa-caret-down {
margin-left: 5px;
}
.ico-user {
margin-right: 5px;
}
}
// ui: views
// --------------------
.view-head {
margin-bottom: ($padding-large-vertical*2);
}
// ui: sections
// --------------------
.view-section {
margin-bottom: ($padding-large-vertical*6);
// CASE: last child
&:last-child {
margin-bottom: 0;
}
.section-title, .section-subtitle {
margin-bottom: $padding-base-vertical;
}
.section-title-value, .subsection-title-value {
display: block;
margin-bottom: $padding-base-vertical;
}
.section-title-note, .subsection-title-note {
display: block;
}
// CASE: larger than small screen breakpoint
@media (min-width: $screen-sm-min) {
.section-title, .section-subtitle {
@include clearfix();
}
.section-title-value, .subsection-title-value {
float: left;
}
.section-title-note, .subsection-title-note {
float: right;
}
}
.section-nav {
margin-bottom: ($padding-large-vertical*2);
}
.section-content {
}
.section-actions {
margin-top: $padding-base-vertical;
}
}
// ui: filter nav
// --------------------
.nav-filters {
.filter {
.ico {
margin-left: $padding-small-horizontal;
}
}
}
// ui: data-summary
// --------------------
.section-data-summary {
.summary-point {
@extend %ui-box;
@include scale(0.95);
@include transition(all ease-in-out .50s);
display: table;
width: 100%;
min-height: 150px;
margin-bottom: $padding-large-vertical;
.summary-point-wrapper {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.summary-point-note {
display: inline-block;
vertical-align: bottom;
width: 100%;
}
// STATE: hover + active
&:hover, &:active {
box-shadow: 0 1px 1px $edx-blue-t2;
@include scale(1.0);
.summary-point-number {
color: $brand-primary;
}
}
}
.summary-point-number {
@include transition(color ease-in-out .50s);
margin-top: 0;
}
}
// ui: data-viz
// --------------------
.section-data-viz {
.viz-filter {
margin-bottom: $padding-large-vertical;
.viz-filter-label {
display: inline-block;
vertical-align: middle;
margin-right: $padding-small-horizontal;
}
.filter {
display: inline-block;
vertical-align: middle;
.ico {
margin-left: $padding-small-horizontal;
}
}
}
}
// ui: data-table
// --------------------
.section-data-table {
@extend %ui-box;
tbody tr {
@include transition(background ease-in-out .25s);
// STATE: hover
&:hover, &:active {
background: $edx-blue-t0;
}
}
}
// view: dashboard
// --------------------
.view-dashboard {
padding-top: $navbar-height; // move down content because we have a fixed navbar
.main {
padding-bottom: ($padding-large-vertical*4);
}
// custom styling for p-type sidebar
.sidebar {
padding: 0;
background: $gray-darker;
}
.sidebar-group {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
.title {
font-family: $f-sans-serif-alt;
text-transform: uppercase;
letter-spacing: 0.2rem;
color: $gray-light;
}
.nav-stacked {
li {
margin-top: 0;
}
a {
@include clearfix();
@include transition(background ease-in-out .25s, color ease-in-out .25s);
border-bottom: 1px solid lighten($gray-darker, 5%);
padding: 15px;
font-size: $font-size-base;
letter-spacing: 0.05rem;
color: $gray-light;
.link-label {
float: left;
.ico {
margin-right: $padding-small-horizontal;
}
}
.link-ico {
float: right;
}
// STATE: hover + active
&:hover, &:active {
background: darken($gray-darker, 5%);
color: $link-color;
}
}
// STATE: active nav items
.active {
a {
background: darken($gray-darker, 5%);
color: $link-color;
}
}
}
}
// CASE: larger than small screen breakpoint
@media (min-width: $screen-sm-min) {
.sidebar {
position: fixed;
top: ($navbar-height+1);
bottom: 0;
left: 0;
z-index: 1000;
display: block;
overflow-x: hidden;
overflow-y: auto; // scrollable contents if viewport is shorter than content.
border-right: 2px solid $black-t0;
}
}
}
// view: system
// (heavily relies upon Bootstrap cover - http://getbootstrap.com/examples/cover/)
// --------------------
.view-system {
height: 100%;
background-color: $gray-darker;
color: $white;
text-align: center;
// overriding element contained in base template
.container-fluid {
height: 100%;
}
// Extra markup and styles for table-esque vertical and horizontal centering
.site-wrapper {
display: table;
width: 100%;
height: 100%; /* For at least Firefox */
min-height: 100%;
}
.site-wrapper-inner {
display: table-cell;
vertical-align: top;
}
.cover-container {
margin-right: auto;
margin-left: auto;
}
// padding
.inner {
padding: $padding-large-vertical $padding-large-horizontal;
}
// header
.masthead {
margin-top: ($padding-large-vertical*4);
}
.masthead-brand {
margin-top: $padding-large-vertical;
margin-bottom: $padding-large-vertical;
}
.masthead-brand-logo {
display: inline-block;
vertical-align: middle;
height: 60px;
margin-right: 10px;
}
.masthead-brand-app {
@extend %hd-titlecased;
display: inline-block;
vertical-align: middle;
font-size: $font-size-large;
color: $edx-blue;
}
// cover
.cover {
padding: 0 $padding-large-horizontal;
}
.cover .btn-lg {
padding: $padding-base-vertical $padding-large-horizontal;
font-weight: 600;
}
.error-code {
display: block;
margin-bottom: $padding-large-vertical;
}
.error-title {
display: block;
}
.error-copy {
color: $gray;
}
// affix and center
@media (min-width: 768px) {
.masthead {
position: fixed;
top: 0;
}
.mastfoot {
position: fixed;
bottom: 0;
}
.site-wrapper-inner {
vertical-align: middle;
}
.masthead,
.mastfoot,
.cover-container {
width: 100%; // Must be percentage or pixels for horizontal alignment
}
}
@media (min-width: 992px) {
.masthead,
.mastfoot,
.cover-container {
width: 700px;
}
}
}
analytics_dashboard/static/sass/_config-variables.scss
......@@ -24,22 +24,87 @@ $white-t3: rgba($white,0.75);
$gray: rgb(139, 133, 127);
$gray-l1: lighten($gray,20%);
$gray-l2: lighten($gray,40%);
$gray-l3: lighten($gray,60%);
$gray-l4: lighten($gray,80%);
$gray-l5: lighten($gray,90%);
$gray-l6: lighten($gray,95%);
$gray-l2: lighten($gray,30%);
$gray-d1: darken($gray,20%);
$gray-d2: darken($gray,40%);
$gray-d3: darken($gray,60%);
$gray-d4: darken($gray,80%);
$gray-d5: darken($gray,90%);
$gray-d6: darken($gray,95%);
$gray-d2: darken($gray,30%);
$gray-t0: rgba($gray,0.125);
$gray-t1: rgba($gray,0.25);
$gray-t2: rgba($gray,0.50);
$gray-t3: rgba($gray,0.75);
// colors - default
$blue: rgb(58, 162, 224);
$blue-l1: tint($blue,20%);
$blue-l2: tint($blue,30%);
$blue-d1: shade($blue,20%);
$blue-d2: shade($blue,30%);
$blue-s1: saturate($blue,15%);
$blue-s2: saturate($blue,30%);
$blue-s3: saturate($blue,45%);
$blue-u1: desaturate($blue,15%);
$blue-u2: desaturate($blue,30%);
$blue-u3: desaturate($blue,45%);
$blue-t0: rgba($blue,0.125);
$blue-t1: rgba($blue,0.25);
$blue-t2: rgba($blue,0.50);
$blue-t3: rgba($blue,0.75);
$green: rgb(95, 187, 121);
$green-l1: tint($green,20%);
$green-l2: tint($green,30%);
$green-d1: shade($green,20%);
$green-d2: shade($green,30%);
$green-s1: saturate($green,15%);
$green-s2: saturate($green,30%);
$green-u1: desaturate($green,15%);
$green-u2: desaturate($green,30%);
$green-t0: rgba($green,0.125);
$green-t1: rgba($green,0.25);
$green-t2: rgba($green,0.50);
$green-t3: rgba($green,0.75);
$yellow: rgb(242, 212, 142);
$yellow-l1: tint($yellow,20%);
$yellow-l2: tint($yellow,30%);
$yellow-d1: shade($yellow,20%);
$yellow-d2: shade($yellow,30%);
$yellow-s1: saturate($yellow,15%);
$yellow-s2: saturate($yellow,30%);
$yellow-u1: desaturate($yellow,15%);
$yellow-u2: desaturate($yellow,30%);
$yellow-t0: rgba($yellow,0.125);
$yellow-t1: rgba($yellow,0.25);
$yellow-t2: rgba($yellow,0.50);
$yellow-t3: rgba($yellow,0.75);
$orange: rgb(247, 168, 86);
$orange-l1: tint($orange,20%);
$orange-l2: tint($orange,30%);
$orange-d1: shade($orange,20%);
$orange-d2: shade($orange,30%);
$orange-s1: saturate($orange,15%);
$orange-s2: saturate($orange,30%);
$orange-u1: desaturate($orange,15%);
$orange-u2: desaturate($orange,30%);
$orange-t0: rgba($orange,0.125);
$orange-t1: rgba($orange,0.25);
$orange-t2: rgba($orange,0.50);
$orange-t3: rgba($orange,0.75);
$red: rgb(226, 94, 100);
$red-l1: tint($red,20%);
$red-l2: tint($red,30%);
$red-d1: shade($red,20%);
$red-d2: shade($red,30%);
$red-s1: saturate($red,15%);
$red-s2: saturate($red,30%);
$red-u1: desaturate($red,15%);
$red-u2: desaturate($red,30%);
$red-t0: rgba($red,0.125);
$red-t1: rgba($red,0.25);
$red-t2: rgba($red,0.50);
$red-t3: rgba($red,0.75);
// shadows
$shadow: rgba($black-t,0.2);
$shadow-l1: rgba($black-t,0.1);
......@@ -50,15 +115,9 @@ $shadow-d2: rgba($black-t,0.6);
// edx-centric colors
$edx-blue: rgb(58, 162, 224);
$edx-blue-l1: lighten($edx-blue,20%);
$edx-blue-l2: lighten($edx-blue,40%);
$edx-blue-l3: lighten($edx-blue,60%);
$edx-blue-l4: lighten($edx-blue,80%);
$edx-blue-l5: lighten($edx-blue,90%);
$edx-blue-l2: lighten($edx-blue,30%);
$edx-blue-d1: darken($edx-blue,20%);
$edx-blue-d2: darken($edx-blue,40%);
$edx-blue-d3: darken($edx-blue,60%);
$edx-blue-d4: darken($edx-blue,80%);
$edx-blue-d5: darken($edx-blue,90%);
$edx-blue-d2: darken($edx-blue,30%);
$edx-blue-s1: saturate($edx-blue,15%);
$edx-blue-s2: saturate($edx-blue,30%);
$edx-blue-s3: saturate($edx-blue,45%);
......@@ -72,15 +131,9 @@ $edx-blue-t3: rgba($edx-blue,0.75);
$edx-pink: rgb(182,37,104);
$edx-pink-l1: lighten($edx-pink,20%);
$edx-pink-l2: lighten($edx-pink,40%);
$edx-pink-l3: lighten($edx-pink,60%);
$edx-pink-l4: lighten($edx-pink,80%);
$edx-pink-l5: lighten($edx-pink,90%);
$edx-pink-l2: lighten($edx-pink,30%);
$edx-pink-d1: darken($edx-pink,20%);
$edx-pink-d2: darken($edx-pink,40%);
$edx-pink-d3: darken($edx-pink,60%);
$edx-pink-d4: darken($edx-pink,80%);
$edx-pink-d5: darken($edx-pink,90%);
$edx-pink-d2: darken($edx-pink,30%);
$edx-pink-s1: saturate($edx-pink,15%);
$edx-pink-s2: saturate($edx-pink,30%);
$edx-pink-s3: saturate($edx-pink,45%);
......@@ -94,15 +147,9 @@ $edx-pink-t3: rgba($edx-pink,0.75);
$edx-gray: rgb(164, 165, 168);
$edx-gray-l1: lighten($edx-gray,20%);
$edx-gray-l2: lighten($edx-gray,40%);
$edx-gray-l3: lighten($edx-gray,60%);
$edx-gray-l4: lighten($edx-gray,80%);
$edx-gray-l5: lighten($edx-gray,90%);
$edx-gray-l2: lighten($edx-gray,30%);
$edx-gray-d1: darken($edx-gray,20%);
$edx-gray-d2: darken($edx-gray,40%);
$edx-gray-d3: darken($edx-gray,60%);
$edx-gray-d4: darken($edx-gray,80%);
$edx-gray-d5: darken($edx-gray,90%);
$edx-gray-s1: saturate($edx-gray,15%);
$edx-gray-s2: saturate($edx-gray,30%);
$edx-gray-s3: saturate($edx-gray,45%);
......@@ -114,15 +161,71 @@ $edx-gray-t1: rgba($edx-gray,0.25);
$edx-gray-t2: rgba($edx-gray,0.50);
$edx-gray-t3: rgba($edx-gray,0.75);
// general actions
// general color application
$color-primary: $edx-blue;
$color-secondary: $edx-blue-l1;
$color-tertiary: $edx-blue-l3;
$color-tertiary: $edx-blue-l2;
$color-success: $green;
$color-warning: $yellow;
$color-error: $red;
$color-status: $blue;
$color-input: $blue-s1;
$color-create: $green;
$color-delete: $red;
$color-support: $orange;
// fonts
$f-sans-serif: 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif;
$f-sans-serif-alt: 'Montserrat','Avenir Next', Helvetica, Arial, sans-serif;
// application - bootstrap overrides
// application - bootstrap overrides (from http://getbootstrap.com/customize/#less-variables)
// --------------------
// colors
$gray-lighter: $gray-l2;
$gray-light: $gray-l1;
$gray: $gray;
$gray-dark: $gray-d1;
$gray-darker: $gray-d2;
$brand-primary: $color-primary;
$brand-success: $color-success;
$brand-info: $color-status;
$brand-warning: $color-warning;
$brand-danger: $color-error;
// scaffoling
$body-bg: $edx-gray-l2;
$text-color: $gray-d2;
// $link-color: ;
// $link-hover-color: ;
// grid
$grid-gutter-width: 40px;
// typography
$font-family-base: $f-sans-serif;
$font-family-sans-serif: $f-sans-serif;
$headings-font-weight: 500;
// $font-size-small: ;
// $font-size-base: ;
// $font-size-large: ;
// $headings-font-family: $f-sans-serif-alt;
// components
$border-radius-base: 2px;
$border-radius-large: 4px;
// $component-active-color: ;
// $component-active-bg: ;
// navbar
$navbar-height: 80px;
$navbar-default-color: black;
$navbar-default-bg: $white-t;
$navbar-default-link-color: $edx-gray-d2;
$navbar-default-link-hover-color: $edx-blue-s1;
$navbar-default-link-hover-bg: transparent;
$navbar-default-link-active-color: $edx-blue-d1;
$navbar-default-border: $gray-lighter;
// $navbar-padding-horizontal: ;
// $navbar-padding-vertical: ;
// $navbar-default-border: ;
analytics_dashboard/static/sass/_shame.scss
// utilities: shame
// ====================
// NOTE: to be used for any poorly architected Sass/CSS or needed overrides to be resolved later
// needed to override table striping by Bootstrap
.section-data-table tbody tr {
// STATE: hover
&:hover, &:active {
&:nth-child(even) {
background: $edx-blue-t0 !important;
}
&:nth-child(odd) > td {
background: $edx-blue-t0 !important;
}
}
}
analytics_dashboard/static/sass/style-application.scss
......@@ -13,6 +13,10 @@
@import "../vendor/bootstrap/stylesheets/bootstrap"; // vendor: bootstrap
@import "../vendor/font-awesome/scss/font-awesome"; // vendor: font awesome
// app styling
// --------------------
@import 'base'; // base styling and customization
// utility/misc.
// --------------------
@import 'developer'; // developer-friendly file: add rough/WIP styling that needs UI triage
......
analytics_dashboard/templates/404.html
{% extends "base.html" %}
{% block title %}Page Not found{% endblock %}
{% load staticfiles %}
{% block page_title %}Page Not found{% endblock page_title %}
{% comment %}
System 404 Error View
{% endcomment %}
{% block view-name %}view-404 view-system{% endblock view-name %}
{% block title %}Page Not Found | edX Analytics{% endblock title %}
{% block header %}
{% endblock header %}
{% block content %}
<p>This is not the page you were looking for.</p>
{% endblock content %}
\ No newline at end of file
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="masthead clearfix">
<div class="inner">
<img class="masthead-brand-logo" src="{% static 'images/logo-edx.svg' %}" alt="edX" />
<span class="masthead-brand-app">Analytics</span>
</div>
</div>
<div class="inner cover">
<h1 class="cover-heading">
<span class="error-code">404</span>
<span class="error-title">Those Numbers (and Letters) Can't Be Crunched.</span>
</h1>
<p class="lead error-copy">We can't find the view you're looking for. Please make sure the URL you've entered or arrived at is correct and if not try again. If you continue to have trouble, please let us know.</p>
<p class="lead">
<a href="#" class="btn btn-lg btn-primary">
<i class="ico fa fa-life-ring"></i>
Contact edX Support
</a>
</p>
</div>
</div>
</div>
</div>
{% endblock content %}
analytics_dashboard/templates/500.html
<h1>Whoops!</h1>
{% extends "base.html" %}
{% load staticfiles %}
{% comment %}
System 500 Error View
{% endcomment %}
{% block view-name %}view-404 view-system{% endblock view-name %}
{% block title %}Page Not Found | edX Analytics{% endblock title %}
{% block header %}
{% endblock header %}
{% block content %}
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="masthead clearfix">
<div class="inner">
<img class="masthead-brand-logo" src="{% static 'images/logo-edx.svg' %}" alt="edX" />
<span class="masthead-brand-app">Analytics</span>
</div>
</div>
<div class="inner cover">
<h1 class="cover-heading">
<span class="error-code">500</span>
<span class="error-title">Something Went Wrong on Our End</span>
</h1>
<p class="lead error-copy">Our servers weren't able to complete your request. Please try again by refreshing this page or retracing your steps. If you consistently run into a problem, please let us know.</p>
<p class="lead">
<a href="#" class="btn btn-lg btn-primary">
<i class="ico fa fa-life-ring"></i>
Contact edX Support
</a>
</p>
</div>
</div>
</div>
</div>
{% endblock content %}
analytics_dashboard/templates/base.html
......@@ -32,16 +32,30 @@
</head>
<body class="{% block view-name %}{% endblock view-name %}">
{% block nav-skip %}
<div class="sr-only">
<h2>Skip to Parts of this Page</h2>
<ul>
<li><a href="#nav">Main Navigation</a></li>
<li><a href="#content">Main Content</a></li>
</ul>
</div>
{% endblock nav-skip %}
{% block header %}
{% include "header.html" %}
{% endblock header %}
<div class="container-fluid">
{% block content %}
{% endblock content %}
{% block footer %}
{% include "footer.html" %}
{% endblock footer %}
</div>
<!-- / container -->
<!-- Placed at the end of the document so the pages load faster -->
{% comment %}
......@@ -51,6 +65,7 @@
{% block javascript %}
{% compress js %}
<script type="text/javascript" src="{% static 'vendor/jquery-1.11.1.min.js' %}"></script>
<script type="text/javascript" src="{% static 'vendor/holder.js' %}"></script>
<script type="text/javascript" src="{% static 'vendor/bootstrap/javascripts/bootstrap.js' %}"></script>
<script type="text/javascript" src="{% static 'js/analytics_dashboard.js' %}"></script>
{% endcompress %}
......
analytics_dashboard/templates/course/course-navigation.html
{% comment %}
Partial: Individual course centric navigation
{% endcomment %}
<!-- TODO: abstract course-based navigation to here -->
analytics_dashboard/templates/course/overview.html 0 → 100644
{% extends "base.html" %}
{% comment %}
Individual course centric overview view
{% endcomment %}
{% block view-name %}view-course-overview view-dashboard{% endblock view-name %}
{% block title %}{{ course_number }} {{ course_title }}| edX Analytics{% endblock title %}
{% block nav-skip %}
<div class="sr-only">
<h2>Skip to Parts of this Page</h2>
<ul>
<li><a href="#nav">Main Navigation</a></li>
<li><a href="#content">Main Content</a></li>
<li><a href="#sidebar">Side Content + Navigation</a></li>
</ul>
</div>
{% endblock nav-skip %}
{% block content %}
<div class="row">
<aside id="sidebar" class="col-sm-3 col-md-2 sidebar">
<div class="sidebar-group">
<!-- TODO: abstract this out into one view with .active logic -->
<ul class="nav nav-stacked">
<li class="active">
<a href="#">
<span class="link-label"><i class="ico fa fa-tachometer"></i> Overview</span>
<i class="link-ico fa fa-angle-right hidden-xs"></i>
</a>
</li>
<li>
<a href="#">
<span class="link-label"><i class="ico fa fa-child"></i> Enrollment</span>
<i class="link-ico fa fa-angle-right hidden-xs"></i>
</a>
</li>
<li>
<a href="#">
<span class="link-label"><i class="ico fa fa-tasks"></i> Engagement</span>
<i class="link-ico fa fa-angle-right hidden-xs"></i>
</a>
</li>
<li>
<a href="#">
<span class="link-label"><i class="ico fa fa-bar-chart-o"></i> Performance</span>
<i class="link-ico fa fa-angle-right hidden-xs"></i>
</a>
</li>
<li>
<a href="#">
<span class="link-label"><i class="ico fa fa-life-ring"></i> Help &amp; Support</span>
<i class="link-ico fa fa-angle-right hidden-xs"></i>
</a>
</li>
<li>
<a href="#">
<span class="link-label"><i class="ico fa fa-comments-o"></i> Contact</span>
<i class="link-ico fa fa-angle-right hidden-xs"></i>
</a>
</li>
</ul>
</div>
</aside>
<!-- / col -->
<main class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" id="content">
<div class="view-head">
<h1>Overview</h1>
</div>
<div class="view-intro">
<p class="lead text-muted">
[Intro summary area for Overview if needed] Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
</p>
</div>
</main>
<!-- / col -->
</div>
<!-- / row -->
{% endblock content %}
analytics_dashboard/templates/footer.html
{% comment %}
Partial: App-wide footer element
{% endcomment %}
<div class="footer">
<div class="col-lg-12">
<p class="text-right"><small>&copy; 2014 edX, except where noted, all rights reserved</small></p>
</div>
</div>
analytics_dashboard/templates/header.html
{% load staticfiles %}
{% comment %}
Partial: App-wide header element
{% endcomment %}
<nav class="navbar navbar-default" role="navigation">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" id="nav">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<small>edX</small> Insights <i class="fa fa-tachometer fa-lg"></i>
<img class="navbar-brand-logo" src="{% static 'images/logo-edx.svg' %}" alt="edX" />
<span class="navbar-brand-app">Analytics</span>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<div class="row">
<div class="col-xs-12 col-md-8">
<div class="navbar-text">
<div>
{{ course_number }}
</div>
<div>
{{ course_title }}
</div>
</div>
</div>
<div class="navbar-right navbar-text">
<i class="fa fa-user"></i> {{ user_name }}
</div>
</div>
<ul class="nav nav-pills navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle active-course navbar-link" data-toggle="dropdown">
<span class="active-course-number">{{ course_number }}</span>
<span class="active-course-title">{{ course_title }}</span>
<i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu course-listing">
<li>
<a class="course-listing-link" href="#">
<span class="course-number">{{ course_number }}</span>
<span class="course-title">{{ course_title }}</span>
</a>
</li>
<li class="divider"></li>
<li>
<a class="course-listing-link" href="#">
<span class="course-number">{{ course_number }}</span>
<span class="course-title">{{ course_title }}</span>
</a>
</li>
<li class="divider"></li>
<li>
<a class="course-listing-link" href="#">
<span class="course-number">{{ course_number }}</span>
<span class="course-title">{{ course_title }}</span>
</a>
</li>
<li class="divider"></li>
<li>
<a class="course-listing-link" href="#">
<span class="course-number">{{ course_number }}</span>
<span class="course-title">{{ course_title }}</span>
</a>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle active-user navbar-link" data-toggle="dropdown">
<i class="ico-user fa fa-graduation-cap"></i>
<span class="active-user-name">{{ user_name }}</span>
<i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu active-iser-nav">
<li>
<a class="active-iser-nav-help" href="#">Help</a>
</li>
<li class="divider"></li>
<li>
<a class="active-iser-nav-logout" href="#">Logout</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
<!-- / navbar-collapse -->
</div>
<!-- /.container-fluid -->
<!-- / container -->
</nav>
<!-- / navbar -->
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