Added create article controls to the header
This commit is contained in:
parent
21282aad92
commit
59c1f1b3a5
|
|
@ -147,6 +147,7 @@
|
||||||
"Report": "Пожаловаться",
|
"Report": "Пожаловаться",
|
||||||
"Resend code": "Выслать подтверждение",
|
"Resend code": "Выслать подтверждение",
|
||||||
"Restore password": "Восстановить пароль",
|
"Restore password": "Восстановить пароль",
|
||||||
|
"Save": "Сохранить",
|
||||||
"Save settings": "Сохранить настройки",
|
"Save settings": "Сохранить настройки",
|
||||||
"Search": "Поиск",
|
"Search": "Поиск",
|
||||||
"Search author": "Поиск автора",
|
"Search author": "Поиск автора",
|
||||||
|
|
|
||||||
|
|
@ -13,6 +13,7 @@ import { ShowOnlyOnClient } from '../_shared/ShowOnlyOnClient'
|
||||||
import { useSession } from '../../context/session'
|
import { useSession } from '../../context/session'
|
||||||
import { useLocalize } from '../../context/localize'
|
import { useLocalize } from '../../context/localize'
|
||||||
import { getPagePath } from '@nanostores/router'
|
import { getPagePath } from '@nanostores/router'
|
||||||
|
import { Button } from '../_shared/Button'
|
||||||
|
|
||||||
type HeaderAuthProps = {
|
type HeaderAuthProps = {
|
||||||
setIsProfilePopupVisible: (value: boolean) => void
|
setIsProfilePopupVisible: (value: boolean) => void
|
||||||
|
|
@ -53,7 +54,7 @@ export const HeaderAuth = (props: HeaderAuthProps) => {
|
||||||
</div>
|
</div>
|
||||||
</Show>
|
</Show>
|
||||||
|
|
||||||
<Show when={isAuthenticated()}>
|
<Show when={isAuthenticated() && page().route !== 'create'}>
|
||||||
<div class={styles.userControlItem}>
|
<div class={styles.userControlItem}>
|
||||||
<a href="#" onClick={handleBellIconClick}>
|
<a href="#" onClick={handleBellIconClick}>
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -63,6 +64,16 @@ export const HeaderAuth = (props: HeaderAuthProps) => {
|
||||||
</div>
|
</div>
|
||||||
</Show>
|
</Show>
|
||||||
|
|
||||||
|
<Show when={isAuthenticated() && page().route === 'create'}>
|
||||||
|
<div class={clsx(styles.userControlItem, styles.userControlItemVerbose)}>
|
||||||
|
<Button value={t('Save')} variant={'outline'} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class={clsx(styles.userControlItem, styles.userControlItemVerbose)}>
|
||||||
|
<Button value={t('Publish')} variant={'outline'} />
|
||||||
|
</div>
|
||||||
|
</Show>
|
||||||
|
|
||||||
<Show when={visibleWarnings()}>
|
<Show when={visibleWarnings()}>
|
||||||
<div class={clsx(styles.userControlItem, 'notifications')}>
|
<div class={clsx(styles.userControlItem, 'notifications')}>
|
||||||
<Notifications />
|
<Notifications />
|
||||||
|
|
@ -70,7 +81,7 @@ export const HeaderAuth = (props: HeaderAuthProps) => {
|
||||||
</Show>
|
</Show>
|
||||||
|
|
||||||
<Show
|
<Show
|
||||||
when={isAuthenticated()}
|
when={isAuthenticated() && page().route !== 'create'}
|
||||||
fallback={
|
fallback={
|
||||||
<div class={clsx(styles.userControlItem, styles.userControlItemVerbose, 'loginbtn')}>
|
<div class={clsx(styles.userControlItem, styles.userControlItemVerbose, 'loginbtn')}>
|
||||||
<a href="?modal=auth&mode=login">
|
<a href="?modal=auth&mode=login">
|
||||||
|
|
|
||||||
|
|
@ -88,130 +88,128 @@ export const CreateView = () => {
|
||||||
|
|
||||||
<form onSubmit={handleFormSubmit}>
|
<form onSubmit={handleFormSubmit}>
|
||||||
<div class="wide-container">
|
<div class="wide-container">
|
||||||
<div class="shift-content">
|
<div class="row">
|
||||||
<div class="row">
|
<div class="col-md-19 col-lg-18 col-xl-16 offset-md-5">
|
||||||
<div class="col-md-20 col-lg-18 col-xl-16">
|
<div
|
||||||
<div
|
class={clsx(styles.create, {
|
||||||
class={clsx(styles.create, {
|
[styles.visible]: page().route === 'create'
|
||||||
[styles.visible]: page().route === 'create'
|
})}
|
||||||
})}
|
>
|
||||||
>
|
<input
|
||||||
<input
|
class={styles.titleInput}
|
||||||
class={styles.titleInput}
|
type="text"
|
||||||
type="text"
|
name="title"
|
||||||
name="title"
|
id="title"
|
||||||
id="title"
|
placeholder="Заголовок"
|
||||||
placeholder="Заголовок"
|
value={form.title}
|
||||||
value={form.title}
|
onChange={handleTitleInputChange}
|
||||||
onChange={handleTitleInputChange}
|
/>
|
||||||
/>
|
|
||||||
|
|
||||||
<input
|
<input
|
||||||
class={styles.subtitleInput}
|
class={styles.subtitleInput}
|
||||||
type="text"
|
type="text"
|
||||||
name="subtitle"
|
name="subtitle"
|
||||||
id="subtitle"
|
id="subtitle"
|
||||||
placeholder="Подзаголовок"
|
placeholder="Подзаголовок"
|
||||||
value={form.subtitle}
|
value={form.subtitle}
|
||||||
onChange={(e) => setForm('subtitle', e.currentTarget.value)}
|
onChange={(e) => setForm('subtitle', e.currentTarget.value)}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Editor shoutId={42} onChange={(body) => setForm('body', body)} />
|
<Editor shoutId={42} onChange={(body) => setForm('body', body)} />
|
||||||
|
|
||||||
<div class={styles.saveBlock}>
|
<div class={styles.saveBlock}>
|
||||||
{/*<button class={clsx('button button--outline', styles.button)}>Сохранить</button>*/}
|
{/*<button class={clsx('button button--outline', styles.button)}>Сохранить</button>*/}
|
||||||
<a href={getPagePath(router, 'createSettings')}>Настройки</a>
|
<a href={getPagePath(router, 'createSettings')}>Настройки</a>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
</div>
|
||||||
class={clsx(styles.createSettings, {
|
<div
|
||||||
[styles.visible]: page().route === 'createSettings'
|
class={clsx(styles.createSettings, {
|
||||||
})}
|
[styles.visible]: page().route === 'createSettings'
|
||||||
>
|
})}
|
||||||
<h1>Настройки публикации</h1>
|
>
|
||||||
|
<h1>Настройки публикации</h1>
|
||||||
|
|
||||||
<h4>Slug</h4>
|
<h4>Slug</h4>
|
||||||
<div class="pretty-form__item">
|
<div class="pretty-form__item">
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
name="slug"
|
name="slug"
|
||||||
id="slug"
|
id="slug"
|
||||||
value={form.slug}
|
value={form.slug}
|
||||||
onChange={handleSlugInputChange}
|
onChange={handleSlugInputChange}
|
||||||
|
/>
|
||||||
|
<label for="slug">Slug</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/*<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}
|
||||||
/>
|
/>
|
||||||
<label for="slug">Slug</label>
|
</Show>
|
||||||
</div>
|
{/*<input type="text" name="topics" id="topics" placeholder="Темы" class="nolabel" />*/}
|
||||||
|
</div>
|
||||||
|
|
||||||
{/*<h4>Лид</h4>*/}
|
{/*<h4>Соавторы</h4>*/}
|
||||||
{/*<div class="pretty-form__item">*/}
|
{/*<p class="description">У каждого соавтора можно добавить роль</p>*/}
|
||||||
{/* <textarea name="lead" id="lead" placeholder="Лид"></textarea>*/}
|
{/*<div class="pretty-form__item--with-button">*/}
|
||||||
{/* <label for="lead">Лид</label>*/}
|
{/* <div class="pretty-form__item">*/}
|
||||||
{/*</div>*/}
|
{/* <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="row">*/}
|
||||||
{/*<p class="description">Сообщества можно перечислить через запятую</p>*/}
|
{/* <div class="col-md-6">Михаил Драбкин</div>*/}
|
||||||
{/*<div class="pretty-form__item">*/}
|
{/* <div class="col-md-6">*/}
|
||||||
{/* <input*/}
|
{/* <input type="text" name="coauthor" id="coauthor1" class="nolabel" />*/}
|
||||||
{/* type="text"*/}
|
{/* </div>*/}
|
||||||
{/* name="community"*/}
|
{/*</div>*/}
|
||||||
{/* id="community"*/}
|
|
||||||
{/* placeholder="Сообщества"*/}
|
|
||||||
{/* class="nolabel"*/}
|
|
||||||
{/* />*/}
|
|
||||||
{/*</div>*/}
|
|
||||||
|
|
||||||
<h4>Темы</h4>
|
<h4>Карточка материала на главной</h4>
|
||||||
{/*<p class="description">*/}
|
<p class="description">
|
||||||
{/* Добавьте несколько тем, чтобы читатель знал, о чем ваш материал, и мог найти*/}
|
Выберите заглавное изображение для статьи, тут сразу можно увидеть как карточка будет
|
||||||
{/* его на страницах интересных ему тем. Темы можно менять местами, первая тема*/}
|
выглядеть на главной странице
|
||||||
{/* становится заглавной*/}
|
</p>
|
||||||
{/*</p>*/}
|
<div class={styles.articlePreview} />
|
||||||
<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>
|
|
||||||
|
|
||||||
{/*<h4>Соавторы</h4>*/}
|
<div class={styles.saveBlock}>
|
||||||
{/*<p class="description">У каждого соавтора можно добавить роль</p>*/}
|
<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>
|
</p>
|
||||||
<div class={styles.articlePreview} />
|
{/*<button class={clsx('button button--outline', styles.button)}>Сохранить</button>*/}
|
||||||
|
<a href={getPagePath(router, 'create')}>Назад</a>
|
||||||
<div class={styles.saveBlock}>
|
<button type="submit" class={clsx('button button--submit', styles.button)}>
|
||||||
<p>
|
Опубликовать
|
||||||
Проверьте ещё раз введённые данные, если всё верно, вы можете сохранить или
|
</button>
|
||||||
опубликовать ваш текст
|
|
||||||
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -37,13 +37,29 @@
|
||||||
line-height: 21px;
|
line-height: 21px;
|
||||||
color: #696969;
|
color: #696969;
|
||||||
|
|
||||||
&.hover,
|
&:hover,
|
||||||
&.active {
|
&:active {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
color: #141414;
|
color: #141414;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.outline {
|
||||||
|
border: 3px solid #f2f2f2;
|
||||||
|
border-radius: 1.2em;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-right: 0.8em;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:active {
|
||||||
|
background: #000;
|
||||||
|
border-color: #000;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&:disabled,
|
&:disabled,
|
||||||
&:disabled:hover {
|
&:disabled:hover {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user