Merge branch 'feature/better-images'

2025-04-25 04:46:40 +07:00 · 2020-04-24 14:37:31 +07:00 · 2020-04-24 14:37:31 +07:00 · e1525edccb
commit e1525edccb
parent ac81380557 f52ae5f0b2
6 changed files with 124 additions and 105 deletions
--- a/src/components/node/ImageSwitcher/styles.scss
+++ b/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);
--- a/src/components/node/NodeImageSlideBlock/index.tsx
+++ b/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>
  );
 };
--- a/src/components/node/NodeImageSlideBlock/styles.scss
+++ b/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;
--- a/src/components/node/NodePanelInner/styles.scss
+++ b/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;
--- a/src/containers/node/NodeLayout/index.tsx
+++ b/src/containers/node/NodeLayout/index.tsx
@ -112,91 +112,107 @@ const NodeLayoutUnconnected: FC<IProps> = memo(
    }, [nodeSetCoverImage, node.cover]);

    return (
-      <Card className={styles.node} seamless>
+      <div className={styles.node}>
        {block &&
          createElement(block, { node, is_loading, updateLayout, layout, modalShowPhotoswipe })}

-        <NodePanel
-          node={pick(['title', 'user', 'is_liked', 'is_heroic', 'deleted_at', 'created_at'], node)}
-          layout={layout}
-          can_edit={can_edit}
-          can_like={can_like}
-          can_star={can_star}
-          onEdit={onEdit}
-          onLike={onLike}
-          onStar={onStar}
-          onLock={onLock}
-          is_loading={is_loading}
-        />
+        <Card seamless>
+          <NodePanel
+            node={pick(
+              ['title', 'user', 'is_liked', 'is_heroic', 'deleted_at', 'created_at'],
+              node
+            )}
+            layout={layout}
+            can_edit={can_edit}
+            can_like={can_like}
+            can_star={can_star}
+            onEdit={onEdit}
+            onLike={onLike}
+            onStar={onStar}
+            onLock={onLock}
+            is_loading={is_loading}
+          />

-        {node.deleted_at ? (
-          <NodeDeletedBadge />
-        ) : (
-          <Group>
-            <Padder>
-              <Group horizontal className={styles.content}>
-                <Group className={styles.comments}>
-                  {inline_block && (
-                    <div className={styles.inline_block}>
-                      {createElement(inline_block, {
-                        node,
-                        is_loading,
-                        updateLayout,
-                        layout,
-                        modalShowPhotoswipe,
-                      })}
-                    </div>
-                  )}
+          {node.deleted_at ? (
+            <NodeDeletedBadge />
+          ) : (
+            <Group>
+              <Padder>
+                <Group horizontal className={styles.content}>
+                  <Group className={styles.comments}>
+                    {inline_block && (
+                      <div className={styles.inline_block}>
+                        {createElement(inline_block, {
+                          node,
+                          is_loading,
+                          updateLayout,
+                          layout,
+                          modalShowPhotoswipe,
+                        })}
+                      </div>
+                    )}

-                  {is_loading || is_loading_comments || (!comments.length && !inline_block) ? (
-                    <NodeNoComments is_loading={is_loading_comments || is_loading} />
-                  ) : (
-                    <NodeComments
-                      comments={comments}
-                      comment_data={comment_data}
-                      comment_count={comment_count}
-                      user={user}
-                      onDelete={nodeLockComment}
-                      onEdit={nodeEditComment}
-                      onLoadMore={nodeLoadMoreComments}
-                      order="DESC"
-                    />
-                  )}
+                    {is_loading || is_loading_comments || (!comments.length && !inline_block) ? (
+                      <NodeNoComments is_loading={is_loading_comments || is_loading} />
+                    ) : (
+                      <NodeComments
+                        comments={comments}
+                        comment_data={comment_data}
+                        comment_count={comment_count}
+                        user={user}
+                        onDelete={nodeLockComment}
+                        onEdit={nodeEditComment}
+                        onLoadMore={nodeLoadMoreComments}
+                        order="DESC"
+                      />
+                    )}

-                  {is_user && !is_loading && <NodeCommentForm />}
+                    {is_user && !is_loading && <NodeCommentForm />}
+                  </Group>
+
+                  <div className={styles.panel}>
+                    <Sticky>
+                      <Group style={{ flex: 1, minWidth: 0 }}>
+                        {!is_loading && (
+                          <NodeTags
+                            is_editable={is_user}
+                            tags={node.tags}
+                            onChange={onTagsChange}
+                          />
+                        )}
+
+                        {is_loading && <NodeRelatedPlaceholder />}
+
+                        {!is_loading &&
+                          related &&
+                          related.albums &&
+                          Object.keys(related.albums)
+                            .filter(album => related.albums[album].length > 0)
+                            .map(album => (
+                              <NodeRelated
+                                title={album}
+                                items={related.albums[album]}
+                                key={album}
+                              />
+                            ))}
+
+                        {!is_loading &&
+                          related &&
+                          related.similar &&
+                          related.similar.length > 0 && (
+                            <NodeRelated title="ПОХОЖИЕ" items={related.similar} />
+                          )}
+                      </Group>
+                    </Sticky>
+                  </div>
                </Group>
+              </Padder>
+            </Group>
+          )}

-                <div className={styles.panel}>
-                  <Sticky>
-                    <Group style={{ flex: 1, minWidth: 0 }}>
-                      {!is_loading && (
-                        <NodeTags is_editable={is_user} tags={node.tags} onChange={onTagsChange} />
-                      )}
-
-                      {is_loading && <NodeRelatedPlaceholder />}
-
-                      {!is_loading &&
-                        related &&
-                        related.albums &&
-                        Object.keys(related.albums)
-                          .filter(album => related.albums[album].length > 0)
-                          .map(album => (
-                            <NodeRelated title={album} items={related.albums[album]} key={album} />
-                          ))}
-
-                      {!is_loading && related && related.similar && related.similar.length > 0 && (
-                        <NodeRelated title="ПОХОЖИЕ" items={related.similar} />
-                      )}
-                    </Group>
-                  </Sticky>
-                </div>
-              </Group>
-            </Padder>
-          </Group>
-        )}
-
-        <Footer />
-      </Card>
+          <Footer />
+        </Card>
+      </div>
    );
  }
 );
--- a/src/containers/node/NodeLayout/styles.scss
+++ b/src/containers/node/NodeLayout/styles.scss
@ -27,8 +27,8 @@
 }

 .node {
-  background: $node_bg;
-  box-shadow: $node_shadow;
+  // background: $node_bg;
+  // box-shadow: $node_shadow;
 }

 .buttons {