Skip to content

E
edx-platform
Commit b456281a by Brian Talbot
Options

studio - soft landing/nav: added in functionality/content to soft landing view… 

studio - soft landing/nav: added in functionality/content to soft landing view and started punch list
parent b654ee40
Showing with 147 additions and 22 deletions
cms/static/img/hiw-feature1.png
cms/static/img/hiw-feature1.png

255 KB | W: | H:

cms/static/img/hiw-feature1.png

192 KB | W: | H:

cms/static/img/hiw-feature1.png
cms/static/img/hiw-feature1.png
cms/static/img/hiw-feature1.png
cms/static/img/hiw-feature1.png
  • 2-up
  • Swipe
  • Onion skin
cms/static/sass/_header.scss
......@@ -128,6 +128,7 @@
.label-prefix {
display: block;
@include font-size(11);
font-weight: 400;
}
.ss-icon {
......@@ -346,7 +347,7 @@
display: inline-block;
vertical-align: middle;
margin: 0 $baseline 0 0;
font-weight: 600;
font-weight: 500;
&:last-child {
margin-right: 0;
......@@ -392,6 +393,18 @@
}
// active/current nav states
body.howitworks .nav-not-signedin-hiw,
body.signin .nav-not-signedin-signin,
body.signup .nav-not-signedin-signup,
body.course.outline .nav-course-courseware
{
a {
color: $blue;
}
}
// js enabled
.js {
......
cms/static/sass/_index.scss
......@@ -162,7 +162,7 @@
.ss-icon {
@include font-size(18);
@include border-radius(2px);
@include border-top-radius(3px);
display: inline-block;
padding: ($baseline/4) ($baseline/2);
background: $blue;
......@@ -232,18 +232,17 @@
.title {
@include font-size(16);
margin: 0 0 ($baseline/4) 0;
font-weight: 600;
font-weight: 500;
color: $gray-d3;
}
&:hover {
@include box-shadow(0 1px ($baseline/10) $shadow-l1);
background: $blue;
color: $blue-l3;
background: $blue-l5;
top: -($baseline/5);
.title, strong {
color: $white;
color: $blue;
}
}
......@@ -334,4 +333,66 @@
}
}
}
// js dependant
&.js {
.content-modal {
@include border-bottom-radius(2px);
@include box-sizing(border-box);
@include box-shadow(0 2px 4px $shadow-d1);
position: relative;
display: none;
width: 700px;
overflow: hidden;
border: 1px solid $gray-d1;
padding: ($baseline);
background: $white;
.action-modal-close {
@include transition(top .25s ease-in-out);
@include border-bottom-radius(3px);
position: absolute;
top: -3px;
right: $baseline;
padding: ($baseline/4) ($baseline/2) 0 ($baseline/2);
background: $gray-l3;
text-align: center;
.label {
@include text-sr();
}
.ss-icon {
@include font-size(18);
color: $white;
}
&:hover {
background: $blue;
top: 0;
}
}
img {
@include box-sizing(border-box);
width: 100%;
padding: ($baseline/10);
border: 1px solid $gray-l4;
}
.title {
@include font-size(18);
margin: 0 0 ($baseline/2) 0;
font-weight: 600;
color: $gray-d3;
}
.description {
@include font-size(13);
margin-top: ($baseline/2);
color: $gray-l1;
}
}
}
}
cms/static/sass/_modal.scss
......@@ -54,4 +54,16 @@
@include white-button;
margin-top: 13px;
}
}
// lean modal alternative
#lean_overlay {
position: fixed;
z-index: 10000;
top: 0px;
left: 0px;
display: none;
height: 100%;
width: 100%;
background: $black;
}
\ No newline at end of file
cms/static/sass/_subsection.scss
.subsection .main-wrapper {
margin: 40px;
}
.subsection .inner-wrapper {
@include clearfix();
}
.subsection-body {
padding: 32px 40px;
@include clearfix;
......
cms/static/sass/_unit.scss
.unit .main-wrapper,
.subsection .main-wrapper {
.unit .main-wrapper {
@include clearfix();
margin: 40px;
}
......
cms/templates/edit_subsection.html
......@@ -98,6 +98,7 @@
</div>
</div>
</div>
</div>
</%block>
<%block name="jsextra">
......
cms/templates/howitworks.html
......@@ -59,7 +59,7 @@
<li class="feature">
<figure class="img zoom">
<a rel="modal" href="#hiw-feature2">
<img src="/static/img/thumb-hiw-feature1.png" alt="Studio Keeps Your Learning Sequences and Lectures, Together" />
<img src="/static/img/thumb-hiw-feature2.png" alt="Studio Keeps Your Learning Sequences and Lectures, Together" />
<figcaption class="sr">Studio Keeps Your Learning Sequences and Lectures, Together</figcaption>
<span class="action-zoom">
<i class="ss-icon ss-symbolicons-block">&#xE002;</i>
......@@ -93,7 +93,7 @@
<li class="feature">
<figure class="img zoom">
<a rel="modal" href="#hiw-feature3">
<img src="/static/img/thumb-hiw-feature1.png" alt="Studio Gives You Simple, Fast, and Incremental Publishing. With Friends." />
<img src="/static/img/thumb-hiw-feature3.png" alt="Studio Gives You Simple, Fast, and Incremental Publishing. With Friends." />
<figcaption class="sr">Studio Gives You Simple, Fast, and Incremental Publishing. With Friends.</figcaption>
<span class="action-zoom">
<i class="ss-icon ss-symbolicons-block">&#xE002;</i>
......@@ -144,27 +144,55 @@
</section>
</div>
<!-- <div class="content-modal" id="hiw-feature1">
<h3>Feature #1</h3>
<img src="/static/img/hiw-feature1.png" alt="" />
<div class="content-modal" id="hiw-feature1">
<h3 class="title">Feature #1</h3>
<figure>
<img src="/static/img/hiw-feature1.png" alt="" />
<figcaption class="description">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</figcaption>
</figure>
<a href="#" rel="view" class="action action-modal-close">
<i class="ss-icon ss-symbolicons-block">&#x2421;</i>
<span class="label">close modal</span>
</a>
</div>
<div class="content-modal" id="hiw-feature2">
<h3>Feature #2</h3>
<img src="/static/img/hiw-feature1.png" alt="" />
<h3 class="title">Feature #2</h3>
<figure>
<img src="/static/img/hiw-feature2.png" alt="" />
<figcaption class="description">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</figcaption>
</figure>
<a href="#" rel="view" class="action action-modal-close">
<i class="ss-icon ss-symbolicons-block">&#x2421;</i>
<span class="label">close modal</span>
</a>
</div>
<div class="content-modal" id="hiw-feature3">
<h3>Feature #3</h3>
<img src="/static/img/hiw-feature1.png" alt="" />
</div> -->
<h3 class="title">Feature #3</h3>
<figure>
<img src="/static/img/hiw-feature3.png" alt="" />
<figcaption class="description">Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</figcaption>
</figure>
<a href="#" rel="view" class="action action-modal-close">
<i class="ss-icon ss-symbolicons-block">&#x2421;</i>
<span class="label">close modal</span>
</a>
</div>
</%block>
<%block name="jsextra">
<script type="text/javascript">
(function() {
$("a[rel*=modal]").leanModal({closeButton: ".modal_close"});
// lean modal window
$('a[rel*=modal]').leanModal({overlay : 0.50, closeButton: '.action-modal-close' });
$('a.action-modal-close').click(function(e){
(e).preventDefault();
});
})(this)
</script>
......
cms/templates/widgets/header.html
......@@ -78,6 +78,7 @@
<div class="nav-sub">
<ul>
<li class="nav-item"><a href="#">My Courses</a></li>
<li class="nav-item"><a href="#">Help</a></li>
<li class="nav-item"><a class="action action-logout" href="${reverse('logout')}">Logout</a></li>
</ul>
......@@ -89,8 +90,8 @@
<nav class="nav-not-signedin">
<h2 class="sr">You're not currently signed in</h2>
<ol>
<li class="nav-item nav-not-signedin-how">
<a href="">How Studio Works</a>
<li class="nav-item nav-not-signedin-hiw">
<a href="#">How Studio Works</a>
</li>
<li class="nav-item nav-not-signedin-help">
<a href="#">Studio Help</a>
......
common/static/sass/_mixins.scss
......@@ -8,7 +8,7 @@
font-size: ($sizeValue/10) + rem;
}
// Line-height
// line-height
@function lh($amount: 1) {
@return $body-line-height * $amount;
}
......
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