Merge pull request #55 from pa7lux/feature/israel

Feature/israel

README.md

@@ -47,7 +47,7 @@ metaOgImage: 'some link on some image'
 - `theme` - Main color which will be used on article's page. **Before writing name, ask if it exists**
 - `svg` - Picture which will be used in button on home page. **Before writing name, ask if it exists**
 - `metaTitle` - Title which will be the name for tab in browser. Mostly you need to write in this way: `'imhr.top - title'`
-- `metaDescription` - Meta description. Mostly you need to write in this way: `'I am here. Сайт, на котором подростки из Украины рассказывают свои истории.'`. Inner text depends on language for which you currently creating an article.
+- `metaDescription` - Meta description. Mostly you need to write in this way: `'I am here. Сайт, где подростки осмысляют войну и мир.'`. Inner text depends on language for which you currently creating an article.
 - `metaOgTitle` - Mostly you need to write in this way: `'imhr.top - title'`
 - `metaOgImage` - Image which will be shown as an icon for tab in browser.
 

components/ArticleComponents/AlignBlocks/LargeBlock/LargeBlock.tsx

@@ -1,9 +1,16 @@
 import React, { FC, PropsWithChildren } from 'react';
+import cn from 'classnames';
 
 import BlockStyles from './LargeBlock.module.css';
 
-const LargeBlock: FC<PropsWithChildren> = ({ children }) => {
-  return <div className={BlockStyles.block_large}>{children}</div>;
+type Props = {
+  className?: string;
+};
+
+const LargeBlock: FC<PropsWithChildren<Props>> = ({ children, className }) => {
+  return (
+    <div className={cn(BlockStyles.block_large, className)}>{children}</div>
+  );
 };
 
 export { LargeBlock };

components/ArticleComponents/AuthorCard/AuthorCard.module.css

@@ -15,12 +15,23 @@
   font-variation-settings: 'wght' 150;
 }
 
+.rtl-card .author_content {
+  padding-left: clamp(1.375rem, 0.9821rem + 1.9643vw, 2.75rem);
+  padding-right: clamp(5rem, 3.625rem + 6.875vw, 9.8125rem);
+}
+
 .author_image {
   position: absolute;
   top: 0;
   left: 0;
   width: 37.2%;
-  transform: translate(-50%, -6%);
+  transform: translate(-43%, -7%);
+}
+
+.rtl-card .author_image {
+  left: auto;
+  right: 0;
+  transform: translate(43%, -7%);
 }
 
 .author_heading {
@@ -56,6 +67,6 @@
     padding-right: clamp(1.25rem, 0.732rem + 2.7624vw, 2.5rem);
     padding-bottom: clamp(1.25rem, 0.732rem + 2.7624vw, 2.5rem);
     padding-left: clamp(3.75rem, 2.7141rem + 5.5249vw, 6.25rem);
-    transform: translateX(2vw);
+    /* transform: translateX(2vw); */
   }
 }

components/ArticleComponents/AuthorCard/AuthorCard.tsx

@@ -5,11 +5,21 @@ import CardStyles from './AuthorCard.module.css';
 
 type Props = {
   src: string;
+  direction?: 'ltr' | 'rtl';
 };
 
