Блог

Есть карточки с новостями. При наведении курсора мыши вы можете увидеть детали. Нажав на карточку, вы можете перейти к сообщению в Instagram.

Карточки с новостями на рабочем столе.

Карты на мобильном телефоне.

Как сделать возможным просмотр деталей на мобильном устройстве, проведя пальцем вверх? И после этого блок вернулся на место.

NewsCard.js:

 import PropTypes from "prop-types";
import Image from "next/image";
import Link from "next/link";
import styles from "./NewsCard.module.scss";
import DeleteIcon from "../../public/svg/basketIcon.svg";

export default function NewsCard({
  newsData,
  color,
  canDelete,
  onDeleteIconClick,
}) {
  return (
    <Link href={newsData.url} passHref>
      <div className={styles.card}>
        {canDelete ? (
          <div className={styles.deleteIcon}>
            <DeleteIcon
              onClick={() => {
                onDeleteIconClick(newsData);
              }}
            />
          </div>
        ) : null}
        <Image
          src={newsData.imgUrl}
          alt="news-card"
          layout="fill"
          className={styles.image}
        />
        <div className={styles.info} style={{ background: color }}>
          {newsData.text}
        </div>
      </div>
    </Link>
  );
}

NewsCard.propTypes = {
  newsData: PropTypes.object,
  color: PropTypes.string,
};
 

Стили:

 @import "../../styles/shared.scss";

.card {
  width: 350px;
  height: 344px;
  margin-right: 20px;
  position: relative;
  border-radius: 3px;
  cursor: pointer;
  overflow: hidden;
  @media screen and (max-width: 1150px) {
        min-width: 250px;
        min-height: 333px;
      }
}

.info {
  height: 256px;
  top: 308px;
  width: 100%;
  position: absolute;
  bottom: 0;
  border-radius: 0px 0px 3px 3px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  font-weight: 600;
  font-size: 12px;
  line-height: 22px;
  letter-spacing: 0.2px;
  color: $color-primary-light;
  padding: 10px 7px 7px 6px;
  transition: 0.5s;
}

.info:hover {
  transform: translateY(-208px);
  -webkit-line-clamp: 100;
  padding-top: 30px;
}

.image {
  border-radius: 3px;
}
.deleteIcon {
  border: none;
  position: absolute;
  cursor: pointer;
  top: 6px;
  right: 6px;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  svg {
    width: 15px;
    height: 15px;
  }
  border-radius: 50%;
  width: 25px;
  height: 25px;
  background: $color-primary-light;
}
 

Вы можете использовать библиотеку React с возможностью прокрутки и определить обработчик «прокрутки вверх» для отображения сведений о карте. вот так:

 const [showDetails, setShowDetails] = useState(false);

const handlers = useSwipeable({
  onSwipedUp: () => setShowDetails(true),
});
 

Затем примените обработчик к элементу карты:

 <div className={styles.card} {...handlers}>
 

И, наконец, используйте showDetails штат, чтобы показать данные карты.