Skip to content

Commit 3eb7f1a

Browse files
cregourdcregourd
authored
Make search responsive + Current package search (#933)
## Issue #928 ## Changes - [x] Fix mobile design for search - [x] Add a row to allow search in current - [x] Hide form on search block, display just button `Search` - [x] Fix empty scope in search params ## Screenshot ### New row <img width="808" alt="image" src="https://github.com/user-attachments/assets/066885b1-0206-4617-aa7c-47fff282c2b6" /> ### New implementation of search block <img width="1131" alt="image" src="https://github.com/user-attachments/assets/b8602e92-262c-401d-ab86-fd68b25201f2" /> > ⚠️ HTML structure have been changed, this involves a build
1 parent a049d83 commit 3eb7f1a

File tree

56 files changed

+229
-254
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+229
-254
lines changed

‎packages/typo3-api/template/components/header.html.twig‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
<option value="">Search all</option>
2525
</select>
2626
<input autocomplete="off" class="form-control shadow-none" id="globalsearchinput" name="q" placeholder="TYPO3 documentation..." type="text" value="">
27-
<button class="btn btn-light search__submit" type="submit"><i class="fa fa-search"></i>&nbsp;<span class="d-none d-md-inline">Search</span></button>
27+
<button class="btn btn-light" type="submit"><i class="fa fa-search"></i>&nbsp;<span class="d-none d-md-inline">Search</span></button>
2828
</div>
2929
</form>
3030
</search>

‎packages/typo3-docs-theme/assets/js/search.js‎

Lines changed: 12 additions & 12 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/typo3-docs-theme/assets/sass/components/_search.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,10 @@
8080
background: transparent;
8181
padding: 0;
8282
flex-grow: 1;
83+
max-width: 100%;
84+
overflow: hidden;
85+
text-overflow: ellipsis;
86+
white-space: nowrap;
8387

8488
&:focus {
8589
outline: none;

‎packages/typo3-docs-theme/assets/sass/layout/_search.scss‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,4 @@
11
.search__scope {
22
flex: .4 !important;
33
}
4-
.search__submit {
5-
&:hover {
6-
background: $gray-200;
7-
outline: 2px solid $secondary;
8-
}
9-
}
4+

‎packages/typo3-docs-theme/assets/sass/layout/_structure.scss‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -29,16 +29,9 @@
2929
.menu-search-wrapper {
3030
display: flex;
3131
align-items: center;
32+
justify-content: end;
3233
gap: 0.4em;
33-
34-
search {
35-
flex-grow: 1;
36-
}
37-
38-
@media screen and (max-width: 576px) {
39-
flex-direction: column;
40-
align-items: start;
41-
}
34+
height: 100%;
4235
}
4336

4437
/**

‎packages/typo3-docs-theme/resources/js/components/GlobalSearch.jsx‎

Lines changed: 17 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,28 @@
11
import React, { useEffect, useState } from 'react';
22
import SearchModal from './SearchModal';
33

4-
const GlobalSearch = () => {
4+
const GlobalSearch = ({ displayInput = false }) => {
55
const [isModalOpen, setIsModalOpen] = useState(false);
6+
const [searchQuery, setSearchQuery] = useState('');
67

7-
const handleInputClick = () => {
8-
setIsModalOpen(true);
9-
};
8+
useEffect(() => {
9+
const url = new URL(window.location.href);
10+
const queryParam = url.searchParams.get('q');
11+
if (queryParam) {
12+
setSearchQuery(queryParam);
13+
}
14+
}, []);
1015

1116
const handleButtonClick = (e) => {
1217
e.preventDefault();
1318
setIsModalOpen(true);
1419
};
1520

1621
useEffect(() => {
17-
let globalSearchInput = document.getElementById('globalsearchinput');
18-
let globalSearchButton = document.querySelector('#global-search-form button');
19-
20-
if (!globalSearchInput) {
21-
globalSearchInput = document.getElementById('searchinput');
22+
const form = document.getElementById('global-search-form');
23+
if (form) {
24+
form.hidden = true;
2225
}
23-
24-
if (globalSearchInput) {
25-
globalSearchInput.addEventListener('click', handleInputClick);
26-
}
27-
28-
if (globalSearchButton) {
29-
globalSearchButton.addEventListener('click', handleButtonClick);
30-
globalSearchButton.classList.add('here');
31-
}
32-
33-
return () => {
34-
if (globalSearchInput) {
35-
globalSearchInput.removeEventListener('click', handleInputClick);
36-
}
37-
if (globalSearchButton) {
38-
globalSearchButton.removeEventListener('click', handleButtonClick);
39-
globalSearchButton.classList.remove('here');
40-
}
41-
};
4226
}, []);
4327

4428
return (
@@ -47,6 +31,11 @@ const GlobalSearch = () => {
4731
isOpen={isModalOpen}
4832
onClose={() => setIsModalOpen(false)}
4933
/>}
34+
{displayInput ? <div class="input-group mb-3 mt-sm-3" onClick={handleButtonClick}>
35+
<input autocomplete="off" class="form-control shadow-none" id="globalsearchinput" name="q" placeholder="TYPO3 documentation..." type="text" value={searchQuery}></input>
36+
<button class="btn btn-light"><i class="fa fa-search"></i>&nbsp;<span class="d-none d-md-inline">Search</span></button>
37+
</div> :
38+
<button onClick={handleButtonClick} class="btn btn-light"><i class="fa fa-search"></i>&nbsp;<span class="d-none d-md-inline">Search</span></button>}
5039
</>
5140
);
5241
};

‎packages/typo3-docs-theme/resources/js/components/SearchModal.jsx‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import SuggestRow from './SuggestRow';
77
const SearchModal = ({ isOpen, onClose }) => {
88
const [searchQuery, setSearchQuery] = useState('');
99
const [scopes, setScopes] = useSearchScopes();
10+
const [currentScopes, setCurrentScopes] = useState([]);
1011
const [activeIndex, setActiveIndex] = useState(-1);
1112
const suggestionsRef = useRef([]);
1213
const inputRef = useRef();
@@ -20,6 +21,17 @@ const SearchModal = ({ isOpen, onClose }) => {
2021
fetchSuggestions
2122
} = useSearchSuggestions();
2223

24+
useEffect(() => {
25+
const select = document.getElementById('searchscope');
26+
const currentScopeValue = select?.children?.[1]?.value ?? null;
27+
if (currentScopeValue) {
28+
const packageName = currentScopeValue.split('/').slice(1, 3).join('/');
29+
const version = currentScopeValue.split('/').slice(3, 4)[0]?.split('.')[0];
30+
setCurrentScopes([{ type: 'manual', title: packageName, slug: packageName }, { type: 'version', title: version }]);
31+
}
32+
33+
}, []);
34+
2335
useEffect(() => {
2436
const url = new URL(window.location.href);
2537
const queryParam = url.searchParams.get('q');
@@ -88,9 +100,18 @@ const SearchModal = ({ isOpen, onClose }) => {
88100
tooltip: 'Search all',
89101
href: buildHref([], searchQuery)
90102
});
103+
104+
if (currentScopes.length > 0) {
105+
decomposed.push({
106+
scopes: currentScopes,
107+
title: searchQuery,
108+
tooltip: 'Search in current',
109+
href: buildHref(currentScopes, searchQuery)
110+
});
111+
}
91112
}
92113
return decomposed;
93-
}, [scopes, searchQuery, buildHref]);
114+
}, [scopes, searchQuery, buildHref, currentScopes]);
94115

95116
const handleScopeSelect = useCallback((title, type, slug) => {
96117
setScopes(prevScopes => {

‎packages/typo3-docs-theme/resources/js/hooks/useSearchScopes.js‎

Lines changed: 17 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,28 @@
1-
import { useState, useEffect } from 'react';
1+
import { useEffect, useState } from 'react';
22

33
export const useSearchScopes = () => {
44
const [scopes, setScopes] = useState([]);
5-
const [currentScope, setCurrentScope] = useState(null);
6-
7-
useEffect(() => {
8-
const select = document.getElementById('searchscope');
9-
10-
const scope = (event) => {
11-
const slug = event.target.value.split('/').filter(Boolean).join('/');
12-
setCurrentScope(slug);
13-
};
14-
15-
select?.addEventListener('change', scope);
16-
setCurrentScope(select?.value);
17-
18-
return () => {
19-
select?.removeEventListener('change', scope);
20-
};
21-
}, []);
225

236
useEffect(() => {
247
const initialScopes = [];
25-
26-
if (currentScope) {
27-
const packageName = currentScope.split('/').slice(1, 3).join('/');
28-
const version = currentScope.split('/').slice(3, 4)[0]?.split('.')[0];
29-
initialScopes.push({ type: 'manual', title: packageName, slug: currentScope });
30-
initialScopes.push({ type: 'version', title: version });
31-
} else {
32-
const url = new URL(window.location.href);
33-
url.searchParams?.forEach((value, key) => {
34-
if (key === 'scope') {
35-
const slug = decodeURIComponent(value).split('/').filter(Boolean).join('/');
36-
const packageName = slug.split('/').slice(1, 3).join('/');
37-
initialScopes.push({ type: 'manual', title: packageName, slug });
38-
} else if (key.startsWith('filters[')) {
39-
const filterExp = new RegExp(/filters\[(.*?)\]\[(.*?)\]/);
40-
const [, type, filterValue] = key.match(filterExp);
41-
initialScopes.push({
42-
type: type === 'optionsaggs' ? 'option' : type,
43-
title: filterValue
44-
});
45-
}
46-
});
47-
}
8+
const url = new URL(window.location.href);
9+
url.searchParams?.forEach((value, key) => {
10+
if (key === 'scope' && value) {
11+
const slug = decodeURIComponent(value).split('/').filter(Boolean).join('/');
12+
const packageName = slug.split('/').slice(1, 3).join('/');
13+
initialScopes.push({ type: 'manual', title: packageName, slug });
14+
} else if (key.startsWith('filters[')) {
15+
const filterExp = new RegExp(/filters\[(.*?)\]\[(.*?)\]/);
16+
const [, type, filterValue] = key.match(filterExp);
17+
initialScopes.push({
18+
type: type === 'optionsaggs' ? 'option' : type,
19+
title: filterValue
20+
});
21+
}
22+
});
4823

4924
setScopes(initialScopes);
50-
}, [currentScope]);
25+
}, []);
5126

5227
return [scopes, setScopes];
5328
};

‎packages/typo3-docs-theme/resources/js/search.jsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,12 @@ document.addEventListener('DOMContentLoaded', () => {
88
const container = document.getElementById('global-search-root');
99
if (container) {
1010
const root = createRoot(container);
11-
root.render(<GlobalSearch />);
11+
root.render(<GlobalSearch/>);
12+
}
13+
14+
const resultsContainer = document.getElementById('global-search-results');
15+
if (resultsContainer) {
16+
const root = createRoot(resultsContainer);
17+
root.render(<GlobalSearch displayInput={true} />);
1218
}
1319
});

‎packages/typo3-docs-theme/resources/public/css/theme.css‎

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -27197,6 +27197,10 @@ figure.uml-diagram {
2719727197
background: transparent;
2719827198
padding: 0;
2719927199
flex-grow: 1;
27200+
max-width: 100%;
27201+
overflow: hidden;
27202+
text-overflow: ellipsis;
27203+
white-space: nowrap;
2720027204
}
2720127205
.search-modal__input:focus {
2720227206
outline: none;
@@ -28188,11 +28192,6 @@ header {
2818828192
flex: 0.4 !important;
2818928193
}
2819028194

28191-
.search__submit:hover {
28192-
background: rgb(242.25, 242.25, 242.25);
28193-
outline: 2px solid #333333;
28194-
}
28195-
2819628195
.page {
2819728196
display: flex;
2819828197
flex-direction: column;
@@ -28227,16 +28226,9 @@ header {
2822728226
.menu-search-wrapper {
2822828227
display: flex;
2822928228
align-items: center;
28229+
justify-content: end;
2823028230
gap: 0.4em;
28231-
}
28232-
.menu-search-wrapper search {
28233-
flex-grow: 1;
28234-
}
28235-
@media screen and (max-width: 576px) {
28236-
.menu-search-wrapper {
28237-
flex-direction: column;
28238-
align-items: start;
28239-
}
28231+
height: 100%;
2824028232
}
2824128233

2824228234
/**

0 commit comments

Comments
 (0)