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

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>

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;

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;

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;

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 {

src/components/Author/AuthorCard/AuthorCard.tsx

@@ -208,8 +208,7 @@ export const AuthorCard = (props: Props) => {
             }
           >
             <div class={styles.subscribersContainer}>
-              <Switch>
+              <Show when={props.followers && props.followers.length > 0}>
-                <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} />}
@@ -218,18 +217,9 @@ export const AuthorCard = (props: Props) => {
                     {t('SubscriberWithCount', { count: props.followers.length })}
                   </div>
                 </a>
-                </Match>
+              </Show>
-                <Match when={props.followers && props.followers.length > 0 && props.isCurrentUser}>
-                  <Button
-                    variant="secondary"
-                    onClick={() => redirectPage(router, 'profileSettings')}
-                    value={t('Edit profile')}
-                  />
-                </Match>
-              </Switch>
 
-              <Switch>
+              <Show when={props.following && props.following.length > 0}>
-                <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) => {
@@ -245,23 +235,13 @@ export const AuthorCard = (props: Props) => {
                     {t('SubscriptionWithCount', { count: props?.following.length ?? 0 })}
                   </div>
                 </a>
-                </Match>
+              </Show>
-                <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>
             </div>
           </Show>
         </div>
         <ShowOnlyOnClient>
-          <Show when={isSessionLoaded() && props.author.links}>
+          <Show when={isSessionLoaded()}>
+            <Show when={props.author.links && props.author.links.length > 0}>
               <div class={styles.authorSubscribeSocial}>
                 <For each={props.author.links}>
                   {(link) => (
@@ -278,6 +258,7 @@ export const AuthorCard = (props: Props) => {
                   )}
                 </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}>

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 {

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;

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')}

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,7 +129,7 @@ export const HeaderAuth = (props: Props) => {
 
             <Show when={isNotificationsVisible()}>
               <div class={styles.userControlItem} onClick={handleBellIconClick}>
-                {/*TODO: check markup (cursor: pointer, hover)*/}
+                <div class={styles.button}>
                   <Icon name="bell-white" counter={unreadNotificationsCount()} class={styles.icon} />
                   <Icon
                     name="bell-white-hover"
@@ -137,6 +137,7 @@ export const HeaderAuth = (props: Props) => {
                     class={clsx(styles.icon, styles.iconHover)}
                   />
                 </div>
+              </div>
             </Show>
 
             <Show when={isSaveButtonVisible()}>
@@ -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>

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;

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;
     }
   }
 }

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;

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

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;

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;

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;
+  margin: 3.6rem -1rem 0;
-  padding: 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;