Skip to content

Commit c9509bf

Browse files
ymw0407ymw0407
authored
Merge pull request #194 from AgainIoT/feature/190
Implementation of License page and SelectType page
2 parents 867fab5 + 7240e44 commit c9509bf

File tree

6 files changed

+109
-89
lines changed

6 files changed

+109
-89
lines changed

‎src/assets/images/loadingimg.gif‎

248 KB
Loading

‎src/components/common/LoadingLicense.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import styled from "styled-components";
2+
import { COLOR } from "../../styles/color";
3+
import LOAD from "../../assets/images/loadingimg.gif";
4+
5+
export const LoadingLicense = () => {
6+
return (
7+
<Background>
8+
<LoadingImg src={LOAD} alt="loading.." width="5%" />
9+
<LoadingText>One moment please ...</LoadingText>
10+
</Background>
11+
);
12+
};
13+
14+
const Background = styled.div`
15+
display: flex;
16+
justify-content: center;
17+
align-items: center;
18+
flex-direction: column;
19+
width: 100%;
20+
height: 100%;
21+
background: ${COLOR.MAIN_WHITE};
22+
opacity: 0.93;
23+
`;
24+
25+
const LoadingText = styled.div`
26+
color: ${COLOR.MAIN_BLACK};
27+
font-family: "SUIT Variable";
28+
font-style: normal;
29+
font-weight: 500;
30+
font-size: 1.5rem;
31+
line-height: 1.9rem;
32+
text-align: center;
33+
`;
34+
35+
const LoadingImg =styled.img`
36+
width: 5rem;
37+
height: 5rem;
38+
`;
39+

‎src/components/common/SelectType.js‎

Lines changed: 14 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import styled from "styled-components";
1+
import{ styled, keyframes} from "styled-components";
22
import { COLOR } from "../../styles/color.js";
33
import { useEffect } from "react";
44
import { useNavigate } from "react-router-dom";
@@ -11,64 +11,25 @@ import {
1111
templateContent,
1212
templatePreviewState,
1313
} from "../../recoil/templateState.js";
14+
import useScrollFadeIn from "../../hooks/useScrollFadeIn";
1415

