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

src/components/Article/Comment.module.scss

@@ -98,6 +98,10 @@
   }
 }
 
+.commentControlDelete {
+  align-items: center;
+}
+
 .commentControl {
   border: none;
   color: #696969;
@@ -106,7 +110,10 @@
   line-height: 1.2;
   margin-right: 0.8rem;
   padding: 0.2em 0.3em;
-  transition: opacity 0.2s, color 0.3s, background-color 0.3s;
+  transition:
+    opacity 0.2s,
+    color 0.3s,
+    background-color 0.3s;
   vertical-align: top;
 
   &:hover {
@@ -123,7 +130,9 @@
     filter: invert(0);
     margin-right: 0.3em;
     opacity: 0.6;
-    transition: filter 0.3s, opacity 0.2s;
+    transition:
+      filter 0.3s,
+      opacity 0.2s;
 
     img {
       margin-bottom: -0.1em;

src/components/Author/AuthorBadge/AuthorBadge.module.scss

@@ -1,15 +1,26 @@
 .AuthorBadge {
+  align-items: flex-start;
   display: flex;
   flex-flow: row nowrap;
-  align-items: flex-start;
+  margin-bottom: 2rem;
-  margin-bottom: 1rem;
+
+  @include media-breakpoint-down(sm) {
+    flex-wrap: wrap;
+    margin-bottom: 3rem;
+  }
 
   .info {
     @include font-size(1.4rem);
-
-    display: flex;
-    flex-direction: column;
     border: none;
+    display: flex;
+    flex: 0 calc(100% - 5.2rem);
+    flex-direction: column;
+    line-height: 1.3;
+    margin-bottom: 1rem;
+
+    @include media-breakpoint-up(sm) {
+      flex: 1 100%;
+    }
 
     &:hover {
       background: unset;
@@ -26,7 +37,24 @@
   }
 
   .actions {
+    flex: 0 20%;
+    margin-left: 5.2rem;
+
+    @include media-breakpoint-up(sm) {
+      margin-left: 2rem;
+    }
+
+    @include media-breakpoint-up(md) {
+      flex: 1;
       margin-left: auto;
       padding-left: 1rem;
+      text-align: right;
+    }
+  }
+
+  .subscribeButton {
+    border-radius: 0.8rem !important;
+    margin-right: 0 !important;
+    width: 9em;
   }
 }

src/components/Author/AuthorBadge/AuthorBadge.tsx

@@ -44,7 +44,13 @@ export const AuthorBadge = (props: Props) => {
 
   return (
     <div class={clsx(styles.AuthorBadge)}>
-      <Userpic hasLink={true} isMedium={true} name={props.author.name} userpic={props.author.userpic} />
+      <Userpic
+        hasLink={true}
+        isMedium={true}
+        name={props.author.name}
+        userpic={props.author.userpic}
+        slug={props.author.slug}
+      />
       <a href={`/author/${props.author.slug}`} class={styles.info}>
         <div class={styles.name}>{props.author.name}</div>
         <Switch
@@ -84,14 +90,16 @@ export const AuthorBadge = (props: Props) => {
                   size="S"
                   value={isSubscribing() ? t('...subscribing') : t('Subscribe')}
                   onClick={() => handleSubscribe(true)}
+                  class={styles.subscribeButton}
                 />
               }
             >
               <Button
-                variant="secondary"
+                variant="bordered"
                 size="S"
                 value={t('You are subscribed')}
                 onClick={() => handleSubscribe(false)}
+                class={styles.subscribeButton}
               />
             </Show>
           </Show>

src/components/Author/AuthorCard/AuthorCard.module.scss

@@ -52,6 +52,10 @@
 
   @include media-breakpoint-between(md, lg) {
     flex-wrap: wrap;
+
+    .listWrapper & {
+      flex-wrap: nowrap;
+    }
   }
 
   &.authorDetailsShrinked {
@@ -69,6 +73,10 @@
 
   @include media-breakpoint-between(md, lg) {
     flex: 1 0 100%;
+
+    .listWrapper & {
+      flex: 1;
+    }
   }
 
   @include media-breakpoint-up(md) {
@@ -82,9 +90,9 @@
 
 .authorName {
   border: none !important;
+  display: block;
   font-size: 1.6rem;
   font-weight: 500;
-  line-height: 2;
   margin-bottom: 0.8rem;
 
   .listWrapper &:before {
@@ -669,30 +677,4 @@
 
 .listWrapper {
   max-height: 70vh;
-  //padding-right: 2rem;
-
-  :global(.row) {
-    margin-right: 0;
-  }
-}
-
-.switcherCounter {
-  align-items: center;
-  background: #f7f7f8;
-  border-radius: 0.8rem;
-  display: inline-flex;
-  font-size: 1.2rem;
-  font-weight: bold;
-  height: 2.2rem;
-  justify-content: center;
-  line-height: 2.2rem;
-  margin-left: 0.4rem;
-  min-width: 2.2rem;
-  padding: 0 0.6rem;
-  text-align: center;
-}
-
-:global(.view-switcher__item--selected) .switcherCounter {
-  background: #000;
-  color: #fff;
 }

src/components/Author/AuthorCard/AuthorCard.tsx

@@ -401,13 +401,13 @@ export const AuthorCard = (props: Props) => {
                 <button type="button" onClick={() => setSubscriptionFilter('all')}>
                   {t('All')}
                 </button>
-                <span class={styles.switcherCounter}>{props.following.length}</span>
+                <span class="view-switcher__counter">{props.following.length}</span>
               </li>
               <li class={clsx({ 'view-switcher__item--selected': subscriptionFilter() === 'users' })}>
                 <button type="button" onClick={() => setSubscriptionFilter('users')}>
                   {t('Users')}
                 </button>
-                <span class={styles.switcherCounter}>
+                <span class="view-switcher__counter">
                   {props.following.filter((s) => 'name' in s).length}
                 </span>
               </li>
@@ -415,7 +415,7 @@ export const AuthorCard = (props: Props) => {
                 <button type="button" onClick={() => setSubscriptionFilter('topics')}>
                   {t('Topics')}
                 </button>
-                <span class={styles.switcherCounter}>
+                <span class="view-switcher__counter">
                   {props.following.filter((s) => 'title' in s).length}
                 </span>
               </li>

src/components/Feed/CardTopic.module.scss

@@ -17,16 +17,6 @@
       color: #fff !important;
     }
   }
-
-  a:before {
-    content: '';
-    height: 100%;
-    left: 0;
-    position: absolute;
-    top: 0;
-    width: 100%;
-    z-index: 2;
-  }
 }
 
 .shoutTopicFloorImportant {

src/components/Nav/Modal/Modal.module.scss

@@ -55,6 +55,8 @@
   }
 
   &.narrow {
+    left: 50%;
+    transform: translateX(-50%);
     width: 100%;
 
     @include media-breakpoint-up(sm) {
@@ -73,6 +75,7 @@
 }
 
 .modalInner {
+  height: 100%;
   overflow: auto;
   padding: 5.4rem 2.4rem 2.4rem;
   position: relative;

src/components/Topic/Card.tsx

@@ -78,7 +78,7 @@ export const TopicCard = (props: TopicProps) => {
         <div
           classList={{
             [clsx('col-sm-18 col-md-24 col-lg-14 col-xl-15', styles.topicDetails)]: props.isNarrow,
-            [clsx('col-12 col-xs-17 col-md-18', styles.topicDetails)]: props.compact,
+            [clsx('col-24 col-sm-17 col-md-18', styles.topicDetails)]: props.compact,
             [clsx('col-sm-17 col-md-18', styles.topicDetails)]:
               !props.subscribeButtonBottom && !props.isNarrow && !props.compact
           }}
@@ -122,7 +122,7 @@ export const TopicCard = (props: TopicProps) => {
           class={styles.controlContainer}
           classList={{
             'col-sm-6 col-md-24 col-lg-10 col-xl-9': props.isNarrow,
-            'col-12 col-xs-7 col-md-6': props.compact,
+            'col-24 col-sm-7 col-md-6': props.compact,
             'col-sm-7 col-md-6': !props.subscribeButtonBottom && !props.isNarrow && !props.compact
           }}
         >

src/components/Topic/TopicBadge/TopicBadge.module.scss

@@ -2,8 +2,12 @@
   display: flex;
   flex-direction: row;
   align-items: flex-start;
-  gap: 1rem;
+  margin-bottom: 2rem;
-  margin-bottom: 1rem;
+
+  @include media-breakpoint-down(sm) {
+    flex-wrap: wrap;
+    margin-bottom: 3rem;
+  }
 
   .picture {
     display: block;
@@ -16,6 +20,7 @@
     background-position: 50% 50%;
     background-repeat: no-repeat;
     border: none;
+    margin-right: 1.2rem;
 
     &:hover {
       background-color: var(--black-50);
@@ -27,10 +32,16 @@
   }
 
   .info {
-    display: flex;
-    flex-direction: column;
     border: none;
+    display: flex;
+    flex: 0 calc(100% - 5.2rem);
+    flex-direction: column;
     @include font-size(1.4rem);
+    margin-bottom: 1rem;
+
+    @include media-breakpoint-up(sm) {
+      flex: 1 100%;
+    }
 
     &:hover {
       background: unset;
@@ -48,7 +59,24 @@
   }
 
   .actions {
+    flex: 0 20%;
+    margin-left: 5.2rem;
+
+    @include media-breakpoint-up(sm) {
+      margin-left: 2rem;
+    }
+
+    @include media-breakpoint-up(md) {
+      flex: 1;
       margin-left: auto;
       padding-left: 1rem;
+      text-align: right;
+    }
+  }
+
+  .subscribeButton {
+    border-radius: 0.8rem !important;
+    margin-right: 0 !important;
+    width: 9em;
   }
 }

src/components/Topic/TopicBadge/TopicBadge.tsx

@@ -83,14 +83,16 @@ export const TopicBadge = (props: Props) => {
                   size="S"
                   value={isSubscribing() ? t('...subscribing') : t('Subscribe')}
                   onClick={() => subscribe(true)}
+                  class={styles.subscribeButton}
                 />
               }
             >
               <Button
                 onClick={() => subscribe(false)}
-                variant="secondary"
+                variant="bordered"
                 size="S"
                 value={t('You are subscribed')}
+                class={styles.subscribeButton}
               />
             </Show>
           </Show>

src/components/Views/Author/Author.module.scss

@@ -17,6 +17,7 @@
   border-bottom: 2px solid #000;
   margin-bottom: 2.4rem;
   padding-bottom: 4rem;
+  padding-top: 2.6rem;
 }
 
 .ratingContainer {

src/components/Views/Author/Author.tsx

@@ -138,14 +138,14 @@ export const AuthorView = (props: Props) => {
           <div class="col-md-16">
             <ul class="view-switcher">
               <li classList={{ 'view-switcher__item--selected': page().route === 'author' }}>
-                <a href={getPagePath(router, 'author', { slug: props.authorSlug })}>
+                <a href={getPagePath(router, 'author', { slug: props.authorSlug })}>{t('Publications')}</a>
-                  {t('Publications')}&nbsp;({author().stat.shouts})
+                <span class="view-switcher__counter">{author().stat.shouts}</span>
-                </a>
               </li>
               <li classList={{ 'view-switcher__item--selected': page().route === 'authorComments' }}>
                 <a href={getPagePath(router, 'authorComments', { slug: props.authorSlug })}>
-                  {t('Comments')}&nbsp;({author().stat.commented})
+                  {t('Comments')}
                 </a>
+                <span class="view-switcher__counter">{author().stat.commented}</span>
               </li>
               <li classList={{ 'view-switcher__item--selected': page().route === 'authorAbout' }}>
                 <a

src/components/_shared/Button/Button.module.scss

@@ -118,6 +118,6 @@
     height: 32px;
     min-width: 53px;
     font-size: 15px;
-    padding: 8px 16px;
+    padding: 1rem 1.2rem;
   }
 }

src/styles/app.scss

@@ -651,6 +651,27 @@ figure {
   }
 }
 
+.view-switcher__counter {
+  align-items: center;
+  background: #f7f7f8;
+  border-radius: 0.8rem;
+  display: inline-flex;
+  font-size: 1.2rem;
+  font-weight: bold;
+  height: 2.2rem;
+  justify-content: center;
+  line-height: 2.2rem;
+  margin-left: 0.4rem;
+  min-width: 2.2rem;
+  padding: 0 0.6rem;
+  text-align: center;
+
+  .view-switcher__item--selected & {
+    background: #000;
+    color: #fff;
+  }
+}
+
 .view-switcher__search {
   flex: 1 100%;
   text-align: right;