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