Skip to content

Commit

Permalink
Merge pull request #270 from kookmin-sw/feature/269
Browse files Browse the repository at this point in the history 
Chore : 경찰 화면 반응형 수정
  • Loading branch information
@ancy0
ancy0 authored May 23, 2024
2 parents d849280 + 1146316 commit 960c757
Show file tree
Hide file tree
Showing 3 changed files with 155 additions and 95 deletions.
68 changes: 52 additions & 16 deletions frontend/src/components/missingPersonReport/IntelligentReportList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,16 @@ export const IntelligentReportList = ({ history, onClick, handleClickList }) =>
return (
<ButtonContainer onClick={onClick}>
<ButtonContents>
<ButtonTitle>지능형 탐색 시작하기</ButtonTitle>
<ButtonDescription>조건을 입력하여 추가적으로</ButtonDescription>
<ButtonDescription>지능형 탐색을 진행할 수 있습니다.</ButtonDescription>
<ButtonText>
<ButtonTitle>지능형 탐색 시작하기</ButtonTitle>
<ButtonDescription>조건을 입력하여 추가적으로</ButtonDescription>
<ButtonDescription>지능형 탐색을 진행할 수 있습니다.</ButtonDescription>
</ButtonText>

<ImageContainer>
<ButtonImage src={AddSearchBtnImg} />
</ImageContainer>
</ButtonContents>
<ImageContainer>
<ButtonImage src={AddSearchBtnImg} />
</ImageContainer>
</ButtonContainer>
);
};
Expand Down Expand Up @@ -70,9 +73,10 @@ const ButtonContainer = styled.div`

const ButtonContents = styled.div`
display: flex;
flex-direction: column;
flex-direction: row;
justify-content: center;
align-items: start;
position: absolute;
width: 100%;
height: 100%;
padding: 0rem 0 0 2rem;
Expand All @@ -81,6 +85,18 @@ const ButtonContents = styled.div`
border-radius: 0.5rem;
box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
&:hover {
background-color: #f0f3ff;
}
`;

const ButtonText = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
width: 55%;
height: 100%;
`;

const ButtonTitle = styled.p`
Expand All @@ -97,29 +113,49 @@ const ButtonDescription = styled.p`
white-space: pre-line;
color: #686767;
line-height: 1.5;
@media all and (max-width: 1600px) {
@media (max-width: 1900px) and (min-width: 1601px) {
font-size: 1.1rem;
}
@media (max-width: 1600px) and (min-width: 1301px) {
font-size: 1rem;
}
@media (max-width: 1300px) and (min-width: 1280px) {
font-size: 1rem;
}
`;
const ImageContainer = styled.div`
display: flex;
justify-content: end;
/* align-items: end; */
position: absolute;
width: 100%;
align-items: end;
width: 45%;
height: 100%;
/* padding-bottom: 1rem; */
/* padding-right: 6rem; */
padding-right: 2rem;
@media all and (max-width: 1600px) {
padding-top: 1rem;
padding-right: 0rem;
}
`;

