Skip to content

GitLab

Commit d5d8b7c2 authored by kusang96's avatar kusang96
Browse files

css

parent 02b3814f
Show whitespace changes
Inline Side-by-side
client/src/Components/Pagination.js
View file @ d5d8b7c2
......@@ -25,7 +25,7 @@ function Paginations({ index, totalPages, handlePage }) {
`}
</style>
<Pagination.First onClick={() => handlePage(1)} />
{index === 1 ? <Pagination.Prev onClick={()=>handlePage(index)} /> : <Pagination.Prev onClick={()=>handlePage(index - 1)} />}
{index === 1 ? <Pagination.Prev disabled /> : <Pagination.Prev onClick={()=>handlePage(index - 1)} />}
{index === totalPages && index > 4 ? <Pagination.Item onClick={()=>handlePage(index - 4)}>{index - 4}</Pagination.Item> : ""}
{index > 3 && index >= totalPages-1 ? <Pagination.Item onClick={()=>handlePage(index - 3)}>{index - 3}</Pagination.Item> : ""}
{index < 3 ? "" : <Pagination.Item onClick={()=>handlePage(index - 2)}>{index - 2}</Pagination.Item>}
......@@ -35,9 +35,9 @@ function Paginations({ index, totalPages, handlePage }) {
{index === totalPages ? "" : <Pagination.Item onClick={()=>handlePage(index + 1)}>{index + 1}</Pagination.Item>}
{index > totalPages-2 ? "" : <Pagination.Item onClick={()=>handlePage(index + 2)}>{index + 2}</Pagination.Item>}
{index < totalPages-3 && index >= 1 ? <Pagination.Item onClick={()=>handlePage(index + 3)}>{index + 3}</Pagination.Item> : ""}
{index < totalPages-4 && index >= 1 ? <Pagination.Item onClick={()=>handlePage(index + 4)}>{index + 4}</Pagination.Item> : ""}
{index === totalPages ? <Pagination.Next onClick={()=>handlePage(index)} /> : <Pagination.Next onClick={()=>handlePage(index + 1)} />}
{index <= totalPages-3 && index >= 1 ? <Pagination.Item onClick={()=>handlePage(index + 3)}>{index + 3}</Pagination.Item> : ""}
{index <= totalPages-4 && index >= 1 ? <Pagination.Item onClick={()=>handlePage(index + 4)}>{index + 4}</Pagination.Item> : ""}
{index === totalPages ? <Pagination.Next disabled /> : <Pagination.Next onClick={()=>handlePage(index + 1)} />}
<Pagination.Last onClick={() =>handlePage(totalPages)} />
</Pagination>
......
client/src/Pages/Account.js
View file @ d5d8b7c2
......@@ -75,7 +75,7 @@ function Account() {
}
}
async function getOrdered({ }) {
async function getOrdered() {
try {
const response = await axios.post(`/api/users/addorder`, {
userId: userId
......
client/src/Pages/Admin.js
View file @ d5d8b7c2
......@@ -81,7 +81,7 @@ function Admin() {
border-color: #91877F;
box-shadow: 0 0 0 0;
}
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
.btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
background-color: #91877F;
border-color: #91877F;
}
......
client/src/Pages/Product.js
View file @ d5d8b7c2
......@@ -148,8 +148,16 @@ function Product({ match, location }) {
background-color: #CDC5C2;
border-color: #CDC5C2;
}
.btn:hover, .btn:active, .btn:focus {
.btn:hover {
background-color: #91877F;
border-color: #91877F;
}
.btn-primary:focus {
background-color: #91877F;
border-color: #91877F;
box-shadow: 0 0 0 0;
}
.btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
background-color: #91877F;
border-color: #91877F;
}
......@@ -206,7 +214,7 @@ function Product({ match, location }) {
<Col className="text-right">{price}원</Col>
</Row>
<Row className="justify-content-between mx-0 my-3" style={{ width: "100%" }}>
<Button type='button' name="shoppingcart" onClick={addCart} style={{ width: "49%" }}>장바구니</Button>
<Button type='button' name="shoppingcart" onClick={addCart} style={{ width: "49%" }} variant="primary" >장바구니</Button>
<Button type='button' name="payment" onClick={addCart} style={{ width: "49%" }}>구매하기</Button>
</Row>
</Form>
......@@ -222,7 +230,6 @@ function Product({ match, location }) {
{product.name}
</div>
<Image src={`/images/${product.main_img}`} className='d-flex justify-content-center p-4' style={{ objectFit: "contain", maxWidth: "100%", margin: 'auto' }} />
<Card style={{ width: '70%', margin: 'auto' }} className='my-4' >
<Card.Header className='text-center' style={{ background: '#CDC5C2' }}>
<h5 className='m-0' style={{ whiteSpace: 'nowrap' }}> [ Description ]</h5>
......@@ -244,29 +251,29 @@ function Product({ match, location }) {
<h6 style={{ borderBottom: "1px solid", paddingBottom: "5px", marginBottom: "1em" }}>회원님이 선호할만한 상품 추천
<a className="close float-right" onClick={(e) => handleClick(e)} style={{ fontSize: "1rem", cursor: "pointer" }}>X</a>
</h6>
<Row className="justify-content-space mx-0" style={{ flexWrap: "nowrap", width: "100%", overflowX: "auto" }}>
<Col as={Card} style={{ minWidth: "10rem", marginRight: "1rem" }}>
<Row className="justify-content-evenly mx-0" style={{ flexWrap: "nowrap", width: "100%", overflowX: "auto" }}>
<Col as={Card} style={{ minWidth: "8rem" }}>
<Card.Img variant="top" src="https://img.sonyunara.com/files/goods/67504/1607328307_0.jpg" style={{ objectFit: "contain" }} />
<Card.Body className="px-0">
<Card.Title>클로타탄원피스</Card.Title>
<Card.Text>구매자 수: 30</Card.Text>
</Card.Body>
</Col>
<Col as={Card} style={{ minWidth: "10rem", marginRight: "1rem" }}>
<Col as={Card} style={{ minWidth: "8rem" }}>
<Card.Img variant="top" src="https://img.sonyunara.com/files/goods/67504/1607328307_0.jpg" style={{ objectFit: "contain" }} />
<Card.Body className="px-0">
<Card.Title>클로타탄원피스</Card.Title>
<Card.Text>구매자 수: 30</Card.Text>
</Card.Body>
</Col>
<Col as={Card} style={{ minWidth: "10rem", marginRight: "1rem" }}>
<Col as={Card} style={{ minWidth: "8rem" }}>
<Card.Img variant="top" src="https://img.sonyunara.com/files/goods/67504/1607328307_0.jpg" style={{ objectFit: "contain" }} />
<Card.Body className="px-0">
<Card.Title>클로타탄원피스</Card.Title>
<Card.Text>구매자 수: 30</Card.Text>
</Card.Body>
</Col>
<Col as={Card} style={{ minWidth: "10rem", marginRight: "1rem" }}>
<Col as={Card} style={{ minWidth: "8rem" }}>
<Card.Img variant="top" src="https://img.sonyunara.com/files/goods/67504/1607328307_0.jpg" style={{ objectFit: "contain" }} />
<Card.Body className="px-0">
<Card.Title>클로타탄원피스</Card.Title>
......
client/src/Pages/ProductsList.js
View file @ d5d8b7c2
......@@ -168,12 +168,12 @@ function ProductsList({ match }) {
border-color: #CDC5C2;
border-radius: 0;
}
.btn:hover, .btn:focus {
.btn:hover {
background-color: #91877F;
border-color: #91877F;
box-shadow: 0 0 0 0;
}
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
.btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
background-color: #91877F;
border-color: #91877F;
}
......@@ -194,20 +194,20 @@ function ProductsList({ match }) {
<div className="text-center">
<h1 style={{ fontSize: "5.5vmax" }} className="text-center m-1 py-3">{mainCategory}</h1>
<ButtonGroup className="mb-3" style={{ display: "inline" }}>
{subCategory.map(el =>(<Button className="m-1" style={{ fontSize: "0.8vw" }} name={el} onClick={handleSubname}>{el}</Button>))}
{subCategory.map(el =>(<Button className="m-1" style={{ fontSize: "1.2vw" }} name={el} onClick={handleSubname}>{el}</Button>))}
</ButtonGroup>
</div>
</Col>
</Row>
<Row className="justify-content-end mx-0 mt-5 mb-3">
<Form inline onSubmit={handleSearch} className="justify-content-end mx-0 my-2">
<FormControl ref={searchref} type="text" onChange={handleChange} placeholder="Search" style={{ width: "13rem" }} />
<Button type="submit" className="px-2 mr-2">
<FormControl ref={searchref} type="text" onChange={handleChange} placeholder="Search" style={{ width: "12rem" }} />
<Button type="submit" className="px-2 m1-1">
<img src="/icon/search.svg" width="20" height="20" />
</Button>
</Form>
<Dropdown className="my-2">
<Dropdown.Toggle className="mx-2">{sortingName}</Dropdown.Toggle>
<Dropdown.Toggle className="mx-1">{sortingName}</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item as="button" onClick={() => handleSort('purchase')}>인기상품</Dropdown.Item>
<Dropdown.Item as="button" onClick={() => handleSort('newest')}>신상품</Dropdown.Item>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment