From 70a306ef390e1b375e3c5679446b77250fc83d23 Mon Sep 17 00:00:00 2001
From: Lars Eggert <lars@eggert.org>
Date: Wed, 10 Nov 2021 19:27:20 +0000
Subject: [PATCH] Fix search form. - Legacy-Id: 19625
---
ietf/settings.py | 2 +-
ietf/static/js/ietf.js | 86 +++++++++++-
ietf/templates/doc/frontpage.html | 31 +++--
ietf/templates/doc/search/search.html | 12 +-
ietf/templates/doc/search/search_form.html | 146 ++++++++++++---------
5 files changed, 188 insertions(+), 89 deletions(-)
diff --git a/ietf/settings.py b/ietf/settings.py
index e6256f8a7..253ddd531 100644
--- a/ietf/settings.py
+++ b/ietf/settings.py
@@ -487,7 +487,7 @@ except ImportError:
# See https://django-bootstrap5.readthedocs.io/en/latest/settings.html
BOOTSTRAP5 = {
# Label class to use in horizontal forms
- 'horizontal_label_class': 'col-md-2',
+ 'horizontal_label_class': 'col-md-2 fw-bold',
# Field class to use in horiozntal forms
'horizontal_field_class': 'col-md-10',
diff --git a/ietf/static/js/ietf.js b/ietf/static/js/ietf.js
index 74b55b259..15001629d 100644
--- a/ietf/static/js/ietf.js
+++ b/ietf/static/js/ietf.js
@@ -35,8 +35,7 @@ function dropdown_hover() {
if (!("ontouchstart" in document.documentElement)) {
$("ul.nav li.dropdown, ul.nav li.dropend")
- .on("mouseenter", dropdown_hover)
- .on("mouseleave", dropdown_hover);
+ .on("mouseenter mouseleave", dropdown_hover);
}
// load data for the menu
@@ -75,4 +74,85 @@ $.ajax({
attachTo.append(menu.join(""));
}
}
-});
\ No newline at end of file
+});
+
+// This used to be in doc-search.js; consolidate all JS in one file.
+$(document)
+ .ready(function () {
+ // search form
+ var form = $("#search_form");
+
+ function anyAdvancedActive() {
+ var advanced = false;
+ var by = form.find("input[name=by]:checked");
+
+ if (by.length > 0) {
+ by.closest(".search_field")
+ .find("input,select")
+ .not("input[name=by]")
+ .each(function () {
+ if (String.prototype.trim(this.value)) {
+ advanced = true;
+ }
+ });
+ }
+
+ var additional_doctypes = form.find("input.advdoctype:checked");
+ if (additional_doctypes.length > 0) {
+ advanced = true;
+ }
+ return advanced;
+ }
+
+ function toggleSubmit() {
+ var nameSearch = $("#id_name")
+ .val()
+ .trim();
+ form.find("button[type=submit]")
+ .get(0)
+ .disabled = !nameSearch && !anyAdvancedActive();
+ }
+
+ function updateAdvanced() {
+ form.find("input[name=by]:checked")
+ .closest(".search_field")
+ .find("input,select")
+ .not("input[name=by]")
+ .each(function () {
+ this.disabled = false;
+ this.focus();
+ });
+
+ form.find("input[name=by]")
+ .not(":checked")
+ .closest(".search_field")
+ .find("input,select")
+ .not("input[name=by]")
+ .each(function () {
+ this.disabled = true;
+ });
+
+ toggleSubmit();
+ }
+
+ if (form.length > 0) {
+ form.find(".search_field input[name=by]")
+ .closest(".search_field")
+ .find("label,input")
+ .on("click", updateAdvanced);
+
+ form.find(".search_field input,select")
+ .on("change click keyup", toggleSubmit);
+
+ form.find(".toggle_advanced")
+ .on("click", function () {
+ var advanced = $(this)
+ .next();
+ advanced.find('.search_field input[type="radio"]')
+ .attr("checked", false);
+ updateAdvanced();
+ });
+
+ updateAdvanced();
+ }
+ });
\ No newline at end of file
diff --git a/ietf/templates/doc/frontpage.html b/ietf/templates/doc/frontpage.html
index 653507002..f4b3451cb 100644
--- a/ietf/templates/doc/frontpage.html
+++ b/ietf/templates/doc/frontpage.html
@@ -1,40 +1,45 @@
-{% extends "base.html" %}
{# Copyright The IETF Trust 2015, All Rights Reserved #}
+
+{% extends "base.html" %}
+
{% load origin %}
{% load static %}
-{% block title %}IETF Datatracker{% if server_mode != "production" %} -- Development Mode{% endif %}{% endblock %}
+
+{% block title %}
+ IETF Datatracker
+ {% if server_mode != "production" %}
+ – {{ server_mode|capfirst }} Mode
+ {% endif %}
+{% endblock %}
{% block content %}
{% origin %}
<div class="row">
<div class="col-md-12">
- <div class="text-center padded">
- <img class="ietflogo" src="{% static 'ietf/images/ietflogo.png' %}" alt="IETF">
+ <div class="text-center p-5">
+ <img class="ietflogo p-3" src="{% static 'ietf/images/ietflogo.png' %}" alt="IETF">
+
{% if server_mode != "production" %}
- <h1 style="color:#ff0000">Datatracker -- {{ server_mode|capfirst }} Mode</h1>
+ <h1 class="text-danger">Datatracker – {{ server_mode|capfirst }} Mode</h1>
{% else %}
<h1>Datatracker</h1>
{% endif %}
- <p class="center-block">
+ <p>
The IETF Datatracker is the day-to-day front-end to the IETF database for people
who work on IETF standards.<br/>
It contains data about the documents, working groups,
meetings, agendas, minutes, presentations, and more, of the IETF.
-
</p>
- <p class="center-block">
-
+ <p>
The primary public face of the IETF is at <a href="https://www.ietf.org/">www.ietf.org</a>.
-
</p>
</div>
- <div class="padded">
+ <div class="p-5">
<h2>IETF Document Search</h2>
{% include "doc/search/search_form.html" %}
</div>
</div>
</div>
-
-{% endblock content %}
+{% endblock content %}
\ No newline at end of file
diff --git a/ietf/templates/doc/search/search.html b/ietf/templates/doc/search/search.html
index ec55d35d9..2db4f4db2 100644
--- a/ietf/templates/doc/search/search.html
+++ b/ietf/templates/doc/search/search.html
@@ -10,14 +10,10 @@
{% block content %}
{% origin %}
- <div class="col-sm-11 col-md-11 col-lg-11">
+ <a href="/doc/stats/newrevisiondocevent?{{queryargs}}" class="icon-link float-end">
+ <i class="bi bi-bar-chart-line"></i>
+ </a>
<h1>Document Search</h1>
- </div>
- <div class="col-sm-1 col-md-1 col-lg-1 text-right">
- <h1><a href="/doc/stats/newrevisiondocevent?{{queryargs}}" class="icon-link"> <span class="small bi bi-bar-chart-line"> </span></a></h1>
- </div>
-
-
{% include "doc/search/search_form.html" %}
{% if meta.searching %}
@@ -27,4 +23,4 @@
{% block js %}
<script src="{% static "ietf/js/datatables.js" %}"></script>
-{% endblock %}
+{% endblock %}
\ No newline at end of file
diff --git a/ietf/templates/doc/search/search_form.html b/ietf/templates/doc/search/search_form.html
index bb12ec7aa..400fa755c 100644
--- a/ietf/templates/doc/search/search_form.html
+++ b/ietf/templates/doc/search/search_form.html
@@ -1,11 +1,11 @@
-{# Copyright The IETF Trust 2015, All Rights Reserved #}{% load origin %}{% origin %}
+{# Copyright The IETF Trust 2015, All Rights Reserved #}
+
+{% load origin %}{% origin %}
{% load widget_tweaks %}
{% load ietf_filters %}
-{% load django_bootstrap5 %}
-
-{% bootstrap_form form layout="horizontal" %}
<form id="search_form" class="form-horizontal" action="{% url 'ietf.doc.views_search.search' %}">
+ {% csrf_token %}
<div class="input-group search_field">
{{ form.name|add_class:"form-control"|attr:"placeholder:Document name/title/RFC number" }}
@@ -19,126 +19,138 @@
{{ form.sort }} {# hidden field #}
- <p class="text-center">
- <a href="https://www.ietf.org/search">Search page for www.ietf.org website</a>
- |
- <a href="https://mailarchive.ietf.org">Search page for IETF mail list archives</a>
- </p>
-
- <div class="accordion" id="accordion1">
+ <div class="accordion pt-3" id="search-accordion">
<div class="accordion-item">
- <div class="accordion-header">
- <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-parent="#accordion1" href="#searchcollapse">
+ <h2 class="accordion-header" id="search-heading">
+ <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#search-collapse" aria-expanded="false" aria-controls="search-collapse">
Additional search criteria
</button>
- </div>
- <div id="searchcollapse" class="accordion-collapse collapse visible-nojs">
+ </h2>
+ <div id="search-collapse" class="accordion-collapse collapse" aria-labelledby="search-heading" data-bs-parent="#search-accordion">
<div class="accordion-body">
- <div class="form-group">
+
+ <div class="row mb-3 search_field">
<div class="col-sm-4">
- <label class="control-label">Document Type</label>
+ <label class="form-label fw-bold">Document Type</label>
</div>
- <div class="col-sm-8 search_field">
- <div class="checkbox">
- <label class="control-label" for="id_rfcs">{{ form.rfcs }} RFC</label>
+ <div class="col-sm-8">
+ <div class="form-check">
+ {{ form.rfcs|add_class:"form-check-input" }}
+ <label class="form-check-label" for="id_rfcs"> RFC</label>
</div>
- <div class="checkbox">
- <label class="control-label" for="id_activedrafts">{{ form.activedrafts }} Internet-Draft (active)</label>
+ <div class="form-check">
+ {{ form.activedrafts|add_class:"form-check-input" }}
+ <label class="form-check-label" for="id_activedrafts"> Internet-Draft (active)</label>
</div>
- <div class="checkbox">
- <label class="control-label" for="id_olddrafts">{{ form.olddrafts }} Internet-Draft (expired, replaced or withdrawn)</label>
+ <div class="form-check">
+ {{ form.olddrafts|add_class:"form-check-input advdoctype" }}
+ <label class="form-check-label" for="id_olddrafts"> Internet-Draft (expired, replaced or withdrawn)</label>
</div>
{% for value, label in form.fields.doctypes.choices %}
- <div class="checkbox">
- <label class="control-label" for="id_doctypes_{{ value }}">
- <input type="checkbox" class="advdoctype" {% if value in form.doctypes.value %}checked{% endif %} name="doctypes" value="{{ value }}" id="id_doctypes_{{ value }}" />{{ label|safe|capfirst_allcaps}}
- </label>
+ <div class="form-check">
+ <input type="checkbox" class="form-check-input" {% if value in form.doctypes.value %}checked{% endif %} name="doctypes" value="{{ value }}" id="id_doctypes_{{ value }}" />
+ <label class="form-check-label" for="id_doctypes_{{ value }}">{{ label|safe|capfirst_allcaps}}</label>
+
</div>
{% endfor %}
</div>
</div>
- <div class="form-group search_field">
+ <div class="row mb-3 search_field">
<div class="col-sm-4">
- <input type="radio" name="by" value="author" {% if form.by.value == "author" %}checked{% endif %} id="author" />
- <label for="author" class="control-label">Author Name or Affiliation</label>
+ <div class="form-check">
+ <input type="radio" class="form-check-input" name="by" value="author" {% if form.by.value == "author" %}checked{% endif %} id="author" />
+ <label for="author" class="form-check-label fw-bold">Author or Affiliation Name</label>
+ </div>
</div>
<div class="col-sm-8">
- {{ form.author|add_class:"form-control" }}
+ {{ form.author|add_class:"form-select" }}
</div>
</div>
- <div class="form-group search_field">
+ <div class="row mb-3 search_field">
<div class="col-sm-4">
- <input type="radio" name="by" value="group" {% if form.by.value == "group" %}checked{% endif %} id="group" />
- <label for="group" class="control-label">WG</label>
+ <div class="form-check">
+ <input type="radio" class="form-check-input" name="by" value="group" {% if form.by.value == "group" %}checked{% endif %} id="group" />
+ <label for="group" class="form-check-label fw-bold">WG</label>
+ </div>
</div>
<div class="col-sm-8">
- {{ form.group|add_class:"form-control" }}
+ {{ form.group|add_class:"form-select" }}
</div>
</div>
- <div class="form-group search_field">
+ <div class="row mb-3 search_field">
<div class="col-sm-4">
- <input type="radio" name="by" value="area" {% if form.by.value == "area" %}checked{% endif %} id="area" />
- <label for="area" class="control-label">Area</label>
+ <div class="form-check">
+ <input type="radio" class="form-check-input" name="by" value="area" {% if form.by.value == "area" %}checked{% endif %} id="area" />
+ <label for="area" class="form-check-label fw-bold">Area</label>
+ </div>
</div>
<div class="col-sm-8">
- {{ form.area|add_class:"form-control" }}
+ {{ form.area|add_class:"form-select" }}
</div>
</div>
- <div class="form-group search_field">
+ <div class="row mb-3 search_field">
<div class="col-sm-4">
- <input type="radio" name="by" value="ad" {% if form.by.value == "ad" %}checked{% endif %} id="areadir" />
- <label for="areadir" class="control-label">AD</label>
+ <div class="form-check">
+ <input type="radio" class="form-check-input" name="by" value="ad" {% if form.by.value == "ad" %}checked{% endif %} id="areadir" />
+ <label for="areadir" class="form-check-label fw-bold">AD</label>
+ </div>
</div>
<div class="col-sm-8">
- {{ form.ad|add_class:"form-control" }}
+ {{ form.ad|add_class:"form-select" }}
</div>
</div>
- <div class="form-group search_field">
+ <div class="row mb-3 search_field">
<div class="col-sm-4">
- <input type="radio" name="by" value="state" {% if form.by.value == "state" %}checked{% endif %} id="state" />
- <label for="state" class="control-label">IESG State</label>
+ <div class="form-check">
+ <input type="radio" class="form-check-input" name="by" value="state" {% if form.by.value == "state" %}checked{% endif %} id="state" />
+ <label for="state" class="form-check-label fw-bold">IESG State</label>
+ </div>
</div>
<div class="col-sm-4">
- {{ form.state|add_class:"form-control col-sm-4" }}
+ {{ form.state|add_class:"form-select col-sm-4" }}
</div>
<div class="col-sm-4">
- {{ form.substate|add_class:"form-control" }}
+ {{ form.substate|add_class:"form-select" }}
</div>
</div>
- <div class="form-group search_field">
+ <div class="row mb-3 search_field">
<div class="col-sm-4">
- <input type="radio" name="by" value="irtfstate" {% if form.by.value == "irtfstate" %}checked{% endif %} id="irtfstate" />
- <label for="irtfstate" class="control-label">IRTF State</label>
+ <div class="form-check">
+ <input type="radio" class="form-check-input" name="by" value="irtfstate" {% if form.by.value == "irtfstate" %}checked{% endif %} id="irtfstate" />
+ <label for="irtfstate" class="form-check-label fw-bold">IRTF State</label>
+ </div>
</div>
<div class="col-sm-8">
- {{ form.irtfstate|add_class:"form-control" }}
+ {{ form.irtfstate|add_class:"form-select" }}
</div>
</div>
- <div class="form-group search_field">
+ <div class="row mb-3 search_field">
<div class="col-sm-4">
- <input type="radio" name="by" value="stream" {% if form.by.value == "stream" %}checked{% endif %} id="stream" />
- <label for="stream" class="control-label">Stream</label>
+ <div class="form-check">
+ <input type="radio" class="form-check-input" name="by" value="stream" {% if form.by.value == "stream" %}checked{% endif %} id="stream" />
+ <label for="stream" class="form-check-label fw-bold">Stream</label>
+ </div>
</div>
- <div class="col-sm-4">
- {{ form.stream|add_class:"form-control" }}
+ <div class="col-sm-8">
+ {{ form.stream|add_class:"form-select" }}
</div>
</div>
- <div class="form-group search_field">
- <div class="col-md-offset-4 col-sm-4">
- <button class="btn btn-primary btn-block" type="reset">Clear</button>
+ <div class="row mb-3 search_field">
+ <div class="offset-sm-4 col-sm-4 d-grid">
+ <button class="btn btn-primary" type="reset">Clear</button>
</div>
- <div class="col-sm-4">
- <button class="btn btn-primary btn-block" type="submit">
+ <div class="col-sm-4 d-grid">
+ <button class="btn btn-primary" type="submit">
<span class="bi bi-search"></span>
Search
</button>
@@ -148,4 +160,10 @@
</div>
</div>
</div>
-</form>
\ No newline at end of file
+</form>
+
+<p class="text-center pt-3">
+ <a href="https://www.ietf.org/search">Search page for www.ietf.org website</a>
+ |
+ <a href="https://mailarchive.ietf.org">Search page for IETF mail list archives</a>
+</p>
\ No newline at end of file