Skip to content

C
course-discovery
Commit c687d341 by Waheed Ahmed
Options

Added header/footer. 

ECOM-5284
parent 89a7e754
Showing with 341 additions and 23 deletions
course_discovery/static/js/utils.js
......@@ -15,3 +15,34 @@ function addDatePicker() {
}
});
}
$(document).ready(function () {
$("body").click(function() {
$('.nav-account .wrapper-nav-sub').removeClass('is-shown');
$('.nav-account .nav-account-user .title').removeClass('is-selected');
});
$('.nav-account .nav-item').click(function(e) {
$subnav = $('.nav-account').find('.wrapper-nav-sub');
$title = $(this).find('.title');
if ($subnav.hasClass('is-shown')) {
$subnav.removeClass('is-shown');
$title.removeClass('is-selected');
} else {
$('.nav-account .nav-item .title').removeClass('is-selected');
$('.nav-account .wrapper-nav-sub').removeClass('is-shown');
$title.addClass('is-selected');
$subnav.addClass('is-shown');
// if propagation is not stopped, the event will bubble up to the
// body element, which will close the dropdown.
e.stopPropagation();
}
});
$(".nav-account-user").click(function (e) {
e.preventDefault();
$('.nav-account .wrapper-nav-sub').addClass('is-shown');
$('.nav-account .nav-account-user .title').addClass('is-selected');
});
});
course_discovery/static/sass/_lib.scss
......@@ -2,7 +2,5 @@
// edX Course Discovery: Third Party Libraries
// About: third party libraries and dependencies import
@import '../bower_components/bourbon/app/assets/stylesheets/bourbon';
@import '../bower_components/susy/sass/susy';
@import '../bower_components/breakpoint-sass/stylesheets/breakpoint';
course_discovery/static/sass/main-ltr.scss
......@@ -3,6 +3,7 @@
// About: Main left-to-right Sass compile for the edX Course Discovery styling.
@import '../bower_components/bourbon/app/assets/stylesheets/bourbon';
// ------------------------------
// #CONFIG - layout direction
// ------------------------------
......
course_discovery/static/sass/main-rtl.scss
......@@ -3,6 +3,7 @@
// About: Main left-to-right Sass compile for the edX Course Discovery styling.
@import '../bower_components/bourbon/app/assets/stylesheets/bourbon';
// ------------------------------
// #CONFIG - layout direction
// ------------------------------
......
course_discovery/static/sass/publisher/course_detail.scss
......@@ -13,14 +13,153 @@ $light-gray: rgba(204, 204, 204, 1);
}
.course-detail {
@include margin(0);
@include margin(0px, 0px, 0px, 0px);
}
.container {
.layout-header {
img, h1 {
padding: 20px;
@include float(left);
@include padding(20px, 20px, 20px, 20px);
}
.layout-col {
.nav-account {
@include padding(35px, 0px, 35px, 0px);
@include margin-right(20px);
@include float(right);
width: auto;
display: inline-block;
position: relative;
vertical-align: middle;
ol {
margin-bottom: 0;
}
.wrapper-nav-sub {
@include right(0);
display: none;
opacity: 1.0;
pointer-events: auto;
overflow: visible;
height: auto;
position: absolute;
&.is-shown {
display: block;
}
.nav-sub {
border-radius: 4px;
box-sizing: border-box;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
position: relative;
width: 100%;
border: 1px solid #ccc;
background: #fff;
&:before {
@include right(20px);
@include margin-right(-11px);
border-color: rgba(178,178,178,0);
border-bottom-color: #ccc;
border-width: 11px;
bottom: 100%;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
&:after {
@include right(20px);
border-color: rgba(255,255,255,0);
border-bottom-color: #fff;
border-width: 10px;
bottom: 100%;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
@include margin-right(-10px);
}
.nav-menu-item {
@include padding(20px, 20px, 20px, 20px);
}
.nav-account-signout {
border-top: 1px solid #ccc;
a {
@include text-align(center);
text-decoration: none;
width: 100%;
}
}
}
}
.nav-account-user {
.title.is-selected {
box-shadow: inset 0 1px 2px 1px rgba(0,0,0,0.1);
border-color: #ccc;
}
}
.nav-item {
display: inline-block;
vertical-align: middle;
margin-bottom: 0;
.title {
@include padding(5px, 10px, 5px, 10px);
color: #666;
margin-bottom: 0;
border: 1px solid transparent;
border-radius: 4px;
max-width: 150px;
.fa-caret-down {
opacity: 0.25;
}
&:hover {
cursor: pointer;
color: #065683;
border-color: #ccc;
.label {
a {
color: #065683;
}
}
.fa-caret-down {
opacity: 1.0;
color: #065683;
}
}
.label {
a {
color: #666;
font-weight: 800;
font-size: 18px;
vertical-align: baseline;
text-decoration: none;
}
}
}
}
}
}
}
.layout, .layout-flush {
......@@ -31,6 +170,11 @@ $light-gray: rgba(204, 204, 204, 1);
.layout-col-menu {
padding-left: 0;
padding-right: 0;
width: 20%;
}
.layout-col-container {
width: 80%;
}
.menu-list {
......@@ -65,6 +209,78 @@ $light-gray: rgba(204, 204, 204, 1);
.actions {
margin-top: 30px;
}
.wrapper-footer {
@include margin(0px, 0px, 20px, 0px);
@include padding(20px, 20px, 20px, 20px);
position: relative;
width: 100%;
border-top: 1px solid #e5e5e5;
.primary {
max-width: 1280px;
min-width: 900px;
width: 100%;
margin: 0 auto;
color: #333;
font-size: 0.75rem;
.footer-content-primary {
display: table;
width: 100%;
clear: both;
.colophon {
@include float(left);
@include margin-right(14.28571%);
width: 31.91489%;
}
.nav-peripheral {
@include float(right);
@include text-align(right);
width: 48.93617%;
.nav-item {
@include margin-right(20px);
display: inline-block;
}
}
}
.footer-content-secondary {
margin-top: 20px;
display: table;
width: 100%;
clear: both;
.footer-about-copyright {
@include float(left);
@include margin-right(14.28571%);
width: 31.91489%;
display: inline-block;
vertical-align: middle;
}
.footer-about-openedx {
@include float(right);
@include text-align(right);
display: inline-block;
vertical-align: middle;
a {
display: inline-block;
img {
display: block;
width: 120px;
}
}
}
}
}
}
}
.administration-nav {
......@@ -203,10 +419,6 @@ $light-gray: rgba(204, 204, 204, 1);
}
}
.publisher-footer {
padding: 20px;
}
.help-block {
display: block;
margin-top: 5px;
......
course_discovery/static/sass/publisher/course_form.scss
......@@ -2,7 +2,7 @@
// // edX Course Discovery: Course form
.publisher-container {
@include margin(20px);
@include margin(20px, 20px, 20px, 20px);
overflow: auto;
.has-error {
......
course_discovery/templates/base.html
......@@ -36,9 +36,7 @@
<body>
<div class="container">
<br>
{% include 'header.html' %}
<br>
<div class="layout-1q3q layout-flush border-top">
<main class="layout-col layout-col-a layout-col-menu">
<div class="institute-logo">
......@@ -59,7 +57,7 @@
</ul>
</main>
<aside class="layout-col layout-col-b border-left">
<aside class="layout-col layout-col-b border-left layout-col-container">
{% block content %}
{% endblock content %}
......
course_discovery/templates/footer.html
<footer class="publisher-footer border-top">
<p class="copy-base">
{% now "Y" as current_year %}
Copyright &copy; {{ current_year }} {{ platform_name }}.
</p>
</footer>
{% load i18n %}
<div class="wrapper-footer wrapper">
<footer class="primary">
<div class="footer-content-primary">
<div class="colophon">
{% now "Y" as current_year %}
<p>&copy; {{ current_year }} <a href="#" rel="external">{{ platform_name }}</a>.</p>
</div>
<nav class="nav-peripheral">
<ol>
<li class="nav-item nav-peripheral-tos">
<a href="#">{% trans "Terms of Service" %}</a>
</li>
<li class="nav-item nav-peripheral-pp">
<a href="#">{% trans "Privacy Policy" %}</a>
</li>
</ol>
</nav>
</div>
<div class="footer-content-secondary" aria-label="{% trans 'Legal' %}">
<div class="footer-about-copyright">
<!--Site operators: Please do not remove this paragraph! This attributes back to edX and makes your acknowledgement of edX's trademarks clear.-->
<p>
<!--Translators: 'EdX', 'edX', 'Studio', and 'Open edX' are trademarks of 'edX Inc.'. Please do not translate any of these trademarks and company names.-->
{% with link_start='<a data-rel="edx.org" href="https://www.edx.org/">' link_end='</a>' %}
{% blocktrans %}
EdX, Open edX, Publisher, and the edX and Open edX logos are registered trademarks or trademarks of {{link_start}}edX Inc.{{link_end}}
{% endblocktrans %}
{% endwith %}
</p>
</div>
<div class="footer-about-openedx">
<a href="http://open.edx.org" title="{% trans 'Powered by Open edX' %}">
<img alt="{% trans 'Powered by Open edX' %}" src="https://files.edx.org/openedx-logos/edx-openedx-logo-tag.png">
</a>
</div>
</div>
</footer>
</div>
course_discovery/templates/header.html
{% load staticfiles %}
{% load i18n %}
<header class="header">
<div class="layout layout-header">
{% url 'publisher:publisher_course_runs' as course_runs_url %}
<a href="{{ course_runs_url }}">
<img src="{% static 'images/logo.png' %}">
</a>
<div class="layout-1q1h1q layout-flush layout-header">
<nav class="layout-col layout-col-a">
{% url 'publisher:publisher_course_runs' as course_runs_url %}
<a href="{{ course_runs_url }}">
<img src="{% static 'images/logo.png' %}">
</a>
</nav>
<main class="layout-col layout-col-b"></main>
<aside class="layout-col layout-col-c">
<nav class="nav-account" aria-label="{% trans 'Account' %}">
<h2 class="sr-only">{% trans "Account Navigation" %}</h2>
<ol>
<li class="nav-item nav-account-help">
<h3 class="title">
<span class="label">
<a href="https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/getting_started/get_started.html" title="{% trans 'Contextual Online Help' %}" target="_blank">
{% trans "Help" %}
</a>
</span>
</h3>
</li>
<li class="nav-item nav-account-user">
<h3 class="title">
<span class="label">
<a href="#" title="{{ user.username }}">{{ user.username|truncatechars:10 }}</a>
</span>
<span class="icon fa fa-caret-down"></span>
</h3>
</li>
</ol>
<div class="wrapper wrapper-nav-sub">
<div class="nav-sub">
<div class="nav-menu-item nav-email-notification">
<span><b>{% trans "Email notifications" %}</b></span>
</div>
<div class="nav-menu-item nav-account-signout">
<a class="btn-neutral" href="/logout">{% trans "Sign Out" %}</a>
</div>
</div>
</div>
</nav>
</aside>
</div>
</header>
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