Merge remote-tracking branch 'gitlab/create-settings-page' into editor

# Conflicts:
#	src/components/Pages/CreateSettingsPage.tsx
#	src/pages/CreateSettingsPage.module.scss

src/components/Editor/Editor.module.scss

@@ -1,7 +0,0 @@
-.container {
-  width: 680px;
-}
-
-.editor {
-  width: 100%;
-}

src/components/Editor/Editor.tsx

@@ -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>
+    </>
   )
 }
 

src/components/Views/Create.module.scss

@@ -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);
+  }
+}

src/components/Views/Create.tsx

@@ -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 />}>
+      <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">
+                  Добавьте несколько тем, чтобы читатель знал, о&nbsp;чем ваш материал, и&nbsp;мог найти его
+                  на&nbsp;страницах интересных ему тем. Темы можно менять местами, первая тема становится
+                  заглавной
+                </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>Карточка материала на&nbsp;главной</h4>
+                <p class="description">
+                  Выберите заглавное изображение для статьи, тут сразу можно увидеть как карточка будет
+                  выглядеть на&nbsp;главной странице
+                </p>
+                <div class={styles.articlePreview}></div>
+
+                <div class={styles.saveBlock}>
+                  <p>
+                    Проверьте ещё раз введённые данные, если всё верно, вы&nbsp;можете сохранить или
+                    опубликовать ваш текст
+                  </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>
   )
 }

src/styles/app.scss

@@ -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'],