Merge remote-tracking branch 'gitlab/create-settings-page' into editor
# Conflicts: # src/components/Pages/CreateSettingsPage.tsx # src/pages/CreateSettingsPage.module.scss
This commit is contained in:
bniwredyc
commit
64e7ec03f3
|
|
@ -1,7 +0,0 @@
|
|||
.container {
|
||||
width: 680px;
|
||||
}
|
||||
|
||||
.editor {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -33,8 +33,6 @@ import { Paragraph } from '@tiptap/extension-paragraph'
|
|||
import Focus from '@tiptap/extension-focus'
|
||||
import { TrailingNode } from './extensions/TrailingNode'
|
||||
import './Prosemirror.scss'
|
||||
import styles from './Editor.module.scss'
|
||||
import { Show } from 'solid-js'
|
||||
import { EditorBubbleMenu } from './EditorBubbleMenu'
|
||||
import { EditorFloatingMenu } from './EditorFloatingMenu'
|
||||
|
||||
|
|
@ -121,11 +119,11 @@ export const Editor = (props: EditorProps) => {
|
|||
}))
|
||||
|
||||
return (
|
||||
<div class={clsx('container', styles.container)}>
|
||||
<div class={styles.editor} ref={(el) => (editorElRef.current = el)} />
|
||||
<>
|
||||
<div ref={(el) => (editorElRef.current = el)} />
|
||||
<EditorBubbleMenu editor={editor()} ref={(el) => (bubbleMenuRef.current = el)} />
|
||||
<EditorFloatingMenu editor={editor()} ref={(el) => (floatingMenuRef.current = el)} />
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
21
src/components/Views/Create.module.scss
Normal file
21
src/components/Views/Create.module.scss
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
.articlePreview {
|
||||
border: 2px solid #e8e8e8;
|
||||
min-height: 10em;
|
||||
padding: 1rem 1.2rem;
|
||||
}
|
||||
|
||||
.saveBlock {
|
||||
background: #f1f1f1;
|
||||
line-height: 1.4;
|
||||
margin-top: 6.4rem;
|
||||
padding: 1.6rem 3.2rem;
|
||||
text-align: center;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
padding: 3.2rem 8rem;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin: 0 divide($container-padding-x, 2);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,8 @@
|
|||
import { lazy, Suspense } from 'solid-js'
|
||||
import { Loading } from '../_shared/Loading'
|
||||
import { useLocalize } from '../../context/localize'
|
||||
import { clsx } from 'clsx'
|
||||
import styles from './Create.module.scss'
|
||||
|
||||
const Editor = lazy(() => import('../Editor/Editor'))
|
||||
|
||||
|
|
@ -9,7 +11,96 @@ export const CreateView = () => {
|
|||
|
||||
return (
|
||||
<Suspense fallback={<Loading />}>
|
||||
<Editor />
|
||||
<form>
|
||||
<div class="wide-container">
|
||||
<div class="shift-content">
|
||||
<div class="row">
|
||||
<div class="col-md-10 col-lg-9 col-xl-8">
|
||||
<h4>Заголовок</h4>
|
||||
<div class="pretty-form__item">
|
||||
<input
|
||||
type="text"
|
||||
name="header"
|
||||
id="header"
|
||||
placeholder="Придумайте заголовок вашей истории"
|
||||
/>
|
||||
<label for="header">Придумайте заголовок вашей истории</label>
|
||||
</div>
|
||||
|
||||
<h4>Подзаголовок</h4>
|
||||
<div class="pretty-form__item">
|
||||
<input type="text" name="subheader" id="subheader" placeholder="Подзаголовок" />
|
||||
<label for="subheader">Подзаголовок</label>
|
||||
</div>
|
||||
|
||||
<Editor />
|
||||
|
||||
<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">
|
||||
<input type="text" name="topics" id="topics" placeholder="Темы" class="nolabel" />
|
||||
</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>
|
||||
|
||||
<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={styles.articlePreview}></div>
|
||||
|
||||
<div class={styles.saveBlock}>
|
||||
<p>
|
||||
Проверьте ещё раз введённые данные, если всё верно, вы можете сохранить или
|
||||
опубликовать ваш текст
|
||||
</p>
|
||||
<button class={clsx('button button--outline', styles.button)}>Сохранить</button>
|
||||
<button class={clsx('button button--submit', styles.button)}>Опубликовать</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</Suspense>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -316,12 +316,22 @@ button {
|
|||
}
|
||||
}
|
||||
|
||||
.button--submit {
|
||||
.button--submit,
|
||||
.button--outline {
|
||||
@include font-size(2rem);
|
||||
|
||||
padding: 1.6rem 2rem;
|
||||
}
|
||||
|
||||
.button--outline {
|
||||
background: none;
|
||||
box-shadow: inset 0 0 0 2px #000;
|
||||
color: #000;
|
||||
|
||||
&:hover {
|
||||
box-shadow: inset 0 0 0 2px #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
.pretty-form__item {
|
||||
position: relative;
|
||||
|
|
@ -335,6 +345,30 @@ form {
|
|||
}
|
||||
}
|
||||
|
||||
.pretty-form__item--with-button {
|
||||
margin-bottom: 1.6rem;
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
*:first-child {
|
||||
flex: 1;
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
margin-right: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type='text'],
|
||||
input[type='email'],
|
||||
input[type='password'],
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user