Hopiu/djLint
1
0
Fork 0
mirror of https://github.com/Hopiu/djLint.git synced 2026-05-26 21:33:59 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
djLint/tests/jinja_adminlte/gallery.html
Christopher Pickering 9120f70147
updated formatter and docs
2021-07-29 13:41:34 -05:00

404 lines
26 KiB
HTML
Raw Blame History

{% extends "layouts/base.html" %}
{% block title %}Gallery {% endblock %}
<!-- Element injected in the BODY element -->
{% block body_class %}{% endblock body_class %}
<!-- Specific Page CSS goes HERE -->
{% block stylesheets %}
<!-- Google Font: Source Sans Pro -->
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<!-- Font Awesome -->
<link rel="stylesheet" href="/static/assets/plugins/fontawesome-free/css/all.min.css">
<!-- Ekko Lightbox -->
<link rel="stylesheet" href="/static/assets/plugins/ekko-lightbox/ekko-lightbox.css">
<!-- Theme style -->
<link rel="stylesheet" href="/static/assets/css/adminlte.min.css">
{% endblock stylesheets %}
{% block content %}
<!-- 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="row">
<div class="col-12">
<div class="card card-primary">
<div class="card-header">
<h4 class="card-title">FilterizR Gallery with Ekko Lightbox</h4>
</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>
<a class="btn btn-info" href="javascript:void(0)" data-filter="4">
Category 4 (COLORED, BLACK)
</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 row">
<div class="filtr-item col-sm-2"
data-category="1"
data-sort="white sample">
<a href="https://via.placeholder.com/1200/FFFFFF.png?text=1"
data-toggle="lightbox"
data-title="sample 1 - white">
<img src="https://via.placeholder.com/300/FFFFFF?text=1"
class="img-fluid mb-2"
alt="white sample"/>
</a>
</div>
<div class="filtr-item col-sm-2"
data-category="2, 4"
data-sort="black sample">
<a href="https://via.placeholder.com/1200/000000.png?text=2"
data-toggle="lightbox"
data-title="sample 2 - black">
<img src="https://via.placeholder.com/300/000000?text=2"
class="img-fluid mb-2"
alt="black sample"/>
</a>
</div>
<div class="filtr-item col-sm-2"
data-category="3, 4"
data-sort="red sample">
<a href="https://via.placeholder.com/1200/FF0000/FFFFFF.png?text=3"
data-toggle="lightbox"
data-title="sample 3 - red">
<img src="https://via.placeholder.com/300/FF0000/FFFFFF?text=3"
class="img-fluid mb-2"
alt="red sample"/>
</a>
</div>
<div class="filtr-item col-sm-2"
data-category="3, 4"
data-sort="red sample">
<a href="https://via.placeholder.com/1200/FF0000/FFFFFF.png?text=4"
data-toggle="lightbox"
data-title="sample 4 - red">
<img src="https://via.placeholder.com/300/FF0000/FFFFFF?text=4"
class="img-fluid mb-2"
alt="red sample"/>
</a>
</div>
<div class="filtr-item col-sm-2"
data-category="2, 4"
data-sort="black sample">
<a href="https://via.placeholder.com/1200/000000.png?text=5"
data-toggle="lightbox"
data-title="sample 5 - black">
<img src="https://via.placeholder.com/300/000000?text=5"
class="img-fluid mb-2"
alt="black sample"/>
</a>
</div>
<div class="filtr-item col-sm-2"
data-category="1"
data-sort="white sample">
<a href="https://via.placeholder.com/1200/FFFFFF.png?text=6"
data-toggle="lightbox"
data-title="sample 6 - white">
<img src="https://via.placeholder.com/300/FFFFFF?text=6"
class="img-fluid mb-2"
alt="white sample"/>
</a>
</div>
<div class="filtr-item col-sm-2"
data-category="1"
data-sort="white sample">
<a href="https://via.placeholder.com/1200/FFFFFF.png?text=7"
data-toggle="lightbox"
data-title="sample 7 - white">
<img src="https://via.placeholder.com/300/FFFFFF?text=7"
class="img-fluid mb-2"
alt="white sample"/>
</a>
</div>
<div class="filtr-item col-sm-2"
data-category="2, 4"
data-sort="black sample">
<a href="https://via.placeholder.com/1200/000000.png?text=8"
data-toggle="lightbox"
data-title="sample 8 - black">
<img src="https://via.placeholder.com/300/000000?text=8"
class="img-fluid mb-2"
alt="black sample"/>
</a>
</div>
<div class="filtr-item col-sm-2"
data-category="3, 4"
data-sort="red sample">
<a href="https://via.placeholder.com/1200/FF0000/FFFFFF.png?text=9"
data-toggle="lightbox"
data-title="sample 9 - red">
<img src="https://via.placeholder.com/300/FF0000/FFFFFF?text=9"
class="img-fluid mb-2"
alt="red sample"/>
</a>
</div>
<div class="filtr-item col-sm-2"
data-category="1"
data-sort="white sample">
<a href="https://via.placeholder.com/1200/FFFFFF.png?text=10"
data-toggle="lightbox"
data-title="sample 10 - white">
<img src="https://via.placeholder.com/300/FFFFFF?text=10"
class="img-fluid mb-2"
alt="white sample"/>
</a>
</div>
<div class="filtr-item col-sm-2"
data-category="1"
data-sort="white sample">
<a href="https://via.placeholder.com/1200/FFFFFF.png?text=11"
data-toggle="lightbox"
data-title="sample 11 - white">
<img src="https://via.placeholder.com/300/FFFFFF?text=11"
class="img-fluid mb-2"
alt="white sample"/>
</a>
</div>
<div class="filtr-item col-sm-2"
data-category="2, 4"
data-sort="black sample">
<a href="https://via.placeholder.com/1200/000000.png?text=12"
data-toggle="lightbox"
data-title="sample 12 - black">
<img src="https://via.placeholder.com/300/000000?text=12"
class="img-fluid mb-2"
alt="black sample"/>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="card card-primary">
<div class="card-header">
<h4 class="card-title">Ekko Lightbox</h4>
</div>
<div class="card-body">
<div class="row">
<div class="col-sm-2">
<a href="https://via.placeholder.com/1200/FFFFFF.png?text=1"
data-toggle="lightbox"
data-title="sample 1 - white"
data-gallery="gallery">
<img src="https://via.placeholder.com/300/FFFFFF?text=1"
class="img-fluid mb-2"
alt="white sample"/>
</a>
</div>
<div class="col-sm-2">
<a href="https://via.placeholder.com/1200/000000.png?text=2"
data-toggle="lightbox"
data-title="sample 2 - black"
data-gallery="gallery">
<img src="https://via.placeholder.com/300/000000?text=2"
class="img-fluid mb-2"
alt="black sample"/>
</a>
</div>
<div class="col-sm-2">
<a href="https://via.placeholder.com/1200/FF0000/FFFFFF.png?text=3"
data-toggle="lightbox"
data-title="sample 3 - red"
data-gallery="gallery">
<img src="https://via.placeholder.com/300/FF0000/FFFFFF?text=3"
class="img-fluid mb-2"
alt="red sample"/>
</a>
</div>
<div class="col-sm-2">
<a href="https://via.placeholder.com/1200/FF0000/FFFFFF.png?text=4"
data-toggle="lightbox"
data-title="sample 4 - red"
data-gallery="gallery">
<img src="https://via.placeholder.com/300/FF0000/FFFFFF?text=4"
class="img-fluid mb-2"
alt="red sample"/>
</a>
</div>
<div class="col-sm-2">
<a href="https://via.placeholder.com/1200/000000.png?text=5"
data-toggle="lightbox"
data-title="sample 5 - black"
data-gallery="gallery">
<img src="https://via.placeholder.com/300/000000?text=5"
class="img-fluid mb-2"
alt="black sample"/>
</a>
</div>
<div class="col-sm-2">
<a href="https://via.placeholder.com/1200/FFFFFF.png?text=6"
data-toggle="lightbox"
data-title="sample 6 - white"
data-gallery="gallery">
<img src="https://via.placeholder.com/300/FFFFFF?text=6"
class="img-fluid mb-2"
alt="white sample"/>
</a>
</div>
<div class="col-sm-2">
<a href="https://via.placeholder.com/1200/FFFFFF.png?text=7"
data-toggle="lightbox"
data-title="sample 7 - white"
data-gallery="gallery">
<img src="https://via.placeholder.com/300/FFFFFF?text=7"
class="img-fluid mb-2"
alt="white sample"/>
</a>
</div>
<div class="col-sm-2">
<a href="https://via.placeholder.com/1200/000000.png?text=8"
data-toggle="lightbox"
data-title="sample 8 - black"
data-gallery="gallery">
<img src="https://via.placeholder.com/300/000000?text=8"
class="img-fluid mb-2"
alt="black sample"/>
</a>
</div>
<div class="col-sm-2">
<a href="https://via.placeholder.com/1200/FF0000/FFFFFF.png?text=9"
data-toggle="lightbox"
data-title="sample 9 - red"
data-gallery="gallery">
<img src="https://via.placeholder.com/300/FF0000/FFFFFF?text=9"
class="img-fluid mb-2"
alt="red sample"/>
</a>
</div>
<div class="col-sm-2">
<a href="https://via.placeholder.com/1200/FFFFFF.png?text=10"
data-toggle="lightbox"
data-title="sample 10 - white"
data-gallery="gallery">
<img src="https://via.placeholder.com/300/FFFFFF?text=10"
class="img-fluid mb-2"
alt="white sample"/>
</a>
</div>
<div class="col-sm-2">
<a href="https://via.placeholder.com/1200/FFFFFF.png?text=11"
data-toggle="lightbox"
data-title="sample 11 - white"
data-gallery="gallery">
<img src="https://via.placeholder.com/300/FFFFFF?text=11"
class="img-fluid mb-2"
alt="white sample"/>
</a>
</div>
<div class="col-sm-2">
<a href="https://via.placeholder.com/1200/000000.png?text=12"
data-toggle="lightbox"
data-title="sample 12 - black"
data-gallery="gallery">
<img src="https://via.placeholder.com/300/000000?text=12"
class="img-fluid mb-2"
alt="black sample"/>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.container-fluid -->
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
{% endblock content %}
<!-- Specific Page JS goes HERE -->
{% block javascripts %}
<!-- jQuery -->
<script src="/static/assets/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="/static/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- jQuery UI -->
<script src="/static/assets/plugins/jquery-ui/jquery-ui.min.js"></script>
<!-- Ekko Lightbox -->
<script src="/static/assets/plugins/ekko-lightbox/ekko-lightbox.min.js"></script>
<!-- AdminLTE App -->
<script src="/static/assets/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="/static/assets/js/demo.js"></script>
<!-- Filterizr-->
<script src="/static/assets/plugins/filterizr/jquery.filterizr.min.js"></script>
<!-- Page specific script -->
<script>
$(function () {
$(document).on('click', '[data-toggle="lightbox"]', function(event) {
event.preventDefault();
$(this).ekkoLightbox({
alwaysShowClose: true
});
});
$('.filter-container').filterizr({gutterPixels: 3});
$('.btn[data-filter]').on('click', function() {
$('.btn[data-filter]').removeClass('active');
$(this).addClass('active');
});
})
</script>
{% endblock javascripts %}
Reference in a new issue View git blame Copy permalink