Difference between revisions of "Fauna"
From ThornsWiki
Thornswiki (talk | contribs) |
Thornswiki (talk | contribs) |
||
Line 151: | Line 151: | ||
<div class="button-group" data-filter-group="origin"><h3 class="sort-title">Found In</h3> | <div class="button-group" data-filter-group="origin"><h3 class="sort-title">Found In</h3> | ||
<button class="button is-checked" data-filter="">All</button> | <button class="button is-checked" data-filter="">All</button> | ||
− | <button class="button" data-filter=".Anaxas | + | <button class="button" data-filter=".Anaxas">Anaxas</button> |
− | <button class="button" data-filter=".Bastia | + | <button class="button" data-filter=".Bastia">Bastia</button> |
− | <button class="button" data-filter=".Gior | + | <button class="button" data-filter=".Gior">Gior</button> |
− | <button class="button" data-filter=".Hesse | + | <button class="button" data-filter=".Hesse">Hesse</button> |
− | <button class="button" data-filter=".Hox | + | <button class="button" data-filter=".Hox">Hox</button> |
− | <button class="button" data-filter=".Mugroba | + | <button class="button" data-filter=".Mugroba">Mugroba</button> |
</div> | </div> | ||
Latest revision as of 22:33, 2 May 2020
<style>
.sidebar { max-width:100%;
margin:0px auto;
/*padding:15px 10px;*/ /*background:#e8e4da;*/ /*position:fixed;*/ /*top:0;*/ /*left:0;*/ }
.filters {
display: flex; flex-wrap: wrap;
}
h3.sort-title { font-size: 1.15rem !important; border-bottom: 2px solid #474440 !important; margin-top: 0px !important;
color:#ccc5b9;
}
.button-group { flex:30%; padding:5px; }
.button { background-color: #deb975; border: none; border-radius:none !important; color: #fffcf2; padding: .25rem .35rem; text-align: center; text-decoration: none; display: inline-block; font-size: .75rem; font-family:'Open Sans', sans-serif; text-transform:uppercase; letter-spacing:0.025rem; /*margin: 2px 2px;*/ -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; cursor: pointer; }
.button.is-checked { background:#474440 !important;
}
.button:hover { background-color: #474440; color: #fffcf2; } .grid { max-width: 100%; display: flex; flex-direction: row; align-content: space-between; flex-wrap: wrap; margin: 0px auto; } .grid-item { width:30%;
margin:10px;
}
/* On screens that are 992px wide or less, go from four columns to two columns */ @media screen and (max-width: 992px) {
.button-group { flex: 80%; }
.grid-item {
min-width:350px; max-width:90%;
}
/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */ @media screen and (max-width: 600px) {
.button-group { flex: 100%; }
.grid-item {
min-width:350px; max-width:90%; }
}
</style> <script
src="https://code.jquery.com/jquery-3.4.0.min.js" integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
// init Isotope var $grid = $('.grid').isotope({ itemSelector: '.grid-item' });
// store filter for each group var filters = {};
$('.filters').on( 'click', '.button', function() { var $this = $(this); // get group key var $buttonGroup = $this.parents('.button-group'); var filterGroup = $buttonGroup.attr('data-filter-group'); // set filter for group filters[ filterGroup ] = $this.attr('data-filter'); // combine filters var filterValue = concatValues( filters ); // set filter for Isotope $grid.isotope({ filter: filterValue }); });
// change is-checked class on buttons $('.button-group').each( function( i, buttonGroup ) { var $buttonGroup = $( buttonGroup ); $buttonGroup.on( 'click', 'button', function() { $buttonGroup.find('.is-checked').removeClass('is-checked'); $( this ).addClass('is-checked'); }); });
});
// flatten object by concatting values function concatValues( obj ) {
var value = ; for ( var prop in obj ) { value += obj[ prop ]; } return value;
} </script> </head>
<body>