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,61 +123,61 @@ 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}>
+      <div class="wide-container">
+        <ul class={clsx('view-switcher')}>
+          <li class={clsx({ 'view-switcher__item--selected': !props.layout })}>
+            <a href={getPagePath(router, 'expo', { layout: '' })}>
+              <span class={clsx('linkReplacement')}>{t('All')}</span>
+            </a>
+          </li>
+          <li class={clsx({ 'view-switcher__item--selected': props.layout === 'literature' })}>
+            <ConditionalWrapper
+              condition={props.layout !== 'literature'}
+              wrapper={(children) => (
+                <a href={getPagePath(router, 'expo', { layout: 'literature' })}>{children}</a>
+              )}
+            >
+              <span class={clsx('linkReplacement')}>{t('Literature')}</span>
+            </ConditionalWrapper>
+          </li>
+          <li class={clsx({ 'view-switcher__item--selected': props.layout === 'audio' })}>
+            <ConditionalWrapper
+              condition={props.layout !== 'audio'}
+              wrapper={(children) => (
+                <a href={getPagePath(router, 'expo', { layout: 'audio' })}>{children}</a>
+              )}
+            >
+              <span class={clsx('linkReplacement')}>{t('Music')}</span>
+            </ConditionalWrapper>
+          </li>
+          <li class={clsx({ 'view-switcher__item--selected': props.layout === 'image' })}>
+            <ConditionalWrapper
+              condition={props.layout !== 'image'}
+              wrapper={(children) => (
+                <a href={getPagePath(router, 'expo', { layout: 'image' })}>{children}</a>
+              )}
+            >
+              <span class={clsx('linkReplacement')}>{t('Gallery')}</span>
+            </ConditionalWrapper>
+          </li>
+          <li class={clsx({ 'view-switcher__item--selected': props.layout === 'video' })}>
+            <ConditionalWrapper
+              condition={props.layout !== 'video'}
+              wrapper={(children) => (
+                <a href={getPagePath(router, 'expo', { layout: 'video' })}>{children}</a>
+              )}
+            >
+              <span class={clsx('cursorPointer linkReplacement')}>{t('Video')}</span>
+            </ConditionalWrapper>
+          </li>
+        </ul>
+      </div>
+
       <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>}
-              >
-                <span class={clsx('linkReplacement')}>{t('All')}</span>
-              </ConditionalWrapper>
-            </li>
-            <li class={clsx({ 'view-switcher__item--selected': props.layout === 'literature' })}>
-              <ConditionalWrapper
-                condition={props.layout !== 'literature'}
-                wrapper={(children) => (
-                  <a href={getPagePath(router, 'expo', { layout: 'literature' })}>{children}</a>
-                )}
-              >
-                <span class={clsx('linkReplacement')}>{t('Literature')}</span>
-              </ConditionalWrapper>
-            </li>
-            <li class={clsx({ 'view-switcher__item--selected': props.layout === 'audio' })}>
-              <ConditionalWrapper
-                condition={props.layout !== 'audio'}
-                wrapper={(children) => (
-                  <a href={getPagePath(router, 'expo', { layout: 'audio' })}>{children}</a>
-                )}
-              >
-                <span class={clsx('linkReplacement')}>{t('Music')}</span>
-              </ConditionalWrapper>
-            </li>
-            <li class={clsx({ 'view-switcher__item--selected': props.layout === 'image' })}>
-              <ConditionalWrapper
-                condition={props.layout !== 'image'}
-                wrapper={(children) => (
-                  <a href={getPagePath(router, 'expo', { layout: 'image' })}>{children}</a>
-                )}
-              >
-                <span class={clsx('linkReplacement')}>{t('Gallery')}</span>
-              </ConditionalWrapper>
-            </li>
-            <li class={clsx({ 'view-switcher__item--selected': props.layout === 'video' })}>
-              <ConditionalWrapper
-                condition={props.layout !== 'video'}
-                wrapper={(children) => (
-                  <a href={getPagePath(router, 'expo', { layout: 'video' })}>{children}</a>
-                )}
-              >
-                <span class={clsx('cursorPointer linkReplacement')}>{t('Video')}</span>
-              </ConditionalWrapper>
-            </li>
-          </ul>
           <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;
       }
     }
   }