Merge branch 'feature/new-image-slider' into develop

src/components/containers/PageCover/styles.scss

@@ -18,6 +18,7 @@
   height: 100%;
   animation: fadeIn 2s;
   will-change: transform, opacity;
+  filter: blur(10px);
 
   &::after {
     content: ' ';
@@ -26,7 +27,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background: url(~/sprites/stripes.svg) rgba(0, 0, 0, 0.3);
+    background: url(~/sprites/stripes.svg) transparentize($content_bg, 0.2);
   }
 
   @include tablet {

src/components/node/NodeImageBlock/index.tsx

@@ -30,25 +30,18 @@ const NodeImageBlock: FC<IProps> = ({ node, is_loading, updateLayout, modalShowP
   );
 
   const setRef = useCallback(index => el => (refs.current[index] = el), [refs]);
+
   const onImageLoad = useCallback(index => () => setLoaded({ ...loaded, [index]: true }), [
     setLoaded,
     loaded,
   ]);
 
-  const onOpenPhotoSwipe = useCallback(
-    (index: number) => () => modalShowPhotoswipe(images, index),
-    [modalShowPhotoswipe, images]
-  );
-
   useEffect(() => updateLayout(), [loaded]);
 
   useEffect(() => {
     if (!refs || !refs.current[current] || !loaded[current]) return setHeight(320);
-
     const el = refs.current[current];
-
     const element_height = el.getBoundingClientRect && el.getBoundingClientRect().height;
-
     setHeight(element_height);
   }, [refs, current, loaded]);
 
@@ -59,7 +52,6 @@ const NodeImageBlock: FC<IProps> = ({ node, is_loading, updateLayout, modalShowP
 
   return (
     <div className={classNames(styles.wrap, { is_loading, is_animated })}>
-      <div>
       <ImageSwitcher
         total={images.length}
         current={current}
@@ -89,7 +81,6 @@ const NodeImageBlock: FC<IProps> = ({ node, is_loading, updateLayout, modalShowP
         ))}
       </div>
     </div>
-    </div>
   );
 };
 

src/components/node/NodeImageBlock/styles.scss

@@ -1,4 +1,6 @@
 .wrap {
+  padding-bottom: $gap * 2;
+
   &:global(.is_animated) {
     .image_container {
       transition: height 0.5s;
@@ -12,7 +14,6 @@
 
 .image_container {
   width: 100%;
-  background: $node_image_bg;
   border-radius: $panel_radius 0 0 $panel_radius;
   display: flex;
   align-items: center;
@@ -22,10 +23,12 @@
   user-select: none;
 
   .image {
-    max-height: 960px;
+    max-height: calc(100vh - 140px);
     max-width: 100%;
     opacity: 1;
-    border-radius: $radius $radius 0 0;
+    border-radius: $radius;
+
+    @include outer_shadow();
   }
 }
 

src/components/node/NodePanelInner/styles.scss

@@ -36,8 +36,9 @@
 
   @include tablet {
     border-radius: 0;
-    flex-direction: column;
+    // flex-direction: column;
-    align-items: flex-start;
+    // align-items: flex-start;
+    height: 128px;
   }
 
   @include can_backdrop {

src/containers/node/NodeLayout/index.tsx

@@ -12,7 +12,7 @@ import { NodeNoComments } from '~/components/node/NodeNoComments';
 import { NodeRelated } from '~/components/node/NodeRelated';
 import { NodeComments } from '~/components/node/NodeComments';
 import { NodeTags } from '~/components/node/NodeTags';
-import { NODE_COMPONENTS, NODE_INLINES } from '~/redux/node/constants';
+import { NODE_COMPONENTS, NODE_INLINES, NODE_HEADS } from '~/redux/node/constants';
 import { selectUser } from '~/redux/auth/selectors';
 import pick from 'ramda/es/pick';
 import { NodeRelatedPlaceholder } from '~/components/node/NodeRelated/placeholder';
@@ -97,8 +97,9 @@ const NodeLayoutUnconnected: FC<IProps> = memo(
     const can_like = useMemo(() => canLikeNode(node, user), [node, user]);
     const can_star = useMemo(() => canStarNode(node, user), [node, user]);
 
+    const head = node && node.type && NODE_HEADS[node.type];
     const block = node && node.type && NODE_COMPONENTS[node.type];
-    const inline_block = node && node.type && NODE_INLINES[node.type];
+    const inline = node && node.type && NODE_INLINES[node.type];
 
     const onEdit = useCallback(() => nodeEdit(node.id), [nodeEdit, node]);
     const onLike = useCallback(() => nodeLike(node.id), [nodeLike, node]);
@@ -112,12 +113,19 @@ const NodeLayoutUnconnected: FC<IProps> = memo(
     }, [nodeSetCoverImage, node.cover]);
 
     return (
+      <>
+        {head &&
+          createElement(head, { node, is_loading, updateLayout, layout, modalShowPhotoswipe })}
+
         <Card className={styles.node} seamless>
           {block &&
             createElement(block, { node, is_loading, updateLayout, layout, modalShowPhotoswipe })}
 
           <NodePanel
-          node={pick(['title', 'user', 'is_liked', 'is_heroic', 'deleted_at', 'created_at'], node)}
+            node={pick(
+              ['title', 'user', 'is_liked', 'is_heroic', 'deleted_at', 'created_at'],
+              node
+            )}
             layout={layout}
             can_edit={can_edit}
             can_like={can_like}
@@ -136,9 +144,9 @@ const NodeLayoutUnconnected: FC<IProps> = memo(
               <Padder>
                 <Group horizontal className={styles.content}>
                   <Group className={styles.comments}>
-                  {inline_block && (
+                    {inline && (
-                    <div className={styles.inline_block}>
+                      <div className={styles.inline}>
-                      {createElement(inline_block, {
+                        {createElement(inline, {
                           node,
                           is_loading,
                           updateLayout,
@@ -148,7 +156,7 @@ const NodeLayoutUnconnected: FC<IProps> = memo(
                       </div>
                     )}
 
-                  {is_loading || is_loading_comments || (!comments.length && !inline_block) ? (
+                    {is_loading || is_loading_comments || (!comments.length && !inline) ? (
                       <NodeNoComments is_loading={is_loading_comments || is_loading} />
                     ) : (
                       <NodeComments
@@ -170,7 +178,11 @@ const NodeLayoutUnconnected: FC<IProps> = memo(
                     <Sticky>
                       <Group style={{ flex: 1, minWidth: 0 }}>
                         {!is_loading && (
-                        <NodeTags is_editable={is_user} tags={node.tags} onChange={onTagsChange} />
+                          <NodeTags
+                            is_editable={is_user}
+                            tags={node.tags}
+                            onChange={onTagsChange}
+                          />
                         )}
 
                         {is_loading && <NodeRelatedPlaceholder />}
@@ -181,10 +193,17 @@ const NodeLayoutUnconnected: FC<IProps> = memo(
                           Object.keys(related.albums)
                             .filter(album => related.albums[album].length > 0)
                             .map(album => (
-                            <NodeRelated title={album} items={related.albums[album]} key={album} />
+                              <NodeRelated
+                                title={album}
+                                items={related.albums[album]}
+                                key={album}
+                              />
                             ))}
 
-                      {!is_loading && related && related.similar && related.similar.length > 0 && (
+                        {!is_loading &&
+                          related &&
+                          related.similar &&
+                          related.similar.length > 0 && (
                             <NodeRelated title="ПОХОЖИЕ" items={related.similar} />
                           )}
                       </Group>
@@ -197,6 +216,7 @@ const NodeLayoutUnconnected: FC<IProps> = memo(
 
           <Footer />
         </Card>
+      </>
     );
   }
 );

src/redux/node/constants.ts

@@ -14,6 +14,7 @@ import { EditorAudioUploadButton } from '~/components/editors/EditorAudioUploadB
 import { EditorUploadCoverButton } from '~/components/editors/EditorUploadCoverButton';
 import { Filler } from '~/components/containers/Filler';
 import { modalShowPhotoswipe } from '../modal/actions';
+import { NodeImageBlock } from '~/components/node/NodeImageBlock';
 
 const prefix = 'NODE.';
 export const NODE_ACTIONS = {
@@ -87,8 +88,12 @@ type INodeComponents = Record<
   }>
 >;
 
+export const NODE_HEADS: INodeComponents = {
+  [NODE_TYPES.IMAGE]: NodeImageBlock,
+};
+
 export const NODE_COMPONENTS: INodeComponents = {
-  [NODE_TYPES.IMAGE]: NodeImageSlideBlock,
+  // [NODE_TYPES.IMAGE]: NodeImageSlideBlock,
   [NODE_TYPES.VIDEO]: NodeVideoBlock,
   [NODE_TYPES.AUDIO]: NodeAudioImageBlock,
 };