Create page (#106)

2023-05-31 15:23:18 +03:00 · 2023-05-31 15:23:18 +03:00 · 659abb5e21
commit 659abb5e21
parent a6f58702d9
10 changed files with 132 additions and 12 deletions
--- a/public/icons/create-article.svg
+++ b/public/icons/create-article.svg
@ -0,0 +1,8 @@
+<svg width="42" height="55" viewBox="0 0 42 55" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.200195 0.799805V9.9934V54.8798H41.2609V0.799805H8.41234H0.200195ZM34.5544 48.255H7.04365V15.6718V7.5598H15.3927H34.6912V48.255H34.5544Z" fill="black"/>
+<path d="M30.98 15.1636H10.4604V17.2155H30.98V15.1636Z" fill="black"/>
+<path d="M30.98 25.4233H10.4604V27.4753H30.98V25.4233Z" fill="black"/>
+<path d="M27.902 30.5532H10.4604V32.6052H27.902V30.5532Z" fill="black"/>
+<path d="M21.7462 35.6831H10.4604V37.7351H21.7462V35.6831Z" fill="black"/>
+<path d="M24.8241 20.2935H10.4604V22.3454H24.8241V20.2935Z" fill="black"/>
+</svg>
--- a/public/icons/create-books.svg
+++ b/public/icons/create-books.svg
@ -0,0 +1,3 @@
+<svg width="38" height="55" viewBox="0 0 38 55" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.0231 5.86268L31.9809 12.4024V51.0431H37.6542V8.9669L13.7299 0.799805L0.850098 5.20885V46.213L23.6574 54.7998H27.0727V14.3958L7.43485 7.59621L13.0231 5.86268Z" fill="black"/>
+</svg>
--- a/public/icons/create-images.svg
+++ b/public/icons/create-images.svg
@ -0,0 +1,5 @@
+<svg width="54" height="47" viewBox="0 0 54 47" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M43.2452 0.799805H0.299805V35.7677H43.2452V0.799805Z" fill="black"/>
+<path d="M48.0955 8.86944H53.9798V46.5272H8.35031V40.6303H48.0955V8.86944Z" fill="black"/>
+<rect x="6.26416" y="6.76416" width="30.8163" height="22.8637" fill="white"/>
+</svg>
--- a/public/icons/create-music.svg
+++ b/public/icons/create-music.svg
@ -0,0 +1,3 @@
+<svg width="47" height="47" viewBox="0 0 47 47" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M39.8531 25.8606L39.8156 9.44197L18.3041 12.8079C18.2899 27.8483 18.2827 36.3973 18.2827 38.4549L18.2623 38.429C17.9505 42.9261 14.1092 46.4798 9.41627 46.4798C4.51946 46.4798 0.549805 42.6106 0.549805 37.8376C0.549805 33.0647 4.51946 29.1955 9.41627 29.1955C10.2965 29.1955 11.1469 29.3205 11.9495 29.5534V6.35548L46.1488 0.799805C46.2568 23.1532 46.2568 34.4703 46.1488 34.7512L46.1282 34.7269C45.8156 39.2232 41.9746 42.776 37.2823 42.776C32.3855 42.776 28.4158 38.9068 28.4158 34.1339C28.4158 29.3609 32.3855 25.4917 37.2823 25.4917C38.1763 25.4917 39.0394 25.6207 39.8531 25.8606Z" fill="black"/>
+</svg>
--- a/public/icons/create-video.svg
+++ b/public/icons/create-video.svg
@ -0,0 +1,3 @@
+<svg width="64" height="38" viewBox="0 0 64 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M46.5455 0.600098H0V37.8538H46.5455V27.3762L64 34.3613V4.09263L46.5455 11.0777V0.600098ZM40.7273 32.0329H5.81818V6.42099H40.7273V32.0329ZM58.1818 12.2419V26.212L46.5455 21.5553V16.8986L58.1818 12.2419Z" fill="black"/>
+</svg>
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@ -22,6 +22,7 @@
  "Author": "Author",
  "Authors": "Authors",
  "Autotypograph": "Autotypograph",
+  "Back": "Back",
  "Back to main page": "Back to main page",
  "Become an author": "Become an author",
  "Bold": "Bold",
@ -42,6 +43,7 @@
  "By views": "By views",
  "Characters": "Знаков",
  "Chat Title": "Chat Title",
+  "Choose a post type": "Choose a post type",
  "Choose a title image for the article. You can immediately see how the publication card will look like.": "Choose a title image for the article. You can immediately see how the publication card will look like.",
  "Choose who you want to write to": "Choose who you want to write to",
  "Collaborate": "Help Edit",
@ -276,6 +278,7 @@
  "actions": "actions",
  "add link": "add link",
  "all topics": "all topics",
+  "article": "article",
  "author": "author",
  "authors": "authors",
  "back to menu": "back to menu",
@ -297,9 +300,12 @@
  "header 1": "header 1",
  "header 2": "header 2",
  "header 3": "header 3",
+  "images": "images",
  "invalid password": "invalid password",
  "italic": "italic",
+  "literature": "literature",
  "marker list": "marker list",
+  "music": "music",
  "my feed": "my ribbon",
  "notifications": "notifications",
  "number list": "number list",
@ -313,6 +319,7 @@
  "terms of use": "terms of use",
  "topics": "topics",
  "user already exist": "user already exists",
+  "video": "video",
  "view": "view",
  "zine": "zine"
 }
