Skip to content

Instantly share code, notes, and snippets.

@arosenb2

arosenb2/Filter-Indicators-for-List-View.markdown

Created April 7, 2014 19:25
Show Gist options
  • Save arosenb2/10035382 to your computer and use it in GitHub Desktop.
Save arosenb2/10035382 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Aaron.
Raw
index.html
<article id="list" class="page demo-list">
<section id="list-navigation">
<ul class="list-filter">
<li id="filter-active" class="filter"><a href="javascript:filter();"><div class="list-filter-count">?</div><div class="list-filter-label">Active</div></a>
<li id="filter-critical" class="filter"><a href="javascript:filter('red');"><div class="list-filter-count">?</div><div class="list-filter-label">Critical</div></a>
<li id="filter-high" class="filter"><a href="javascript:filter('orange');"><div class="list-filter-count">?</div><div class="list-filter-label">High</div></a>
<li id="filter-medium" class="filter"><a href="javascript:filter('green');"><div class="list-filter-count">?</div><div class="list-filter-label">Medium/Low</div></a>
</ul>
<div class="filter-indicator icon-caret-down"></div>
<div id="list-navigation-container">
<div id="list-navigation-container-items">
<ul>
<li data-color="green">
<a href="#">
<div class="item-left">
<div class="item-header">
<div class="item-badge item-green">AI</div>
<div class="item-title">ID 259: Mobile View Broken on Tablet</div>
</div>
<div class="item-meta item-assignee">Primary Assignee: <strong>Barnabes, Edward</strong></div>
<div class="item-meta item-due">Due Date: <strong>2014-1-31</strong></div>
</div>
<div class="item-right">
<i class="icon-caret-right"></i>
</div>
</a>
</li>
<li data-color="green">
<a href="#">
<div class="item-left">
<div class="item-header">
<div class="item-badge item-green">AI</div>
<div class="item-title">ID 276: Program Requirements...</div>
</div>
<div class="item-meta item-assignee">Primary Assignee: <strong>Barnabes, Edward</strong></div>
<div class="item-meta item-due">Due Date: <strong>2014-1-31</strong></div>
</div>
<div class="item-right">
<i class="icon-caret-right"></i>
</div>
</a>
</li>
<li data-color="orange">
<a href="#">
<div class="item-left">
<div class="item-header">
<div class="item-badge item-orange">AI</div>
<div class="item-title">ID 259: Mobile View Broken on Tablet</div>
</div>
<div class="item-meta item-assignee">Primary Assignee: <strong>Barnabes, Edward</strong></div>
<div class="item-meta item-due">Due Date: <strong>2014-1-31</strong></div>
</div>
<div class="item-right">
<i class="icon-caret-right"></i>
</div>
</a>
</li>
<li data-color="red">
<a href="#">
<div class="item-left">
<div class="item-header">
<div class="item-badge item-red">AI</div>
<div class="item-title">ID 276: Program Requirements...</div>
</div>
<div class="item-meta item-assignee">Primary Assignee: <strong>Barnabes, Edward</strong></div>
<div class="item-meta item-due">Due Date: <strong>2014-3-31</strong></div>
</div>
<div class="item-right">
<i class="icon-caret-right"></i>
</div>
</a>
</li>
<li data-color="orange">
<a href="#">
<div class="item-left">
<div class="item-header">
<div class="item-badge item-orange">AI</div>
<div class="item-title">ID 259: Mobile View Broken on Tablet</div>
</div>
<div class="item-meta item-assignee">Primary Assignee: <strong>Barnabes, Edward</strong></div>
<div class="item-meta item-due">Due Date: <strong>2014-1-31</strong></div>
</div>
<div class="item-right">
<i class="icon-caret-right"></i>
</div>
</a>
</li>
<li data-color="green">
<a href="#">
<div class="item-left">
<div class="item-header">
<div class="item-badge item-green">AI</div>
<div class="item-title">ID 276: Program Requirements...</div>
</div>
<div class="item-meta item-assignee">Primary Assignee: <strong>Barnabes, Edward</strong></div>
<div class="item-meta item-due">Due Date: <strong>2014-1-31</strong></div>
</div>
<div class="item-right">
<i class="icon-caret-right"></i>
</div>
</a>
</li>
</ul>
</div>
</div>
</section>
</article>
Raw
script.js
function filter(color){
var el = $("#list-navigation");
var a = $("#list-navigation-container-items");
switch(color){
case "red":
el.removeClass("orange").removeClass("green");
break;
case "orange":
el.removeClass("red").removeClass("green");
break;
case "green":
el.removeClass("red").removeClass("orange");
break;
default:
el.removeClass("red").removeClass("orange").removeClass("green");
a.find("li").show();
break;
}
if(color !== undefined && color != null){
el.addClass(color);
var b = a.find("li[data-color]");
for(var i=0;i<b.length;i++){
if($(b[i]).attr("data-color") !== color)
$(b[i]).hide();
else
$(b[i]).show();
}
}
}
(function(){
$ = jQuery;
var el = $("#list-navigation-container-items");
var red = el.find("li[data-color='red']").length;
var orange = el.find("li[data-color='orange']").length;
var green = el.find("li[data-color='green']").length;
var active = red+orange+green;
$("#filter-critical div.list-filter-count").text(red);
$("#filter-high div.list-filter-count").text(orange);
$("#filter-medium div.list-filter-count").text(green);
$("#filter-active div.list-filter-count").text(active);
})(jQuery);
Raw
style.css
*{
font-family:"Helvetica Neue",Helvetica,sans;
list-style:none;
margin:0;
padding:0
}
body{
background:rgb(53,60,66);
}
a{
color:#fff;
text-decoration:none;
}
.demo-list .list-filter{
display:flex;
list-style:none;
padding:0 0 7px;
background:#1b1f22;
box-shadow:0 2px 2px #1b1f22;
transition:0.3s all ease-in-out;
position:fixed;
left:0;
right:0;
top:0;
z-index:99;
}
.demo-list .red .list-filter{
background:#e00019;
}
.demo-list .orange .list-filter{
background:#ecb029;
}
.demo-list .green .list-filter{
background:#219528;
}
.demo-list .list-filter li{
flex:1;
background:#1b1f22;
color:#fff;
text-shadow:0 1px 1px #333;
text-align:center;
padding:15px 0;
}
.demo-list .filter-indicator{
font-size: 50px;
color: #1b1f22;
position: fixed;
top: 62px;
z-index: 100;
width: 25%;
display: block;
text-align: center;
transition:0.3s all ease-in-out;
transform: translate3d(0,0,0);
backface-visibility: hidden;
transform-style: preserve-3d;
}
.ie .filter-indicator{
top:60px !important;
}
.demo-list .red .filter-indicator{
color: #e00019;
transform: translate3d(100%,0,0);
text-shadow: 0 2px 2px #1b1f22;
}
.demo-list .orange .filter-indicator{
color: #ecb029;
transform: translate3d(200%,0,0);
text-shadow: 0 2px 2px #1b1f22;
}
.demo-list .green .filter-indicator{
color: #219528;
transform: translate3d(300%,0,0);
text-shadow: 0 2px 2px #1b1f22;
}
.demo-list #filter-active{
}
.demo-list #filter-critical{
background:linear-gradient(#a20705,#e00019);
}
.demo-list #filter-high{
background:linear-gradient(#b38316,#ecb029);
}
.demo-list #filter-medium{
background:linear-gradient(#0e4d12,#219528);
}
.demo-list .list-filter-count{
font-size:26px;
text-shadow:0 1px 1px #777;
}
.demo-list .list-filter-label{
font-size:10px;
margin:2px 0 0 0;
}
.demo-list .item-left{
width: 90%;
display: inline-block;
}
.demo-list .item-header{
}
.demo-list .item-badge{
color:#fff;
font-size:26px;
font-weight:bold;
text-transform:uppercase;
border-radius:8px;
padding:10px;
width:30px;
height:30px;
text-align:center;
display: inline-block;
margin: 5px;
}
.demo-list .item-green{
background:linear-gradient(#0e4d12,#219528);
}
.demo-list .item-orange{
background:linear-gradient(#b38316,#ecb029);
}
.demo-list .item-red{
background:linear-gradient(#a20705,#e00019);
}
.demo-list .item-title{
display: inline-block;
position: relative;
top: 0;
width: 75%;
font-size: 20px;
}
@media screen and (max-width:530px){
.demo-list .item-title{
top:10px !important;
}
}
.demo-list .item-meta{
font-size:13px;
margin-left:5px;
}
.demo-list .item-right{
display:inline-block;
}
.demo-list .item-right i{
font-size:40px;
position:relative;
top:-30px;
}
#list.demo-list #list-navigation-container{
position: relative;
top: 85px;
}
#list-navigation-container-items li{
width: calc(100% - 12px);
margin: 5px auto 0;
background:linear-gradient(#9fa1a2,#e1e2e4);
border-top:1px solid #a7aaac;
border-left:1px solid #ceced0;
border-right:1px solid #ceced0;
border-bottom:1px solid #82878b;
}
#list-navigation-container-items li a{
color:#000;
display:block;
padding: 5px 10px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment