WIP
This commit is contained in:
bniwredyc
parent
cc13497730
commit
5b791d7a26
|
|
@ -23,3 +23,31 @@
|
|||
margin: 0 divide($container-padding-x, 2);
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
.titleInput,
|
||||
.subtitleInput {
|
||||
border: 0;
|
||||
outline: 0;
|
||||
padding: 0;
|
||||
font-size: 36px;
|
||||
|
||||
&::placeholder {
|
||||
opacity: 0.3;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
.titleInput {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.createSettings,
|
||||
.create {
|
||||
display: none;
|
||||
|
||||
&.visible {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,9 +5,12 @@ import { clsx } from 'clsx'
|
|||
import styles from './Create.module.scss'
|
||||
import { Title } from '@solidjs/meta'
|
||||
import { createStore } from 'solid-js/store'
|
||||
import type { ShoutInput, Topic } from '../../graphql/types.gen'
|
||||
import type { Topic } from '../../graphql/types.gen'
|
||||
import { apiClient } from '../../utils/apiClient'
|
||||
import { TopicSelect } from '../Editor/TopicSelect/TopicSelect'
|
||||
import { router, useRouter } from '../../stores/router'
|
||||
import { getPagePath } from '@nanostores/router'
|
||||
import { translit } from '../../utils/ru2en'
|
||||
|
||||
const Editor = lazy(() => import('../Editor/Editor'))
|
||||
|
||||
|
|
@ -25,6 +28,9 @@ export const CreateView = () => {
|
|||
const { t } = useLocalize()
|
||||
|
||||
const [topics, setTopics] = createSignal<Topic[]>(null)
|
||||
const { page } = useRouter()
|
||||
|
||||
const [isSlugChanged, setIsSlugChanged] = createSignal(false)
|
||||
|
||||
const [form, setForm] = createStore<ShoutForm>({
|
||||
slug: '',
|
||||
|
|
@ -45,8 +51,27 @@ export const CreateView = () => {
|
|||
e.preventDefault()
|
||||
}
|
||||
|
||||
const handleTitleInputChange = (e) => {
|
||||
const title = e.currentTarget.value
|
||||
setForm('title', title)
|
||||
|
||||
if (!isSlugChanged()) {
|
||||
const slug = translit(title).replaceAll(' ', '-')
|
||||
setForm('slug', slug)
|
||||
}
|
||||
}
|
||||
|
||||
const handleSlugInputChange = (e) => {
|
||||
const slug = e.currentTarget.value
|
||||
|
||||
if (slug !== form.slug) {
|
||||
setIsSlugChanged(true)
|
||||
}
|
||||
setForm('slug', slug)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div class={styles.container}>
|
||||
<Title>{t('Write an article')}</Title>
|
||||
<Suspense fallback={<Loading />}>
|
||||
<form onSubmit={handleFormSubmit}>
|
||||
|
|
@ -54,34 +79,23 @@ export const CreateView = () => {
|
|||
<div class="shift-content">
|
||||
<div class="row">
|
||||
<div class="col-md-20 col-lg-18 col-xl-16">
|
||||
<h4>Slug</h4>
|
||||
<div class="pretty-form__item">
|
||||
<input
|
||||
type="text"
|
||||
name="slug"
|
||||
id="slug"
|
||||
value={form.slug}
|
||||
onChange={(e) => setForm('slug', e.currentTarget.value)}
|
||||
/>
|
||||
<label for="slug">Slug</label>
|
||||
</div>
|
||||
|
||||
<h4>Заголовок</h4>
|
||||
<div class="pretty-form__item">
|
||||
<div
|
||||
class={clsx(styles.create, {
|
||||
[styles.visible]: page().route === 'create'
|
||||
})}
|
||||
>
|
||||
<input
|
||||
class={styles.titleInput}
|
||||
type="text"
|
||||
name="title"
|
||||
id="title"
|
||||
placeholder="Придумайте заголовок вашей истории"
|
||||
placeholder="Заголовок"
|
||||
value={form.title}
|
||||
onChange={(e) => setForm('title', e.currentTarget.value)}
|
||||
onChange={handleTitleInputChange}
|
||||
/>
|
||||
<label for="title">Придумайте заголовок вашей истории</label>
|
||||
</div>
|
||||
|
||||
<h4>Подзаголовок</h4>
|
||||
<div class="pretty-form__item">
|
||||
<input
|
||||
class={styles.subtitleInput}
|
||||
type="text"
|
||||
name="subtitle"
|
||||
id="subtitle"
|
||||
|
|
@ -89,80 +103,103 @@ export const CreateView = () => {
|
|||
value={form.subtitle}
|
||||
onChange={(e) => setForm('subtitle', e.currentTarget.value)}
|
||||
/>
|
||||
<label for="subtitle">Подзаголовок</label>
|
||||
|
||||
<Editor onChange={(body) => setForm('body', body)} />
|
||||
|
||||
<div class={styles.saveBlock}>
|
||||
{/*<button class={clsx('button button--outline', styles.button)}>Сохранить</button>*/}
|
||||
<a href={getPagePath(router, 'createSettings')}>Настройки</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class={clsx(styles.createSettings, {
|
||||
[styles.visible]: page().route === 'createSettings'
|
||||
})}
|
||||
>
|
||||
<h1>Настройки публикации</h1>
|
||||
|
||||
<Editor onChange={(body) => setForm('body', body)} />
|
||||
|
||||
<h1>Настройки публикации</h1>
|
||||
{/*<h4>Лид</h4>*/}
|
||||
{/*<div class="pretty-form__item">*/}
|
||||
{/* <textarea name="lead" id="lead" placeholder="Лид"></textarea>*/}
|
||||
{/* <label for="lead">Лид</label>*/}
|
||||
{/*</div>*/}
|
||||
|
||||
{/*<h4>Выбор сообщества</h4>*/}
|
||||
{/*<p class="description">Сообщества можно перечислить через запятую</p>*/}
|
||||
{/*<div class="pretty-form__item">*/}
|
||||
{/* <input*/}
|
||||
{/* type="text"*/}
|
||||
{/* name="community"*/}
|
||||
{/* id="community"*/}
|
||||
{/* placeholder="Сообщества"*/}
|
||||
{/* class="nolabel"*/}
|
||||
{/* />*/}
|
||||
{/*</div>*/}
|
||||
|
||||
<h4>Темы</h4>
|
||||
{/*<p class="description">*/}
|
||||
{/* Добавьте несколько тем, чтобы читатель знал, о чем ваш материал, и мог найти*/}
|
||||
{/* его на страницах интересных ему тем. Темы можно менять местами, первая тема*/}
|
||||
{/* становится заглавной*/}
|
||||
{/*</p>*/}
|
||||
<div class="pretty-form__item">
|
||||
<Show when={topics()}>
|
||||
<TopicSelect
|
||||
topics={topics()}
|
||||
onChange={(newSelectedTopics) => setForm('selectedTopics', newSelectedTopics)}
|
||||
selectedTopics={form.selectedTopics}
|
||||
<h4>Slug</h4>
|
||||
<div class="pretty-form__item">
|
||||
<input
|
||||
type="text"
|
||||
name="slug"
|
||||
id="slug"
|
||||
value={form.slug}
|
||||
onChange={handleSlugInputChange}
|
||||
/>
|
||||
</Show>
|
||||
{/*<input type="text" name="topics" id="topics" placeholder="Темы" class="nolabel" />*/}
|
||||
</div>
|
||||
<label for="slug">Slug</label>
|
||||
</div>
|
||||
|
||||
{/*<h4>Соавторы</h4>*/}
|
||||
{/*<p class="description">У каждого соавтора можно добавить роль</p>*/}
|
||||
{/*<div class="pretty-form__item--with-button">*/}
|
||||
{/* <div class="pretty-form__item">*/}
|
||||
{/* <input type="text" name="authors" id="authors" placeholder="Введите имя или e-mail" />*/}
|
||||
{/* <label for="authors">Введите имя или e-mail</label>*/}
|
||||
{/* </div>*/}
|
||||
{/* <button class="button button--submit">Добавить</button>*/}
|
||||
{/*</div>*/}
|
||||
{/*<h4>Лид</h4>*/}
|
||||
{/*<div class="pretty-form__item">*/}
|
||||
{/* <textarea name="lead" id="lead" placeholder="Лид"></textarea>*/}
|
||||
{/* <label for="lead">Лид</label>*/}
|
||||
{/*</div>*/}
|
||||
|
||||
{/*<div class="row">*/}
|
||||
{/* <div class="col-md-6">Михаил Драбкин</div>*/}
|
||||
{/* <div class="col-md-6">*/}
|
||||
{/* <input type="text" name="coauthor" id="coauthor1" class="nolabel" />*/}
|
||||
{/* </div>*/}
|
||||
{/*</div>*/}
|
||||
{/*<h4>Выбор сообщества</h4>*/}
|
||||
{/*<p class="description">Сообщества можно перечислить через запятую</p>*/}
|
||||
{/*<div class="pretty-form__item">*/}
|
||||
{/* <input*/}
|
||||
{/* type="text"*/}
|
||||
{/* name="community"*/}
|
||||
{/* id="community"*/}
|
||||
{/* placeholder="Сообщества"*/}
|
||||
{/* class="nolabel"*/}
|
||||
{/* />*/}
|
||||
{/*</div>*/}
|
||||
|
||||
<h4>Карточка материала на главной</h4>
|
||||
<p class="description">
|
||||
Выберите заглавное изображение для статьи, тут сразу можно увидеть как карточка будет
|
||||
выглядеть на главной странице
|
||||
</p>
|
||||
<div class={styles.articlePreview} />
|
||||
<h4>Темы</h4>
|
||||
{/*<p class="description">*/}
|
||||
{/* Добавьте несколько тем, чтобы читатель знал, о чем ваш материал, и мог найти*/}
|
||||
{/* его на страницах интересных ему тем. Темы можно менять местами, первая тема*/}
|
||||
{/* становится заглавной*/}
|
||||
{/*</p>*/}
|
||||
<div class="pretty-form__item">
|
||||
<Show when={topics()}>
|
||||
<TopicSelect
|
||||
topics={topics()}
|
||||
onChange={(newSelectedTopics) => setForm('selectedTopics', newSelectedTopics)}
|
||||
selectedTopics={form.selectedTopics}
|
||||
/>
|
||||
</Show>
|
||||
{/*<input type="text" name="topics" id="topics" placeholder="Темы" class="nolabel" />*/}
|
||||
</div>
|
||||
|
||||
<div class={styles.saveBlock}>
|
||||
<p>
|
||||
Проверьте ещё раз введённые данные, если всё верно, вы можете сохранить или
|
||||
опубликовать ваш текст
|
||||
{/*<h4>Соавторы</h4>*/}
|
||||
{/*<p class="description">У каждого соавтора можно добавить роль</p>*/}
|
||||
{/*<div class="pretty-form__item--with-button">*/}
|
||||
{/* <div class="pretty-form__item">*/}
|
||||
{/* <input type="text" name="authors" id="authors" placeholder="Введите имя или e-mail" />*/}
|
||||
{/* <label for="authors">Введите имя или e-mail</label>*/}
|
||||
{/* </div>*/}
|
||||
{/* <button class="button button--submit">Добавить</button>*/}
|
||||
{/*</div>*/}
|
||||
|
||||
{/*<div class="row">*/}
|
||||
{/* <div class="col-md-6">Михаил Драбкин</div>*/}
|
||||
{/* <div class="col-md-6">*/}
|
||||
{/* <input type="text" name="coauthor" id="coauthor1" class="nolabel" />*/}
|
||||
{/* </div>*/}
|
||||
{/*</div>*/}
|
||||
|
||||
<h4>Карточка материала на главной</h4>
|
||||
<p class="description">
|
||||
Выберите заглавное изображение для статьи, тут сразу можно увидеть как карточка будет
|
||||
выглядеть на главной странице
|
||||
</p>
|
||||
{/*<button class={clsx('button button--outline', styles.button)}>Сохранить</button>*/}
|
||||
<button type="submit" class={clsx('button button--submit', styles.button)}>
|
||||
Опубликовать
|
||||
</button>
|
||||
<div class={styles.articlePreview} />
|
||||
|
||||
<div class={styles.saveBlock}>
|
||||
<p>
|
||||
Проверьте ещё раз введённые данные, если всё верно, вы можете сохранить или
|
||||
опубликовать ваш текст
|
||||
</p>
|
||||
{/*<button class={clsx('button button--outline', styles.button)}>Сохранить</button>*/}
|
||||
<a href={getPagePath(router, 'create')}>Назад</a>
|
||||
<button type="submit" class={clsx('button button--submit', styles.button)}>
|
||||
Опубликовать
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -170,7 +207,7 @@ export const CreateView = () => {
|
|||
</div>
|
||||
</form>
|
||||
</Suspense>
|
||||
</>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user