From 16fd9b6020306b70284ca6e1540f84566c938b28 Mon Sep 17 00:00:00 2001 From: Arlen Johnson Date: Tue, 13 Dec 2022 12:57:27 -0700 Subject: [PATCH] Move global search to a single search input. Display results in a grid within accordions. (CFM-220) (#63) --- app/resources/locales/en_US/field.po | 9 ++ app/templates/Dashboards/search.php | 174 ++++++++++--------------- app/templates/element/javascript.php | 29 ++--- app/templates/element/searchGlobal.php | 37 +++++- app/webroot/css/co-base.css | 48 +++---- app/webroot/css/co-responsive.css | 29 ++--- 6 files changed, 158 insertions(+), 168 deletions(-) diff --git a/app/resources/locales/en_US/field.po b/app/resources/locales/en_US/field.po index 07110a128..7680d2404 100644 --- a/app/resources/locales/en_US/field.po +++ b/app/resources/locales/en_US/field.po @@ -281,6 +281,15 @@ msgstr "Required" msgid "room" msgstr "Room" +msgid "search.global" +msgstr "Global search" + +msgid "search.global.submit" +msgstr "Submit global search" + +msgid "search.global.clear" +msgstr "Clear global search" + msgid "search.placeholder" msgstr "Search..." diff --git a/app/templates/Dashboards/search.php b/app/templates/Dashboards/search.php index 42050bd1f..54089d826 100644 --- a/app/templates/Dashboards/search.php +++ b/app/templates/Dashboards/search.php @@ -40,65 +40,10 @@
-

+

-
- Form->create(null, $options); - print $this->Form->hidden('co_id', ['default' => $vv_cur_co->id]); - ?> -
- Form->label( - 'q', - __d('operation','search'), - [ - 'class' => 'visually-hidden' - ] - ); - print $this->Form->input( - 'q', - [ - 'id' => 'q', - 'class' => 'form-control', - 'placeholder' => __d('field','search.placeholder') - ] - ); - print $this->Form->button( - 'close', - ['type' => 'button', 'escapeTitle' => false, 'id' => 'search-clear', 'class' => 'btn btn-link'] - ); - print $this->Form->button( - __d('operation','search'), - ['type' => 'submit', 'escapeTitle' => false, 'class' => 'btn btn-primary btn-sm'] - ); - ?> -
- Form->end(); - ?> - - -
- - -
-
- - -
-
*/ ?> - - -

-
Flash->render() ?> @@ -126,69 +71,84 @@
  • - + + +
  • - + + +
    • -
    +
    -
    -

    -
      - - $matches): ?> - \Cake\Utility\Inflector::dasherize($pm), - 'action' => 'edit', - $pkey - ]; - // The same entity can match on more than one searchable model - ?> - - $entity): ?> - $displayField; - - // If we match on a related model (for example PersonRoles for People) - // indicate what actually matched - $matchInfo = __d('result', 'search.result.id', $pkey); - - // Do we have a more informative string to render? - if(!empty($entity->person->primary_name->full_name)) { - $displayString = $entity->person->primary_name->full_name; - - $matchInfo = __d('result', 'search.result.related', $displayLabel, $entity->$displayField, $pkey); - } elseif(!empty($entity->group->name)) { - $displayString = $entity->group->name; - - $matchInfo = __d('result', 'search.result.related', $displayLabel, $displayString, $pkey); - } - ?> -
    • - -
      - -
      -
      - -
      -       -
      • - - -
    +
    +
    + +
    +
    +
    +
      + $matches): ?> + \Cake\Utility\Inflector::dasherize($pm), + 'action' => 'edit', + $pkey + ]; + // The same entity can match on more than one searchable model + ?> + + $entity): ?> + $displayField; + + // If we match on a related model (for example PersonRoles for People) + // indicate what actually matched + $matchInfo = __d('result', 'search.result.id', $pkey); + + // Do we have a more informative string to render? + if(!empty($entity->person->primary_name->full_name)) { + $displayString = $entity->person->primary_name->full_name; + + $matchInfo = __d('result', 'search.result.related', $displayLabel, $entity->$displayField, $pkey); + } elseif(!empty($entity->group->name)) { + $displayString = $entity->group->name; + + $matchInfo = __d('result', 'search.result.related', $displayLabel, $displayString, $pkey); + } + ?> +
    • + +
      + +
      +
      + +
      +       +
      • + + +
    +
    +
    diff --git a/app/templates/element/javascript.php b/app/templates/element/javascript.php index 3d7d50d9b..3482c912d 100644 --- a/app/templates/element/javascript.php +++ b/app/templates/element/javascript.php @@ -53,30 +53,29 @@ // SEARCH // Persistent search bar form: - $('#global-search form').submit(function () { - // Disallow submit on blank - if($.trim($('#global-search-q').val()) == '') { - return false; - } - }); - // Select search text on focus - $('#global-search-q').focus(function() { - $('#global-search-q').select(); - }); - - // Search page form: - $('#search').submit(function () { + $('#global-search form').submit(function() { // Disallow submit on blank if($.trim($('#q').val()) == '') { return false; } }); - $('#search-clear').click(function () { + $('#global-search-clear').click(function(e) { + e.stopPropagation(); $('#q').val(''); + $('#q').removeClass('hasValue'); $('#q').focus(); }); + // Select search text on focus $('#q').focus(function() { - $('#q').select(); + $(this).select(); + }); + // Hide and reveal clear button + $('#q').on('input', function(e) { + if($(this).val() != '') { + $(this).addClass('hasValue'); + } else { + $(this).removeClass('hasValue'); + } }); // TOP FILTER FORM diff --git a/app/templates/element/searchGlobal.php b/app/templates/element/searchGlobal.php index c44626838..cfbfff0e1 100644 --- a/app/templates/element/searchGlobal.php +++ b/app/templates/element/searchGlobal.php @@ -46,11 +46,42 @@ Form->create(null, $options); print $this->Form->hidden('co_id', ['default' => $vv_cur_co->id]); - print $this->Form->label('global-search-q', __d('field','search.placeholder'), ['class' => 'visually-hidden']); - print $this->Form->input('global-search-q',['id' => 'global-search-q', 'placeholder' => __d('field','search.placeholder')]); + print $this->Form->label( + 'q', + __d('field','search.global'), + ['class' => 'visually-hidden'] + ); + $globalSearchInputClass = ''; + if(!empty($this->request->getData('q'))) { + $globalSearchInputClass = 'hasValue'; + } + print $this->Form->input( + 'q', + [ + 'id' => 'q', + 'class' => $globalSearchInputClass, + 'placeholder' => __d('field','search.placeholder') + ] + ); + print $this->Form->button( + 'close', + [ + 'type' => 'button', + 'escapeTitle' => false, + 'id' => 'global-search-clear', + 'class' => 'btn btn-link', + 'aria-label' => __d('field','search.global.clear') + ] + ); print $this->Form->button( 'search', - ['type' => 'submit', 'escapeTitle' => false, 'id' => 'global-search-button', 'class' => 'btn btn-link btn-sm'] + [ + 'type' => 'submit', + 'escapeTitle' => false, + 'id' => 'global-search-button', + 'class' => 'btn btn-link btn-sm', + 'aria-label' => __d('field','search.global.submit') + ] ); print $this->Form->end(); ?> diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css index 2e9a40519..4a40bdb29 100644 --- a/app/webroot/css/co-base.css +++ b/app/webroot/css/co-base.css @@ -185,7 +185,7 @@ body.cos.select #top-bar { justify-content: space-between; padding: 1em; } -#global-search #global-search-q { /* search input */ +#global-search #q { /* search input */ padding-left: 0.5em; width: 100%; border-radius: 0; @@ -196,6 +196,16 @@ body.cos.select #top-bar { color: white; border-radius: 0 3px 3px 0; } +#global-search-clear { + display: none; /* will only appear if input holds a value */ + background-color: var(--cmg-color-blue-002); + border-radius: 0; + color: var(--cmg-color-white); + border-right: 1px dotted var(--cmg-color-gray-004); +} +#q.hasValue + #global-search-clear { + display: inline-block; +} #top-bar #global-search-toggle { display: flex; align-items: center; @@ -595,23 +605,6 @@ ul.form-list li.alert-banner .co-alert { margin-top: 1em; } /* SEARCH RESULTS */ -#search-container { - padding: 1em; - margin-bottom: 1em; - background-color: var(--cmg-color-lightgray-004); - border: 1px solid var(--cmg-color-lightgray-006); -} -#search-clear { - color: var(--cmg-color-gray-001); - text-decoration: none; - position: absolute; - right: 4.5em; -} -#search-results { - display: flex; - flex-wrap: wrap; - gap: 1em; -} #search-results-meta { padding: 0; } @@ -626,22 +619,16 @@ ul.form-list li.alert-banner .co-alert { #search-results-meta li:last-child:after { content: ""; } -#search-results h3 { - margin-bottom: 0.5em; -} #search-results ul.search-results-group { padding: 0; list-style: none; - display: flex; - flex-wrap: wrap; + display: grid; gap: 1em; + margin-bottom: 0; } #search-results li.search-result { - display: block; padding: 0; border: 1px dashed var(--cmg-color-lightgray-008); - flex: 1 1 10%; - min-width: 220px; } #search-results li.search-result a { display: block; @@ -660,6 +647,9 @@ ul.form-list li.alert-banner .co-alert { #search-results .search-result-match-info { font-size: 0.8em; } +#search-results .accordion-body { + padding: 1em; +} /* TOP FILTER */ .top-filters { margin-top: 0.5em; @@ -1521,7 +1511,7 @@ table.list-mode .read-only-link-container { background-color: var(--cmg-color-red-004); color: var(--cmg-color-white); } -.btn.link { +.btn-link { font-size: 1em; text-decoration: underline; color: var(--cmg-color-blue-002); @@ -1583,6 +1573,10 @@ table.list-mode .read-only-link-container { color: var(--cmg-color-gray-002); border: 1px solid var(--cmg-color-gray-002); } +/* Bootstrap Accordion */ +.accordion-button:not(.collapsed) { + background-color: var(--cmg-color-lightgray-001); +} /* FOOTER */ footer { text-align: center; diff --git a/app/webroot/css/co-responsive.css b/app/webroot/css/co-responsive.css index c9f02a59c..108d9b3cc 100644 --- a/app/webroot/css/co-responsive.css +++ b/app/webroot/css/co-responsive.css @@ -119,11 +119,6 @@ display: none; } /* CONTENT LAYOUT */ - #comanage-wrapper { - display: flex; - flex-direction: column; - height: 100vh; - } #main-wrapper { display: flex; flex-direction: row; @@ -155,16 +150,16 @@ padding: 0.5em 0.2em; } #global-search form { - padding: 0 0.5em; + padding: 0 0 0 0.5em; min-height: 30px; } - #global-search #global-search-q { + #global-search #q { flex: 1; width: auto; border: none; background-color: transparent; } - #global-search #global-search-q:focus-visible { + #global-search #q:focus-visible { outline: none; } #global-search button { @@ -184,15 +179,13 @@ #global-search button.visible { display: inline-block; } - /* SEARCH RESULTS */ - #search { - display: flex; - justify-content: space-between; - align-items: center; + #global-search #global-search-clear { + padding: 0 0.75em; + border-right: 1px dashed var(--cmg-color-lightgray-006); } - #search-results { - flex-wrap: nowrap; - gap: 2em; + /* SEARCH RESULTS */ + #search-results ul.search-results-group { + grid-template-columns: repeat(2,1fr); } #top-menu { z-index: 30; @@ -388,6 +381,10 @@ grid-template-columns: repeat(2,40px); grid-template-rows: repeat(2,40px); } + /* SEARCH RESULTS */ + #search-results ul.search-results-group { + grid-template-columns: repeat(4,1fr); + } } /* EXTRA LARGE */