Skip to content

E
edx-platform
Commit 71ae45fd by Brian Talbot
Options

studio - soft landing UI: how it works styling - wip

parent c9dc762a
Showing with 152 additions and 91 deletions
cms/static/sass/_header.scss
......@@ -40,7 +40,7 @@
.branding {
position: relative;
padding-right: 15px;
padding-right: ($baseline*0.75);
a {
@include text-hide();
......@@ -54,7 +54,8 @@
.info-course {
position: relative;
max-width: 200px;
padding-right: 15px;
margin-top: -3px;
padding-right: $baseline;
@include font-size(14);
&:before {
......@@ -94,7 +95,6 @@
text-overflow: ellipsis;
@include font-size(16);
font-weight: 600;
}
}
......@@ -119,6 +119,7 @@
padding: 5px;
text-transform: uppercase;
font-weight: 600;
color: $gray-d3;
&:hover, &:active {
color: $blue;
......
cms/static/sass/_index.scss
......@@ -39,6 +39,10 @@
}
h1, h2, h3, h4, h5, h6 {
color: $gray-d3;
}
h2 {
}
......@@ -60,6 +64,7 @@
}
.content-header {
position: relative;
text-align: center;
color: $white;
......@@ -70,6 +75,7 @@
border-bottom: 1px solid $blue-l1;
padding: 0;
font-weight: 600;
color: $white;
}
.tagline {
......@@ -79,11 +85,41 @@
}
}
.arrow_box {
position: relative;
background: #fff;
border: 4px solid #000;
}
.arrow_box:after, .arrow_box:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(255, 255, 255, 0);
border-top-color: #fff;
border-width: 30px;
left: 50%;
margin-left: -30px;
}
.arrow_box:before {
border-color: rgba(0, 0, 0, 0);
border-top-color: #000;
border-width: 36px;
left: 50%;
margin-left: -36px;
}
// feature content
.wrapper-content-features {
@include box-shadow(0 -1px ($baseline/4) $shadow);
padding-bottom: ($baseline*2);
padding-top: ($baseline*2);
padding-top: ($baseline*3);
background: $white;
}
......@@ -101,10 +137,15 @@
padding: 0 0 ($baseline*2) 0;
.img {
@include box-sizing(border-box);
float: left;
width: flex-grid(3, 12);
margin-right: flex-gutter();
a {
display: block;
}
img {
display: block;
width: 100%;
......@@ -126,6 +167,11 @@
> p {
@include font-size(18);
color: $gray-d1;
}
strong {
font-weight: 700;
}
.list-proofpoints {
......@@ -135,23 +181,38 @@
margin: ($baseline*1.5) 0 0 0;
.proofpoint {
@include transition(color .15s ease-in-out);
float: left;
width: flex-grid(3, 9);
margin-right: flex-gutter();
&:last-child {
margin-right: 0;
}
color: $gray-l1;
cursor: pointer;
.title {
@include font-size(16);
margin: 0 0 ($baseline/4) 0;
font-weight: 600;
color: $gray-d3;
}
&:hover {
color: $gray-d3;
}
&:last-child {
margin-right: 0;
}
}
}
}
&:last-child {
margin-bottom: 0;
border: none;
padding-bottom: 0;
}
&:nth-child(even) {
.img {
......@@ -164,12 +225,20 @@
float: right;
text-align: right;
}
}
&:last-child {
margin-bottom: 0;
border: none;
padding-bottom: 0;
.list-proofpoints {
.proofpoint {
float: right;
width: flex-grid(3, 9);
margin-left: flex-gutter();
margin-right: 0;
&:last-child {
margin-left: 0;
}
}
}
}
}
}
......
cms/templates/howitworks.html
......@@ -24,8 +24,10 @@
<ol class="list-features">
<li class="feature">
<figure class="img zoom">
<img src="/static/img/pl-1x1-000.png" alt="Studio Helps You Keep Your Courses Organized" />
<figcaption class="sr">Studio Helps You Keep Your Courses Organized</figcaption>
<a href="/static/img/howitworks-feature1.png">
<img src="/static/img/pl-1x1-000.png" alt="Studio Helps You Keep Your Courses Organized" />
<figcaption class="sr">Studio Helps You Keep Your Courses Organized</figcaption>
</a>
</figure>
<div class="copy">
......@@ -53,8 +55,10 @@
<li class="feature">
<figure class="img zoom">
<img src="/static/img/pl-1x1-000.png" alt="Studio Keeps Your Learning Sequences and Lectures, Together" />
<a href="/static/img/howitworks-feature2.png">
<img src="/static/img/pl-1x1-000.png" alt="Studio Keeps Your Learning Sequences and Lectures, Together" />
<figcaption class="sr">Studio Keeps Your Learning Sequences and Lectures, Together</figcaption>
</a>
</figure>
<div class="copy">
......@@ -82,8 +86,10 @@
<li class="feature">
<figure class="img zoom">
<img src="/static/img/pl-1x1-000.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>
<a href="/static/img/howitworks-feature3.png">
<img src="/static/img/pl-1x1-000.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>
</a>
</figure>
<div class="copy">
......
cms/templates/index.html
<%inherit file="base.html" />
% if user.is_authenticated():
<%block name="title">Courses</%block>
<%block name="bodyclass">is-signedin index dashboard</%block>
<%block name="title">Courses</%block>
<%block name="bodyclass">is-signedin index dashboard</%block>
<%block name="header_extras">
<script type="text/template" id="new-course-template">
<section class="new-course">
<div class="item-details">
<form class="course-info">
<div class="row">
<label>Course Name</label>
<input type="text" class="new-course-name" />
<%block name="header_extras">
<script type="text/template" id="new-course-template">
<section class="new-course">
<div class="item-details">
<form class="course-info">
<div class="row">
<label>Course Name</label>
<input type="text" class="new-course-name" />
</div>
<div class="row">
<div class="column">
<label>Organization</label>
<input type="text" class="new-course-org" />
</div>
<div class="row">
<div class="column">
<label>Organization</label>
<input type="text" class="new-course-org" />
</div>
<div class="column">
<label>Course Number</label>
<input type="text" class="new-course-number" />
</div>
<div class="column">
<label>Course Number</label>
<input type="text" class="new-course-number" />
</div>
<div class="row">
<input type="submit" value="Save" class="new-course-save" data-template="${new_course_template}" />
<input type="button" value="Cancel" class="new-course-cancel" />
</div>
</form>
</div>
</section>
</script>
</%block>
<%block name="content">
<div class="main-wrapper">
<div class="inner-wrapper">
<h1>My Courses</h1>
<article class="my-classes">
% if user.is_active:
<a href="#" class="new-button new-course-button"><span class="plus-icon white"></span> New Course</a>
<ul class="class-list">
%for course, url in courses:
<li>
<a href="${url}" class="class-name">
<span class="class-name">${course}</span>
<!--
<span class="detail">Started: 9/21/2012</span>
<span class="detail">Ends: 10/21/2012</span>
-->
</a>
</li>
%endfor
</ul>
% else:
<div class='warn-msg'>
<p>
In order to start authoring courses using edX studio, please click on the activation link in your email.
</p>
</div>
% endif
</article>
</div>
<div class="row">
<input type="submit" value="Save" class="new-course-save" data-template="${new_course_template}" />
<input type="button" value="Cancel" class="new-course-cancel" />
</div>
</form>
</div>
</div>
</%block>
% else:
<%block name="title">Welcome to edX Studio</%block>
<%block name="bodyclass">not-signedin index howitworks</%block>
</section>
</script>
</%block>
<%block name="content">
<div class="wrapper-content wrapper">
<section class="content">
</section>
</div>
</%block>
% endif
\ No newline at end of file
<div class="main-wrapper">
<div class="inner-wrapper">
<h1>My Courses</h1>
<article class="my-classes">
% if user.is_active:
<a href="#" class="new-button new-course-button"><span class="plus-icon white"></span> New Course</a>
<ul class="class-list">
%for course, url in courses:
<li>
<a href="${url}" class="class-name">
<span class="class-name">${course}</span>
<!--
<span class="detail">Started: 9/21/2012</span>
<span class="detail">Ends: 10/21/2012</span>
-->
</a>
</li>
%endfor
</ul>
% else:
<div class='warn-msg'>
<p>
In order to start authoring courses using edX studio, please click on the activation link in your email.
</p>
</div>
% endif
</article>
</div>
</div>
</%block>
\ 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