Minor style fixes

2022-11-03 00:43:38 +03:00 · 2022-11-03 00:43:38 +03:00 · f78f007392
commit f78f007392
parent d903f233cf
20 changed files with 173 additions and 132 deletions
--- a/src/components/Author/Card.module.scss
+++ b/src/components/Author/Card.module.scss
@ -124,7 +124,6 @@
 .buttonSubscribe {
  align-items: center;
  aspect-ratio: 1/1;
-  background: #f6f6f6;
  border-radius: 100%;
  display: inline-flex;
  float: right;
@ -139,7 +138,6 @@
 }

 .buttonWrite {
-  background: #f7f7f7;
  color: #000;
  display: inline-flex;
  transition: background-color 0.3s, color 0.3s;
@ -193,7 +191,8 @@
  .buttonSubscribe {
    aspect-ratio: auto;
    background-color: #000;
-    border-radius: 2px;
+    border-color: #000;
+    border-radius: 0.8rem;
    float: none;
    padding-bottom: 0.6rem;
    padding-top: 0.6rem;
--- a/src/components/Author/Card.tsx
+++ b/src/components/Author/Card.tsx
@ -79,7 +79,7 @@ export const AuthorCard = (props: AuthorCardProps) => {
            </Show>

            <Show when={!props.compact}>
-              <button class={clsx(style.buttonWrite, style.button, 'button')}>
+              <button class={clsx(style.buttonWrite, style.button, 'button button--subscribe-topic')}>
                <Icon name="edit" class={style.icon} />
                {t('Write')}
              </button>
--- a/src/components/Author/Full.tsx
+++ b/src/components/Author/Full.tsx
@ -6,7 +6,7 @@ export const AuthorFull = (props: { author: Author }) => {
  return (
    <div class="container">
      <div class="row">
-        <div class="user-details">
+        <div class="col-md-8 offset-md-2 user-details">
          <AuthorCard author={props.author} compact={false} isAuthorPage={true} />
        </div>
      </div>
--- a/src/components/Discours/Footer.module.scss
+++ b/src/components/Discours/Footer.module.scss
@ -54,6 +54,14 @@
  @include font-size(1.5rem);

  padding-top: 1.6rem;
+
+  a {
+    color: rgba(255, 255, 255, 0.7);
+
+    &:hover {
+      color: #fff;
+    }
+  }
 }

 .footerCopyrightSocial {
--- a/src/components/Discours/Footer.tsx
+++ b/src/components/Discours/Footer.tsx
@ -26,8 +26,8 @@ export const Footer = () => {
          slug: '/about/dogma'
        },
        {
-          title: 'Terms of use',
-          slug: '/about/terms-of-use'
+          title: 'Principles',
+          slug: '/about/principles'
        },
        {
          title: 'How to write an article',
--- a/src/components/Discours/Subscribe.module.scss
+++ b/src/components/Discours/Subscribe.module.scss
@ -14,6 +14,9 @@
    font-family: inherit;
    @include font-size(2rem);

+    margin: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
    padding: 0.2em 0.5em 0.3em 0;
    width: 100%;

@ -33,8 +36,8 @@
    padding: 0 0.5em;
  }

-  button {
-    margin-top: 0;
-    padding-bottom: 0.8rem;
+  .button {
+    border-radius: 0;
+    margin: 0;
  }
 }
--- a/src/components/Discours/Subscribe.tsx
+++ b/src/components/Discours/Subscribe.tsx
@ -1,6 +1,7 @@
 import { createSignal, onMount } from 'solid-js'
 import styles from './Subscribe.module.scss'
 import { t } from '../../utils/intl'
+import { clsx } from 'clsx'

 export default () => {
  let emailElement: HTMLInputElement | undefined
@ -14,7 +15,10 @@ export default () => {
  return (
    <div class={styles.subscribeForm}>
      <input type="email" name="email" ref={emailElement} placeholder={t('Fill email')} value={title()} />
-      <button class="button--light" onClick={() => emailElement?.value && subscribe()}>
+      <button
+        class={clsx(styles.button, 'button--light')}
+        onClick={() => emailElement?.value && subscribe()}
+      >
        {t('Subscribe')}
      </button>
    </div>
--- a/src/components/Pages/about/DiscussionRulesPage.tsx
+++ b/src/components/Pages/about/DiscussionRulesPage.tsx
@ -5,14 +5,14 @@ export const DiscussionRulesPage = () => {
  const title = t('Discussion rules')
  return (
    <MainLayout>
-      <article class="container">
+      <article class="container container--static-page">
        <div class="row">
          <div class="col-md-8 offset-md-2">
            <h1>
-              <span class="wrapped">{title}</span>
+              <span class="wrapped" innerHTML={title} />
            </h1>
-          </div>
-          <div class="col-md-8 col-lg-6 offset-md-3">
+
+            <div class="col-lg-10 offset-md-1">
              <p>
                Открытая редакция существует благодаря дружному сообществу авторов
                и&nbsp;читателей&nbsp;&mdash; вдумчивых и&nbsp;сознательных людей, приверженных ценностям
@ -30,9 +30,9 @@ export const DiscussionRulesPage = () => {
              <ol>
                <li>
                  <p>
-                  Оскорбления, личные нападки, травля и&nbsp;угрозы. В&nbsp;любом виде. Конкретного человека
-                  или социальной группы&nbsp;&mdash; не&nbsp;суть. Агрессия, переход на&nbsp;личности
-                  и&nbsp;токсичность едва&nbsp;ли способствуют плодотворному общению.
+                    Оскорбления, личные нападки, травля и&nbsp;угрозы. В&nbsp;любом виде. Конкретного
+                    человека или социальной группы&nbsp;&mdash; не&nbsp;суть. Агрессия, переход
+                    на&nbsp;личности и&nbsp;токсичность едва&nbsp;ли способствуют плодотворному общению.
                  </p>
                </li>

@ -46,19 +46,19 @@ export const DiscussionRulesPage = () => {
                <li>
                  <p>
                    Спам, реклама, фейкньюз, ссылки на&nbsp;пропагандистские СМИ, вбросы дезинформации,
-                  специально уводящий от&nbsp;темы флуд, провокации, разжигание конфликтов, намеренный срыв
-                  дискуссий.
+                    специально уводящий от&nbsp;темы флуд, провокации, разжигание конфликтов, намеренный
+                    срыв дискуссий.
                  </p>
                </li>

                <li>
                  <p>
                    Неаргументированная критика и&nbsp;комментарии вроде &laquo;отстой&raquo;, &laquo;зачем
-                  я&nbsp;это увидел/а&raquo;, &laquo;не&nbsp;читал, но&nbsp;осуждаю&raquo;, &laquo;либераху
-                  порвало&raquo;, &laquo;лол&raquo;, &laquo;скатились&raquo;, &laquo;первый нах&raquo;
-                  и&nbsp;тому подобные. Односложные реплики не&nbsp;подразумевают возможность обогащающего
-                  диалога, не&nbsp;продуктивны и&nbsp;никак не&nbsp;помогают авторам делать материалы лучше,
-                  а&nbsp;читателям&nbsp;&mdash; разобраться.
+                    я&nbsp;это увидел/а&raquo;, &laquo;не&nbsp;читал, но&nbsp;осуждаю&raquo;,
+                    &laquo;либераху порвало&raquo;, &laquo;лол&raquo;, &laquo;скатились&raquo;,
+                    &laquo;первый нах&raquo; и&nbsp;тому подобные. Односложные реплики не&nbsp;подразумевают
+                    возможность обогащающего диалога, не&nbsp;продуктивны и&nbsp;никак не&nbsp;помогают
+                    авторам делать материалы лучше, а&nbsp;читателям&nbsp;&mdash; разобраться.
                  </p>
                </li>
              </ol>
@ -114,6 +114,7 @@ export const DiscussionRulesPage = () => {
              </ol>
            </div>
          </div>
+        </div>
      </article>
    </MainLayout>
  )
--- a/src/components/Pages/about/DogmaPage.tsx
+++ b/src/components/Pages/about/DogmaPage.tsx
@ -5,7 +5,7 @@ import { MainLayout } from '../../Layouts/MainLayout'
 export const DogmaPage = () => {
  return (
    <MainLayout>
-      <article class="container">
+      <article class="container container--static-page">
        <div class="row">
          <h4 class="col-md-8 offset-md-2">Редакционные принципы</h4>
          <div class="col-md-8 col-lg-6 offset-md-3">
--- a/src/components/Pages/about/GuidePage.tsx
+++ b/src/components/Pages/about/GuidePage.tsx
@ -14,7 +14,7 @@ export const GuidePage = () => {
      {/*<Meta property="og:image:width" content="1200" />*/}
      {/*<Meta property="og:image:height" content="630" />*/}

-      <article class="container">
+      <article class="container container--static-page">
        <div class="row">
          <div class="col-md-2">
            <nav class="content-index">
--- a/src/components/Pages/about/HelpPage.tsx
+++ b/src/components/Pages/about/HelpPage.tsx
@ -11,7 +11,7 @@ export const HelpPage = () => {

      {/*<Modal name="thank">Благодарим!</Modal>*/}

-      <article class="container discours-help">
+      <article class="container container--static-page discours-help">
        <div class="row">
          <div class="col-md-2">
            <nav class="content-index">
--- a/src/components/Pages/about/ManifestPage.tsx
+++ b/src/components/Pages/about/ManifestPage.tsx
@ -15,7 +15,7 @@ export const ManifestPage = () => {
      <Modal name="subscribe">
        <Subscribe />
      </Modal>
-      <article class="container">
+      <article class="container container--static-page">
        <div class="row">
          <div class="col-md-2">
            <nav class="content-index">
--- a/src/components/Pages/about/PartnersPage.tsx
+++ b/src/components/Pages/about/PartnersPage.tsx
@ -6,7 +6,7 @@ import { t } from '../../../utils/intl'
 export const PartnersPage = () => {
  return (
    <MainLayout>
-      <article class="container">
+      <article class="container container--static-page">
        <div class="row">
          <div class="col-md-8 offset-md-2">{t('Partners')}</div>
          <div class="col-md-8 col-lg-6 offset-md-3" />
--- a/src/components/Pages/about/PrinciplesPage.tsx
+++ b/src/components/Pages/about/PrinciplesPage.tsx
@ -5,7 +5,7 @@ export const PrinciplesPage = () => {
  const title = t('Principles')
  return (
    <MainLayout>
-      <article class="container">
+      <article class="container container--static-page">
        <div class="row">
          <div class="col-md-8 offset-md-2">
            <h1>
--- a/src/components/Pages/about/ProjectsPage.tsx
+++ b/src/components/Pages/about/ProjectsPage.tsx
@ -6,7 +6,7 @@ import { t } from '../../../utils/intl'
 export const ProjectsPage = () => {
  return (
    <MainLayout>
-      <article class="container">
+      <article class="container container--static-page">
        <div class="row">
          <div class="col-md-8 offset-md-2">{t('Projects')}</div>
          <div class="col-md-8 col-lg-6 offset-md-3" />
--- a/src/components/Pages/about/TermsOfUsePage.tsx
+++ b/src/components/Pages/about/TermsOfUsePage.tsx
@ -9,7 +9,7 @@ export const TermsOfUsePage = () => {
      {/*<Meta name="keywords" content={`Discours.io, ${t('Terms of use')}, ${t('Terms of use', 'en')}`} />*/}
      {/*<Meta property="og:title" content={title} />*/}
      {/*<Meta property="og:description" content={title} />*/}
-      <article class="container">
+      <article class="container container--static-page">
        <div class="row">
          <div class="col-md-2">
            <nav class="content-index">
--- a/src/components/Pages/about/ThanksPage.tsx
+++ b/src/components/Pages/about/ThanksPage.tsx
@ -10,7 +10,7 @@ export const ThanksPage = () => {
      {/*<Meta property="og:title" content={title} />*/}
      {/*<Meta property="og:description" content={title} />*/}

-      <article class="container">
+      <article class="container container--static-page">
        <div class="row">
          <div class="col-md-8 offset-md-2">
            <h1>
--- a/src/components/Topic/Card.tsx
+++ b/src/components/Topic/Card.tsx
@ -1,5 +1,5 @@
 import { capitalize, plural } from '../../utils'
-import style from './Card.module.scss'
+import styles from './Card.module.scss'
 import { createMemo, Show } from 'solid-js'
 import type { Topic } from '../../graphql/types.gen'
 import { FollowingEntity } from '../../graphql/types.gen'
@ -43,20 +43,20 @@ export const TopicCard = (props: TopicProps) => {
  }
  return (
    <div
-      class={style.topic}
+      class={styles.topic}
      classList={{
        row: !props.compact && !props.subscribeButtonBottom,
-        [style.topicInRow]: props.isTopicInRow
+        [styles.topicInRow]: props.isTopicInRow
      }}
    >
      <div classList={{ 'col-md-7': !props.compact && !props.subscribeButtonBottom }}>
        <Show when={props.topic.title}>
-          <div class={style.topicTitle}>
+          <div class={styles.topicTitle}>
            <a href={`/topic/${props.topic.slug}`}>{capitalize(props.topic.title || '')}</a>
          </div>
        </Show>
        <Show when={props.topic.pic}>
-          <div class={style.topicAvatar}>
+          <div class={styles.topicAvatar}>
            <a href={props.topic.slug}>
              <img src={props.topic.pic} alt={props.topic.title} />
            </a>
@ -65,7 +65,7 @@ export const TopicCard = (props: TopicProps) => {

        <Show when={!props.compact && props.topic?.body}>
          <div
-            class={style.topicDescription}
+            class={styles.topicDescription}
            classList={{ 'topic-description--short': props.shortDescription }}
          >
            {props.topic.body}
@ -73,9 +73,9 @@ export const TopicCard = (props: TopicProps) => {
        </Show>

        <Show when={props.topic?.stat}>
-          <div class={style.topicDetails}>
+          <div class={styles.topicDetails}>
            <Show when={!props.compact}>
-              <span class={style.topicDetailsTtem} classList={{ compact: props.compact }}>
+              <span class={styles.topicDetailsTtem} classList={{ compact: props.compact }}>
                {props.topic.stat?.shouts +
                  ' ' +
                  t('post') +
@ -84,7 +84,7 @@ export const TopicCard = (props: TopicProps) => {
                    locale() === 'ru' ? ['ов', '', 'а'] : ['s', '', 's']
                  )}
              </span>
-              <span class={style.topicDetailsTtem} classList={{ compact: props.compact }}>
+              <span class={styles.topicDetailsTtem} classList={{ compact: props.compact }}>
                {props.topic.stat?.authors +
                  ' ' +
                  t('author') +
@ -93,7 +93,7 @@ export const TopicCard = (props: TopicProps) => {
                    locale() === 'ru' ? ['ов', '', 'а'] : ['s', '', 's']
                  )}
              </span>
-              <span class={style.topicDetailsItem} classList={{ compact: props.compact }}>
+              <span class={styles.topicDetailsItem} classList={{ compact: props.compact }}>
                {props.topic.stat?.followers +
                  ' ' +
                  t('follower') +
@ -131,15 +131,15 @@ export const TopicCard = (props: TopicProps) => {
        <Show
          when={subscribed()}
          fallback={
-            <button onClick={() => subscribe(true)} class="button--light">
-              <Show when={props.iconButton}>{/*<Icon name={}/>*/}</Show>
+            <button onClick={() => subscribe(true)} class="button--light button--subscribe-topic">
+              <Show when={props.iconButton}>+</Show>

              <Show when={!props.iconButton}>+&nbsp;{t('Follow')}</Show>
            </button>
          }
        >
-          <button onClick={() => subscribe(false)} class="button--light">
-            <Show when={props.iconButton}>{/*<Icon name={}/>*/}</Show>
+          <button onClick={() => subscribe(false)} class="button--light button--subscribe-topic">
+            <Show when={props.iconButton}>-</Show>

            <Show when={!props.iconButton}>-&nbsp;{t('Unfollow')}</Show>
          </button>
--- a/src/locales/ru.json
+++ b/src/locales/ru.json
@ -26,7 +26,7 @@
  "Discours is an intellectual environment, a web space and tools that allows authors to collaborate with readers and come together to co-create publications and media projects": "Дискурс — это интеллектуальная среда, веб-пространство и инструменты, которые позволяют авторам сотрудничать с читателями и объединяться для совместного создания публикаций и медиапроектов",
  "Discours is created with our common effort": "Дискурс существует благодаря нашему общему вкладу",
  "Discussing": "Обсуждаемое",
-  "Discussion rules": "Правила сообществ самиздата в соцсетях",
+  "Discussion rules": "Правила сообществ самиздата в&nbsp;соцсетях",
  "Dogma": "Догма",
  "Edit": "Редактировать",
  "Email": "Почта",
@ -99,7 +99,7 @@
  "Successfully authorized": "Авторизация успешна",
  "Suggest an idea": "Предложить идею",
  "Support us": "Помочь журналу",
-  "Terms of use": "Условия использования",
+  "Terms of use": "Правила сайта",
  "Thank you": "Благодарности",
  "To leave a comment please": "Чтобы оставить комментарий, необходимо",
  "Top authors": "Рейтинг авторов",
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@ -26,6 +26,7 @@ html {
  height: 100%;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
+  overflow-y: scroll;
 }

 body {
@ -69,10 +70,14 @@ section {

 h1,
 h2 {
+  line-height: 1.3;
+
  .wrapped {
    background: #000;
    color: #fff;
    padding: 0 0.15em;
+    box-decoration-break: clone;
+    -webkit-box-decoration-break: clone;
  }
 }

@ -171,6 +176,7 @@ button {

 .button {
  background: #000;
+  box-sizing: border-box;
  color: #fff;
  font-size: 100%;
  font-weight: 500;
@ -179,6 +185,7 @@ button {

  &:hover {
    color: #ccc;
+    opacity: 1;
  }

  &:active {
@ -187,8 +194,10 @@ button {
 }

 .button--subscribe {
-  padding: 0.6rem 1.2rem;
+  background: #fff;
+  border: 2px solid #f6f6f6;
  font-size: 1.5rem;
+  padding: 0.6rem 1.2rem;
  transition: background-color 0.2s;

  img {
@ -210,10 +219,23 @@ button {
  @include font-size(1.5rem);

  font-weight: 400;
+  height: auto;
  margin-top: 0.6rem;
  padding: 0.6rem 1.2rem 0.6rem 1rem;
 }

+.button--subscribe-topic {
+  background: #fff;
+  border: 2px solid #000;
+  border-radius: 0.8rem;
+
+  &:hover {
+    background: #000;
+    color: #fff;
+    opacity: 1;
+  }
+}
+
 form {
  .pretty-form__item {
    position: relative;
@ -562,6 +584,10 @@ astro-island {
  }
 }

+.container--static-page {
+  padding-top: 1.5em;
+}
+
 .shift-content {
  @include media-breakpoint-up(md) {
    margin-left: 127px;