Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issue1724 autocomplete result list #1726

Merged
merged 11 commits into from
Dec 19, 2024
+28 −8
Merged

Issue1724 autocomplete result list #1726

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
349e00f
Pass the var search results size to JS
joelit Dec 17, 2024
78d69d7
Added comma
joelit Dec 17, 2024
cdaeb87
Scroll bar implementation based on bootstrap
joelit Dec 17, 2024
bb7963e
Tweaked the search autocomplete result background color
joelit Dec 17, 2024
7cb98ec
Tweaked the autocomplete search result list width
joelit Dec 17, 2024
6ea938a
Search bar drowpown list height in CSS
joelit Dec 18, 2024
622ae67
Removed unused JS variable
joelit Dec 18, 2024
d89d277
Added tests for autocomplete list scroll bar
joelit Dec 18, 2024
606df46
Don't let the search field to be drawn on top of the search button in…
joelit Dec 19, 2024
bde637f
Fixed intendation
joelit Dec 19, 2024
d7c0e14
Removed unnecessary style definition
joelit Dec 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion resource/css/skosmos.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
--sidebar-scrollbar-bg: var(--light-color);
--sidebar-scrollbar-thumb: var(--secondary-medium-color);
--search-bg: var(--white-color);
--search-dropdown-bg: var(--light-color);
--search-border: var(--medium-color);
--search-button-bg: var(--dark-color);
--search-button-text: var(--white-color);
Expand Down Expand Up @@ -204,6 +205,7 @@ body {
}

#search-wrapper {
display: flex;
joelit marked this conversation as resolved.
Show resolved Hide resolved
color: var(--headerbar-text-2);
float: right;
height: 3.5em;
Expand Down Expand Up @@ -271,7 +273,7 @@ body {

#search-wrapper .dropdown-menu {
transform: translateY(-1px);
background-color: var(--search-bg);
background-color: var(--search-dropdown-bg);
color: var(--headerbar-text-2);
border: 1px solid var(--search-border);
border-radius: 0;
Expand All @@ -280,6 +282,8 @@ body {
#search-wrapper ul {
padding-top: 0rem;
padding-bottom: 0rem;
max-height: 50vh;
overflow-y: auto;
}

#search-wrapper .autocomplete {
Expand Down
16 changes: 9 additions & 7 deletions resource/js/vocab-search.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -264,16 +264,18 @@ const vocabSearch = Vue.createApp({
@input="autoComplete()"
@keyup.enter="gotoSearchPage()"
@click="showAutoComplete()">
<ul id="search-autocomplete-results" class="dropdown-menu" :class="{ 'show': showDropdown }"
aria-labelledby="search-field">
<ul id="search-autocomplete-results"
class="dropdown-menu w-100"
:class="{ 'show': showDropdown }"
aria-labelledby="search-field">
<li class="autocomplete-result container" v-for="result in renderedResultsList"
:key="result.prefLabel" >
<template v-if="result.pageUrl">
<a :href=result.pageUrl>
<div class="row pb-1">
<div class="col" v-if="result.hitType == 'hidden'">
<span class="result">
<template v-if="result.showNotation">
<template v-if="result.showNotation && result.notation">
{{ result.notation }}&nbsp;
</template>
<template v-if="result.hit.hasOwnProperty('match')">
Expand All @@ -287,7 +289,7 @@ const vocabSearch = Vue.createApp({
<div class="col" v-else-if="result.hitType == 'alt'">
<span>
<i>
<template v-if="result.showNotation">
<template v-if="result.showNotation && result.notation">
{{ result.notation }}&nbsp;
</template>
<template v-if="result.hit.hasOwnProperty('match')">
Expand All @@ -299,7 +301,7 @@ const vocabSearch = Vue.createApp({
</i>
</span>
<span> &rarr;&nbsp;<span class="result">
<template v-if="result.showNotation">
<template v-if="result.showNotation && result.notation">
{{ result.notation }}&nbsp;
</template>
<template v-if="result.hitPref.hasOwnProperty('match')">
Expand All @@ -321,12 +323,12 @@ const vocabSearch = Vue.createApp({
</template>
</span>
<span>
&nbsp;{{ result.prefLabel }}
{{ result.prefLabel }}
</span>
</div>
<div class="col" v-else-if="result.hitType == 'pref'">
<span class="result">
<template v-if="result.showNotation">
<template v-if="result.showNotation && result.notation">
{{ result.notation }}&nbsp;
</template>
<template v-if="result.hit.hasOwnProperty('match')">
Expand Down
15 changes: 15 additions & 0 deletions tests/cypress/template/vocab-search-bar.cy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -194,6 +194,21 @@ describe('Vocab search bar', () => {
cy.get('li').last().find('b').eq(0).should('have.text', '51')
})
})
it('Long autocomplete result list should have a scroll bar', () => {
// go to YSO vocab front page
cy.visit('/yso/fi/')

// resize the window to smaller size
cy.viewport(1200, 600)

// type a search term and wait for the autocomplete to appear
cy.get('#search-field').type('mu')
cy.get('#search-autocomplete-results').should('be.visible')

// the result list should have a CSS-based scroll
cy.get('#search-autocomplete-results').should('have.css', 'overflow-y', 'auto')
cy.get('#search-autocomplete-results').should('have.css', 'max-height', '300px')
});
});

describe('Cookie Management', () => {
Expand Down
Loading