Skip to content

E
edx-platform
Commit 6889b201 by Brian Talbot
Options

studio - added in revised footer styles and fix for smoothscroll

parent 4f7e09e9
Showing with 106 additions and 41 deletions
cms/static/js/base.js
......@@ -81,7 +81,7 @@ $(document).ready(function () {
});
// general link management - smooth scrolling page links
$('a[rel*="view"]').bind('click', smoothScrollLink);
$('a[rel*="view"][href|="#"]').bind('click', smoothScrollLink);
// tender feedback window scrolling
$('a.show-tender').bind('click', smoothScrollTop);
......@@ -159,7 +159,7 @@ function smoothScrollLink(e) {
easing: 'swing',
speed: 1000,
scrollElement: null,
scrollTarget: $(this).attr('href')
scrollTarget: $(this).attr('href'),
});
}
......
cms/static/sass/_base.scss
......@@ -50,6 +50,12 @@ h1 {
// ====================
// layout - view
.wrapper-view {
position: relative;
min-height: 100%;
}
// layout - basic page header
.wrapper-mast {
margin: 0;
......
cms/static/sass/_reset.scss
// studio - utilities - reset
// ====================
// not ready for this yet, but this should be done as things get cleaner
// * {
// @include box-sizing(border-box);
// }
......@@ -26,6 +27,10 @@ time, mark, audio, video {
vertical-align: baseline;
}
html,body {
height: 100%;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
......
cms/static/sass/_variables.scss
......@@ -12,6 +12,9 @@ $fg-max-columns: 12;
$fg-max-width: 1280px;
$fg-min-width: 900px;
// elements
$footer-primary-height: ($baseline*3);
// type
$sans-serif: 'Open Sans', $verdana;
$body-line-height: golden-ratio(.875em, 1);
......@@ -57,6 +60,10 @@ $blue-s3: saturate($blue,45%);
$blue-u1: desaturate($blue,15%);
$blue-u2: desaturate($blue,30%);
$blue-u3: desaturate($blue,45%);
$blue-t0: rgba(85, 151, 221,0.125);
$blue-t1: rgba(85, 151, 221,0.25);
$blue-t2: rgba(85, 151, 221,0.50);
$blue-t3: rgba(85, 151, 221,0.75);
$pink: rgb(183, 37, 103);
$pink-l1: tint($pink,20%);
......
cms/static/sass/base-style.scss
......@@ -22,6 +22,7 @@
// elements
@import 'elements/header';
@import 'elements/sock';
@import 'elements/footer';
@import 'elements/navigation';
@import 'elements/forms';
......
cms/static/sass/elements/_footer.scss
......@@ -2,10 +2,14 @@
// ====================
.wrapper-footer {
margin: ($baseline*1.5) 0 $baseline 0;
@include box-shadow(inset 0 1px 2px $shadow-d1);
margin: ($baseline*1.5) 0 0 0;
padding: $baseline;
position: relative;
position: absolute;
bottom: 0;
width: 100%;
height: $footer-primary-height;
background: $gray-l3;
footer.primary {
@include clearfix();
......@@ -14,9 +18,7 @@
min-width: $fg-min-width;
width: flex-grid(12);
margin: 0 auto;
padding-top: $baseline;
border-top: 1px solid $gray-l4;
color: $gray-l2;
color: $gray-l1;
.colophon {
width: flex-grid(4, 12);
......@@ -24,6 +26,14 @@
margin-right: flex-gutter(2);
}
a {
color: $gray;
&:hover, &:active {
color: $gray-d2;
}
}
.nav-peripheral {
width: flex-grid(6, 12);
float: right;
......@@ -36,14 +46,32 @@
&:last-child {
margin-right: 0;
}
}
}
a {
color: $gray-l1;
a {
@include border-radius(2px);
padding: ($baseline/2) ($baseline*0.75);
background: transparent;
&:hover, &:active {
color: $blue;
.ss-icon {
@include transition(top .25s ease-in-out .25s);
@include font-size(15);
position: relative;
top: 0;
display: inline-block;
vertical-align: middle;
margin-right: ($baseline/4);
color: $gray-l1;
}
&:hover, &:active {
color: $gray-d2;
.ss-icon {
top: -($baseline/10);
color: $gray-d2;
}
}
}
}
}
}
......
cms/static/sass/elements/_sock.scss 0 → 100644
// studio - elements - sock
// ====================
.wrapper-sock {
margin: 0;
padding: $baseline $baseline $footer-primary-height $baseline;
position: relative;
width: 100%;
.sock {
@include clearfix();
@include font-size(13);
max-width: $fg-max-width;
min-width: $fg-min-width;
width: flex-grid(12);
margin: 0 auto ($baseline*2) auto;
}
}
\ No newline at end of file
cms/static/sass/views/_index.scss
......@@ -9,17 +9,6 @@ body.index {
margin-bottom: 0;
}
.wrapper-footer {
margin: 0;
border-top: 2px solid $gray-l3;
footer.primary {
border: none;
margin-top: 0;
padding-top: 0;
}
}
.wrapper-content-header, .wrapper-content-features, .wrapper-content-cta {
@include box-sizing(border-box);
margin: 0;
......@@ -199,7 +188,7 @@ body.index {
img {
display: block;
width: 100%;
height: 100%;
height: auto;
}
}
......@@ -306,7 +295,8 @@ body.index {
// call to action content
.wrapper-content-cta {
padding-bottom: ($baseline*2);
position: relative;
padding-bottom: ($footer-primary-height*2);
padding-top: ($baseline*2);
background: $white;
}
......
cms/templates/base.html
......@@ -27,9 +27,7 @@
</head>
<body class="<%block name='bodyclass'></%block> hide-wip">
<%include file="widgets/header.html" />
<%include file="courseware_vendor_js.html"/>
<script type="text/javascript" src="${static.url('js/vendor/json2.js')}"></script>
<script type="text/javascript" src="${static.url('js/vendor/underscore-min.js')}"></script>
<script type="text/javascript" src="${static.url('js/vendor/backbone-min.js')}"></script>
......@@ -53,11 +51,14 @@
document.location.protocol + '//www.youtube.com/player_api">\x3C/script>');
</script>
<%block name="content"></%block>
<%include file="widgets/footer.html" />
<div class="wrapper-view wrapper">
<%include file="widgets/header.html" />
<%block name="content"></%block>
<%include file="widgets/sock.html" />
<%include file="widgets/footer.html" />
</div>
<%include file="widgets/tender.html" />
<%block name="jsextra"></%block>
</body>
</html>
</html>
\ No newline at end of file
cms/templates/course_info.html
......@@ -80,5 +80,4 @@
</div>
</div>
</div>
</div>
</%block>
\ No newline at end of file
cms/templates/howitworks.html
......@@ -151,7 +151,7 @@
<figcaption class="description">Simple two-level outline to organize your couse. Drag and drop, and see your course at a glance.</figcaption>
</figure>
<a href="#" rel="view" class="action action-modal-close">
<a href="" rel="view" class="action action-modal-close">
<i class="ss-icon ss-symbolicons-block icon icon-close">&#x2421;</i>
<span class="label">close modal</span>
</a>
......@@ -164,7 +164,7 @@
<figcaption class="description">Quickly create videos, text snippets, inline discussions, and a variety of problem types.</figcaption>
</figure>
<a href="#" rel="view" class="action action-modal-close">
<a href="" rel="view" class="action action-modal-close">
<i class="ss-icon ss-symbolicons-block icon icon-close">&#x2421;</i>
<span class="label">close modal</span>
</a>
......@@ -177,7 +177,7 @@
<figcaption class="description">Simply set the date of a section or subsection, and Studio will publish it to your students for you.</figcaption>
</figure>
<a href="#" rel="view" class="action action-modal-close">
<a href="" rel="view" class="action action-modal-close">
<i class="ss-icon ss-symbolicons-block icon icon-close">&#x2421;</i>
<span class="label">close modal</span>
</a>
......
cms/templates/widgets/footer.html
......@@ -16,13 +16,13 @@
</li> -->
<li class="nav-item nav-peripheral-help">
<a href="http://help.edge.edx.org/" rel="external">edX Studio Help</a>
<a href="http://help.edge.edx.org/" rel="external"><i class="ss-icon ss-symbolicons-block icon-help">&#xEE11;</i> edX Studio Help</a>
</li>
<li class="nav-item nav-peripheral-feedback">
<a class="show-tender" href="http://help.edge.edx.org/discussion/new" title="Use our feedback tool, Tender, to share your feedback">Provide Feedback</a>
<a class="show-tender" href="http://help.edge.edx.org/discussion/new" title="Use our feedback tool, Tender, to share your feedback"><i class="ss-icon ss-symbolicons-block icon-feedback">&#xE398;</i> Provide Feedback</a>
</li>
<li class="nav-item nav-peripheral-contact">
<a href="https://www.edx.org/contact" rel="external">Contact edX</a>
<a href="https://www.edx.org/contact" rel="external"><i class="ss-icon ss-symbolicons-block icon-contact">&#x2709;</i> Contact edX</a>
</li>
</ol>
</nav>
......
cms/templates/widgets/sock.html 0 → 100644
<%! from django.core.urlresolvers import reverse %>
% if user.is_authenticated():
<div class="wrapper-sock wrapper">
<section class="sock">
<h2>Sock!</h2>
</section>
</div>
% endif
\ No newline at end of file
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