Skip to content

E
edx-platform
Commit 5b2e57c3 by Kyle Fiedler
Options

Rearranged the filter and sort bar and made it consistant

parent 227daf2a
Showing with 124 additions and 92 deletions
cms/static/sass/_calendar.scss
......@@ -18,21 +18,32 @@ section.cal {
text-transform: uppercase;
letter-spacing: 1px;
font-size: 14px;
padding: 6px;
padding: 6px 6px 6px 0;
font-size: 12px;
}
ul {
@include inline-block;
float: right;
li {
@include inline-block;
margin-left: 6px;
border-left: 1px solid #ddd;
margin-right: 6px;
border-right: 1px solid #ddd;
padding: 0 6px;
&:last-child {
border-right: 0;
margin-right: 0;
padding-right: 0;
}
a {
@include inline-block();
font-size: 12px;
@include inline-block;
margin: 0 6px;
font-style: italic;
}
ul {
......@@ -63,7 +74,6 @@ section.cal {
float: left;
width: flex-grid(3) + ((flex-gutter() * 3) / 4);
background-color: $light-blue;
overflow-y: hidden;
&:hover {
li.create-module {
......@@ -116,6 +126,7 @@ section.cal {
li {
border-bottom: 1px solid darken($light-blue, 8%);
position: relative;
overflow-y: hidden;
&:hover {
background-color: lighten($yellow, 14%);
......@@ -232,7 +243,7 @@ section.cal {
}
section.new-section {
margin-top: 10px;
margin: 10px 0 40px;
@include inline-block();
position: relative;
......@@ -319,11 +330,11 @@ section.cal {
&:hover {
opacity: 1;
width: flex-grid(4) + flex-gutter();
width: flex-grid(5) + flex-gutter();
background-color: transparent;
+ section.main-content {
width: flex-grid(8);
width: flex-grid(7);
opacity: .6;
}
}
......@@ -331,25 +342,21 @@ section.cal {
> header {
@include transition;
overflow: hidden;
height: 30px;
> a {
display: none;
}
ul {
float: none;
display: block;
li {
border-left: 0;
margin-left: 0;
margin-bottom: 4px;
ul {
display: inline;
}
}
}
&:hover {
height: 10%;
}
}
ol {
......
cms/static/sass/_section.scss
section#unit-wrapper {
section.filters {
@include clearfix;
background: $light-blue;
border-bottom: 1px solid lighten($dark-blue, 40%);
padding: 5px 20px;
margin: -20px -20px 10px;
opacity: .7;
opacity: .4;
margin-bottom: 10px;
@include transition;
&:hover {
opacity: 1;
padding: 10px 20px;
margin: -20px -20px 10px;
}
h2 {
@include inline-block();
text-transform: uppercase;
letter-spacing: 1px;
font-size: 14px;
padding: 6px 6px 6px 0;
font-size: 12px;
}
ul {
@include clearfix();
list-style: none;
padding: 6px;
li {
@include inline-block();
@include inline-block;
margin-right: 6px;
border-right: 1px solid #ddd;
padding-right: 6px;
&.advanced {
&.search {
float: right;
border: 0;
}
a {
&.more {
font-size: 12px;
@include inline-block;
margin: 0 6px;
font-style: italic;
}
}
}
}
......@@ -44,11 +60,12 @@ section#unit-wrapper {
@include clearfix;
h2 {
text-transform: uppercase;
letter-spacing: 1px;
font-size: 12px;
float: left;
color: $bright-blue;
float: left;
font-size: 12px;
letter-spacing: 1px;
line-height: 19px;
text-transform: uppercase;
}
}
......@@ -149,6 +166,14 @@ section#unit-wrapper {
border-bottom: 0;
}
&.new-module a {
background-color: darken($light-blue, 2%);
&:hover {
background-color: lighten($yellow, 10%);
}
}
a {
color: $dark-blue;
}
......@@ -158,9 +183,10 @@ section#unit-wrapper {
li {
padding: 6px;
border-collapse: collapse;
&:last-child {
border-bottom: 0;
border-bottom: 1px solid darken($light-blue, 8%);
}
&:hover {
......@@ -171,6 +197,7 @@ section#unit-wrapper {
}
}
&.empty {
padding: 12px;
......@@ -182,7 +209,6 @@ section#unit-wrapper {
}
a.draggable {
float: right;
opacity: .3;
}
}
......
cms/templates/widgets/navigation.html
<section class="cal">
<header class="wip">
<h2>Filter content:</h2>
<a href="#">Timeline view</a>
<ul>
<li>
<a href="#">Sequences</a>
<ul>
<li>Hide all</li>
<li>Lectures</li>
<li>Labs</li>
<li>Homeworks</li>
<li>Exams</li>
</ul>
<h2>Sort:</h2>
<select>
<option value="">Linear Order</option>
<option value="">Recently Modified</option>
<option value="">Type</option>
<option value="">Alphabetically</option>
</select>
</li>
<li>
<a href="#">Deadlines</a>
<ul>
<li>Today</li>
<li>Tomorrow</li>
<li>This week</li>
<li>In 2 weeks</li>
<li>This month</li>
</ul>
<h2>Filter:</h2>
<select>
<option value="">All content</option>
<option value="">Videos</option>
<option value="">Problems</option>
<option value="">Labs</option>
<option value="">Tutorials</option>
<option value="">HTML</option>
</select>
<a href="#" class="more">More</a>
</li>
<li>
<a href="#">Goals</a>
<ul>
<li>Hide</li>
</ul>
<a href="#">Hide goals</a>
</li>
<li class="search">
<input type="search" name="" id="" value="" placeholder="Search" />
</li>
</ul>
</header>
......@@ -83,6 +82,7 @@
<a href="" class="video-edit">Video 3</a>
<a href="#" class="draggable">handle</a>
</li>
<%include file="module-dropdown.html"/>
</ul>
</li>
</ol>
......@@ -90,30 +90,30 @@
<section class="new-section">
<a href="#" >+ Add New Section</a>
<section>
<form>
<ul>
<li>
<input type="text" name="" id="" placeholder="Section title" />
</li>
<li>
<select>
<option>Blank</option>
<option>6.002x</option>
<option>6.00x</option>
</select>
</li>
<li>
<input type="submit" value="Save and edit week" class="edit-week" />
<!-- <section> -->
<!-- <form> -->
<!-- <ul> -->
<!-- <li> -->
<!-- <input type="text" name="" id="" placeholder="Section title" /> -->
<!-- </li> -->
<!-- <li> -->
<!-- <select> -->
<!-- <option>Blank</option> -->
<!-- <option>6.002x</option> -->
<!-- <option>6.00x</option> -->
<!-- </select> -->
<!-- </li> -->
<!-- <li> -->
<!-- <input type="submit" value="Save and edit week" class="edit-week" /> -->
<div>
<a href="#" class="close">Save without edit</a>
<a href="#" class="close">cancel</a>
</div>
</li>
</ul>
</form>
</section>
<!-- <div> -->
<!-- <a href="#" class="close">Save without edit</a> -->
<!-- <a href="#" class="close">cancel</a> -->
<!-- </div> -->
<!-- </li> -->
<!-- </ul> -->
<!-- </form> -->
<!-- </section> -->
</section>
</section>
cms/templates/widgets/sequence-edit.html
......@@ -2,30 +2,29 @@
<section class="filters">
<ul>
<li>
<label for="">Sort by</label>
<h2>Sort:</h2>
<select>
<option value="">Linear Order</option>
<option value="">Recently Modified</option>
<option value="">Type</option>
<option value="">Alphabetically</option>
</select>
</li>
<li>
<label for="">Display</label>
<h2>Filter:</h2>
<select>
<option value="">All content</option>
<option value="">Videos</option>
<option value="">Problems</option>
<option value="">Labs</option>
<option value="">Tutorials</option>
<option value="">HTML</option>
</select>
<a href="#" class="more">More</a>
</li>
<li>
<select>
<option value="">Internal Only</option>
</select>
</li>
<li class="advanced">
<a href="#">Advanced filters</a>
</li>
<li>
<input type="search" name="" id="" value="" />
<li class="search">
<input type="search" name="" id="" value="" placeholder="Search" />
</li>
</ul>
</section>
......
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