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