ekzyis
/
stacker.news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add search hints to initial search page (#497) 

* add search hints

* revise hint about sub searches

---------

Co-authored-by: rleed <rleed1@pm.me>
This commit is contained in:
rleed 2023-09-18 18:50:41 -04:00 committed by GitHub
parent 786c185464
commit e5852ee0b1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 47 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
pages/~/search.js
View File

@ -3,6 +3,7 @@ import { getGetServerSideProps } from '../../api/ssrApollo'
import { useRouter } from 'next/router'
import { SUB_SEARCH } from '../../fragments/subs'
import Items from '../../components/items'
import styles from './search.module.css'
export const getServerSideProps = getGetServerSideProps({
query: SUB_SEARCH,
@ -24,9 +25,23 @@ export default function Index ({ ssrData }) {
noMoreText='NO MORE'
/>
: (
<div className='text-muted text-center mt-5' style={{ fontFamily: 'lightning', fontSize: '2rem', opacity: '0.75' }}>
search for something
</div>)}
<div className={styles.content}>
<div className={styles.box}>
<div className={styles.header}>
<div className='text-muted text-center' style={{ fontFamily: 'lightning', fontSize: '2rem', opacity: '0.75' }}>
more filters
</div>
</div>
<div className={styles.body}>
<div className={styles.inner}>
<div><b>nym:</b>&#8203;<em>sn</em> - limit results by stacker nym</div>
<div><b>url:</b>&#8203;<em>stacker&#8203;.news</em> - limit to specific site</div>
<div>you are searching <em>{variables.sub || 'home'}</em><br /><em>home</em> searches show results from all</div>
</div>
</div>
</div>
</div>
)}
</SearchLayout>
)
}

29
pages/~/search.module.css Normal file
View File

@ -0,0 +1,29 @@
.content {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
}
.box {
border: 1px solid var(--theme-borderColor);
border-radius: 10px;
box-shadow: 2px 2px 10px var(--theme-borderColor);
min-width: 50%;
display: flex;
flex-direction: column;
}
.header {
border-bottom: 1px solid var(--theme-borderColor);
}
.body {
display: flex;
align-self: center;
}
.inner {
padding: 0.5rem 0;
display: flex;
flex-direction: column;
}
.inner > div {
padding: 5px 2rem;
}