From 3747f657b167c994067977539b715f9a229c597a Mon Sep 17 00:00:00 2001
From: Tomas Havlicek <xhavlic@fi.muni.cz>
Date: Wed, 22 Jun 2022 19:05:20 +0200
Subject: [PATCH] feat: finisheed preview page overflow
---
frontend/src/components/Preview.tsx | 104 ++++++++++++++++------------
1 file changed, 59 insertions(+), 45 deletions(-)
diff --git a/frontend/src/components/Preview.tsx b/frontend/src/components/Preview.tsx
index bd4186e..a6634e9 100644
--- a/frontend/src/components/Preview.tsx
+++ b/frontend/src/components/Preview.tsx
@@ -1,4 +1,14 @@
-import { Card, Carousel, Divider, Image, Space } from "antd";
+import {
+ Card,
+ Carousel,
+ Col,
+ Divider,
+ Grid,
+ Image,
+ Menu,
+ Row,
+ Space,
+} from "antd";
import Meta from "antd/lib/card/Meta";
import Title from "antd/lib/skeleton/Title";
import React from "react";
@@ -237,51 +247,55 @@ export const cardsDataExample2: MovieIO[] = [
];
const Preview: React.FC = () => (
- <Space className="preview" direction="vertical" style={{display: "flex", paddingTop:"2%"}}>
- <Card title="Popular movies" >
- <Space style={{ display: 'flex', padding: "5 %", justifyContent: "flex-end", width:"fit-content", overflow: "auto"}}>
-
- {cardsDataExample.map((movie) => {
- return (
- <>
- <Link to={`/movie/${movie.id}`}>
- <Card
- hoverable
- style={{
- width: "240px",
- }}
- cover={<img alt={movie.name} src={movie.picture} />}
- >
- <Meta title={movie.name} description={movie.originalName} />
- </Card>
- </Link>
- </>
- );
- })}
- </Space>
+ <Space
+ className="preview"
+ direction="vertical"
+ style={{ display: "flex", paddingTop: "2%" }}
+ >
+ <Card title="Editor's picks">
+ <Row justify="space-evenly" gutter={50}>
+ {cardsDataExample.map((movie) => {
+ return (
+ <Col flex={1}>
+ <Link to={`/movie/${movie.id}`}>
+ <Card
+ hoverable
+ style={{
+ width: "240px",
+ }}
+ cover={<img alt={movie.name} src={movie.picture} />}
+ >
+ <Meta title={movie.name} description={movie.originalName} />
+ </Card>
+ </Link>
+ </Col>
+ );
+ })}
+ </Row>
</Card>
- <Divider/>
-
- <Card title="Recent movies" >
- <Space style={{ display: 'flex', padding: "5 %", justifyContent: "flex-end", width:"fit-content", overflow: "auto"}}>
- {cardsDataExample2.map((movie) => {
- return (
- <>
- <Link to={`/movie/${movie.id}`}>
- <Card
- hoverable
- style={{
- width: 240,
- }}
- cover={<img alt={movie.name} src={movie.picture} />}
- >
- <Meta title={movie.name} description={movie.originalName} />
- </Card>
- </Link>
- </>
- );
- })}
- </Space>
+ <Divider />
+
+ <Card title="Recent movies">
+ <Row justify="space-evenly" gutter={50}>
+ {cardsDataExample.map((movie) => {
+ return (
+ <Col flex={1} style={{display: "flex"}}>
+ <Link to={`/movie/${movie.id}`} style={{alignSelf: "center"}}>
+ <Card
+ hoverable
+ style={{
+ width: "240px",
+ alignSelf: "center",
+ }}
+ cover={<img alt={movie.name} src={movie.picture} />}
+ >
+ <Meta title={movie.name} description={movie.originalName} />
+ </Card>
+ </Link>
+ </Col>
+ );
+ })}
+ </Row>
</Card>
</Space>
);
--
GitLab