瀏覽代碼

WIP: sidebar for searching and filtering resources

joel
Simon Bowie 2 年之前
父節點
當前提交
b8b87b4caa
共有 3 個文件被更改,包括 31 次插入5 次删除
  1. +12
    -2
      web/app/static/js/main.js
  2. +7
    -0
      web/app/static/styles/custom.css
  3. +12
    -3
      web/app/templates/resources.html

+ 12
- 2
web/app/static/js/main.js 查看文件

@@ -8,7 +8,7 @@
# @acknowledgements:
*/

// Dynamic HTML forms based on dropdown menu
// dynamic HTML forms based on dropdown menu
$("#resource_type").change(function() {
var $ = jQuery.noConflict();
var resource_type = $(this).val();
@@ -17,7 +17,17 @@ $("#resource_type").change(function() {
});
});

// Testing a couple of ways to expand text
// filtering resources by search
$(document).ready(function(){
$("#searchInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#resource-boxes #resource").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});

// testing a couple of ways to expand text
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)

+ 7
- 0
web/app/static/styles/custom.css 查看文件

@@ -190,6 +190,13 @@ body {
justify-content: center
}

.search-filter-sidebar {
background-color: #efefef;
padding: 5px;
padding-top: 10px;
border: 1px solid #cdcdcd;
}

ol,
ul {
/*list-style-type: circle;*/

+ 12
- 3
web/app/templates/resources.html 查看文件

@@ -17,8 +17,15 @@
</div>
</div>
<div class="row">
{% for resource in resources %}
<div class="col-md-4 col-sm-6 py-3">
<div class="col-md-4 col-lg-3 py-3">
<div class="search-filter-sidebar">
<input class="form-control" id="searchInput" type="text" placeholder="Search...">
</div>
</div>
<div class="col-md-8 col-lg-9">
<div id="resource-boxes" class="row">
{% for resource in resources %}
<div id="resource" class="col-md-4 col-sm-6 py-3">
<div class="card text-dark bg-{{type}} mb-3">
<div class="card-body">
{% if resource['type'] == 'tool' %}
@@ -55,6 +62,8 @@
</div>
</div>
</div>
{% endfor %}
{% endfor %}
</div>
</div>
</div>
{% endblock %}

Loading…
取消
儲存