mirror of https://github.com/ColorlibHQ/AdminLTE
created new gallery page
- added filterizr to plugins - created gallery demopull/2220/head
REJack
parent
ce9734ef07
commit
e3888aee85
|
|
@ -228,7 +228,11 @@ const Plugins = [
|
|||
from: 'node_modules/bootstrap4-duallistbox/dist',
|
||||
to: 'plugins/bootstrap4-duallistbox/'
|
||||
},
|
||||
|
||||
// filterizr
|
||||
{
|
||||
from: 'node_modules/filterizr/dist',
|
||||
to: 'plugins/filterizr/'
|
||||
},
|
||||
|
||||
// AdminLTE Dist
|
||||
{
|
||||
|
|
|
|||
|
|
@ -421,6 +421,14 @@
|
|||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="pages/gallery.html" class="nav-link">
|
||||
<i class="nav-icon far fa-image"></i>
|
||||
<p>
|
||||
Gallery
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon far fa-envelope"></i>
|
||||
|
|
|
|||
|
|
@ -408,6 +408,14 @@
|
|||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="pages/gallery.html" class="nav-link">
|
||||
<i class="nav-icon far fa-image"></i>
|
||||
<p>
|
||||
Gallery
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon far fa-envelope"></i>
|
||||
|
|
|
|||
|
|
@ -418,6 +418,14 @@ to get the desired effect
|
|||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="pages/gallery.html" class="nav-link">
|
||||
<i class="nav-icon far fa-image"></i>
|
||||
<p>
|
||||
Gallery
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon far fa-envelope"></i>
|
||||
|
|
|
|||
|
|
@ -5764,6 +5764,11 @@
|
|||
"integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=",
|
||||
"dev": true
|
||||
},
|
||||
"ev-emitter": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/ev-emitter/-/ev-emitter-1.1.1.tgz",
|
||||
"integrity": "sha512-ipiDYhdQSCZ4hSbX4rMW+XzNKMD1prg/sTvoVmSLkuQ1MVlwjJQQA+sW8tMYR3BLUr9KjodFV4pvzunvRhd33Q=="
|
||||
},
|
||||
"eve-raphael": {
|
||||
"version": "0.5.0",
|
||||
"resolved": "https://registry.npmjs.org/eve-raphael/-/eve-raphael-0.5.0.tgz",
|
||||
|
|
@ -6290,6 +6295,11 @@
|
|||
"integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",
|
||||
"dev": true
|
||||
},
|
||||
"fast-memoize": {
|
||||
"version": "2.5.1",
|
||||
"resolved": "https://registry.npmjs.org/fast-memoize/-/fast-memoize-2.5.1.tgz",
|
||||
"integrity": "sha512-xdmw296PCL01tMOXx9mdJSmWY29jQgxyuZdq0rEHMu+Tpe1eOEtCycoG6chzlcrWsNgpZP7oL8RiQr7+G6Bl6g=="
|
||||
},
|
||||
"fastclick": {
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/fastclick/-/fastclick-1.0.6.tgz",
|
||||
|
|
@ -6337,6 +6347,15 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"filterizr": {
|
||||
"version": "2.2.3",
|
||||
"resolved": "https://registry.npmjs.org/filterizr/-/filterizr-2.2.3.tgz",
|
||||
"integrity": "sha512-1u3/TadXM12uNUlxHBRM31maMXY4DA2+sbeji4KSHk/m3LE4fMkTst+6W5YBlcBC1umICDiwplWsMqr6VzY5ZA==",
|
||||
"requires": {
|
||||
"fast-memoize": "^2.5.1",
|
||||
"imagesloaded": "^4.1.4"
|
||||
}
|
||||
},
|
||||
"finalhandler": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.0.tgz",
|
||||
|
|
@ -7494,6 +7513,14 @@
|
|||
"integrity": "sha1-SMptcvbGo68Aqa1K5odr44ieKwk=",
|
||||
"dev": true
|
||||
},
|
||||
"imagesloaded": {
|
||||
"version": "4.1.4",
|
||||
"resolved": "https://registry.npmjs.org/imagesloaded/-/imagesloaded-4.1.4.tgz",
|
||||
"integrity": "sha512-ltiBVcYpc/TYTF5nolkMNsnREHW+ICvfQ3Yla2Sgr71YFwQ86bDwV9hgpFhFtrGPuwEx5+LqOHIrdXBdoWwwsA==",
|
||||
"requires": {
|
||||
"ev-emitter": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"immutable": {
|
||||
"version": "3.8.2",
|
||||
"resolved": "https://registry.npmjs.org/immutable/-/immutable-3.8.2.tgz",
|
||||
|
|
|
|||
|
|
@ -62,6 +62,7 @@
|
|||
"datatables.net-bs4": "^1.10.19",
|
||||
"daterangepicker": "^3.0.5",
|
||||
"fastclick": "^1.0.6",
|
||||
"filterizr": "^2.2.3",
|
||||
"flag-icon-css": "^3.3.0",
|
||||
"flot": "^3.1.1",
|
||||
"icheck-bootstrap": "^3.0.1",
|
||||
|
|
|
|||
|
|
@ -410,6 +410,14 @@
|
|||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../gallery.html" class="nav-link">
|
||||
<i class="nav-icon far fa-image"></i>
|
||||
<p>
|
||||
Gallery
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon far fa-envelope"></i>
|
||||
|
|
|
|||
|
|
@ -456,6 +456,14 @@
|
|||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../gallery.html" class="nav-link">
|
||||
<i class="nav-icon far fa-image"></i>
|
||||
<p>
|
||||
Gallery
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon far fa-envelope"></i>
|
||||
|
|
|
|||
|
|
@ -410,6 +410,14 @@
|
|||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../gallery.html" class="nav-link">
|
||||
<i class="nav-icon far fa-image"></i>
|
||||
<p>
|
||||
Gallery
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon far fa-envelope"></i>
|
||||
|
|
|
|||
|
|
@ -414,6 +414,14 @@
|
|||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../gallery.html" class="nav-link">
|
||||
<i class="nav-icon far fa-image"></i>
|
||||
<p>
|
||||
Gallery
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon far fa-envelope"></i>
|
||||
|
|
|
|||
|
|
@ -416,6 +416,14 @@
|
|||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../gallery.html" class="nav-link">
|
||||
<i class="nav-icon far fa-image"></i>
|
||||
<p>
|
||||
Gallery
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon far fa-envelope"></i>
|
||||
|
|
|
|||
|
|
@ -411,6 +411,14 @@
|
|||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../gallery.html" class="nav-link">
|
||||
<i class="nav-icon far fa-image"></i>
|
||||
<p>
|
||||
Gallery
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon far fa-envelope"></i>
|
||||
|
|
|
|||
|
|
@ -415,6 +415,14 @@
|
|||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../gallery.html" class="nav-link">
|
||||
<i class="nav-icon far fa-image"></i>
|
||||
<p>
|
||||
Gallery
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon far fa-envelope"></i>
|
||||
|
|
|
|||
|
|
@ -409,6 +409,14 @@
|
|||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../gallery.html" class="nav-link">
|
||||
<i class="nav-icon far fa-image"></i>
|
||||
<p>
|
||||
Gallery
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon far fa-envelope"></i>
|
||||
|
|
|
|||
|
|
@ -416,6 +416,14 @@
|
|||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="gallery.html" class="nav-link">
|
||||
<i class="nav-icon far fa-image"></i>
|
||||
<p>
|
||||
Gallery
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon far fa-envelope"></i>
|
||||
|
|
|
|||
|
|
@ -410,6 +410,14 @@
|
|||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../gallery.html" class="nav-link">
|
||||
<i class="nav-icon far fa-image"></i>
|
||||
<p>
|
||||
Gallery
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon far fa-envelope"></i>
|
||||
|
|
|
|||
|
|
@ -411,6 +411,14 @@
|
|||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../gallery.html" class="nav-link">
|
||||
<i class="nav-icon far fa-image"></i>
|
||||
<p>
|
||||
Gallery
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon far fa-envelope"></i>
|
||||
|
|
|
|||
|
|
@ -412,6 +412,14 @@
|
|||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../gallery.html" class="nav-link">
|
||||
<i class="nav-icon far fa-image"></i>
|
||||
<p>
|
||||
Gallery
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon far fa-envelope"></i>
|
||||
|
|
|
|||
|
|
@ -411,6 +411,14 @@
|
|||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../gallery.html" class="nav-link">
|
||||
<i class="nav-icon far fa-image"></i>
|
||||
<p>
|
||||
Gallery
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon far fa-envelope"></i>
|
||||
|
|
|
|||
|
|
@ -411,6 +411,14 @@
|
|||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../gallery.html" class="nav-link">
|
||||
<i class="nav-icon far fa-image"></i>
|
||||
<p>
|
||||
Gallery
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon far fa-envelope"></i>
|
||||
|
|
|
|||
|
|
@ -412,6 +412,14 @@
|
|||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../gallery.html" class="nav-link">
|
||||
<i class="nav-icon far fa-image"></i>
|
||||
<p>
|
||||
Gallery
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon far fa-envelope"></i>
|
||||
|
|
|
|||
|
|
@ -412,6 +412,14 @@
|
|||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../gallery.html" class="nav-link">
|
||||
<i class="nav-icon far fa-image"></i>
|
||||
<p>
|
||||
Gallery
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon far fa-envelope"></i>
|
||||
|
|
|
|||
|
|
@ -412,6 +412,14 @@
|
|||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../gallery.html" class="nav-link">
|
||||
<i class="nav-icon far fa-image"></i>
|
||||
<p>
|
||||
Gallery
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon far fa-envelope"></i>
|
||||
|
|
|
|||
|
|
@ -410,6 +410,14 @@
|
|||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../gallery.html" class="nav-link">
|
||||
<i class="nav-icon far fa-image"></i>
|
||||
<p>
|
||||
Gallery
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon far fa-envelope"></i>
|
||||
|
|
|
|||
|
|
@ -424,6 +424,14 @@
|
|||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../gallery.html" class="nav-link">
|
||||
<i class="nav-icon far fa-image"></i>
|
||||
<p>
|
||||
Gallery
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon far fa-envelope"></i>
|
||||
|
|
|
|||
|
|
@ -439,6 +439,14 @@
|
|||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../gallery.html" class="nav-link">
|
||||
<i class="nav-icon far fa-image"></i>
|
||||
<p>
|
||||
Gallery
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon far fa-envelope"></i>
|
||||
|
|
|
|||
|
|
@ -411,6 +411,14 @@
|
|||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../gallery.html" class="nav-link">
|
||||
<i class="nav-icon far fa-image"></i>
|
||||
<p>
|
||||
Gallery
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon far fa-envelope"></i>
|
||||
|
|
|
|||
|
|
@ -412,6 +412,14 @@
|
|||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../gallery.html" class="nav-link">
|
||||
<i class="nav-icon far fa-image"></i>
|
||||
<p>
|
||||
Gallery
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon far fa-envelope"></i>
|
||||
|
|
|
|||
|
|
@ -412,6 +412,14 @@
|
|||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../gallery.html" class="nav-link">
|
||||
<i class="nav-icon far fa-image"></i>
|
||||
<p>
|
||||
Gallery
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon far fa-envelope"></i>
|
||||
|
|
|
|||
|
|
@ -412,6 +412,14 @@
|
|||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../gallery.html" class="nav-link">
|
||||
<i class="nav-icon far fa-image"></i>
|
||||
<p>
|
||||
Gallery
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon far fa-envelope"></i>
|
||||
|
|
|
|||
|
|
@ -412,6 +412,14 @@
|
|||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../gallery.html" class="nav-link">
|
||||
<i class="nav-icon far fa-image"></i>
|
||||
<p>
|
||||
Gallery
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon far fa-envelope"></i>
|
||||
|
|
|
|||
|
|
@ -424,6 +424,14 @@
|
|||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../gallery.html" class="nav-link">
|
||||
<i class="nav-icon far fa-image"></i>
|
||||
<p>
|
||||
Gallery
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon far fa-envelope"></i>
|
||||
|
|
|
|||
|
|
@ -413,6 +413,14 @@
|
|||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../gallery.html" class="nav-link">
|
||||
<i class="nav-icon far fa-image"></i>
|
||||
<p>
|
||||
Gallery
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon far fa-envelope"></i>
|
||||
|
|
|
|||
|
|
@ -411,6 +411,14 @@
|
|||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../gallery.html" class="nav-link">
|
||||
<i class="nav-icon far fa-image"></i>
|
||||
<p>
|
||||
Gallery
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon far fa-envelope"></i>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,745 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>AdminLTE 3 | Gallery</title>
|
||||
<!-- Tell the browser to be responsive to screen width -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="../plugins/fontawesome-free/css/all.min.css">
|
||||
<!-- Ionicons -->
|
||||
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
|
||||
<!-- Theme style -->
|
||||
<link rel="stylesheet" href="../dist/css/adminlte.min.css">
|
||||
<!-- Google Font: Source Sans Pro -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
|
||||
</head>
|
||||
<body class="hold-transition sidebar-mini">
|
||||
<div class="wrapper">
|
||||
<!-- Navbar -->
|
||||
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
|
||||
<!-- Left navbar links -->
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-widget="pushmenu" href="#"><i class="fas fa-bars"></i></a>
|
||||
</li>
|
||||
<li class="nav-item d-none d-sm-inline-block">
|
||||
<a href="../index3.html" class="nav-link">Home</a>
|
||||
</li>
|
||||
<li class="nav-item d-none d-sm-inline-block">
|
||||
<a href="#" class="nav-link">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- SEARCH FORM -->
|
||||
<form class="form-inline ml-3">
|
||||
<div class="input-group input-group-sm">
|
||||
<input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-navbar" type="submit">
|
||||
<i class="fas fa-search"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Right navbar links -->
|
||||
<ul class="navbar-nav ml-auto">
|
||||
<!-- Messages Dropdown Menu -->
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link" data-toggle="dropdown" href="#">
|
||||
<i class="far fa-comments"></i>
|
||||
<span class="badge badge-danger navbar-badge">3</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
|
||||
<a href="#" class="dropdown-item">
|
||||
<!-- Message Start -->
|
||||
<div class="media">
|
||||
<img src="../dist/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 mr-3 img-circle">
|
||||
<div class="media-body">
|
||||
<h3 class="dropdown-item-title">
|
||||
Brad Diesel
|
||||
<span class="float-right text-sm text-danger"><i class="fas fa-star"></i></span>
|
||||
</h3>
|
||||
<p class="text-sm">Call me whenever you can...</p>
|
||||
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Message End -->
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item">
|
||||
<!-- Message Start -->
|
||||
<div class="media">
|
||||
<img src="../dist/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
|
||||
<div class="media-body">
|
||||
<h3 class="dropdown-item-title">
|
||||
John Pierce
|
||||
<span class="float-right text-sm text-muted"><i class="fas fa-star"></i></span>
|
||||
</h3>
|
||||
<p class="text-sm">I got your message bro</p>
|
||||
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Message End -->
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item">
|
||||
<!-- Message Start -->
|
||||
<div class="media">
|
||||
<img src="../dist/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
|
||||
<div class="media-body">
|
||||
<h3 class="dropdown-item-title">
|
||||
Nora Silvester
|
||||
<span class="float-right text-sm text-warning"><i class="fas fa-star"></i></span>
|
||||
</h3>
|
||||
<p class="text-sm">The subject goes here</p>
|
||||
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Message End -->
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
|
||||
</div>
|
||||
</li>
|
||||
<!-- Notifications Dropdown Menu -->
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link" data-toggle="dropdown" href="#">
|
||||
<i class="far fa-bell"></i>
|
||||
<span class="badge badge-warning navbar-badge">15</span>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
|
||||
<span class="dropdown-item dropdown-header">15 Notifications</span>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item">
|
||||
<i class="fas fa-envelope mr-2"></i> 4 new messages
|
||||
<span class="float-right text-muted text-sm">3 mins</span>
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item">
|
||||
<i class="fas fa-users mr-2"></i> 8 friend requests
|
||||
<span class="float-right text-muted text-sm">12 hours</span>
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item">
|
||||
<i class="fas fa-file mr-2"></i> 3 new reports
|
||||
<span class="float-right text-muted text-sm">2 days</span>
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#">
|
||||
<i class="fas fa-th-large"></i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- /.navbar -->
|
||||
|
||||
<!-- Main Sidebar Container -->
|
||||
<aside class="main-sidebar sidebar-dark-primary elevation-4">
|
||||
<!-- Brand Logo -->
|
||||
<a href="../index3.html" class="brand-link">
|
||||
<img src="../dist/img/AdminLTELogo.png"
|
||||
alt="AdminLTE Logo"
|
||||
class="brand-image img-circle elevation-3"
|
||||
style="opacity: .8">
|
||||
<span class="brand-text font-weight-light">AdminLTE 3</span>
|
||||
</a>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="sidebar">
|
||||
<!-- Sidebar user panel (optional) -->
|
||||
<div class="user-panel mt-3 pb-3 mb-3 d-flex">
|
||||
<div class="image">
|
||||
<img src="../dist/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">
|
||||
</div>
|
||||
<div class="info">
|
||||
<a href="#" class="d-block">Alexander Pierce</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar Menu -->
|
||||
<nav class="mt-2">
|
||||
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
|
||||
<!-- Add icons to the links using the .nav-icon class
|
||||
with font-awesome or any other icon font library -->
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon fas fa-tachometer-alt"></i>
|
||||
<p>
|
||||
Dashboard
|
||||
<i class="right fas fa-angle-left"></i>
|
||||
</p>
|
||||
</a>
|
||||
<ul class="nav nav-treeview">
|
||||
<li class="nav-item">
|
||||
<a href="../index.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Dashboard v1</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../index2.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Dashboard v2</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../index3.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Dashboard v3</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="widgets.html" class="nav-link">
|
||||
<i class="nav-icon fas fa-th"></i>
|
||||
<p>
|
||||
Widgets
|
||||
<span class="right badge badge-danger">New</span>
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon fas fa-copy"></i>
|
||||
<p>
|
||||
Layout Options
|
||||
<i class="fas fa-angle-left right"></i>
|
||||
<span class="badge badge-info right">6</span>
|
||||
</p>
|
||||
</a>
|
||||
<ul class="nav nav-treeview">
|
||||
<li class="nav-item">
|
||||
<a href="layout/top-nav.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Top Navigation</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="layout/boxed.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Boxed</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="layout/fixed-sidebar.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Fixed Sidebar</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="layout/fixed-topnav.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Fixed Navbar</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="layout/fixed-footer.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Fixed Footer</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="layout/collapsed-sidebar.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Collapsed Sidebar</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon fas fa-chart-pie"></i>
|
||||
<p>
|
||||
Charts
|
||||
<i class="right fas fa-angle-left"></i>
|
||||
</p>
|
||||
</a>
|
||||
<ul class="nav nav-treeview">
|
||||
<li class="nav-item">
|
||||
<a href="charts/chartjs.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>ChartJS</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="charts/flot.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Flot</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="charts/inline.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Inline</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon fas fa-tree"></i>
|
||||
<p>
|
||||
UI Elements
|
||||
<i class="fas fa-angle-left right"></i>
|
||||
</p>
|
||||
</a>
|
||||
<ul class="nav nav-treeview">
|
||||
<li class="nav-item">
|
||||
<a href="UI/general.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>General</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="UI/icons.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Icons</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="UI/buttons.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Buttons</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="UI/sliders.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Sliders</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="UI/modals.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Modals & Alerts</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="UI/navbar.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Navbar & Tabs</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="UI/timeline.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Timeline</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="UI/ribbons.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Ribbons</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon fas fa-edit"></i>
|
||||
<p>
|
||||
Forms
|
||||
<i class="fas fa-angle-left right"></i>
|
||||
</p>
|
||||
</a>
|
||||
<ul class="nav nav-treeview">
|
||||
<li class="nav-item">
|
||||
<a href="forms/general.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>General Elements</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="forms/advanced.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Advanced Elements</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="forms/editors.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Editors</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon fas fa-table"></i>
|
||||
<p>
|
||||
Tables
|
||||
<i class="fas fa-angle-left right"></i>
|
||||
</p>
|
||||
</a>
|
||||
<ul class="nav nav-treeview">
|
||||
<li class="nav-item">
|
||||
<a href="tables/simple.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Simple Tables</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="tables/data.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>DataTables</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="tables/jsgrid.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>jsGrid</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-header">EXAMPLES</li>
|
||||
<li class="nav-item">
|
||||
<a href="calendar.html" class="nav-link">
|
||||
<i class="nav-icon far fa-calendar-alt"></i>
|
||||
<p>
|
||||
Calendar
|
||||
<span class="badge badge-info right">2</span>
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="gallery.html" class="nav-link active">
|
||||
<i class="nav-icon far fa-image"></i>
|
||||
<p>
|
||||
Gallery
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon far fa-envelope"></i>
|
||||
<p>
|
||||
Mailbox
|
||||
<i class="fas fa-angle-left right"></i>
|
||||
</p>
|
||||
</a>
|
||||
<ul class="nav nav-treeview">
|
||||
<li class="nav-item">
|
||||
<a href="mailbox/mailbox.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Inbox</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="mailbox/compose.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Compose</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="mailbox/read-mail.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Read</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon fas fa-book"></i>
|
||||
<p>
|
||||
Pages
|
||||
<i class="fas fa-angle-left right"></i>
|
||||
</p>
|
||||
</a>
|
||||
<ul class="nav nav-treeview">
|
||||
<li class="nav-item">
|
||||
<a href="examples/invoice.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Invoice</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="examples/profile.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Profile</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="examples/e_commerce.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>E-commerce</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="examples/projects.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Projects</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="examples/project_add.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Project Add</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="examples/project_edit.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Project Edit</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="examples/project_detail.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Project Detail</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="examples/contacts.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Contacts</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon far fa-plus-square"></i>
|
||||
<p>
|
||||
Extras
|
||||
<i class="fas fa-angle-left right"></i>
|
||||
</p>
|
||||
</a>
|
||||
<ul class="nav nav-treeview">
|
||||
<li class="nav-item">
|
||||
<a href="examples/login.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Login</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="examples/register.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Register</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="examples/lockscreen.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Lockscreen</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="examples/legacy-user-menu.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Legacy User Menu</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="examples/language-menu.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Language Menu</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="examples/404.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Error 404</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="examples/500.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Error 500</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="examples/blank.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Blank Page</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../starter.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Starter Page</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-header">MISCELLANEOUS</li>
|
||||
<li class="nav-item">
|
||||
<a href="https://adminlte.io/docs/3.0" class="nav-link">
|
||||
<i class="nav-icon fas fa-file"></i>
|
||||
<p>Documentation</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-header">LABELS</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon far fa-circle text-danger"></i>
|
||||
<p class="text">Important</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon far fa-circle text-warning"></i>
|
||||
<p>Warning</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon far fa-circle text-info"></i>
|
||||
<p>Informational</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- /.sidebar-menu -->
|
||||
</div>
|
||||
<!-- /.sidebar -->
|
||||
</aside>
|
||||
|
||||
<!-- Content Wrapper. Contains page content -->
|
||||
<div class="content-wrapper">
|
||||
<!-- Content Header (Page header) -->
|
||||
<section class="content-header">
|
||||
<div class="container-fluid">
|
||||
<div class="row mb-2">
|
||||
<div class="col-sm-6">
|
||||
<h1>Gallery</h1>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<ol class="breadcrumb float-sm-right">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item active">Gallery</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /.container-fluid -->
|
||||
</section>
|
||||
|
||||
<!-- Main content -->
|
||||
<section class="content">
|
||||
<div class="container-fluid">
|
||||
<div class="card card-primary">
|
||||
<div class="card-header">
|
||||
<div class="card-title">
|
||||
FilterizR Gallery
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<div class="btn-group w-100 mb-2">
|
||||
<a class="btn btn-info active" href="javascript:void(0)" data-filter="all"> All items </a>
|
||||
<a class="btn btn-info" href="javascript:void(0)" data-filter="1"> Category 1 (WHITE) </a>
|
||||
<a class="btn btn-info" href="javascript:void(0)" data-filter="2"> Category 2 (BLACK) </a>
|
||||
<a class="btn btn-info" href="javascript:void(0)" data-filter="3"> Category 3 (COLORED) </a>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<a class="btn btn-secondary" href="javascript:void(0)" data-shuffle> Shuffle items </a>
|
||||
<div class="float-right">
|
||||
<select class="custom-select" style="width: auto;" data-sortOrder>
|
||||
<option value="index"> Sort by Position </option>
|
||||
<option value="sortData"> Sort by Custom Data </option>
|
||||
</select>
|
||||
<div class="btn-group">
|
||||
<a class="btn btn-default" href="javascript:void(0)" data-sortAsc> Ascending </a>
|
||||
<a class="btn btn-default" href="javascript:void(0)" data-sortDesc> Descending </a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="filter-container p-0">
|
||||
<div class="filtr-item col-sm-2" data-category="1" data-sort="value">
|
||||
<img src="https://via.placeholder.com/300/FFFFFF?text=1" class="img-fluid mb-2" alt="white sample" data-sort="white sample" />
|
||||
</div>
|
||||
<div class="filtr-item col-sm-2" data-category="2" data-sort="value">
|
||||
<img src="https://via.placeholder.com/300/000000?text=2" class="img-fluid mb-2" alt="black sample" data-sort="black sample" />
|
||||
</div>
|
||||
<div class="filtr-item col-sm-2" data-category="3" data-sort="value">
|
||||
<img src="https://via.placeholder.com/300/FF0000/FFFFFF?text=3" class="img-fluid mb-2" alt="red sample" data-sort="red sample" />
|
||||
</div>
|
||||
<div class="filtr-item col-sm-2" data-category="3" data-sort="value">
|
||||
<img src="https://via.placeholder.com/300/FF0000/FFFFFF?text=4" class="img-fluid mb-2" alt="red sample" data-sort="red sample" />
|
||||
</div>
|
||||
<div class="filtr-item col-sm-2" data-category="2" data-sort="value">
|
||||
<img src="https://via.placeholder.com/300/000000?text=5" class="img-fluid mb-2" alt="black sample" data-sort="black sample" />
|
||||
</div>
|
||||
<div class="filtr-item col-sm-2" data-category="1" data-sort="value">
|
||||
<img src="https://via.placeholder.com/300/FFFFFF?text=6" class="img-fluid mb-2" alt="white sample" data-sort="white sample" />
|
||||
</div>
|
||||
<div class="filtr-item col-sm-2" data-category="1" data-sort="value">
|
||||
<img src="https://via.placeholder.com/300/FFFFFF?text=7" class="img-fluid mb-2" alt="white sample" data-sort="white sample" />
|
||||
</div>
|
||||
<div class="filtr-item col-sm-2" data-category="2" data-sort="value">
|
||||
<img src="https://via.placeholder.com/300/000000?text=8" class="img-fluid mb-2" alt="black sample" data-sort="black sample" />
|
||||
</div>
|
||||
<div class="filtr-item col-sm-2" data-category="3" data-sort="value">
|
||||
<img src="https://via.placeholder.com/300/FF0000/FFFFFF?text=9" class="img-fluid mb-2" alt="red sample" data-sort="red sample" />
|
||||
</div>
|
||||
<div class="filtr-item col-sm-2" data-category="1" data-sort="value">
|
||||
<img src="https://via.placeholder.com/300/FFFFFF?text=10" class="img-fluid mb-2" alt="white sample" data-sort="white sample" />
|
||||
</div>
|
||||
<div class="filtr-item col-sm-2" data-category="1" data-sort="value">
|
||||
<img src="https://via.placeholder.com/300/FFFFFF?text=11" class="img-fluid mb-2" alt="white sample" data-sort="white sample" />
|
||||
</div>
|
||||
<div class="filtr-item col-sm-2" data-category="2" data-sort="value">
|
||||
<img src="https://via.placeholder.com/300/000000?text=12" class="img-fluid mb-2" alt="black sample" data-sort="black sample" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /.container-fluid -->
|
||||
</section>
|
||||
<!-- /.content -->
|
||||
</div>
|
||||
<!-- /.content-wrapper -->
|
||||
|
||||
<footer class="main-footer">
|
||||
<div class="float-right d-none d-sm-block">
|
||||
<b>Version</b> 3.0.0-beta.2
|
||||
</div>
|
||||
<strong>Copyright © 2014-2019 <a href="http://adminlte.io">AdminLTE.io</a>.</strong> All rights
|
||||
reserved.
|
||||
</footer>
|
||||
|
||||
<!-- Control Sidebar -->
|
||||
<aside class="control-sidebar control-sidebar-dark">
|
||||
<!-- Control sidebar content goes here -->
|
||||
</aside>
|
||||
<!-- /.control-sidebar -->
|
||||
</div>
|
||||
<!-- ./wrapper -->
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="../plugins/jquery/jquery.min.js"></script>
|
||||
<!-- Bootstrap -->
|
||||
<script src="../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
|
||||
<!-- jQuery UI -->
|
||||
<script src="../plugins/jquery-ui/jquery-ui.min.js"></script>
|
||||
<!-- AdminLTE App -->
|
||||
<script src="../dist/js/adminlte.min.js"></script>
|
||||
<!-- AdminLTE for demo purposes -->
|
||||
<script src="../dist/js/demo.js"></script>
|
||||
<!-- Filterizr-->
|
||||
<script src="../plugins/filterizr/jquery.filterizr.min.js"></script>
|
||||
<!-- Page specific script -->
|
||||
<script>
|
||||
$(function () {
|
||||
$('.filter-container').filterizr({gutterPixels: 3});
|
||||
$('.btn[data-filter]').on('click', function() {
|
||||
$('.btn[data-filter]').removeClass('active');
|
||||
$(this).addClass('active');
|
||||
});
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -412,6 +412,14 @@
|
|||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../gallery.html" class="nav-link">
|
||||
<i class="nav-icon far fa-image"></i>
|
||||
<p>
|
||||
Gallery
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon far fa-envelope"></i>
|
||||
|
|
|
|||
|
|
@ -412,6 +412,14 @@
|
|||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../gallery.html" class="nav-link">
|
||||
<i class="nav-icon far fa-image"></i>
|
||||
<p>
|
||||
Gallery
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon far fa-envelope"></i>
|
||||
|
|
|
|||
|
|
@ -411,6 +411,14 @@
|
|||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../gallery.html" class="nav-link">
|
||||
<i class="nav-icon far fa-image"></i>
|
||||
<p>
|
||||
Gallery
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon far fa-envelope"></i>
|
||||
|
|
|
|||
|
|
@ -413,6 +413,14 @@
|
|||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../gallery.html" class="nav-link">
|
||||
<i class="nav-icon far fa-image"></i>
|
||||
<p>
|
||||
Gallery
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon far fa-envelope"></i>
|
||||
|
|
|
|||
|
|
@ -411,6 +411,14 @@
|
|||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../gallery.html" class="nav-link">
|
||||
<i class="nav-icon far fa-image"></i>
|
||||
<p>
|
||||
Gallery
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon far fa-envelope"></i>
|
||||
|
|
|
|||
|
|
@ -413,6 +413,14 @@
|
|||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../gallery.html" class="nav-link">
|
||||
<i class="nav-icon far fa-image"></i>
|
||||
<p>
|
||||
Gallery
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon far fa-envelope"></i>
|
||||
|
|
|
|||
|
|
@ -414,6 +414,14 @@
|
|||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../gallery.html" class="nav-link">
|
||||
<i class="nav-icon far fa-image"></i>
|
||||
<p>
|
||||
Gallery
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon far fa-envelope"></i>
|
||||
|
|
|
|||
|
|
@ -410,6 +410,14 @@
|
|||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="../gallery.html" class="nav-link">
|
||||
<i class="nav-icon far fa-image"></i>
|
||||
<p>
|
||||
Gallery
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon far fa-envelope"></i>
|
||||
|
|
|
|||
|
|
@ -410,6 +410,14 @@
|
|||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="gallery.html" class="nav-link">
|
||||
<i class="nav-icon far fa-image"></i>
|
||||
<p>
|
||||
Gallery
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item has-treeview">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon far fa-envelope"></i>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
import { Filter } from './types';
|
||||
/**
|
||||
* ActiveFilter represents the currently active filter over
|
||||
* the grid.
|
||||
*
|
||||
* It can be a plain string value or an array of strings.
|
||||
*/
|
||||
export default class ActiveFilter {
|
||||
private filter;
|
||||
constructor(filter: Filter);
|
||||
get(): Filter;
|
||||
set(targetFilter: Filter): void;
|
||||
toggle(targetFilter: string): void;
|
||||
private toggleFilter;
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
/**
|
||||
* A wrapper class around the window object to manage the
|
||||
* resize event.
|
||||
*
|
||||
* When the user resizes the window, Filterizr needs to trigger
|
||||
* a refiltering of the grid so that the grid items can assume
|
||||
* their new positions.
|
||||
*/
|
||||
export default class BrowserWindow {
|
||||
private resizeHandler?;
|
||||
constructor();
|
||||
private debounceEventHandler;
|
||||
destroy(): void;
|
||||
setResizeEventHandler(resizeHandler: EventListener): void;
|
||||
private removeResizeHandler;
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import { Destructible } from './types/interfaces';
|
||||
declare type Receiver = NodeListOf<Element> | Element | Window;
|
||||
export default class EventReceiver implements Destructible {
|
||||
private receiver;
|
||||
private eventDictionary;
|
||||
constructor(receiver: Receiver);
|
||||
on(eventType: string, eventHandler: EventListener): void;
|
||||
off(eventType: string): void;
|
||||
destroy(): void;
|
||||
private removeAllEvents;
|
||||
}
|
||||
export {};
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
import { RawOptionsCallbacks } from './FilterizrOptions/defaultOptions';
|
||||
import FilterizrOptions from './FilterizrOptions/FilterizrOptions';
|
||||
import FilterItems from './FilterItems';
|
||||
/**
|
||||
* Resembles the grid of items within Filterizr.
|
||||
*/
|
||||
export default class FilterContainer {
|
||||
node: Element;
|
||||
options: FilterizrOptions;
|
||||
filterItems: FilterItems;
|
||||
dimensions: {
|
||||
width: number;
|
||||
height: number;
|
||||
};
|
||||
private onTransitionEndHandler?;
|
||||
constructor(node: Element, options: FilterizrOptions);
|
||||
destroy(): void;
|
||||
/**
|
||||
* Turn the HTML elements in the grid to FilterItem
|
||||
* instances and return a collection of them.
|
||||
*/
|
||||
makeFilterItems(options: FilterizrOptions): FilterItems;
|
||||
/**
|
||||
* Inserts a new item into the grid.
|
||||
* @param node - HTML node to instantiate as FilterItem and append to the grid
|
||||
* @param options - Filterizr options
|
||||
*/
|
||||
insertItem(node: Element, options: FilterizrOptions): void;
|
||||
calculateColumns(): number;
|
||||
updateDimensions(): void;
|
||||
updateHeight(newHeight: number): void;
|
||||
bindEvents(callbacks: RawOptionsCallbacks): void;
|
||||
unbindEvents(callbacks: RawOptionsCallbacks): void;
|
||||
trigger(eventType: string): void;
|
||||
private updateWidth;
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
import { FilterizrState } from '../types';
|
||||
import FilterizrOptions from '../FilterizrOptions';
|
||||
import FilterItems from '../FilterItems';
|
||||
import FilterizrElement from '../FilterizrElement';
|
||||
import StyledFilterContainer from './StyledFilterContainer';
|
||||
/**
|
||||
* Resembles the grid of items within Filterizr.
|
||||
*/
|
||||
export default class FilterContainer extends FilterizrElement {
|
||||
filterItems: FilterItems;
|
||||
protected styledNode: StyledFilterContainer;
|
||||
private _filterizrState;
|
||||
constructor(node: Element, options: FilterizrOptions);
|
||||
readonly styles: StyledFilterContainer;
|
||||
filterizrState: FilterizrState;
|
||||
destroy(): void;
|
||||
/**
|
||||
* Turn the HTML elements in the grid to FilterItem
|
||||
* instances and return a collection of them.
|
||||
* @throws when no filter items are found in the grid.
|
||||
*/
|
||||
makeFilterItems(options: FilterizrOptions): FilterItems;
|
||||
insertItem(node: HTMLElement): void;
|
||||
removeItem(node: HTMLElement): void;
|
||||
setHeight(newHeight: number): void;
|
||||
bindEvents(): void;
|
||||
unbindEvents(): void;
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import StyledFilterizrElement from '../StyledFilterizrElement';
|
||||
export default class StyledFilterContainer extends StyledFilterizrElement {
|
||||
initialize(): void;
|
||||
updatePaddings(): void;
|
||||
setHeight(newHeight: number): void;
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
export { default } from './FilterContainer';
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
import FilterizrOptions from '../FilterizrOptions';
|
||||
export declare const makePaddingStyles: (options: FilterizrOptions) => object;
|
||||
export declare const makeInitialStyles: (options: FilterizrOptions) => object;
|
||||
export declare const makeHeightStyles: (height: number) => object;
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
import Filterizr from './Filterizr';
|
||||
import { Destructible } from './types/interfaces';
|
||||
export default class FilterControls implements Destructible {
|
||||
private filterControls;
|
||||
private filterizr;
|
||||
private multiFilterControls;
|
||||
private searchControls;
|
||||
private selector;
|
||||
private shuffleControls;
|
||||
private sortAscControls;
|
||||
private sortDescControls;
|
||||
/**
|
||||
* @param filterizr keep a ref to the Filterizr object to control actions
|
||||
* @param selector selector of controls in case of multiple Filterizr instances
|
||||
*/
|
||||
constructor(filterizr: Filterizr, selector?: string);
|
||||
destroy(): void;
|
||||
private initialize;
|
||||
}
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
import { Dictionary } from './types/interfaces/Dictionary';
|
||||
import FilterizrOptions from './FilterizrOptions/FilterizrOptions';
|
||||
export interface Position {
|
||||
left: number;
|
||||
top: number;
|
||||
}
|
||||
/**
|
||||
* Resembles an item in the grid of Filterizr.
|
||||
*/
|
||||
export default class FilterItem {
|
||||
node: Element;
|
||||
options: FilterizrOptions;
|
||||
dimensions: {
|
||||
width: number;
|
||||
height: number;
|
||||
};
|
||||
private data;
|
||||
private sortData;
|
||||
private index;
|
||||
private filteredOut;
|
||||
private lastPosition;
|
||||
private onTransitionEndHandler;
|
||||
constructor(node: Element, index: number, options: FilterizrOptions);
|
||||
/**
|
||||
* Destroys the FilterItem instance
|
||||
*/
|
||||
destroy(): void;
|
||||
/**
|
||||
* Filters in a specific FilterItem out of the grid.
|
||||
* @param targetPosition the position towards which the element should animate
|
||||
* @param cssOptions for the animation
|
||||
*/
|
||||
filterIn(targetPosition: Position, cssOptions: Dictionary): void;
|
||||
/**
|
||||
* Filters out a specific FilterItem out of the grid.
|
||||
* @param cssOptions for the animation
|
||||
*/
|
||||
filterOut(cssOptions: Dictionary): void;
|
||||
/**
|
||||
* Helper method to calculate the animation delay for a given grid item
|
||||
* @param delay in ms
|
||||
* @param delayMode can be 'alternate' or 'progressive'
|
||||
*/
|
||||
getTransitionDelay(delay: number, delayMode: 'progressive' | 'alternate'): number;
|
||||
/**
|
||||
* Returns true if the text contents of the FilterItem match the search term
|
||||
* @param searchTerm to look up
|
||||
* @return if the innerText matches the term
|
||||
*/
|
||||
contentsMatchSearch(searchTerm: string): boolean;
|
||||
/**
|
||||
* Recalculates the dimensions of the element and updates them in the state
|
||||
*/
|
||||
updateDimensions(): void;
|
||||
/**
|
||||
* Returns all categories of the grid items data-category attribute
|
||||
* with a regexp regarding all whitespace.
|
||||
* @return {String[]} an array of the categories the item belongs to
|
||||
*/
|
||||
getCategories(): string[];
|
||||
/**
|
||||
* Returns the value of the sort attribute
|
||||
* @param sortAttribute "index", "sortData" or custom user data-attribute by which to sort
|
||||
*/
|
||||
getSortAttribute(sortAttribute: string): string | number;
|
||||
/**
|
||||
* Helper method for the search method of Filterizr
|
||||
* @return {String} innerText of the FilterItem in lowercase
|
||||
*/
|
||||
private getContentsLowercase;
|
||||
/**
|
||||
* Sets up the events related to the FilterItem instance
|
||||
*/
|
||||
private bindEvents;
|
||||
/**
|
||||
* Removes all events related to the FilterItem instance
|
||||
*/
|
||||
private unbindEvents;
|
||||
/**
|
||||
* Calculates and returns the transition css property based on options.
|
||||
*/
|
||||
private getTransitionStyle;
|
||||
/**
|
||||
* Sets the transition css property as an inline style on the FilterItem.
|
||||
*
|
||||
* The idea here is that during the very first render items should assume
|
||||
* their positions directly.
|
||||
*
|
||||
* Following renders should actually trigger the transitions, which is why
|
||||
* we need to delay setting the transition property.
|
||||
*
|
||||
* Unfortunately, JavaScript code executes on the same thread as the
|
||||
* browser's rendering. Everything that needs to be drawn waits for
|
||||
* JavaScript execution to complete. Thus, we need to use a setTimeout
|
||||
* here to defer setting the transition style at the first rendering cycle.
|
||||
*/
|
||||
private setTransitionStyle;
|
||||
}
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
import { Position } from '../types/interfaces';
|
||||
import FilterizrOptions from '../FilterizrOptions';
|
||||
import FilterizrElement from '../FilterizrElement';
|
||||
import StyledFilterItem from './StyledFilterItem';
|
||||
/**
|
||||
* Resembles an item in the grid of Filterizr.
|
||||
*/
|
||||
export default class FilterItem extends FilterizrElement {
|
||||
protected styledNode: StyledFilterItem;
|
||||
private filteredOut;
|
||||
private lastPosition;
|
||||
private sortData;
|
||||
constructor(node: Element, index: number, options: FilterizrOptions);
|
||||
readonly styles: StyledFilterItem;
|
||||
/**
|
||||
* Destroys the FilterItem instance
|
||||
*/
|
||||
destroy(): void;
|
||||
/**
|
||||
* Filters in a specific FilterItem out of the grid.
|
||||
*/
|
||||
filterIn(targetPosition: Position): void;
|
||||
/**
|
||||
* Filters out a specific FilterItem out of the grid.
|
||||
*/
|
||||
filterOut(): void;
|
||||
/**
|
||||
* Returns true if the text contents of the FilterItem match the search term
|
||||
* @param searchTerm to look up
|
||||
*/
|
||||
contentsMatchSearch(searchTerm: string): boolean;
|
||||
/**
|
||||
* Returns all categories of the grid items data-category attribute
|
||||
* with a regexp regarding all whitespace.
|
||||
*/
|
||||
getCategories(): string[];
|
||||
/**
|
||||
* Returns the value of the sort attribute
|
||||
* @param sortAttribute "index", "sortData" or custom user data-attribute by which to sort
|
||||
*/
|
||||
getSortAttribute(sortAttribute: string): string | number;
|
||||
protected bindEvents(): void;
|
||||
protected unbindEvents(): void;
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
import { Position } from './../types/interfaces';
|
||||
import StyledFilterizrElement from '../StyledFilterizrElement';
|
||||
import FilterizrOptions from '../FilterizrOptions';
|
||||
export default class StyledFilterItem extends StyledFilterizrElement {
|
||||
private _index;
|
||||
constructor(node: HTMLElement, index: number, options: FilterizrOptions);
|
||||
initialize(): void;
|
||||
setFilteredStyles(position: Position, cssOptions: object): void;
|
||||
updateTransitionStyle(): void;
|
||||
updateWidth(): void;
|
||||
/**
|
||||
* Sets the transition css property as an inline style on the FilterItem.
|
||||
*
|
||||
* The idea here is that during the very first render items should assume
|
||||
* their positions directly.
|
||||
*
|
||||
* Following renders should actually trigger the transitions, which is why
|
||||
* we need to delay setting the transition property.
|
||||
*
|
||||
* Unfortunately, JavaScript code executes on the same thread as the
|
||||
* browser's rendering. Everything that needs to be drawn waits for
|
||||
* JavaScript execution to complete. Thus, we need to use a setTimeout
|
||||
* here to defer setting the transition style at the first rendering cycle.
|
||||
*/
|
||||
enableTransitions(): Promise<void>;
|
||||
disableTransitions(): void;
|
||||
setZIndex(zIndex: number): void;
|
||||
removeZIndex(): void;
|
||||
removeWidth(): void;
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
export { default } from './FilterItem';
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
import FilterizrOptions from '../FilterizrOptions';
|
||||
import { Dictionary, Position } from '../types/interfaces';
|
||||
export declare const makeInitialStyles: (options: FilterizrOptions) => object;
|
||||
export declare const makeFilteringStyles: (targetPosition: Position, cssOptions: Dictionary) => object;
|
||||
export declare const makeTransitionStyles: (index: number, options: FilterizrOptions) => object;
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import { Filter } from './ActiveFilter';
|
||||
import FilterItem from './FilterItem';
|
||||
import FilterizrOptions from './FilterizrOptions/FilterizrOptions';
|
||||
export default class FilterItems {
|
||||
private filterItems;
|
||||
private options;
|
||||
constructor(filterItems: FilterItem[], options: FilterizrOptions);
|
||||
readonly length: number;
|
||||
get(): FilterItem[];
|
||||
getItem(index: number): FilterItem;
|
||||
set(filterItems: FilterItem[]): void;
|
||||
destroy(): void;
|
||||
updateTransitionStyle(): void;
|
||||
updateDimensions(): void;
|
||||
push(filterItem: FilterItem): number;
|
||||
getFiltered(filter: Filter): FilterItem[];
|
||||
getFilteredOut(filter: Filter): FilterItem[];
|
||||
getSorted(sortAttr?: string, sortOrder?: 'asc' | 'desc'): FilterItem[];
|
||||
getSearched(searchTerm: string): FilterItem[];
|
||||
getShuffled(): FilterItem[];
|
||||
private shouldBeFiltered;
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import StyledFilterItems from './StyledFilterItems';
|
||||
import { Filter } from '../types';
|
||||
import FilterItem from '../FilterItem';
|
||||
import FilterizrOptions from '../FilterizrOptions/FilterizrOptions';
|
||||
import { Destructible, Styleable } from '../types/interfaces';
|
||||
export default class FilterItems implements Destructible, Styleable {
|
||||
private filterItems;
|
||||
private styledFilterItems;
|
||||
private options;
|
||||
constructor(filterItems: FilterItem[], options: FilterizrOptions);
|
||||
readonly styles: StyledFilterItems;
|
||||
readonly length: number;
|
||||
getItem(index: number): FilterItem;
|
||||
destroy(): void;
|
||||
push(filterItem: FilterItem): number;
|
||||
remove(node: HTMLElement): void;
|
||||
getFiltered(filter: Filter): FilterItem[];
|
||||
getFilteredOut(filter: Filter): FilterItem[];
|
||||
sort(sortAttr?: string, sortOrder?: 'asc' | 'desc'): void;
|
||||
shuffle(): void;
|
||||
private search;
|
||||
private shouldBeFiltered;
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import StyledFilterizrElements from '../StyledFilterizrElements';
|
||||
import FilterItem from '../FilterItem/FilterItem';
|
||||
export default class StyledFilterItems extends StyledFilterizrElements {
|
||||
private _filterItems;
|
||||
constructor(elements: FilterItem[]);
|
||||
removeWidth(): void;
|
||||
updateWidth(): void;
|
||||
updateTransitionStyle(): void;
|
||||
disableTransitions(): void;
|
||||
enableTransitions(): Promise<void>;
|
||||
updateWidthWithTransitionsDisabled(): void;
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
export { default } from './FilterItems';
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
import FilterizrOptions from './FilterizrOptions/FilterizrOptions';
|
||||
import FilterContainer from './FilterContainer';
|
||||
import FilterItem from './FilterItem';
|
||||
import { Filter } from './ActiveFilter';
|
||||
import { RawOptions } from './FilterizrOptions/defaultOptions';
|
||||
export default class Filterizr {
|
||||
/**
|
||||
* Main Filterizr classes exported as static members
|
||||
*/
|
||||
static FilterContainer: typeof FilterContainer;
|
||||
static FilterItem: typeof FilterItem;
|
||||
static defaultOptions: RawOptions;
|
||||
/**
|
||||
* Static method that receives the jQuery object and extends
|
||||
* its prototype with a .filterizr method.
|
||||
*/
|
||||
static installAsJQueryPlugin: Function;
|
||||
options: FilterizrOptions;
|
||||
private browserWindow;
|
||||
private filterContainer;
|
||||
private filterControls?;
|
||||
private filterizrState;
|
||||
constructor(selectorOrNode?: string | HTMLElement, userOptions?: RawOptions);
|
||||
private readonly filterItems;
|
||||
/**
|
||||
* Filters the items in the grid by a category
|
||||
* @param category by which to filter
|
||||
*/
|
||||
filter(category: Filter): void;
|
||||
destroy(): void;
|
||||
/**
|
||||
* Inserts a new FilterItem in the Filterizr grid
|
||||
* @param node DOM node to append
|
||||
*/
|
||||
insertItem(node: HTMLElement): void;
|
||||
/**
|
||||
* Sorts the FilterItems in the grid
|
||||
* @param sortAttr the attribute by which to perform the sort
|
||||
* @param sortOrder ascending or descending
|
||||
*/
|
||||
sort(sortAttr?: string, sortOrder?: 'asc' | 'desc'): void;
|
||||
/**
|
||||
* Searches through the FilterItems for a given string and adds an additional filter layer.
|
||||
* @param searchTerm the term for which to search
|
||||
*/
|
||||
search(searchTerm?: string): void;
|
||||
/**
|
||||
* Shuffles the FilterItems in the grid, making sure their positions have changed.
|
||||
*/
|
||||
shuffle(): void;
|
||||
/**
|
||||
* Updates the perferences of the users for rendering the Filterizr grid,
|
||||
* additionally performs error checking on the new options passed.
|
||||
* @param newOptions to override the defaults.
|
||||
*/
|
||||
setOptions(newOptions: RawOptions): void;
|
||||
/**
|
||||
* Performs multifiltering with AND/OR logic.
|
||||
* @param toggledFilter the filter to toggle
|
||||
*/
|
||||
toggleFilter(toggledFilter: string): void;
|
||||
private render;
|
||||
private onTransitionEndCallback;
|
||||
private rebindFilterContainerEvents;
|
||||
private bindEvents;
|
||||
/**
|
||||
* If it contains images it makes use of the imagesloaded npm package
|
||||
* to trigger the first render after the images have finished loading
|
||||
* in the DOM. Otherwise, overlapping can occur if the images do not
|
||||
* have the height attribute explicitly set on them.
|
||||
*
|
||||
* In case the grid contains no images, then a simple render is performed.
|
||||
*/
|
||||
private renderWithImagesLoaded;
|
||||
private updateDimensionsAndRerender;
|
||||
}
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
import { Filter } from '../types';
|
||||
import { RawOptions, Destructible } from '../types/interfaces';
|
||||
import FilterizrOptions from '../FilterizrOptions';
|
||||
import FilterContainer from '../FilterContainer';
|
||||
import FilterItem from '../FilterItem';
|
||||
export default class Filterizr implements Destructible {
|
||||
/**
|
||||
* Main Filterizr classes exported as static members
|
||||
*/
|
||||
static FilterContainer: typeof FilterContainer;
|
||||
static FilterItem: typeof FilterItem;
|
||||
static defaultOptions: RawOptions;
|
||||
/**
|
||||
* Static method that receives the jQuery object and extends
|
||||
* its prototype with a .filterizr method.
|
||||
*/
|
||||
static installAsJQueryPlugin: Function;
|
||||
options: FilterizrOptions;
|
||||
private windowEventReceiver;
|
||||
private filterContainer;
|
||||
private filterControls?;
|
||||
private imagesHaveLoaded;
|
||||
private spinner?;
|
||||
constructor(selectorOrNode?: string | HTMLElement, userOptions?: RawOptions);
|
||||
private readonly filterItems;
|
||||
/**
|
||||
* Filters the items in the grid by a category
|
||||
* @param category by which to filter
|
||||
*/
|
||||
filter(category: Filter): void;
|
||||
destroy(): void;
|
||||
/**
|
||||
* Inserts a new FilterItem into the grid
|
||||
*/
|
||||
insertItem(node: HTMLElement): Promise<void>;
|
||||
/**
|
||||
* Removes a FilterItem from the grid
|
||||
*/
|
||||
removeItem(node: HTMLElement): void;
|
||||
/**
|
||||
* Sorts the FilterItems in the grid
|
||||
* @param sortAttr the attribute by which to perform the sort
|
||||
* @param sortOrder ascending or descending
|
||||
*/
|
||||
sort(sortAttr?: string, sortOrder?: 'asc' | 'desc'): void;
|
||||
/**
|
||||
* Searches through the FilterItems for a given string and adds an additional filter layer.
|
||||
*/
|
||||
search(searchTerm?: string): void;
|
||||
/**
|
||||
* Shuffles the FilterItems in the grid, making sure their positions have changed.
|
||||
*/
|
||||
shuffle(): void;
|
||||
/**
|
||||
* Updates the perferences of the users for rendering the Filterizr grid,
|
||||
* additionally performs error checking on the new options passed.
|
||||
* @param newOptions to override the defaults.
|
||||
*/
|
||||
setOptions(newOptions: RawOptions): void;
|
||||
/**
|
||||
* Performs multifiltering with AND/OR logic.
|
||||
* @param toggledFilter the filter to toggle
|
||||
*/
|
||||
toggleFilter(toggledFilter: string): void;
|
||||
private render;
|
||||
/**
|
||||
* Initialization sequence of Filterizr when the grid is first loaded
|
||||
*/
|
||||
private initialize;
|
||||
private bindEvents;
|
||||
/**
|
||||
* Resolves when the images of the grid have finished loading into the DOM
|
||||
*/
|
||||
private waitForImagesToLoad;
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
export { default } from './Filterizr';
|
||||
|
|
@ -0,0 +1 @@
|
|||
export default function installAsJQueryPlugin($: any): void;
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import { Destructible, Dimensions, Resizable, Styleable } from './types/interfaces';
|
||||
import FilterizrOptions from './FilterizrOptions';
|
||||
import EventReceiver from './EventReceiver';
|
||||
import StyledFilterizrElement from './StyledFilterizrElement';
|
||||
export default abstract class FilterizrElement implements Destructible, Resizable, Styleable {
|
||||
node: Element;
|
||||
options: FilterizrOptions;
|
||||
protected eventReceiver: EventReceiver;
|
||||
constructor(node: Element, options: FilterizrOptions);
|
||||
readonly dimensions: Dimensions;
|
||||
destroy(): void | Promise<void>;
|
||||
trigger(eventType: string): void;
|
||||
abstract readonly styles: StyledFilterizrElement;
|
||||
protected abstract bindEvents(): void;
|
||||
protected abstract unbindEvents(): void;
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import { BaseOptions, RawOptions } from './../types/interfaces';
|
||||
import ActiveFilter from '../ActiveFilter';
|
||||
import { Filter } from '../types';
|
||||
export interface Options extends BaseOptions {
|
||||
filter: ActiveFilter;
|
||||
}
|
||||
export default class FilterizrOptions {
|
||||
private options;
|
||||
constructor(userOptions: RawOptions);
|
||||
readonly isSpinnerEnabled: boolean;
|
||||
readonly areControlsEnabled: boolean;
|
||||
readonly controlsSelector: string;
|
||||
filter: Filter;
|
||||
toggleFilter(filter: string): void;
|
||||
searchTerm: string;
|
||||
get(): Options;
|
||||
getRaw(): RawOptions;
|
||||
set(newUserOptions: RawOptions): void;
|
||||
private convertToFilterizrOptions;
|
||||
private convertToOptions;
|
||||
private validate;
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
import { RawOptions } from '../types/interfaces';
|
||||
declare const defaultOptions: RawOptions;
|
||||
export default defaultOptions;
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
export { default as defaultOptions } from './defaultOptions';
|
||||
export { default } from './FilterizrOptions';
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import { Destructible, Styleable } from '../types/interfaces';
|
||||
import FilterizrOptions from '../FilterizrOptions';
|
||||
import FilterContainer from '../FilterContainer';
|
||||
import StyledSpinner from './StyledSpinner';
|
||||
export default class Spinner implements Destructible, Styleable {
|
||||
private node;
|
||||
private styledNode;
|
||||
private filterContainer;
|
||||
constructor(filterContainer: FilterContainer, options: FilterizrOptions);
|
||||
readonly styles: StyledSpinner;
|
||||
destroy(): Promise<void>;
|
||||
private initialize;
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
import StyledFilterizrElement from '../StyledFilterizrElement';
|
||||
export default class StyledSpinner extends StyledFilterizrElement {
|
||||
initialize(): void;
|
||||
fadeOut(): Promise<void>;
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
export { default } from './Spinner';
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
import { SpinnerOptions } from '../types/interfaces';
|
||||
export declare function makeSpinner({ fillColor }: SpinnerOptions): HTMLElement;
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import { Destructible } from './types/interfaces/Destructible';
|
||||
import FilterizrOptions from './FilterizrOptions';
|
||||
export default abstract class StyledFilterizrElement implements Destructible {
|
||||
protected options: FilterizrOptions;
|
||||
protected node: HTMLElement;
|
||||
constructor(node: HTMLElement, options: FilterizrOptions);
|
||||
destroy(): void;
|
||||
protected animate(targetStyles: object): Promise<void>;
|
||||
protected set(targetStyles: object): void;
|
||||
protected remove(propertyName: string): void;
|
||||
abstract initialize(): void | Promise<void>;
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
export default abstract class StyledFilterizrElements {
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
declare class Animator {
|
||||
static animate(node: HTMLElement, targetStyles: object): Promise<void>;
|
||||
private static process;
|
||||
}
|
||||
declare const _default: typeof Animator.animate;
|
||||
export default _default;
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
/**
|
||||
* A Regexp to validate potential values for the CSS easing property of transitions.
|
||||
*/
|
||||
export declare const cssEasingValuesRegexp: RegExp;
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
interface FilterizrState {
|
||||
IDLE: 'IDLE';
|
||||
FILTERING: 'FILTERING';
|
||||
SORTING: 'SORTING';
|
||||
SHUFFLING: 'SHUFFLING';
|
||||
}
|
||||
/**
|
||||
* Possible animation states for Filterizr
|
||||
*/
|
||||
export declare const FILTERIZR_STATE: FilterizrState;
|
||||
export {};
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
export { FILTERIZR_STATE } from './filterizrState';
|
||||
export { LAYOUT } from './layout';
|
||||
export { cssEasingValuesRegexp } from './cssEasingValuesRegexp';
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
interface Layout {
|
||||
SAME_SIZE: 'sameSize';
|
||||
SAME_HEIGHT: 'sameHeight';
|
||||
SAME_WIDTH: 'sameWidth';
|
||||
PACKED: 'packed';
|
||||
HORIZONTAL: 'horizontal';
|
||||
VERTICAL: 'vertical';
|
||||
}
|
||||
/**
|
||||
* Possible grid layout modes
|
||||
*/
|
||||
export declare const LAYOUT: Layout;
|
||||
export {};
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,10 @@
|
|||
import { Position } from './FilterItem';
|
||||
import FilterContainer from './FilterContainer';
|
||||
/**
|
||||
* Calculates and returns an array of objects representing
|
||||
* the next positions the FilterItems are supposed to assume.
|
||||
* @param layout name of helper method to be used
|
||||
* @param filterizr instance
|
||||
*/
|
||||
declare const getLayoutPositions: (layout: string, filterContainer: FilterContainer) => Position[];
|
||||
export default getLayoutPositions;
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
/**
|
||||
* Filterizr is a JavaScript library that sorts, shuffles and applies stunning
|
||||
* filters over responsive galleries using CSS3 transitions and
|
||||
* custom CSS effects.
|
||||
* @author Yiotis Kaltsikis
|
||||
* @see {@link http://yiotis.net/filterizr}
|
||||
* @license MIT
|
||||
*/
|
||||
export { default } from './Filterizr';
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
/**
|
||||
* Filterizr is a JavaScript library that sorts, shuffles and applies stunning filters over
|
||||
* responsive galleries using CSS3 transitions and custom CSS effects.
|
||||
*
|
||||
* @author Yiotis Kaltsikis
|
||||
* @see {@link http://yiotis.net/filterizr}
|
||||
* @license MIT
|
||||
*/
|
||||
import Filterizr from './Filterizr';
|
||||
export default Filterizr;
|
||||
|
|
@ -0,0 +1 @@
|
|||
export default function installAsJQueryPlugin($: any): void;
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,30 @@
|
|||
/**
|
||||
* Modified version of Jake Gordon's Bin Packing algorithm used for Filterizr's 'packed' layout
|
||||
* @see {@link https://github.com/jakesgordon/bin-packing}
|
||||
*/
|
||||
interface PackerRoot {
|
||||
x: number;
|
||||
y: number;
|
||||
w: number;
|
||||
h?: number;
|
||||
used?: boolean;
|
||||
down?: PackerRoot;
|
||||
right?: PackerRoot;
|
||||
}
|
||||
interface PackerBlock {
|
||||
x?: number;
|
||||
y?: number;
|
||||
w?: number;
|
||||
h?: number;
|
||||
fit?: PackerRoot | void;
|
||||
}
|
||||
export default class Packer {
|
||||
root: PackerRoot;
|
||||
constructor(w: number);
|
||||
init(w: number): void;
|
||||
fit(blocks: PackerBlock[]): void;
|
||||
findNode(root: PackerRoot, w: number, h: number): PackerRoot | void;
|
||||
splitNode(node: PackerRoot, w: number, h: number): PackerRoot;
|
||||
growDown(w: number, h: number): PackerRoot | void;
|
||||
}
|
||||
export {};
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import { Position } from '../FilterItem';
|
||||
import FilterContainer from '../FilterContainer';
|
||||
/**
|
||||
* Horizontal layout algorithm that arranges all FilterItems in one row. Their width may vary.
|
||||
* @param filterContainer instance.
|
||||
*/
|
||||
declare const getHorizontalLayoutPositions: (filterContainer: FilterContainer) => Position[];
|
||||
export default getHorizontalLayoutPositions;
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import { Position } from '../FilterItem';
|
||||
import FilterContainer from '../FilterContainer';
|
||||
/**
|
||||
* Packed layout for items that can have varying width as well as varying height.
|
||||
* @param filterContainer instance.
|
||||
*/
|
||||
declare const getPackedLayoutPositions: (filterContainer: FilterContainer) => Position[];
|
||||
export default getPackedLayoutPositions;
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import { Position } from '../FilterItem';
|
||||
import FilterContainer from '../FilterContainer';
|
||||
/**
|
||||
* Same height layout for items that have the same height, but can have varying width
|
||||
* @param filterContainer instance.
|
||||
*/
|
||||
declare const getSameHeightLayoutPositions: (filterContainer: FilterContainer) => Position[];
|
||||
export default getSameHeightLayoutPositions;
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import { Position } from '../FilterItem';
|
||||
import FilterContainer from '../FilterContainer';
|
||||
/**
|
||||
* Same size layout for items that have the same width/height
|
||||
* @param filterContainer instance.
|
||||
*/
|
||||
declare const getSameSizeLayoutPosition: (filterContainer: FilterContainer) => Position[];
|
||||
export default getSameSizeLayoutPosition;
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import { Position } from '../FilterItem';
|
||||
import FilterContainer from '../FilterContainer';
|
||||
/**
|
||||
* Same width layout for items that have the same width, but can have varying height
|
||||
* @param filterContainer instance.
|
||||
*/
|
||||
declare const getSameWidthLayoutPositions: (filterContainer: FilterContainer) => Position[];
|
||||
export default getSameWidthLayoutPositions;
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import { Position } from '../FilterItem';
|
||||
import FilterContainer from '../FilterContainer';
|
||||
/**
|
||||
* Vertical layout algorithm that arranges all FilterItems in one column. Their height may vary.
|
||||
* @param filterizr instance.
|
||||
*/
|
||||
declare const getVerticalLayoutPositions: (filterContainer: FilterContainer) => Position[];
|
||||
export default getVerticalLayoutPositions;
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
/**
|
||||
* Modified version of Jake Gordon's Bin Packing algorithm used for Filterizr's 'packed' layout
|
||||
* @see {@link https://github.com/jakesgordon/bin-packing}
|
||||
*/
|
||||
interface PackerRoot {
|
||||
x: number;
|
||||
y: number;
|
||||
w: number;
|
||||
h?: number;
|
||||
used?: boolean;
|
||||
down?: PackerRoot;
|
||||
right?: PackerRoot;
|
||||
}
|
||||
interface PackerBlock {
|
||||
x?: number;
|
||||
y?: number;
|
||||
w?: number;
|
||||
h?: number;
|
||||
fit?: PackerRoot | void;
|
||||
}
|
||||
export default class Packer {
|
||||
root: PackerRoot;
|
||||
constructor(w: number);
|
||||
init(w: number): void;
|
||||
fit(blocks: PackerBlock[]): void;
|
||||
findNode(root: PackerRoot, w: number, h: number): PackerRoot | void;
|
||||
splitNode(node: PackerRoot, w: number, h: number): PackerRoot;
|
||||
growDown(w: number, h: number): PackerRoot | void;
|
||||
}
|
||||
export {};
|
||||
|
|
@ -0,0 +1 @@
|
|||
export { default } from './makeLayoutPositions';
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import { ContainerLayout, Dimensions } from '../types/interfaces';
|
||||
declare const _default: (itemsDimensions: Dimensions[], gutterPixels: number) => ContainerLayout;
|
||||
/**
|
||||
* Horizontal layout algorithm that arranges all FilterItems in one row. Their width may vary.
|
||||
*/
|
||||
export default _default;
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import { ContainerLayout, Dimensions, Options } from '../types/interfaces';
|
||||
declare const _default: (containerWidth: number, itemsDimensions: Dimensions[], { gutterPixels, layout }: Options) => ContainerLayout;
|
||||
/**
|
||||
* Creates the specifications of the dimensions of the
|
||||
* container and items for the next render of Filterizr.
|
||||
*/
|
||||
export default _default;
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import { ContainerLayout, Dimensions } from '../types/interfaces';
|
||||
declare const _default: (containerWidth: number, itemsDimensions: Dimensions[], gutterPixels: number) => ContainerLayout;
|
||||
/**
|
||||
* Packed layout for items that can have varying width as well as varying height.
|
||||
*/
|
||||
export default _default;
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import { ContainerLayout, Dimensions } from '../types/interfaces';
|
||||
declare const _default: (containerWidth: number, itemsDimensions: Dimensions[], gutterPixels: number) => ContainerLayout;
|
||||
/**
|
||||
* Same height layout for items that have the same height, but can have varying width
|
||||
*/
|
||||
export default _default;
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue