discours.io/webapp
5
0
Fork 0
Code Issues Pull Requests Actions Projects Wiki Activity

Search modal

Browse Source
This commit is contained in:
kvakazyambra 2023-11-02 22:21:51 +03:00
parent c806c6e304
commit d5fa4ed034
10 changed files with 284 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
public/icons/search.svg
View File

@ -1,3 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.125 3.375C6.40365 3.375 3.375 6.40365 3.375 10.125C3.375 13.8464 6.40365 16.875 10.125 16.875C11.6745 16.875 13.0964 16.3464 14.237 15.4661L19.1432 20.3698C19.4818 20.7109 20.0312 20.7109 20.3698 20.3698C20.7109 20.0312 20.7109 19.4818 20.3698 19.1432L15.4661 14.237C16.3464 13.0964 16.875 11.6745 16.875 10.125C16.875 6.40365 13.8464 3.375 10.125 3.375ZM10.125 4.875C13.0208 4.875 15.375 7.22917 15.375 10.125C15.375 13.0208 13.0208 15.375 10.125 15.375C7.22917 15.375 4.875 13.0208 4.875 10.125C4.875 7.22917 7.22917 4.875 10.125 4.875Z" fill="#141414"/>
<path
d="M10.125 3.375C6.40365 3.375 3.375 6.40365 3.375 10.125C3.375 13.8464 6.40365 16.875 10.125 16.875C11.6745 16.875 13.0964 16.3464 14.237 15.4661L19.1432 20.3698C19.4818 20.7109 20.0312 20.7109 20.3698 20.3698C20.7109 20.0312 20.7109 19.4818 20.3698 19.1432L15.4661 14.237C16.3464 13.0964 16.875 11.6745 16.875 10.125C16.875 6.40365 13.8464 3.375 10.125 3.375ZM10.125 4.875C13.0208 4.875 15.375 7.22917 15.375 10.125C15.375 13.0208 13.0208 15.375 10.125 15.375C7.22917 15.375 4.875 13.0208 4.875 10.125C4.875 7.22917 7.22917 4.875 10.125 4.875Z" fill="currentColor"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 673 B

After

Width:  |  Height:  |  Size: 680 B

1
public/locales/en/translation.json
View File

@ -289,6 +289,7 @@
"Send": "Send",
"Send link again": "Send link again",
"Settings": "Settings",
"Site search": "Site search",
"Share": "Share",
"Show": "Show",
"Show lyrics": "Show lyrics",

1
public/locales/ru/translation.json
View File

@ -305,6 +305,7 @@
"Send": "Отправить",
"Send link again": "Прислать ссылку ещё раз",
"Settings": "Настройки",
"Site search": "Поиск по сайту",
"Share": "Поделиться",
"Short opening": "Расскажите вашу историю...",
"Show": "Показать",

5
src/components/Nav/Header/Header.tsx
View File

@ -24,6 +24,7 @@ import { apiClient } from '../../../utils/apiClient'
import { RANDOM_TOPICS_COUNT } from '../../Views/Home'
import { Link } from './Link'
import { Subscribe } from '../../_shared/Subscribe'
import { SearchModal } from '../SearchModal/SearchModal'
type Props = {
title?: string
@ -183,6 +184,10 @@ export const Header = (props: Props) => {
<ConfirmModal />
</Modal>
<Modal variant="wide" name="search">
<SearchModal />
</Modal>
<div class={clsx(styles.mainHeaderInner, 'wide-container')}>
<nav class={clsx('row', styles.headerInner, { ['fixed']: fixed() })}>
<div class={clsx(styles.burgerContainer, 'col-auto')}>

4
src/components/Nav/HeaderAuth.tsx
View File

@ -124,10 +124,10 @@ export const HeaderAuth = (props: Props) => {
<Show when={!isSaveButtonVisible()}>
<div class={styles.userControlItem}>
<a href="#">
<button onClick={() => showModal('search')}>
<Icon name="search" class={styles.icon} />
<Icon name="search" class={clsx(styles.icon, styles.iconHover)} />
</a>
</button>
</div>
</Show>

26
src/components/Nav/Modal/Modal.module.scss
View File

@ -114,3 +114,29 @@
flex-direction: column;
height: 90vh;
}
.modal-search {
background: #000;
.modal {
background: none;
color: #fff;
height: 100vh;
max-width: none;
padding-top: 10rem;
width: 100% !important;
}
.modalInner {
padding-left: 0;
padding-right: 0;
}
.close {
filter: invert(1);
height: 3.2rem;
right: 0;
top: 2rem;
width: 3.2rem;
}
}

2
src/components/Nav/Modal/Modal.tsx
View File

@ -43,7 +43,7 @@ export const Modal = (props: Props) => {
return (
<Show when={visible()}>
<div class={styles.backdrop} onClick={handleHide}>
<div class={clsx(styles.backdrop, [styles[`modal-${props.name}`]])} onClick={handleHide}>
<div class="wide-container">
<div
class={clsx(styles.modal, {

98
src/components/Nav/SearchModal/SearchModal.module.scss Normal file
View File

@ -0,0 +1,98 @@
@mixin searchFilterControl {
background: rgb(64 64 64 / 0.5);
border-radius: 10rem;
color: #fff;
@include font-size(1.4rem);
font-weight: 500;
height: 4rem;
padding: 0 2rem;
white-space: nowrap;
&:hover {
background: #404040;
}
&:active {
color: rgb(255 255 255 / 0.4);
}
}
.searchForm {
position: relative;
.searchField {
background: none;
border: none;
border-bottom: 2px solid #fff;
color: #fff;
@include font-size(4.8rem);
font-weight: bold;
outline: none;
padding: 0 0 0.5rem;
&::placeholder {
color: rgb(255 255 255 / 0.32);
}
&:not(:placeholder-shown) + .submitControl {
display: block;
}
}
}
.submitControl {
display: none;
filter: invert(1);
height: 3.2rem;
position: absolute;
right: 0;
top: 2rem;
width: 3.2rem;
}
.searchDescription {
color: rgb(255 255 255 / 0.64);
@include font-size(1.6rem);
}
.topicsList {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
margin-top: 9.6rem !important;
}
.topTopic {
@include searchFilterControl;
}
.filterSwitcher {
margin: 0 0 6.4rem !important;
padding: 0 !important;
button {
color: #fff !important;
}
:global(.view-switcher__item--selected) {
button {
border-bottom-color: #fff !important;
&:hover {
background: none !important;
}
}
}
}
.filterResults {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin: 6.4rem 0;
}
.filterResultsControl {
@include searchFilterControl;
}

145
src/components/Nav/SearchModal/SearchModal.tsx Normal file
View File

@ -0,0 +1,145 @@
import { hideModal } from '../../../stores/ui'
import { useLocalize } from '../../../context/localize'
import { Button } from '../../_shared/Button'
import styles from './SearchModal.module.scss'
import { Icon } from '../../_shared/Icon'
import clsx from 'clsx'
export const SearchModal = () => {
const { t } = useLocalize()
const action = '/search'
const method = 'get'
let msgElement: HTMLTextAreaElement | undefined
let contactElement: HTMLInputElement | undefined
const submit = async () => {
await fetch(action, {
method,
headers: {
accept: 'application/json',
'content-type': 'application/json; charset=utf-8'
},
body: JSON.stringify({ contact: contactElement?.value, message: msgElement?.textContent })
})
// hideModal()
}
return (
<form method={method} action={action} onSubmit={submit} class={styles.searchForm}>
<input
type="text"
name="contact"
placeholder={t('Site search')}
ref={contactElement}
class={styles.searchField}
/>
<button type={submit} class={styles.submitControl}>
<Icon name="search" />
</button>
<p class={styles.searchDescription}>
Для поиска публикаций, искусства, комментариев, интересных вам авторов и&nbsp;тем, просто начните
вводить ваш запрос
</p>
<ul class={clsx('view-switcher', styles.filterSwitcher)}>
<li class="view-switcher__item view-switcher__item--selected">
<button type="button">Все</button>
</li>
<li class="view-switcher__item">
<button type="button">Публикации</button>
</li>
<li class="view-switcher__item">
<button type="button">Темы</button>
</li>
</ul>
<div class={styles.filterResults}>
<button type="button" class={styles.filterResultsControl}>
Период времени
</button>
<button type="button" class={styles.filterResultsControl}>
Рейтинг
</button>
<button type="button" class={styles.filterResultsControl}>
Тип постов
</button>
<button type="button" class={styles.filterResultsControl}>
Темы
</button>
<button type="button" class={styles.filterResultsControl}>
Авторы
</button>
<button type="button" class={styles.filterResultsControl}>
Сообщества
</button>
</div>
<div class="container-xl">
<div class="row">
<div class={clsx('col-md-18 offset-md-2', styles.topicsList)}>
<button type="button" class={styles.topTopic}>
За месяц
</button>
<button type="button" class={styles.topTopic}>
#репортажи
</button>
<button type="button" class={styles.topTopic}>
#интервью
</button>
<button type="button" class={styles.topTopic}>
#культура
</button>
<button type="button" class={styles.topTopic}>
#поэзия
</button>
<button type="button" class={styles.topTopic}>
#теории
</button>
<button type="button" class={styles.topTopic}>
#война в украине
</button>
<button type="button" class={styles.topTopic}>
#общество
</button>
<button type="button" class={styles.topTopic}>
#Экспериментальная Музыка
</button>
<button type="button" class={styles.topTopic}>
Рейтинг 300+
</button>
<button type="button" class={styles.topTopic}>
#Протесты
</button>
<button type="button" class={styles.topTopic}>
Музыка
</button>
<button type="button" class={styles.topTopic}>
#За линией Маннергейма
</button>
<button type="button" class={styles.topTopic}>
Тесты
</button>
<button type="button" class={styles.topTopic}>
Коллективные истории
</button>
<button type="button" class={styles.topTopic}>
#личный опыт
</button>
<button type="button" class={styles.topTopic}>
Тоня Самсонова
</button>
<button type="button" class={styles.topTopic}>
#личный опыт
</button>
<button type="button" class={styles.topTopic}>
#Секс
</button>
<button type="button" class={styles.topTopic}>
Молоко Plus
</button>
</div>
</div>
</div>
</form>
)
}

4
src/stores/ui.ts
View File

@ -22,6 +22,7 @@ export type ModalType =
| 'simplifiedEditorInsertLink'
| 'followers'
| 'following'
| 'search'
export const MODALS: Record<ModalType, ModalType> = {
auth: 'auth',
@ -37,7 +38,8 @@ export const MODALS: Record<ModalType, ModalType> = {
editorInsertLink: 'editorInsertLink',
simplifiedEditorInsertLink: 'simplifiedEditorInsertLink',
followers: 'followers',
following: 'following'
following: 'following',
search: 'search'
}
const [modal, setModal] = createSignal<ModalType>(null)