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