Merge branch 'main' of https://github.com/Discours/discoursio-webapp into feature/sse-connect

2023-10-17 09:41:09 +03:00 · 2023-10-17 09:41:09 +03:00 · 0d3103c672
commit 0d3103c672
parent f27d1c2d3a 3d8011a4e3
17 changed files with 204 additions and 110 deletions
--- a/public/icons/key.svg
+++ b/public/icons/key.svg
@ -0,0 +1,4 @@
+<svg width="12" height="20" viewBox="0 0 12 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path
+  d="M6 0.25C2.87109 0.25 0.375 2.76758 0.375 5.875C0.375 8.0332 1.5918 9.9043 3.375 10.8477V17.3809C3.375 17.791 3.5625 18.1777 3.88477 18.4336L5.24219 19.5059C5.44727 19.6699 5.69531 19.75 5.94141 19.75C6.2168 19.75 6.49219 19.6484 6.70898 19.4492L9.15625 17.1797C9.33789 17.0117 9.39062 16.7461 9.28906 16.5215L8.625 15.0586V15.0234L9.52734 13.9043C9.79688 13.5684 9.8125 13.0918 9.56055 12.7402L8.625 11.4316V10.8477C10.4082 9.9043 11.625 8.0332 11.625 5.875C11.625 2.76758 9.12891 0.25 6 0.25ZM6 1.75C8.27344 1.75 10.125 3.60156 10.125 5.875C10.125 7.40625 9.28125 8.80469 7.92383 9.52148L7.125 9.94336V11.9121L8.10352 13.2812L7.125 14.4941V15.3828L7.64648 16.5332L5.92383 18.1328L4.97852 17.3848C4.91211 17.334 4.875 17.2559 4.875 17.1719V9.94336L4.07617 9.52148C2.71875 8.80469 1.875 7.40625 1.875 5.875C1.875 3.60156 3.72656 1.75 6 1.75ZM6 3.25C5.17188 3.25 4.5 3.92188 4.5 4.75C4.5 5.57812 5.17188 6.25 6 6.25C6.82812 6.25 7.5 5.57812 7.5 4.75C7.5 3.92188 6.82812 3.25 6 3.25Z" fill="currentColor"/>
+</svg>
--- a/src/components/Article/Comment.module.scss
+++ b/src/components/Article/Comment.module.scss
@ -1,5 +1,5 @@
 .comment {
-  margin: 0.5em 0;
+  margin: 0 0 0.5em;
  padding: 1rem;
  transition: background-color 0.3s;
  position: relative;
--- a/src/components/Article/CommentDate.module.scss
+++ b/src/components/Article/CommentDate.module.scss
@ -4,14 +4,15 @@
  align-self: center;
  display: flex;
  flex: 1;
+  flex-wrap: wrap;
  @include font-size(1.2rem);
  font-size: 1.2rem;
-  gap: 1rem;
  justify-content: flex-start;
  margin: 0 1em 0 0;

  .date {
    font-weight: 500;
+    margin-right: 1rem;

    .icon {
      line-height: 1;
--- a/src/components/Author/AuthorBadge/AuthorBadge.module.scss
+++ b/src/components/Author/AuthorBadge/AuthorBadge.module.scss
@ -9,6 +9,10 @@
    margin-bottom: 3rem;
  }

+  @include media-breakpoint-down(md) {
+    text-align: left;
+  }
+
  .info {
    @include font-size(1.4rem);
    border: none;
--- a/src/components/Author/AuthorCard/AuthorCard.module.scss
+++ b/src/components/Author/AuthorCard/AuthorCard.module.scss
@ -42,7 +42,7 @@
  flex: 1;

  @include media-breakpoint-up(sm) {
-    align-items: baseline;
+    align-items: center;
    display: flex;
  }

@ -426,6 +426,10 @@
  }
 }

+.shareControl {
+  display: inline-block;
+}
+
 .buttonSubscribe {
  align-items: center;
  aspect-ratio: 1/1;
@ -490,6 +494,7 @@
    color: #696969;
    @include font-size(2rem);
    font-weight: 500;
+    margin-top: 1.5rem;
  }

  .authorSubscribe {
--- a/src/components/Author/AuthorCard/AuthorCard.tsx
+++ b/src/components/Author/AuthorCard/AuthorCard.tsx
@ -208,76 +208,57 @@ export const AuthorCard = (props: Props) => {
            }
          >
            <div class={styles.subscribersContainer}>
-              <Switch>
-                <Match when={props.followers && props.followers.length > 0 && !props.isCurrentUser}>
-                  <a href="?modal=followers" class={styles.subscribers}>
-                    <For each={props.followers.slice(0, 3)}>
-                      {(f) => <Userpic name={f.name} userpic={f.userpic} class={styles.userpic} />}
-                    </For>
-                    <div class={styles.subscribersCounter}>
-                      {t('SubscriberWithCount', { count: props.followers.length })}
-                    </div>
-                  </a>
-                </Match>
-                <Match when={props.followers && props.followers.length > 0 && props.isCurrentUser}>
-                  <Button
-                    variant="secondary"
-                    onClick={() => redirectPage(router, 'profileSettings')}
-                    value={t('Edit profile')}
-                  />
-                </Match>
-              </Switch>
+              <Show when={props.followers && props.followers.length > 0}>
+                <a href="?modal=followers" class={styles.subscribers}>
+                  <For each={props.followers.slice(0, 3)}>
+                    {(f) => <Userpic name={f.name} userpic={f.userpic} class={styles.userpic} />}
+                  </For>
+                  <div class={styles.subscribersCounter}>
+                    {t('SubscriberWithCount', { count: props.followers.length })}
+                  </div>
+                </a>
+              </Show>

-              <Switch>
-                <Match when={!props.isCurrentUser && props.following && props.following.length > 0}>
-                  <a href="?modal=following" class={styles.subscribers}>
-                    <For each={props.following.slice(0, 3)}>
-                      {(f) => {
-                        if ('name' in f) {
-                          return <Userpic name={f.name} userpic={f.userpic} class={styles.userpic} />
-                        } else if ('title' in f) {
-                          return <Userpic name={f.title} userpic={f.pic} class={styles.userpic} />
-                        }
-                        return null
-                      }}
-                    </For>
-                    <div class={styles.subscribersCounter}>
-                      {t('SubscriptionWithCount', { count: props?.following.length ?? 0 })}
-                    </div>
-                  </a>
-                </Match>
-                <Match when={props.isCurrentUser && props.following && props.following.length > 0}>
-                  <SharePopup
-                    containerCssClass={stylesHeader.control}
-                    title={props.author.name}
-                    description={props.author.bio}
-                    imageUrl={props.author.userpic}
-                    shareUrl={getShareUrl({ pathname: `/author/${props.author.slug}` })}
-                    trigger={<Button variant="secondary" value={t('Share')} />}
-                  />
-                </Match>
-              </Switch>
+              <Show when={props.following && props.following.length > 0}>
+                <a href="?modal=following" class={styles.subscribers}>
+                  <For each={props.following.slice(0, 3)}>
+                    {(f) => {
+                      if ('name' in f) {
+                        return <Userpic name={f.name} userpic={f.userpic} class={styles.userpic} />
+                      } else if ('title' in f) {
+                        return <Userpic name={f.title} userpic={f.pic} class={styles.userpic} />
+                      }
+                      return null
+                    }}
+                  </For>
+                  <div class={styles.subscribersCounter}>
+                    {t('SubscriptionWithCount', { count: props?.following.length ?? 0 })}
+                  </div>
+                </a>
+              </Show>
            </div>
          </Show>
        </div>
        <ShowOnlyOnClient>
-          <Show when={isSessionLoaded() && props.author.links}>
-            <div class={styles.authorSubscribeSocial}>
-              <For each={props.author.links}>
-                {(link) => (
-                  <a
-                    class={styles.socialLink}
-                    href={link.startsWith('http') ? link : `https://${link}`}
-                    target="_blank"
-                    rel="nofollow noopener"
-                  >
-                    <span class={styles.authorSubscribeSocialLabel}>
-                      {link.startsWith('http') ? link : `https://${link}`}
-                    </span>
-                  </a>
-                )}
-              </For>
-            </div>
+          <Show when={isSessionLoaded()}>
+            <Show when={props.author.links && props.author.links.length > 0}>
+              <div class={styles.authorSubscribeSocial}>
+                <For each={props.author.links}>
+                  {(link) => (
+                    <a
+                      class={styles.socialLink}
+                      href={link.startsWith('http') ? link : `https://${link}`}
+                      target="_blank"
+                      rel="nofollow noopener"
+                    >
+                      <span class={styles.authorSubscribeSocialLabel}>
+                        {link.startsWith('http') ? link : `https://${link}`}
+                      </span>
+                    </a>
+                  )}
+                </For>
+              </div>
+            </Show>
            <Show when={canFollow()}>
              <div class={styles.authorSubscribe}>
                <Show
@ -362,6 +343,26 @@ export const AuthorCard = (props: Props) => {
                </Show>
              </div>
            </Show>
+
+            <Show when={props.isCurrentUser}>
+              <div class={styles.authorSubscribe}>
+                <Button
+                  variant="secondary"
+                  onClick={() => redirectPage(router, 'profileSettings')}
+                  value={t('Edit profile')}
+                  class={styles.button}
+                />
+
+                <SharePopup
+                  containerCssClass={styles.shareControl}
+                  title={props.author.name}
+                  description={props.author.bio}
+                  imageUrl={props.author.userpic}
+                  shareUrl={getShareUrl({ pathname: `/author/${props.author.slug}` })}
+                  trigger={<Button variant="secondary" value={t('Share')} />}
+                />
+              </div>
+            </Show>
          </Show>
        </ShowOnlyOnClient>
        <Show when={props.followers}>
--- a/src/components/Feed/Sidebar/Sidebar.module.scss
+++ b/src/components/Feed/Sidebar/Sidebar.module.scss
@ -1,9 +1,11 @@
 .sidebar {
+  margin-top: -0.7rem;
  max-height: calc(100vh - 120px);
  overflow: auto;
  top: 120px;

  @include media-breakpoint-up(md) {
+    margin-top: 0;
    position: sticky;

    ul > li {
--- a/src/components/Nav/Header/Header.module.scss
+++ b/src/components/Nav/Header/Header.module.scss
@ -104,9 +104,9 @@
  position: relative;

  @include media-breakpoint-down(lg) {
-    flex: 1 !important;
    max-width: 100% !important;
-    padding: 0 !important;
+    position: absolute;
+    right: 0;
  }
 }

@ -139,7 +139,7 @@
    overflow: auto;
    padding: $container-padding-x !important;
    position: fixed;
-    top: 64px;
+    top: 58px;
    width: 100%;
    z-index: 1;

@ -191,8 +191,9 @@
    }
  }

-  ul {
+  :global(.view-switcher) {
    margin-top: 0;
+    overflow: hidden;
  }

  li {
@ -217,6 +218,10 @@
  .fixed & {
    display: block;
  }
+
+  a {
+    padding-top: 0.1em;
+  }
 }

 .mainNavigationSocial a {
@ -246,6 +251,30 @@
    background: #f7f7f8;
    border: none;
    border-radius: 1.6rem;
+    padding-right: 5.6rem;
+
+    &:not(:placeholder-shown) {
+      & ~ .mobileSubscriptionSubmit {
+        display: block;
+      }
+    }
+  }
+}
+
+.mobileSubscriptionSubmit {
+  aspect-ratio: 1/1;
+  display: none;
+  height: 100%;
+  position: absolute;
+  right: 0;
+  top: 0;
+
+  img {
+    aspect-ratio: 1/1;
+    left: 50%;
+    position: relative;
+    transform: translateX(-50%);
+    width: 16px !important;
  }
 }

@ -387,19 +416,11 @@
  display: flex;
  justify-content: flex-end;
  position: absolute;
-  right: 5rem;
+  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;

-  @include media-breakpoint-up(lg) {
-    right: 0;
-  }
-
-  @include media-breakpoint-up(xl) {
-    right: 2rem;
-  }
-
  .control {
    cursor: pointer;
    border: 0;
@ -446,10 +467,6 @@
    z-index: -1;
  }

-  @include media-breakpoint-down(md) {
-    padding: divide($container-padding-x, 2);
-  }
-
  .userpic {
    align-items: center;
    margin-right: 0;
@ -491,6 +508,7 @@
  a,
  a:link {
    border: none;
+    cursor: pointer;
    height: auto;
    margin: 0;
    padding: 0;
@ -534,6 +552,12 @@
  }

  &:global(.loginbtn) {
+    background: #e9e9ee;
+
+    @include media-breakpoint-up(xl) {
+      background: none;
+    }
+
    .icon {
      height: 2.4rem;
      width: 2.4rem;
--- a/src/components/Nav/Header/Header.tsx
+++ b/src/components/Nav/Header/Header.tsx
@ -173,6 +173,11 @@ export const Header = (props: Props) => {

      <div class={clsx(styles.mainHeaderInner, 'wide-container')}>
        <nav class={clsx('row', styles.headerInner, { ['fixed']: fixed() })}>
+          <div class={clsx(styles.burgerContainer, 'col-auto')}>
+            <div class={styles.burger} classList={{ fixed: fixed() }} onClick={toggleFixed}>
+              <div />
+            </div>
+          </div>
          <div class={clsx('col-md-5 col-xl-4 col-auto', styles.mainLogo)}>
            <a href={getPagePath(router, 'home')}>
              <img src="/logo.svg" alt={t('Discours')} />
@ -278,6 +283,9 @@ export const Header = (props: Props) => {
                  <div class="pretty-form__item">
                    <input type="email" placeholder="Ваш email" id="subscription-email" />
                    <label for="subscription-email">{t('Your email')}</label>
+                    <button class={styles.mobileSubscriptionSubmit}>
+                      <Icon name="arrow-right" />
+                    </button>
                  </div>
                </form>

@ -327,11 +335,6 @@ export const Header = (props: Props) => {
              </a>
            </div>
          </Show>
-          <div class={clsx(styles.burgerContainer, 'col-auto')}>
-            <div class={styles.burger} classList={{ fixed: fixed() }} onClick={toggleFixed}>
-              <div />
-            </div>
-          </div>

          <div
            class={clsx(styles.subnavigation, 'col')}
--- a/src/components/Nav/HeaderAuth.tsx
+++ b/src/components/Nav/HeaderAuth.tsx
@ -108,7 +108,7 @@ export const HeaderAuth = (props: Props) => {
  return (
    <ShowOnlyOnClient>
      <Show when={isSessionLoaded()} keyed={true}>
-        <div class={clsx('col-sm-6 col-lg-7', styles.usernav)}>
+        <div class={clsx('col-auto col-lg-7', styles.usernav)}>
          <div class={styles.userControl}>
            <Show when={isCreatePostButtonVisible()}>
              <div class={clsx(styles.userControlItem, styles.userControlItemVerbose)}>
@ -129,13 +129,14 @@ export const HeaderAuth = (props: Props) => {

            <Show when={isNotificationsVisible()}>
              <div class={styles.userControlItem} onClick={handleBellIconClick}>
-                {/*TODO: check markup (cursor: pointer, hover)*/}
-                <Icon name="bell-white" counter={unreadNotificationsCount()} class={styles.icon} />
-                <Icon
-                  name="bell-white-hover"
-                  counter={unreadNotificationsCount()}
-                  class={clsx(styles.icon, styles.iconHover)}
-                />
+                <div class={styles.button}>
+                  <Icon name="bell-white" counter={unreadNotificationsCount()} class={styles.icon} />
+                  <Icon
+                    name="bell-white-hover"
+                    counter={unreadNotificationsCount()}
+                    class={clsx(styles.icon, styles.iconHover)}
+                  />
+                </div>
              </div>
            </Show>

@ -175,7 +176,7 @@ export const HeaderAuth = (props: Props) => {
                <div class={clsx(styles.userControlItem, styles.userControlItemVerbose, 'loginbtn')}>
                  <a href="?modal=auth&mode=login">
                    <span class={styles.textLabel}>{t('Enter')}</span>
-                    <Icon name="user-default" class={styles.icon} />
+                    <Icon name="key" class={styles.icon} />
                    {/*<Icon name="user-default" class={clsx(styles.icon, styles.iconHover)} />*/}
                  </a>
                </div>
--- a/src/components/Nav/Modal/Modal.module.scss
+++ b/src/components/Nav/Modal/Modal.module.scss
@ -82,6 +82,7 @@
  overflow: auto;
  padding: 5.4rem 2.4rem 2.4rem;
  position: relative;
+  text-align: left;

  @include media-breakpoint-up(sm) {
    padding: 5rem;
--- a/src/components/Nav/Topics/Topics.module.scss
+++ b/src/components/Nav/Topics/Topics.module.scss
@ -1,6 +1,5 @@
 .Topics {
-  @include font-size(1.4rem);
-
+  font-size: 1.6rem;
  height: 6rem;
  line-height: 6rem;
  margin-bottom: 3rem;
@ -12,32 +11,68 @@
    padding: 0 divide($container-padding-x, 2);
  }

+  @include media-breakpoint-up(md) {
+    @include font-size(1.4rem);
+  }
+
  .list {
    display: flex;
-    flex-wrap: wrap;
    font-weight: 500;
    list-style: none;
    margin-top: 0;
-    padding: 0 7em 0 0;
+    overflow: auto;
+    padding: 0;
    position: relative;
+
+    @include media-breakpoint-up(lg) {
+      flex-wrap: wrap;
+      overflow: hidden;
+      padding-right: 7em;
+    }
  }

  .item {
    margin-right: 2.4rem;

    &.right {
+      display: none;
      margin-right: 0;
      position: absolute;
      right: 0;
      top: 0;
+      white-space: nowrap;
+
+      @include media-breakpoint-up(lg) {
+        display: block;
+      }
+
+      :global(.icon) {
+        display: inline-block;
+        margin-left: 0.3em;
+        top: 0.15em;
+      }
    }

    a {
      border-bottom: unset;
+
      &.selected {
        font-weight: 500;
        border-bottom: 2px solid var(--default-color);
      }
+
+      &:hover {
+        .icon {
+          filter: invert(1);
+        }
+      }
+    }
+
+    .icon {
+      display: inline-block;
+      margin-left: 0.3em;
+      position: relative;
+      top: 0.15em;
    }
  }
 }
--- a/src/components/Topic/TopicBadge/TopicBadge.module.scss
+++ b/src/components/Topic/TopicBadge/TopicBadge.module.scss
@ -9,6 +9,10 @@
    margin-bottom: 3rem;
  }

+  @include media-breakpoint-down(md) {
+    text-align: left;
+  }
+
  .picture {
    display: block;
    width: 40px;
--- a/src/components/Views/Author/Author.module.scss
+++ b/src/components/Views/Author/Author.module.scss
@ -8,8 +8,12 @@
  }

  .groupControls {
-    margin-bottom: 6rem !important;
+    margin-bottom: 2rem !important;
    margin-top: 0 !important;
+
+    @include media-breakpoint-up(md) {
+      margin-bottom: 6rem !important;
+    }
  }
 }

--- a/src/components/Views/Feed.module.scss
+++ b/src/components/Views/Feed.module.scss
@ -1,5 +1,6 @@
 .feedFilter {
-  margin: 0.2em 0 4.8rem;
+  margin-bottom: 4.8rem;
+  margin-top: 0.2em;

  @include media-breakpoint-down(md) {
    margin-right: 4rem !important;
--- a/src/components/_shared/Button/Button.module.scss
+++ b/src/components/_shared/Button/Button.module.scss
@ -1,6 +1,6 @@
 .button {
  border-radius: 2px;
-  display: flex;
+  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@ -589,18 +589,22 @@ figure {

 .view-switcher {
  @include font-size(1.4rem);
-
  display: flex;
-  flex-wrap: wrap;
  font-weight: 500;
  list-style: none;
-  margin: 3.6rem 0 0;
-  padding: 0;
+  margin: 3.6rem -1rem 0;
+  overflow: auto;
+  padding: 0 1rem;
+
+  @include media-breakpoint-up(md) {
+    flex-wrap: wrap;
+  }

  li {
    display: inline-block;
    margin-right: 2rem;
    margin-bottom: 0.6em;
+    white-space: nowrap;

    &:last-child {
      margin-right: 0;