diff --git a/public/icons/burger.svg b/public/icons/burger.svg new file mode 100644 index 00000000..cf903d0d --- /dev/null +++ b/public/icons/burger.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/pencil.svg b/public/icons/pencil.svg index f4efb296..39925e8e 100644 --- a/public/icons/pencil.svg +++ b/public/icons/pencil.svg @@ -1,3 +1,4 @@ - + diff --git a/public/locales/ru/translation.json b/public/locales/ru/translation.json index 6026b68c..83d9c750 100644 --- a/public/locales/ru/translation.json +++ b/public/locales/ru/translation.json @@ -37,6 +37,7 @@ "Cooperate": "Соучаствовать", "Copy": "Скопировать", "Copy link": "Скопировать ссылку", + "Corrections history": "История правок", "Create Chat": "Создать чат", "Create Group": "Создать группу", "Create account": "Создать аккаунт", @@ -52,6 +53,7 @@ "Drafts": "Черновики", "Edit": "Редактировать", "Edited": "Отредактирован", + "Editing": "Редактирование", "Email": "Почта", "Enter": "Войти", "Enter text": "Введите текст", @@ -61,6 +63,7 @@ "Error": "Ошибка", "Everything is ok, please give us your email address": "Ничего страшного, просто укажите свою почту, чтобы получить ссылку для сброса пароля.", "Favorite": "Избранное", + "FAQ": "Советы и предложения", "Favorite topics": "Избранные темы", "Feed settings": "Настройки ленты", "Feedback": "Обратная связь", @@ -90,6 +93,7 @@ "Independant magazine with an open horizontal cooperation about culture, science and society": "Независимый журнал с открытой горизонтальной редакцией о культуре, науке и обществе", "Introduce": "Представление", "Invalid email": "Проверьте правильность ввода почты", + "Invite co-authors": "Пригласить соавторов", "Invite experts": "Пригласить экспертов", "Invite to collab": "Пригласить к участию", "It does not look like url": "Это не похоже на ссылку", @@ -134,11 +138,13 @@ "Please, confirm email": "Пожалуйста, подтвердите электронную почту", "Popular": "Популярное", "Popular authors": "Популярные авторы", + "Preview": "Предпросмотр", "Principles": "Принципы сообщества", "Profile": "Профиль", "Profile settings": "Настройки профиля", "Profile successfully saved": "Профиль успешно сохранён", "Publications": "Публикации", + "Publication settings": "Настройки публикации", "Publish": "Опубликовать", "Quit": "Выйти", "Reason uknown": "Причина неизвестна", @@ -149,6 +155,7 @@ "Restore password": "Восстановить пароль", "Save": "Сохранить", "Save settings": "Сохранить настройки", + "Save draft": "Сохранить черновик", "Search": "Поиск", "Search author": "Поиск автора", "Search topic": "Поиск темы", diff --git a/src/components/Nav/HeaderAuth.tsx b/src/components/Nav/HeaderAuth.tsx index dc5a9bba..0b72296d 100644 --- a/src/components/Nav/HeaderAuth.tsx +++ b/src/components/Nav/HeaderAuth.tsx @@ -72,6 +72,10 @@ export const HeaderAuth = (props: HeaderAuthProps) => {
+ +
+
diff --git a/src/components/Views/Create.module.scss b/src/components/Views/Create.module.scss index a956c195..a10297ce 100644 --- a/src/components/Views/Create.module.scss +++ b/src/components/Views/Create.module.scss @@ -1,3 +1,7 @@ +:global(.main-content) { + position: static; +} + .articlePreview { border: 2px solid #e8e8e8; min-height: 10em; @@ -51,3 +55,86 @@ display: block; } } + +.asidePanel { + background: #1f1f1f; + color: rgb(255 255 255 / 0.35); + display: flex; + flex-direction: column; + font-size: 1.7rem; + justify-content: flex-start; + height: 100%; + line-height: 1.4; + padding: $grid-gutter-width; + position: fixed; + transition: transform 0.3s; + right: 0; + top: 0; + z-index: 10; + + .close { + filter: invert(1); + margin: -1.6rem 0 0 -1.6rem; + } + + section { + border-bottom: 2px solid rgb(255 255 255 / 0.1); + //margin-bottom: 1.8rem; + margin-top: 1.8rem; + padding-bottom: 1.8rem; + + p { + margin: 0.6em 0; + + &:last-child { + margin-bottom: 0; + } + } + } + + .button { + font-weight: normal; + margin-left: -1.6rem; + + &:hover { + color: #fff; + text-decoration: none; + } + } + + .buttonWithIcon { + margin-left: -1.6rem; + + .icon { + filter: invert(0.5); + margin-right: 0.3em; + width: 1em; + } + + img { + vertical-align: middle; + } + } + + .stats { + display: flex; + flex: 1; + flex-direction: column; + justify-content: flex-end; + margin-top: 3em; + } + + a { + color: rgb(255 255 255 / 0.35); + font-weight: normal !important; + + &:hover { + background: none; + color: #fff; + } + } +} + +.asidePanelHidden { + transform: translateX(100%); +} diff --git a/src/components/Views/Create.tsx b/src/components/Views/Create.tsx index 93ac29cd..976d73e2 100644 --- a/src/components/Views/Create.tsx +++ b/src/components/Views/Create.tsx @@ -12,6 +12,8 @@ import { router, useRouter } from '../../stores/router' import { getPagePath } from '@nanostores/router' import { translit } from '../../utils/ru2en' import { Editor } from '../Editor/Editor' +import { Button } from '../_shared/Button' +import { Icon } from '../_shared/Icon' type ShoutForm = { slug: string @@ -30,6 +32,7 @@ export const CreateView = () => { const { page } = useRouter() const [isSlugChanged, setIsSlugChanged] = createSignal(false) + const [isEditorPanelOPened, setIsEditorPanelOPened] = createSignal(false) const [form, setForm] = createStore({ slug: '', @@ -82,141 +85,231 @@ export const CreateView = () => { setForm('slug', slug) } + const toggleEditorPanel = () => { + setIsEditorPanelOPened(!isEditorPanelOPened()) + } + return ( -
- {t('Write an article')} + <> +
+ {t('Write an article')} -
-
-
-
-
- - - setForm('subtitle', e.currentTarget.value)} - /> - - setForm('body', body)} /> - -
- {/**/} - Настройки -
-
-
-