-const AuthorCard: FC<PropsWithChildren<Props>> = ({ children, src }) => {
+const AuthorCard: FC<PropsWithChildren<Props>> = ({
+  children,
+  src,
+  direction,
+}) => {
   return (
-    <div className={CardStyles.author_block}>
+    <div
+      className={cn(
+        CardStyles.author_block,
+        direction === 'rtl' && CardStyles['rtl-card']
+      )}
+    >
       <div className={cn(CardStyles.author_content, 'box-radius')}>
         <svg
           className={CardStyles.author_image}

components/ArticleComponents/ContentImageGridList/ContentImageGridList.module.css

@@ -0,0 +1,47 @@
+.image_grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 2vw 4vw;
+  width: 100%;
+  padding: 2vw 4vw;
+  background-color: #1e1e1e;
+  border-radius: var(--radius-main);
+  align-items: start;
+}
+
+.image_grid:has(li:nth-child(3)) {
+  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
+}
+
+@media (max-width: 650px) {
+  .image_grid {
+    grid-template-columns: 1fr;
+  }
+
+  .image_grid:has(li:nth-child(3)) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.image_grid_item {
+  width: 100%;
+}
+
+.image_grid_item :global(.text-type-caption) {
+  color: #f5f5f5;
+  text-align: center;
+}
+
+.image_grid_item > :global(div) {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.image_grid_item :global(img) {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  object-position: center;
+  max-height: 300px;
+  /* filter: contrast(1.3) brightness(1.2) grayscale(0.5) sepia(0.4); */
+}

components/ArticleComponents/ContentImageGridList/ContentImageGridList.tsx

@@ -0,0 +1,26 @@
+import { FC } from 'react';
+import cn from 'classnames';
+import { Children, cloneElement } from 'react';
+
+import styles from './ContentImageGridList.module.css';
+
+type Props = {
+  children: JSX.Element[];
+  className?: string;
+};
+
+const ContentImageGridList: FC<Props> = ({ children, className }) => {
+  return (
+    <ul className={cn(styles.image_grid, className)}>
+      {Children.map(children, (child, i) => {
+        return (
+          <li className={cn(styles.image_grid_item)} key={i}>
+            {cloneElement(child)}
+          </li>
+        );
+      })}
+    </ul>
+  );
+};
+
+export { ContentImageGridList };

components/ArticleComponents/DialogBubble/DialogBubble.module.css

@@ -0,0 +1,44 @@
+.bubble_block {
+  display: flex;
+  gap: 20px;
+  background-color: var(--accent-color);
+  align-items: center;
+  padding: 60px 20px 40px;
+  border-radius: 16px;
+  margin: 80px 0 80px;
+  position: relative;
+}
+
+.bubble_block:last-of-type {
+  margin-bottom: 60px;
+}
+
+.people_list {
+  display: flex;
+  gap: 10px;
+  text-align: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: translate(20px, -40%);
+}
+
+.people_list img {
+  display: block;
+  width: 80px;
+  aspect-ratio: 1/1;
+  object-fit: cover;
+  object-position: center;
+  border-radius: 50%;
+}
+
+.people_list span {
+  display: block;
+  margin-top: 4px;
+  font-weight: bold;
+  transform: translate(0, -70%);
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 0.2em;
+  font-size: 0.8em;
+}

components/ArticleComponents/DialogBubble/DialogBubble.tsx

@@ -0,0 +1,44 @@
+import React, { FC, PropsWithChildren } from 'react';
+import cn from 'classnames';
+import { useTranslation } from 'next-i18next';
+import CardStyles from './DialogBubble.module.css';
+
+type Props = {
+  people: string;
+  direction?: 'ltr' | 'rtl';
+};
+
+const DialogBubble: FC<PropsWithChildren<Props>> = ({
+  children,
+  people,
+  direction,
+}) => {
+  const { t } = useTranslation('bubble-authors');
+  const peopleIdArray: string[] = people.split(',');
+
+  return (
+    <div
+      className={cn(
+        CardStyles.bubble_block,
+        direction === 'rtl' && CardStyles['rtl-card']
+      )}
+    >
+      <ul className={cn(CardStyles.people_list)}>
+        {peopleIdArray.map((person) => {
+          return (
+            <li key={t(`${person}.name`)}>
+              <img
+                src={t(`${person}.img`) as string}
+                alt={`На фото ${`${person}.name`}`}
+              />
+              <span>{t(`${person}.name`)}</span>
+            </li>
+          );
+        })}
+      </ul>
+      <div className={cn(CardStyles.text)}>{children}</div>
+    </div>
+  );
+};
+
+export { DialogBubble };

components/ArticleComponents/Heading/Heading.tsx

@@ -16,7 +16,6 @@ let cx = classNames.bind(HeadingStyles);
 
 const Heading: FC<Props> = ({ photoLeft = false, author, title, img }) => {
   const { t } = useTranslation('components');
-
   return (
     <section
       className={cx({

components/ArticleComponents/TextWithUnder/TextWithUnder.module.css

@@ -1,6 +1,7 @@
 .big_heading_and_text {
   /* margin-bottom: calc(3 * var(--size-unit)); */
   position: relative;
+  margin: 0;
 }
 
 .big_heading_and_text .heading_big {

components/ArticleComponents/TextWithUnder/TextWithUnder.tsx

@@ -6,9 +6,14 @@ import { useTranslation } from 'react-i18next';
 
 type Props = {
   author: string;
+  hasAuthor?: boolean;
 };
 
-const TextWithUnder: FC<PropsWithChildren<Props>> = ({ children, author }) => {
+const TextWithUnder: FC<PropsWithChildren<Props>> = ({
+  children,
+  author,
+  hasAuthor,
+}) => {
   const { t } = useTranslation('components');
 
   return (
@@ -20,7 +25,7 @@ const TextWithUnder: FC<PropsWithChildren<Props>> = ({ children, author }) => {
           'text-type-p mt-2'
         )}
       >
-        {t('heading')} {author}
+        {!hasAuthor && t('heading')} {author}
       </p>
     </section>
   );

components/Header/Header.tsx

@@ -1,10 +1,9 @@
-import { FC, useEffect } from 'react';
+import { useEffect } from 'react';
 import Link from 'next/link';
 import { withTheme } from '../../store/context/themeContext';
 import { useRouter } from 'next/router';
 import cn from 'classnames';
 import { useTranslation } from 'next-i18next';
-import { GetStaticProps } from 'next';
 
 import HeaderStyles from './Header.module.css';
 

components/SendStory/SendStory.module.css

@@ -1,6 +1,6 @@
-.story {
+/* .story {
   aspect-ratio: 433/236;
-}
+} */
 
 .story.large {
   aspect-ratio: 1366/102;

components/Story/Story.module.css

@@ -1,12 +1,12 @@
-.story {
+/* .story {
   aspect-ratio: 433/236;
 }
 
 @media screen and (max-width: 600px) {
   .story {
     aspect-ratio: initial;
   }
-}
+} */
 
 .story_link {
   display: block;
@@ -44,6 +44,7 @@
   font-variation-settings: var(--text-weight-bold);
   line-height: 1.2;
   color: var(--text-color-primary);
+  margin-bottom: var(--space-m);
 }
 
 @media screen and (max-width: 1035px) {

components/UI/IconSelector.tsx

@@ -10,6 +10,7 @@ import { Route } from './route-icon/route-icon';
 import { Star } from './star-icon/star-icon';
 import { Lightning } from './lightning-icon/lightning-icon';
 import { Rain } from './rain-icon/rain-icon';
+import { IsraelStar } from './israel-star-icon/israel-star-icon';
 
 type Props = {
   className?: string;
@@ -48,6 +49,9 @@ const IconSelector: FC<Props> = ({ className, icon }) => {
     case 'rain':
       return <Rain className={className} />;
 
+    case 'israel-star':
+      return <IsraelStar className={className} />;
+
     default:
       return <Backpack />;
   }

components/UI/israel-star-icon/israel-star-icon.module.css

@@ -0,0 +1,41 @@
+.svg {
+  position: absolute;
+  height: 100%;
+  z-index: 0;
+}
+
+.svg path {
+  stroke-dasharray: 1000;
+  stroke-dashoffset: 1000;
+  animation-timing-function: ease-out;
+  animation-fill-mode: forwards;
+}
+
+.svg.svg_israel-star {
+  width: 25%;
+  right: 3%;
+  bottom: -30%;
+}
+
+@media (width <= 600px) {
+  .svg.svg_israel-star {
+    width: 15%;
+    right: 3%;
+    bottom: -20%;
+  }
+}
+
+.svg.svg_israel-star path:not(:first-child) {
+  animation-duration: 3s;
+  animation-delay: 0.3s;
+}
+
+.svg.svg_israel-star path:first-child {
+  animation-duration: 1s;
+}
+
+@keyframes svgAnimation {
+  to {
+    stroke-dashoffset: 0;
+  }
+}