1516
export const SelectType = () => {
1617
const navigate = new useNavigate();
1718
const resetReviewPage = useResetRecoilState(reviewRepoDataState("page"));
1819
const resetReviewOwner = useResetRecoilState(reviewRepoDataState("owner"));
1920
const resetReviewRepo = useResetRecoilState(reviewRepoDataState("repoName"));
20-
//State key needs to be changed later
21-
// const resetReviewIssue1 = useResetRecoilState(selectedState("body"));
22-
// const resetReviewIssue2 = useResetRecoilState(selectedState("type"));
23-
// const resetReviewIssue3 = useResetRecoilState(selectedState("title"));
2421

25-
// const resetReviewIssueChip1 = useResetRecoilState(
26-
// issueSelectedState("issue"),
27-
// );
28-
// const resetReviewIssueChip2 = useResetRecoilState(issueSelectedState("type"));
29-
// const resetReviewIssueChip3 = useResetRecoilState(
30-
// issueSelectedState("typeAndTitle"),
31-
// );
32-
// const resetReviewIssueChip4 = useResetRecoilState(
33-
// issueSelectedState("uname"),
34-
// );
35-
36-
// const resetReviewReadme = useResetRecoilState(templateContent("readme"));
37-
// const resetReviewContributing = useResetRecoilState(
38-
// templateContent("contributing"),
39-
// );
40-
// const resetReviewPr = useResetRecoilState(templateContent("pr"));
41-
// const resetReviewReadmePreview = useResetRecoilState(
42-
// templatePreviewState("readme"),
43-
// );
44-
// const resetReviewContributingPreview = useResetRecoilState(
45-
// templatePreviewState("contributing"),
46-
// );
47-
// const resetReviewPrPreview = useResetRecoilState(templatePreviewState("pr"));
4822

4923
useEffect(() => {
5024
resetReviewPage();
5125
resetReviewOwner();
5226
resetReviewRepo();
53-
// resetReviewIssue1();
54-
// resetReviewIssue2();
55-
// resetReviewIssue3();
56-
// resetReviewIssueChip1();
57-
// resetReviewIssueChip2();
58-
// resetReviewIssueChip3();
59-
// resetReviewIssueChip4();
60-
// resetReviewReadme();
61-
// resetReviewContributing();
62-
// resetReviewPr();
63-
// resetReviewReadmePreview();
64-
// resetReviewContributingPreview();
65-
// resetReviewPrPreview();
6627
}, []);
6728

6829
return (
6930
<StSelectType>
7031
<Stack spacing={20} direction="row">
71-
<CreateBox>
32+
<CreateBox {...useScrollFadeIn("up", 1.0, 0.2)}>
7233
<Stack spacing={2} direction="column">
7334
<Stack spacing={1} direction="column">
7435
<Title>Create New</Title>
@@ -87,7 +48,7 @@ export const SelectType = () => {
8748
</CreateBtn>
8849
</Stack>
8950
</CreateBox>
90-
<CheckBox>
51+
<CheckBox {...useScrollFadeIn("up", 1.0, 0.4)}>
9152
<Stack spacing={2} direction="column">
9253
<Stack spacing={1} direction="column">
9354
<Title>Check existing</Title>
@@ -125,6 +86,16 @@ const StSelectType = styled.div`
12586
text-align: center;
12687
`;
12788

89+
const fadeIn = keyframes`
90+
0% {
91+
opacity: 0;
92+
transform: translate3d(0, 15%, 0);
93+
} to {
94+
opacity: 1;
95+
transform: translateZ(0);
96+
}
97+
`;
98+
12899
const CreateBox = styled.div`
129100
display: flex;
130101
justify-content: center;

‎src/components/common/Slide.js‎

Lines changed: 41 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,12 @@ import React, { useState, useEffect } from "react";
33
import axios from "axios";
44
import Slider from "react-slick";
55
import SlideContent from "./SlideContent";
6+
import { LoadingLicense } from "./LoadingLicense";
67

78
//Slide: Component for Implementing the License Page using the React Slick
89
const Slide = () => {
910
//using recoil to add slide content in Slide component
11+
const [loading, setLoading] = useState(false);
1012
const [data, setData] = useState([]);
1113
useEffect(() => {
1214
let completed = false;
@@ -19,6 +21,7 @@ const Slide = () => {
1921
if (!completed) {
2022
setData(result.data);
2123
}
24+
setLoading(true);
2225
}
2326
get();
2427
return () => {
@@ -38,25 +41,32 @@ const Slide = () => {
3841

3942
return (
4043
<StSlide>
41-
<link
42-
rel="stylesheet"
43-
type="text/css"
44-
href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"
45-
/>
46-
<link
47-
rel="stylesheet"
48-
type="text/css"
49-
href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"
50-
/>
51-
<StyledSlider {...settings}>
52-
{data.map((it) => {
53-
return (
54-
<div key={it.license}>
55-
<SlideContent data={it} />
56-
</div>
57-
);
58-
})}
59-
</StyledSlider>
44+
{loading ? (
45+
<SlideDiv>
46+
<link
47+
rel="stylesheet"
48+
type="text/css"
49+
href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"
50+
/>
51+
<link
52+
rel="stylesheet"
53+
type="text/css"
54+
href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"
55+
/>
56+
<StyledSlider {...settings}>
57+
{data.map((it) => {
58+
return (
59+
<div key={it.license}>
60+
<SlideContent data={it} />
61+
</div>
62+
);
63+
})}
64+
</StyledSlider>
65+
</SlideDiv>
66+
) : (
67+
<LoadingLicense />
68+
)}
69+
;
6070
</StSlide>
6171
);
6272
};
@@ -70,6 +80,13 @@ const StSlide = styled.div`
7080
height: 100%;
7181
`;
7282

83+
const SlideDiv = styled.div`
84+
display: flex;
85+
justify-content: center;
86+
width: 100%;
87+
height: 100%;
88+
`;
89+
7390
const StyledSlider = styled(Slider)`
7491
display: flex;
7592
width: 100%;
@@ -100,14 +117,16 @@ const StyledSlider = styled(Slider)`
100117
}
101118
102119
.slick-next {
103-
right: 0;
120+
right: 1;
104121
}
105122
106123
.slick-prev {
107-
left: 0;
124+
left: 1;
108125
}
109126
110-
.slick-next:before,
127+
.slick-next:before{
128+
color: #888;
129+
}
111130
.slick-prev:before {
112131
color: #888;
113132
}

‎src/components/common/SlideContent.js‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -56,30 +56,27 @@ export const SlideContent = (props) => {
5656
<ConditionBox className="ConditionBox">
5757
<div>
5858
<Condition>
59-
<h2>Permission</h2>
59+
<ContentH2>Permission</ContentH2>
6060
</Condition>
6161
<ul>{pmsList}</ul>
6262
</div>
6363
<div>
6464
<Condition>
65-
<h2>Limitations</h2>
65+
<ContentH2>Limitations</ContentH2>
6666
</Condition>
6767
<ul>{limList}</ul>
6868
</div>
6969
<div>
7070
<Condition>
71-
<h2>Conditions</h2>
71+
<ContentH2>Conditions</ContentH2>
7272
</Condition>
7373
<ul>{conList}</ul>
7474
</div>
7575
</ConditionBox>
7676
<LinkBox className="LinkBox">
7777
<LinkDiv>
7878
<LinkText>
79-
This is not legal advice.&nbsp;
80-
<LinkA href={props.data.license}>
81-
Learn more about repository licenses.
82-
</LinkA>
79+
※ This is not legal advice.
8380
</LinkText>
8481
</LinkDiv>
8582
{pickLi === props.data.license ? (
@@ -148,12 +145,15 @@ const InformationBox = styled.div`
148145

149146
const Title = styled.h1`
150147
padding: 1rem 1rem 1rem 0.5rem;
151-
font-size: 1.2rem;
148+
font-size: 1.3rem;
152149
font-weight: bold;
153150
`;
154151

152+
const ContentH2 = styled.h1`
153+
margin-bottom: 0.8rem;
154+
`;
155155
const Content = styled.p`
156-
font-size: 1rem;
156+
font-size: 1.1rem;
157157
text-align: justify;
158158
line-height: 1.7rem;
159159
`;

‎src/pages/Login.js‎

Lines changed: 6 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import styled from "styled-components";
2+
import { COLOR } from "../styles/color";
23
import axios from "axios";
34
import { Title } from "../components/main/Welcome";
45
import { useNavigate } from "react-router-dom";
@@ -66,7 +67,7 @@ function LoginPage() {
6667

6768
return (
6869
<StLogin>
69-
<Title>logging in</Title>
70+
{/* <Title>logging in</Title> */}
7071
</StLogin>
7172
);
7273
}
@@ -85,19 +86,9 @@ const StLogin = styled.div`
8586
text-align: center;
8687
justify-content: center;
8788
height: 100vh;
88-
background-image: linear-gradient(
89-
45deg,
90-
#d16ba5,
91-
#c777b9,
92-
#ba83ca,
93-
#aa8fd8,
94-
#9a9ae1,
95-
#8aa7ec,
96-
#79b3f4,
97-
#69bff8,
98-
#52cffe,
99-
#41dfff,
100-
#46eefa,
101-
#5ffbf1
89+
background: linear-gradient(
90+
to bottom,
91+
${COLOR.MAIN_HOVER},
92+
${COLOR.MAIN_BACKGROUND}
10293
);
10394
`;

0 commit comments

Comments
 (0)