Настройки публикации

- -

Slug

-
+ +
+
+
+
- + + setForm('subtitle', e.currentTarget.value)} + /> + + setForm('body', body)} /> + +
+ {/**/} + Настройки +
+
+

Настройки публикации

- {/*

Лид

*/} - {/*
*/} - {/* */} - {/* */} - {/*
*/} - - {/*

Выбор сообщества

*/} - {/*

Сообщества можно перечислить через запятую

*/} - {/*
*/} - {/* */} - {/*
*/} - -

Темы

- {/*

*/} - {/* Добавьте несколько тем, чтобы читатель знал, о чем ваш материал, и мог найти*/} - {/* его на страницах интересных ему тем. Темы можно менять местами, первая тема*/} - {/* становится заглавной*/} - {/*

*/} -
- - setForm('selectedTopics', newSelectedTopics)} - selectedTopics={form.selectedTopics} +

Slug

+
+ - - {/**/} -
+ +
- {/*

Соавторы

*/} - {/*

У каждого соавтора можно добавить роль

*/} - {/*
*/} - {/*
*/} - {/* */} - {/* */} - {/*
*/} - {/* */} - {/*
*/} + {/*

Лид

*/} + {/*
*/} + {/* */} + {/* */} + {/*
*/} - {/*
*/} - {/*
Михаил Драбкин
*/} - {/*
*/} - {/* */} - {/*
*/} - {/*
*/} + {/*

Выбор сообщества

*/} + {/*

Сообщества можно перечислить через запятую

*/} + {/*
*/} + {/* */} + {/*
*/} -

Карточка материала на главной

-

- Выберите заглавное изображение для статьи, тут сразу можно увидеть как карточка будет - выглядеть на главной странице -

-
+

Темы

+ {/*

*/} + {/* Добавьте несколько тем, чтобы читатель знал, о чем ваш материал, и мог найти*/} + {/* его на страницах интересных ему тем. Темы можно менять местами, первая тема*/} + {/* становится заглавной*/} + {/*

*/} +
+ + setForm('selectedTopics', newSelectedTopics)} + selectedTopics={form.selectedTopics} + /> + + {/**/} +
-
-

- Проверьте ещё раз введённые данные, если всё верно, вы можете сохранить или - опубликовать ваш текст + {/*

Соавторы

*/} + {/*

У каждого соавтора можно добавить роль

*/} + {/*
*/} + {/*
*/} + {/* */} + {/* */} + {/*
*/} + {/* */} + {/*
*/} + + {/*
*/} + {/*
Михаил Драбкин
*/} + {/*
*/} + {/* */} + {/*
*/} + {/*
*/} + +

Карточка материала на главной

+

+ Выберите заглавное изображение для статьи, тут сразу можно увидеть как карточка будет + выглядеть на главной странице

- {/**/} - Назад - +
+ +
+

+ Проверьте ещё раз введённые данные, если всё верно, вы можете сохранить или + опубликовать ваш текст +

+ {/**/} + Назад + +
+ +
+ +
+ +
+
+ +
+
+ +
+
+ +
+

+ Как написать хорошую статью +

+

+ Горячие клавиши +

+

+ Помощь +

+
+ +
+
+ Знаков: 2345 +
+
+ Слов: 215 +
+
+ Абзацев: 300 +
+
+ Посл. изм.: 22.03.22 в 18:20 +
+
+ + ) } diff --git a/src/components/_shared/Button/Button.module.scss b/src/components/_shared/Button/Button.module.scss index e4c0ce76..70e0047f 100644 --- a/src/components/_shared/Button/Button.module.scss +++ b/src/components/_shared/Button/Button.module.scss @@ -50,13 +50,25 @@ cursor: pointer; font-weight: bold; margin-right: 0.8em; + min-width: auto !important; padding: 0; + transition: border-color 0.3s, background-color 0.3s, color 0.3s; &:hover, &:active { background: #000; border-color: #000; color: #fff; + + :global(.icon) { + filter: invert(1); + } + } + + :global(.icon) { + margin: 0 -0.5em; + filter: invert(0); + transition: filter 0.3s; } }