--- a/public/locales/ru/translation.json
+++ b/public/locales/ru/translation.json
@ -24,6 +24,7 @@
  "Author": "Автор",
  "Authors": "Авторы",
  "Autotypograph": "Автотипограф",
+  "Back": "Назад",
  "Back to main page": "Вернуться на главную",
  "Become an author": "Стать автором",
  "Bold": "Жирный",
@ -44,6 +45,7 @@
  "By views": "По просмотрам",
  "Characters": "Знаков",
  "Chat Title": "Тема дискурса",
+  "Choose a post type": "Выберите тип публикации",
  "Choose a title image for the article. You can immediately see how the publication card will look like.": "Выберите заглавное изображение для статьи. Тут же сразу можно увидеть как будет выглядеть карточка публикации.",
  "Choose who you want to write to": "Выберите кому хотите написать",
  "Collaborate": "Помочь редактировать",
@ -291,6 +293,7 @@
  "actions": "действия",
  "add link": "добавить ссылку",
  "all topics": "все темы",
+  "article": "статья",
  "author": "автор",
  "authors": "авторы",
  "back to menu": "назад в меню",
@ -315,9 +318,12 @@
  "header 1": "заголовок 1",
  "header 2": "заголовок 2",
  "header 3": "заголовок 3",
+  "images": "изображения",
  "invalid password": "некорректный пароль",
  "italic": "курсив",
+  "literature": "литература",
  "marker list": "маркир. список",
+  "music": "музыка",
  "my feed": "моя лента",
  "notifications": "уведомления",
  "number list": "нумер. список",
@ -335,6 +341,7 @@
  "terms of use": "правилами пользования сайтом",
  "topics": "темы",
  "user already exist": "пользователь уже существует",
+  "video": "видео",
  "view": "просмотр",
  "zine": "журнал"
 }
--- a/src/components/Nav/HeaderAuth.tsx
+++ b/src/components/Nav/HeaderAuth.tsx
@ -49,9 +49,7 @@ export const HeaderAuth = (props: HeaderAuthProps) => {
    toggleWarnings()
  }

-  const isEditorPage = createMemo(
-    () => page().route === 'create' || page().route === 'edit' || page().route === 'editSettings'
-  )
+  const isEditorPage = createMemo(() => page().route === 'edit' || page().route === 'editSettings')

  const showNotifications = createMemo(() => isAuthenticated() && !isEditorPage())
  const showSaveButton = createMemo(() => isAuthenticated() && isEditorPage())
--- a/src/pages/create.page.tsx
+++ b/src/pages/create.page.tsx
@ -1,19 +1,58 @@
 import { PageLayout } from '../components/_shared/PageLayout'
-import { Loading } from '../components/_shared/Loading'
-import { onMount } from 'solid-js'
+import { useLocalize } from '../context/localize'
+import { Button } from '../components/_shared/Button'
+import { Icon } from '../components/_shared/Icon'
+import { clsx } from 'clsx'
+import styles from '../styles/Create.module.scss'
 import { apiClient } from '../utils/apiClient'
-import { router } from '../stores/router'
 import { redirectPage } from '@nanostores/router'
+import { router } from '../stores/router'

-export const CreatePage = () => {
-  onMount(async () => {
+const handleCreateArticle = async () => {
  const shout = await apiClient.createArticle({ article: {} })
  redirectPage(router, 'edit', { shoutId: shout.id.toString() })
-  })
+}

+export const CreatePage = () => {
+  const { t } = useLocalize()
  return (
    <PageLayout>
-      <Loading />
+      <article class={clsx('wide-container', 'container--static-page', styles.Create)}>
+        <h1>{t('Choose a post type')}</h1>
+        <ul class={clsx('nodash', styles.list)}>
+          <li>
+            <div class={styles.link} onClick={handleCreateArticle}>
+              <Icon name="create-article" class={styles.icon} />
+              <div>{t('article')}</div>
+            </div>
+          </li>
+          <li>
+            <a href="#">
+              <Icon name="create-books" class={styles.icon} />
+              <div>{t('literature')}</div>
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              <Icon name="create-images" class={styles.icon} />
+              <div>{t('images')}</div>
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              <Icon name="create-music" class={styles.icon} />
+              <div>{t('music')}</div>
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              <Icon name="create-video" class={styles.icon} />
+              <div>{t('music')}</div>
+            </a>
+          </li>
+        </ul>
+        <Button value={t('Back')} onClick={() => window.history.back()} />
+      </article>
    </PageLayout>
  )
 }
--- a/src/styles/Create.module.scss
+++ b/src/styles/Create.module.scss
@ -0,0 +1,47 @@
+.Create {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 50vh;
+
+  .list {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    gap: 24px;
+
+    li {
+      a,
+      .link {
+        cursor: pointer;
+        text-align: center;
+        padding: 16px;
+        justify-content: center;
+        display: flex;
+        flex-direction: column;
+        font-weight: bold;
+        text-decoration: none;
+        border: none;
+
+        &:hover {
+          background: var(--link-hover-background);
+          color: var(--link-hover-color);
+
+          .icon {
+            filter: invert(1);
+          }
+        }
+      }
+    }
+
+    .icon {
+      margin: auto 21px auto;
+
+      img {
+        height: 54px;
+        max-width: 64px;
+      }
+    }
+  }
+}