From 3680d7d60cfaea12043d60384910da7d9dc4d299 Mon Sep 17 00:00:00 2001 From: poolpal Date: Wed, 16 Jun 2021 22:14:41 +0900 Subject: [PATCH] add front --- client/src/components/timeline.js | 82 ++++++++++++----------- client/src/style/cover.css | 7 ++ client/src/style/timeline.css | 106 ++++++++++++++++++++++++------ 3 files changed, 137 insertions(+), 58 deletions(-) diff --git a/client/src/components/timeline.js b/client/src/components/timeline.js index 2f7ceb0..fb8636e 100644 --- a/client/src/components/timeline.js +++ b/client/src/components/timeline.js @@ -1,7 +1,7 @@ import React, { useState, useEffect } from "react"; import "../style/timeline.css"; import { Chrono } from "react-chrono"; -import { Row, Col, Select, Button, Divider, Card, Typography, Image, Spin } from "antd"; +import { Row, Col, Select, Button, Divider, Card, Typography, Image, Spin, Pagination } from "antd"; import axios from 'axios'; import instance from "../module/instance"; @@ -38,21 +38,21 @@ const Timeline = () => { let nums = [] - let datas=[] - let cinfos=[] + let datas = [] + let cinfos = [] if (yearval === '2019') { setdata([]) await instance.get('/cluster') - .then(response => { + .then(response => { let ordered = []; ordered = response.data.clusterInfo; ordered.sort(date_ascending); setcInfo(ordered); - ordered.map(x=>nums.push(x.cId)); - cinfos=ordered; + ordered.map(x => nums.push(x.cId)); + cinfos = ordered; }) // SUCCESS .catch(response => { console.log(response) }); // ERROR @@ -70,7 +70,7 @@ const Timeline = () => { ), Promise.resolve([])) results.then(response => { - + // temp=response // temp.map((x)=>datas.push(x)) setdata(response) @@ -89,13 +89,13 @@ const Timeline = () => { useEffect(() => { - data.length>0? setbtndisable(false):setbtndisable(true) + data.length > 0 ? setbtndisable(false) : setbtndisable(true) }, [data]); const SetData = () => { - console.log('change') + console.log('change') if (yearval !== '0') { console.log(data) @@ -114,7 +114,7 @@ const Timeline = () => { title: temptitle, img: cloud, articles: data[i].data.newsInfo, - date:date + date: date }; tempitem.push(temp); @@ -168,61 +168,67 @@ const Timeline = () => { allowDynamicUpdate cardPositionHorizontal='TOP' theme={{ primary: "rgba(0, 30, 165, 1)", secondary: "white" }} - > - {/*
- { - items.map((v)=>{ - return (
{v.date.substring(5,7)}
) - }) - } - -
*/} + > +
+ { + items.map((v) => { + return (
console.log('clicked')}>{v.date.substring(5, 7)}
) + }) + } + +
{ items.map((v) => { return (
-
+ {v.title} + +
+ + {v.date} +
-
- {v.date} -
-
- - +
+
{v.articles.map((article) => { return ( <> OnHandleClick({ url: article.url })} - - - - > + } : { backgroundImage: "url('http://www.the-pr.co.kr/news/photo/201607/14976_49069_3617.jpg')", }}*/ onClick={() => OnHandleClick({ url: article.url })} + > - +
{article.headline}
-
+
+ + {article.category} + + + {article.press} + {article.text}... -
+
@@ -233,7 +239,7 @@ const Timeline = () => { ) })} - +
); }) @@ -246,7 +252,7 @@ const Timeline = () => { :
INTIMES - +
} diff --git a/client/src/style/cover.css b/client/src/style/cover.css index 6a655c6..956521c 100644 --- a/client/src/style/cover.css +++ b/client/src/style/cover.css @@ -12,6 +12,13 @@ font-weight: 100; } +@font-face { + font-family: 'malgun'; + src: url('../assets/fonts/malgun.ttf') format("truetype"); + font-style: normal; + font-weight: 100; +} + .background { position: relative; width: 100vw; diff --git a/client/src/style/timeline.css b/client/src/style/timeline.css index 45f1a06..232c002 100644 --- a/client/src/style/timeline.css +++ b/client/src/style/timeline.css @@ -1,6 +1,8 @@ .timeline{ width: 100%; height: 100vh; + + font-family: malgun; } .selectSection{ @@ -24,8 +26,11 @@ border-radius: 0% !important; background-color: white !important; box-shadow: none !important; + +} +.css-eh4k5x-TimelineMainWrapper.horizontal { + height: 10rem !important; } - .css-8myp9a-TimelineNavButton { width: 10vmax !important; @@ -36,6 +41,7 @@ + .ant-btn:hover{ border-color: rgb(14, 0, 66) !important; } @@ -46,16 +52,18 @@ width: 95vw; - height: 20vh; + height: 30vh; margin-top: 10px; background-position: right; - background-position-y: 0; + background-position-y: 5; background-size: 50%; background-repeat: no-repeat; border-radius: 30px; + + } @@ -83,35 +91,71 @@ } .clusterdate{ - margin-top: 30px; font-weight: bold; - font-size: 1em; + font-size: 2em; +} + +.css-7xkfgz-TitleWrapper{ + font-size: 0.9em !important; } -/* .timeline-item-title{ - background-color: rgba(0, 0, 0, 0) !important; +.timeline-item-title{ + + color: rgb(255, 255, 255) !important; + background-color: rgb(0, 7, 104) !important; width: 100% !important; + + border-radius: 10px !important; + height: 4em !important; + width: 13em !important; + transition: background-color 0.3s ease-in-out; + +} - border: 2px black solid; +.css-q2kzzt-Circle.active.using-icon { + border-color: brown; +} - +.css-7xkfgz-TitleWrapper.active{ + transition: color 0.3s ease-in-out; + color: white !important; + background-color: rgb(0, 87, 250) !important; } +.css-7xkfgz-TitleWrapper.active::after{ + + content: ''; + position: absolute; + border-style: solid; + border-width: 15px 16px 0px 17.5px; + border-color: rgb(0, 87, 250) transparent; + display: block; + width: 0; + z-index: 1; + top: 50px; + left: 40%; + + z-index: 4; +} + .timeline-item-title::after{ + content: ''; position: absolute; border-style: solid; - border-width: 20px 16px 0px 17.5px; - border-color: #140c0c transparent; + border-width: 15px 16px 0px 17.5px; + border-color: rgb(0, 7, 104) transparent; display: block; width: 0; z-index: 1; - top: 55px; - left: 83px; -} */ + top: 50px; + left: 40%; -/* .css-3iqrge-TimelineTitleContainer{ - margin-top: -1.5rem !important; -} */ + z-index: 4; +} + +.css-3iqrge-TimelineTitleContainer{ + margin-top: -2.1rem !important; +} .wait{ width: 100%; @@ -147,14 +191,36 @@ width: 100%; font-size: 0.8em; font-weight: bold; - height: 1.5em; + height: 1.7em; padding-bottom: 2px; - border: 2px rgba(0, 30, 165, 1) solid; border-radius: 50%; + + + + z-index: 0; } .timelinebutton:hover{ - border: 2px rgb(149, 149, 184) solid; + /* transition: border 0.5s ease-in; + border: 1px rgb(0, 87, 250) solid; */ } + + +.css-q2kzzt-Circle.active.using-icon{ + transition: background-color 0.2s ease-in; + color: white; + background-color: rgb(0, 87, 250); + border-color: rgb(0, 87, 250) !important; +} + +.articlecontent{ + width: 100%; + display: flex; + justify-content: left; + + text-align: left; + + flex-direction: column; +} \ No newline at end of file