const ButtonImage = styled.img`
width: 24rem;
height: 10rem;
@media all and (max-width: 1600px) {
width: 100%;
/* width: 24rem;
height: 10rem; */
/* @media all and (max-width: 1600px) {
width: 12rem;
height: 8rem;
} */
/* @media (max-width: 1900px) and (min-width: 1601px) {
width: 20.4rem;
height: 8.5rem;
}
@media (max-width: 1600px) and (min-width: 1301px) {
width: 18rem;
height: 8rem;
}
@media (max-width: 1300px) and (min-width: 1280px) {
width: 14.4rem;
height: 6rem;
} */
`;
6 changes: 3 additions & 3 deletions frontend/src/components/reportIntelligent/IntelligentSearchBox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,13 +130,13 @@ const SearchBoxContainer = styled.div`
border: 0.1rem solid #d9d9d9;
border-radius: 0.5rem;
@media (max-width: 1600px) and (min-width: 1401px) {
@media (max-width: 1900px) and (min-width: 1601px) {
width: 36rem;
height: 3.5rem;
}
@media (max-width: 1400px) and (min-width: 1301px) {
width: 30.5rem;
@media (max-width: 1600px) and (min-width: 1301px) {
width: 32.5rem;
height: 3.5rem;
}
@media (max-width: 1300px) and (min-width: 1280px) {
Expand Down
176 changes: 100 additions & 76 deletions frontend/src/components/reportIntelligent/IntelligentSearchOption.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,7 @@ export const IntelligentSearchOption = ({ form, name, getLocation, location }) =

return (
<StIntelligentSearchOption>
<>
{" "}
<ContentsContainer>
<TitleContainer>{name}님의 지능형 탐색</TitleContainer>
{/* <InputForm form={form}> */}
<InputItem name="searchPeriod" label="기간" {...rangeConfig} colon={false} className="form-custom">
Expand All @@ -65,12 +64,12 @@ export const IntelligentSearchOption = ({ form, name, getLocation, location }) =
/>
</InputItem>
<InputItem>
<ButtonWrapper type="primary" htmlType="submit">
<ButtonWrapper className="custom-button" type="primary" htmlType="submit">
시작하기
</ButtonWrapper>
</InputItem>
{/* </InputForm> */}
</>
</ContentsContainer>
<ImageContainer>
<IntelligentImageContainer>
<img src={IntelligentFloatImg} />
Expand All @@ -85,8 +84,9 @@ export const IntelligentSearchOption = ({ form, name, getLocation, location }) =

const StIntelligentSearchOption = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
flex-direction: row;
justify-content: space-between;
align-items: center;
position: relative;
width: 100%;
height: 100%;
Expand All @@ -98,20 +98,54 @@ const StIntelligentSearchOption = styled.div`
//box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
`;

const ContentsContainer = styled.div`
display: flex;
flex-direction: column;
width: 55%;
`;

const ButtonWrapper = styled(Button)`
margin-top: 2rem;
margin-bottom: 0;
border-radius: 1rem;
width: 12rem;
height: 4rem;
&.ant-btn > span {
font-size: 1.5rem;
}
@media (max-width: 1440px) and (min-width: 1367px), (max-width: 1366px) and (min-width: 1281px) {
margin-top: 1rem;
&.custom-button {
display: flex;
justify-content: center;
align-items: center;
margin-top: 2rem;
margin-bottom: 0;
border-radius: 1rem;
width: 12rem;
height: 4rem;
@media (max-width: 1900px) and (min-width: 1601px) {
margin-top: 0rem;
width: 10rem;
height: 4rem;
}
@media (max-width: 1600px) and (min-width: 1301px) {
/* height: 3rem; */
margin-top: 0rem;
width: 8.5rem;
height: 3.5rem;
border-radius: 0.8rem;
}
@media (max-width: 1300px) and (min-width: 1280px) {
/* height: 2.8rem; */
margin-top: 0rem;
width: 8rem;
height: 3rem;
}
}
@media (max-width: 1280px) and (min-width: 0px) {
margin-top: 1rem;
&.custom-button.ant-btn > span {
font-size: 1.5rem;
@media (max-width: 1900px) and (min-width: 1601px) {
font-size: 1.5rem;
}
@media (max-width: 1600px) and (min-width: 1301px) {
font-size: 1.4rem;
}
@media (max-width: 1300px) and (min-width: 1280px) {
font-size: 1.3rem;
}
}
`;

Expand All @@ -121,14 +155,18 @@ const TitleContainer = styled.div`
margin-top: 1rem;
margin-bottom: 3rem;
@media (max-width: 1440px) and (min-width: 1367px), (max-width: 1366px) and (min-width: 1281px) {
margin-top: 0.8rem;
margin-bottom: 0.8rem;
font-size: 1.8rem;
@media (max-width: 1900px) and (min-width: 1601px) {
margin: 0.8rem 0 2rem 0;
font-size: 2.3rem;
}
@media (max-width: 1280px) and (min-width: 0px) {
margin: 0.6rem 0;
font-size: 1.6rem;
@media (max-width: 1600px) and (min-width: 1301px) {
margin: 0.6rem 0 1.5rem 0;
font-size: 2.1rem;
}
@media (max-width: 1300px) and (min-width: 1280px) {
margin: 0.5rem 0 1.4rem 0;
font-size: 1.8rem;
}
`;

Expand Down Expand Up @@ -161,13 +199,31 @@ const InputItem = styled(Form.Item)`
`;

const RangePickerWrapper = styled(RangePicker)`
&.custom-range-picker {
width: 42.5rem;
height: 4.2rem;
@media (max-width: 1900px) and (min-width: 1601px) {
width: 36rem;
height: 3.5rem;
}
@media (max-width: 1600px) and (min-width: 1301px) {
width: 32.5rem;
height: 3.5rem;
}
}
&.ant-picker .ant-picker-input > input {
font-size: 1.4rem;
@media (max-width: 1440px) and (min-width: 1367px), (max-width: 1366px) and (min-width: 1281px) {
font-size: 1.2rem;
font-size: 1.5rem;
@media (max-width: 1900px) and (min-width: 1601px) {
font-size: 1.5rem;
}
@media (max-width: 1280px) and (min-width: 0px) {
font-size: 1.2rem;
@media (max-width: 1600px) and (min-width: 1301px) {
font-size: 1.3rem;
}
@media (max-width: 1300px) and (min-width: 1280px) {
font-size: 1.3rem;
}
}
`;
Expand All @@ -190,70 +246,38 @@ const IntelligentImageFrameContainer = styled.div`
display: flex;
flex-direction: row;
position: absolute;
right: 2rem;
bottom: 4rem;
bottom: 2rem;
width: 100%;
height: 100%;
img {
width: 51.75rem;
height: 29.1rem;
/* width: 62.1rem;
height: 34.8rem; */
@media (max-width: 1900px) and (min-width: 1601px) {
bottom: 0;
width: 44.85rem;
height: 25.2rem;
}
@media (max-width: 1600px) and (min-width: 1421px) {
bottom: 0rem;
width: 33.6rem;
height: 18.9rem;
}
@media (max-width: 1420px) {
bottom: -1rem;
width: 20rem;
height: 12.6rem;
}
width: 100%;
height: 100%;
}
`;

const IntelligentImageContainer = styled.div`
display: flex;
flex-direction: row;
position: absolute;
right: 2rem;
bottom: 4rem;
/* right: 2rem;
bottom: 4rem; */
bottom: 2rem;
width: 100%;
height: 100%;
img {
/* width: 34.5rem;
height: 19.4rem; */
/* width: 44.85rem;
height: 25.2rem; */
width: 51.75rem;
height: 29.1rem;
width: 100%;
height: 100%;
animation: float 4s ease-in-out infinite;
@media (max-width: 1900px) and (min-width: 1601px) {
bottom: 0;
width: 44.85rem;
height: 25.2rem;
}
@media (max-width: 1600px) and (min-width: 1421px) {
bottom: 0rem;
width: 33.6rem;
height: 18.9rem;
}
@media (max-width: 1420px) {
bottom: -1rem;
width: 22.4rem;
height: 12.6rem;
}
}
${floatAnimation}
`;

const ImageContainer = styled.div`
display: flex;
flex-direction: row;
z-index: 1;
width: 45%;
height: 100%;
margin: 0;
position: relative;
`;

0 comments on commit 960c757

Please sign in to comment.