Merge branch 'feature/better-images'

src/components/node/ImageSwitcher/styles.scss

@@ -9,12 +9,13 @@
   position: absolute;
   background: transparentize(black, 0.5);
   display: flex;
-  right: $gap;
-  top: $gap;
+  left: 50%;
+  top: -60px;
   border-radius: 24px;
   padding: 0 3px;
   flex-wrap: wrap;
   transition: background-color 0.5s;
+  transform: translate(-50%, 0);
 
   &:hover {
     background: transparentize(black, 0.2);

src/components/node/NodeImageSlideBlock/index.tsx

@@ -41,6 +41,7 @@ const NodeImageSlideBlock: FC<IProps> = ({
   const [initial_x, setInitialX] = useState(0);
   const [offset, setOffset] = useState(0);
   const [is_dragging, setIsDragging] = useState(false);
+  const [drag_start, setDragStart] = useState();
 
   const slide = useRef<HTMLDivElement>();
   const wrap = useRef<HTMLDivElement>();
@@ -165,7 +166,7 @@ const NodeImageSlideBlock: FC<IProps> = ({
   const updateMaxHeight = useCallback(() => {
     if (!wrap.current) return;
     const { width } = wrap.current.getBoundingClientRect();
-    setMaxHeight(width * NODE_SETTINGS.MAX_IMAGE_ASPECT);
+    setMaxHeight(window.innerHeight - 143);
     normalizeOffset();
   }, [wrap, setMaxHeight, normalizeOffset]);
 
@@ -182,11 +183,12 @@ const NodeImageSlideBlock: FC<IProps> = ({
       setIsDragging(false);
       normalizeOffset();
 
-      if (initial_x - getX(event) < 10) {
+      if (+new Date() - drag_start < 300) {
+        // click detection
         onOpenPhotoSwipe();
       }
     },
-    [setIsDragging, is_dragging, normalizeOffset, onOpenPhotoSwipe]
+    [setIsDragging, is_dragging, normalizeOffset, onOpenPhotoSwipe, drag_start]
   );
 
   const startDragging = useCallback(
@@ -194,8 +196,9 @@ const NodeImageSlideBlock: FC<IProps> = ({
       setIsDragging(true);
       setInitialX(getX(event));
       setInitialOffset(offset);
+      setDragStart(+new Date());
     },
-    [setIsDragging, setInitialX, offset, setInitialOffset]
+    [setIsDragging, setInitialX, offset, setInitialOffset, setDragStart]
   );
 
   useEffect(() => updateMaxHeight(), [images]);
@@ -242,15 +245,6 @@ const NodeImageSlideBlock: FC<IProps> = ({
         </div>
       </div>
 
-      {!is_loading && (
-        <ImageSwitcher
-          total={images.length}
-          current={current}
-          onChange={changeCurrent}
-          loaded={loaded}
-        />
-      )}
-
       <div
         className={classNames(styles.image_container, { [styles.is_dragging]: is_dragging })}
         style={{
@@ -282,6 +276,15 @@ const NodeImageSlideBlock: FC<IProps> = ({
             </div>
           ))}
       </div>
+
+      {!is_loading && (
+        <ImageSwitcher
+          total={images.length}
+          current={current}
+          onChange={changeCurrent}
+          loaded={loaded}
+        />
+      )}
     </div>
   );
 };

src/components/node/NodeImageSlideBlock/styles.scss

@@ -2,9 +2,10 @@
   overflow: hidden;
   position: relative;
   min-width: 0;
-  width: 100%;
   transition: height 0.25s;
-  border-radius: $radius $radius 0 0;
+  border-radius: $radius;
+  margin-right: -10px;
+  margin-left: -10px;
 
   .is_loading {
     .placeholder {
@@ -14,7 +15,6 @@
 }
 
 .image_container {
-  // background: $node_image_bg;
   border-radius: $panel_radius 0 0 $panel_radius;
   display: flex;
   align-items: flex-start;
@@ -24,17 +24,18 @@
   user-select: none;
   will-change: transform, height;
   transition: height 500ms, transform 500ms;
+  padding: 0 0 20px 0;
 
   &:active {
     transition: none;
   }
 
   .image {
-    // max-height: 960px;
-    max-height: 120vh !important;
     max-width: 100%;
     opacity: 1;
-    border-radius: $radius $radius 0 0;
+    border-radius: $radius;
+    box-shadow: transparentize($color: white, $amount: 0.95) 0 -1px,
+      transparentize($color: #000000, $amount: 0.6) 0 2px 5px;
   }
 
   &.is_dragging {
@@ -44,15 +45,13 @@
 
 .image_wrap {
   width: 100%;
-  // top: 0;
-  // left: 0;
-  // opacity: 0;
   pointer-events: none;
   touch-action: none;
   z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;
+  padding: 0 10px;
 
   &:global(.is_active) {
     opacity: 1;

src/components/node/NodePanelInner/styles.scss

@@ -28,7 +28,7 @@
   justify-content: stretch;
   border-radius: $radius $radius 0 0;
   box-sizing: border-box;
-  padding: 0 $gap;
+  padding: $gap $gap;
   background: $node_bg;
   height: 64px;
 
@@ -50,7 +50,7 @@
   text-transform: uppercase;
   font: $font_24_semibold;
   // height: 24px;
-  padding-bottom: 3px;
+  // padding-bottom: 6px;
 
   @include tablet {
     // font-size: 16px;