Merge branch '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/ImageSwitcher/styles.scss

@@ -2,25 +2,23 @@
   width: 100%;
   height: 0;
   position: relative;
-  z-index: 2;
+  z-index: 4;
 }
 
 .switcher {
   position: absolute;
-  background: transparentize(black, 0.5);
+  // background: darken($content_bg, 2%);
+  background: url('../../../../src/sprites/noise.png') $main_bg_color;
   display: flex;
   left: 50%;
-  top: -60px;
+  transform: translate(-50%, 0);
+  top: -5px;
   border-radius: 24px;
   padding: 0 3px;
-  flex-wrap: wrap;
+  // flex-wrap: wrap;
   transition: background-color 0.5s;
   transform: translate(-50%, 0);
 
-  &:hover {
-    background: transparentize(black, 0.2);
-  }
-
   & > div {
     width: 30px;
     height: 30px;
@@ -29,19 +27,14 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    opacity: 0.5;
     transition: opacity 0.25s;
-
-    &:hover {
-      opacity: 1;
-    }
+    opacity: 0.5;
 
     &::after {
       content: ' ';
       display: block;
       width: 14px;
       height: 14px;
-      // background: white;
       border-radius: 8px;
       box-shadow: inset white 0 0 0 2px;
       transform: scale(0.5);

src/components/node/NodeImageBlock/index.tsx

@@ -7,6 +7,7 @@ import { getURL } from '~/utils/dom';
 import { UPLOAD_TYPES } from '~/redux/uploads/constants';
 import { PRESETS } from '~/constants/urls';
 import * as MODAL_ACTIONS from '~/redux/modal/actions';
+import { LoaderCircle } from '~/components/input/LoaderCircle';
 
 interface IProps {
   is_loading: boolean;
@@ -19,7 +20,7 @@ interface IProps {
 const NodeImageBlock: FC<IProps> = ({ node, is_loading, updateLayout, modalShowPhotoswipe }) => {
   const [is_animated, setIsAnimated] = useState(false);
   const [current, setCurrent] = useState(0);
-  const [height, setHeight] = useState(320);
+  const [height, setHeight] = useState(window.innerHeight - 150);
   const [loaded, setLoaded] = useState<Record<number, boolean>>({});
   const refs = useRef<Record<number, HTMLDivElement>>({});
 
@@ -30,23 +31,19 @@ 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);
+    if (!refs || !refs.current[current] || !loaded[current])
+      return setHeight(window.innerHeight - 150);
 
     const el = refs.current[current];
-
     const element_height = el.getBoundingClientRect && el.getBoundingClientRect().height;
 
     setHeight(element_height);
@@ -57,38 +54,46 @@ const NodeImageBlock: FC<IProps> = ({ node, is_loading, updateLayout, modalShowP
     return () => clearTimeout(timer);
   }, []);
 
+  const onOpenPhotoSwipe = useCallback(() => modalShowPhotoswipe(images, current), [
+    modalShowPhotoswipe,
+    images,
+    current,
+  ]);
+
   return (
     <div className={classNames(styles.wrap, { is_loading, is_animated })}>
-      <div>
-        <ImageSwitcher
-          total={images.length}
-          current={current}
-          onChange={setCurrent}
-          loaded={loaded}
-        />
+      <div className={styles.image_container} style={{ height }} onClick={onOpenPhotoSwipe}>
+        {(is_loading || !loaded[0] || !images.length) && (
+          <div className={styles.placeholder}>
+            <LoaderCircle size={72} />
+          </div>
+        )}
 
-        <div className={styles.image_container} style={{ height }}>
-          {(is_loading || !loaded[0] || !images.length) && <div className={styles.placeholder} />}
-
-          {images.map((file, index) => (
-            <div
-              className={classNames(styles.image_wrap, {
-                is_active: index === current && loaded[index],
-              })}
-              ref={setRef(index)}
+        {images.map((file, index) => (
+          <div
+            className={classNames(styles.image_wrap, {
+              is_active: index === current && loaded[index],
+            })}
+            ref={setRef(index)}
+            key={file.id}
+          >
+            <img
+              className={styles.image}
+              src={getURL(file, PRESETS['1600'])}
+              alt=""
               key={file.id}
-            >
-              <img
-                className={styles.image}
-                src={getURL(file, PRESETS['1600'])}
-                alt=""
-                key={file.id}
-                onLoad={onImageLoad(index)}
-              />
-            </div>
-          ))}
-        </div>
+              onLoad={onImageLoad(index)}
+            />
+          </div>
+        ))}
       </div>
+
+      <ImageSwitcher
+        total={images.length}
+        current={current}
+        onChange={setCurrent}
+        loaded={loaded}
+      />
     </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 - 150px);
     max-width: 100%;
     opacity: 1;
-    border-radius: $radius $radius 0 0;
+    border-radius: $radius;
+
+    @include outer_shadow();
   }
 }
 
@@ -48,6 +51,10 @@
 }
 
 .placeholder {
-  background: red;
-  height: 320px;
+  width: 100%;
+  height: calc(100vh - 130px);
+  border-radius: $radius;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }

src/components/node/NodePanel/index.tsx

@@ -47,7 +47,8 @@ const NodePanel: FC<IProps> = memo(
 
     return (
       <div className={styles.place} ref={ref}>
-        {stack &&
+        {/*
+        stack &&
           createPortal(
             <NodePanelInner
               node={node}
@@ -62,7 +63,8 @@ const NodePanel: FC<IProps> = memo(
               stack
             />,
             document.body
-          )}
+          )
+          */}
 
         <NodePanelInner
           node={node}

src/components/node/NodePanelInner/styles.scss

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