Archives/gristlabs_grist-core
1
0
Fork 0
mirror of https://github.com/gristlabs/grist-core.git synced 2024-10-27 20:44:07 +00:00
Code Issues Projects Releases Wiki Activity

(core) Expanding search textbox to full height.

Browse Source 
Summary: Expanding search input field to full available height, to make the clickable area bigger.

Test Plan: Manual tests on browserstack

Reviewers: paulfitz

Reviewed By: paulfitz

Differential Revision: https://phab.getgrist.com/D3145
This commit is contained in:
Jarosław Sadziński 2021-11-18 17:21:53 +01:00
parent 05eb7afcb6
commit 745ddc21ac
1 changed files with 3 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/client/ui2018/search.ts
View File

@ -24,7 +24,7 @@ const searchWrapper = styled('div', `
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid transparent; border: 1px solid transparent;
padding: 16px; padding: 0px 16px;
width: 50px; width: 50px;
height: 100%; height: 100%;
max-height: 50px; max-height: 50px;
@ -48,6 +48,7 @@ const expandedSearch = styled('div', `
align-items: center; align-items: center;
width: 0; width: 0;
opacity: 0; opacity: 0;
align-self: stretch;
transition: width ${EXPAND_TIME}s, opacity ${EXPAND_TIME / 2}s ${EXPAND_TIME / 2}s; transition: width ${EXPAND_TIME}s, opacity ${EXPAND_TIME / 2}s ${EXPAND_TIME / 2}s;
.${searchWrapper.className}-expand > & { .${searchWrapper.className}-expand > & {
width: auto; width: auto;
@ -63,6 +64,7 @@ const searchInput = styled(input, `
padding: 0; padding: 0;
padding-left: 4px; padding-left: 4px;
box-sizing: border-box; box-sizing: border-box;
align-self: stretch;
width: 0; width: 0;
transition: width ${EXPAND_TIME}s; transition: width ${EXPAND_TIME}s;
.${searchWrapper.className}-expand & { .${searchWrapper.className}-expand & {