diff options
| author | nb5p <[email protected]> | 2023-05-17 22:40:17 +0800 |
|---|---|---|
| committer | Larvan2 <[email protected]> | 2023-05-17 22:46:03 +0800 |
| commit | fea819eb5bb1ad9e63352b61a633fc63ed783248 (patch) | |
| tree | 82e6bc9c6919b76b4efeacaf632a6bfcf71326d8 /src/components | |
| parent | 65d6e2bd4fd0cc882c040d7c99a4581e2b950b96 (diff) | |
Merge pull request #39
* move conns filter to the top
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/Connections.module.scss | 15 | ||||
| -rw-r--r-- | src/components/Connections.tsx | 24 |
2 files changed, 28 insertions, 11 deletions
diff --git a/src/components/Connections.module.scss b/src/components/Connections.module.scss index 687322d..0195cb3 100644 --- a/src/components/Connections.module.scss +++ b/src/components/Connections.module.scss @@ -23,6 +23,21 @@ border-radius: 30px; } +.header { + display: grid; + grid-template-columns: 1fr minmax(auto, 290px); + align-items: center; + + /* + * the content header has some padding + * we need to apply some right padding to this container then + */ + padding-right: 15px; + @media (--breakpoint-not-small) { + padding-right: 40px; + } +} + .inputWrapper { margin: 0 30px; width: 100%; diff --git a/src/components/Connections.tsx b/src/components/Connections.tsx index ac4b4a2..60997ae 100644 --- a/src/components/Connections.tsx +++ b/src/components/Connections.tsx @@ -235,7 +235,19 @@ function Conn({ apiConfig }) { return ( <div> - <ContentHeader title={t('Connections')} /> + <div className={s.header}> + <ContentHeader title={t('Connections')} /> + <div className={s.inputWrapper}> + <input + type="text" + name="filter" + autoComplete="off" + className={s.input} + placeholder={t('Search')} + onChange={(e) => setFilterKeyword(e.target.value)} + /> + </div> + </div> <Tabs> <div style={{ @@ -260,16 +272,6 @@ function Conn({ apiConfig }) { </span> </Tab> </TabList> - <div className={s.inputWrapper}> - <input - type="text" - name="filter" - autoComplete="off" - className={s.input} - placeholder={t('Search')} - onChange={(e) => setFilterKeyword(e.target.value)} - /> - </div> </div> <div ref={refContainer} style={{ padding: 30, paddingBottom: 10, paddingTop: 10 }}> <div |