Merge pull request #463 from Discours/hotfix/expo

Expo fixes

public/locales/en/translation.json

@@ -86,6 +86,7 @@
   "Commenting": "Commenting",
   "Comments": "Comments",
   "CommentsWithCount": "{count, plural, =0 {{count} comments} one {{count} comment} few {{count} comments} other {{count} comments}}",
+  "Common feed": "All",
   "Communities": "Communities",
   "Community Discussion Rules": "Community Discussion Rules",
   "Community Principles": "Community Principles",

public/locales/ru/translation.json

@@ -31,7 +31,7 @@
   "All posts rating": "Рейтинг всех постов",
   "All posts": "Все публикации",
   "All topics": "Все темы",
-  "All": "Общая лента",
+  "All": "Все",
   "Almost done! Check your email.": "Почти готово! Осталось подтвердить вашу почту.",
   "Are you sure you want to delete this comment?": "Уверены, что хотите удалить этот комментарий?",
   "Are you sure you want to delete this draft?": "Уверены, что хотите удалить этот черновик?",
@@ -90,6 +90,7 @@
   "Commenting": "Комментирование",
   "Comments": "Комментарии",
   "CommentsWithCount": "{count, plural, =0 {{count} комментариев} one {{count} комментарий} few {{count} комментария} other {{count} комментариев}}",
+  "Common feed": "Общая лента",
   "Communities": "Сообщества",
   "Community Discussion Rules": "Правила дискуссий в сообществе",
   "Community Principles": "Принципы сообщества",

src/components/Feed/ArticleCard/ArticleCard.module.scss

@@ -13,7 +13,10 @@
 
   &:hover {
     .shoutCardCover {
-      transform: scale(1.05);
+      img,
+      .placeholderCoverImage {
+        transform: scale(1.1);
+      }
     }
   }
 
@@ -110,7 +113,6 @@
   padding-bottom: 56.2%; // 16:9
   position: relative;
   transform-origin: 50% 50%;
-  transition: transform 1s ease-in-out;
 
   &.loading {
     background: rgb(0 0 0 / 20%);
@@ -123,9 +125,10 @@
     width: 100%;
   }
 
-  &:hover img {
-    /* TODO: small zoom on hover */
-    transform: scaleZ(1.1);
+  img,
+  .placeholderCoverImage {
+    transform: scale(1);
+    transition: transform 1s ease-in-out;
   }
 }
 

src/components/Feed/ArticleCard/ArticleCard.tsx

@@ -99,6 +99,7 @@ const getMainTopicTitle = (article: Shout, lng: string) => {
 
 const LAYOUT_ASPECT = {
   music: styles.aspectRatio1x1,
+  audio: styles.aspectRatio1x1,
   literature: styles.aspectRatio16x9,
   video: styles.aspectRatio16x9,
   image: styles.aspectRatio4x3,

src/components/Feed/Sidebar/Sidebar.tsx

@@ -40,7 +40,7 @@ export const Sidebar = () => {
           >
             <span class={styles.sidebarItemName}>
               <Icon name="feed-all" class={styles.icon} />
-              {t('All')}
+              {t('Common feed')}
             </span>
           </a>
         </li>

src/components/Views/Expo/Expo.tsx

@@ -123,19 +123,15 @@ export const Expo = (props: Props) => {
     loadMoreWithoutScrolling(LOAD_MORE_PAGE_SIZE)
     setArticlesEndPage((prev) => prev + LOAD_MORE_PAGE_SIZE)
   }
-
+  console.log(props.layout)
   return (
     <div class={styles.Expo}>
-      <Show when={expoShouts().length > 0} fallback={<Loading />}>
       <div class="wide-container">
         <ul class={clsx('view-switcher')}>
           <li class={clsx({ 'view-switcher__item--selected': !props.layout })}>
-              <ConditionalWrapper
-                condition={Boolean(props.layout)}
-                wrapper={(children) => <a href={getPagePath(router, 'expo', { layout: '' })}>{children}</a>}
-              >
+            <a href={getPagePath(router, 'expo', { layout: '' })}>
               <span class={clsx('linkReplacement')}>{t('All')}</span>
-              </ConditionalWrapper>
+            </a>
           </li>
           <li class={clsx({ 'view-switcher__item--selected': props.layout === 'literature' })}>
             <ConditionalWrapper
@@ -178,6 +174,10 @@ export const Expo = (props: Props) => {
             </ConditionalWrapper>
           </li>
         </ul>
+      </div>
+
+      <Show when={expoShouts().length > 0} fallback={<Loading />}>
+        <div class="wide-container">
           <div class="row">
             <For each={expoShouts()?.slice(0, LOAD_MORE_PAGE_SIZE)}>
               {(shout) => (

src/styles/app.scss

@@ -678,7 +678,7 @@ figure {
       cursor: default;
 
       &:hover {
-        background: #fff;
+        background: transparent;
       }
     }
   }