parent
d815b36ec6
commit
11746080bd
29 changed files with 1011 additions and 194 deletions
|
After Width: | Height: | Size: 693 B |
|
After Width: | Height: | Size: 335 B |
|
After Width: | Height: | Size: 7.1 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 426 KiB |
@ -0,0 +1,19 @@ |
||||
import React, { Component } from 'react'; |
||||
import {Link} from 'react-router-dom'; |
||||
|
||||
import './index.scss'; |
||||
export default class MyProduct extends Component { |
||||
render() { |
||||
const { data, number } = this.props; |
||||
return( |
||||
<article style={{minWidth : window.innerWidth / number}} className="scroll-my-product d-flex flex-column"> |
||||
<Link to={`/books/${data.id}`}> |
||||
<img src={data.image} alt={data.title} /> |
||||
<h1>{data.title}</h1> |
||||
<h2>{data.subTitle}</h2> |
||||
</Link> |
||||
</article> |
||||
|
||||
); |
||||
} |
||||
} |
||||
@ -0,0 +1,64 @@ |
||||
.scroll-my-product{ |
||||
padding: 10px; |
||||
background-color: #ddd; |
||||
a{ |
||||
width : 100%; |
||||
text-decoration: none; |
||||
&:hover{ |
||||
} |
||||
img{ |
||||
width: 100%; |
||||
height: 150px; |
||||
border-top-left-radius: 15px; |
||||
border-top-right-radius: 15px; |
||||
} |
||||
h1{ |
||||
font-family: numeralLight; |
||||
margin-top: 5px; |
||||
font-size: calc(100vw / 34); |
||||
color: #7dc241; |
||||
letter-spacing: -1px; |
||||
} |
||||
h2{ |
||||
font-family: numeralLight; |
||||
margin-top: 10px; |
||||
font-size: calc(100vw / 45); |
||||
color: #6f7074; |
||||
} |
||||
} |
||||
&__notAvailabe{ |
||||
font-family: numeralBold; |
||||
font-size: calc(100vw / 45); |
||||
width : 100%; |
||||
text-align: center; |
||||
color: #6f7074; |
||||
margin-top: 15px; |
||||
} |
||||
&__price{ |
||||
font-size: calc(100vw / 45); |
||||
width : 100%; |
||||
margin-top: 15px; |
||||
text-align: center; |
||||
&--old{ |
||||
font-family: numeralBold; |
||||
color: #6f7074; |
||||
position: relative; |
||||
margin-left: 0px; |
||||
align-items:center; |
||||
font-size: calc(100vw / 45); |
||||
span{ |
||||
position: absolute; |
||||
left: 0px; |
||||
width : 100%; |
||||
height: 2px; |
||||
background-color: rgba(121, 121, 121, 0.534); |
||||
transform: rotate(-14deg); |
||||
} |
||||
} |
||||
&--price{ |
||||
color: #02733c; |
||||
font-family: numeralBold; |
||||
font-size: calc(100vw / 45); |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,36 @@ |
||||
import React, { Component } from 'react'; |
||||
import {Link} from 'react-router-dom'; |
||||
|
||||
import './index.scss'; |
||||
export default class Product extends Component { |
||||
render() { |
||||
const { data, number } = this.props; |
||||
return( |
||||
<article style={{minWidth : window.innerWidth / number}} className="scroll-product d-flex flex-column"> |
||||
<Link to={`/books/${data.id}`}> |
||||
<img src={data.image} alt={data.title} /> |
||||
<h1>{data.title}</h1> |
||||
<h2>{data.subTitle}</h2> |
||||
{ |
||||
data.price ?
|
||||
<div className="scroll-product__price d-flex flex-column align-items-center"> |
||||
{ |
||||
data.oldPrice ?
|
||||
<div> |
||||
<div className="scroll-product__price--old d-flex"> |
||||
{data.oldPrice} تومان
|
||||
<span></span> |
||||
</div> |
||||
|
||||
</div> : null |
||||
} |
||||
<div className="scroll-product__price--price">{data.price} تومان</div> |
||||
</div> : |
||||
<div className="scroll-product__notAvailabe">ناموجود</div> |
||||
} |
||||
</Link> |
||||
</article> |
||||
|
||||
); |
||||
} |
||||
} |
||||
@ -0,0 +1,63 @@ |
||||
.scroll-product{ |
||||
padding: 10px; |
||||
a{ |
||||
width : 100%; |
||||
text-decoration: none; |
||||
&:hover{ |
||||
} |
||||
img{ |
||||
width: 100%; |
||||
height: 150px; |
||||
border-top-left-radius: 15px; |
||||
border-top-right-radius: 15px; |
||||
} |
||||
h1{ |
||||
font-family: numeralLight; |
||||
margin-top: 5px; |
||||
font-size: calc(100vw / 34); |
||||
color: #7dc241; |
||||
letter-spacing: -1px; |
||||
} |
||||
h2{ |
||||
font-family: numeralLight; |
||||
margin-top: 10px; |
||||
font-size: calc(100vw / 45); |
||||
color: #6f7074; |
||||
} |
||||
} |
||||
&__notAvailabe{ |
||||
font-family: numeralBold; |
||||
font-size: calc(100vw / 45); |
||||
width : 100%; |
||||
text-align: center; |
||||
color: #6f7074; |
||||
margin-top: 15px; |
||||
} |
||||
&__price{ |
||||
font-size: calc(100vw / 45); |
||||
width : 100%; |
||||
margin-top: 15px; |
||||
text-align: center; |
||||
&--old{ |
||||
font-family: numeralBold; |
||||
color: #6f7074; |
||||
position: relative; |
||||
margin-left: 0px; |
||||
align-items:center; |
||||
font-size: calc(100vw / 45); |
||||
span{ |
||||
position: absolute; |
||||
left: 0px; |
||||
width : 100%; |
||||
height: 2px; |
||||
background-color: rgba(121, 121, 121, 0.534); |
||||
transform: rotate(-14deg); |
||||
} |
||||
} |
||||
&--price{ |
||||
color: #02733c; |
||||
font-family: numeralBold; |
||||
font-size: calc(100vw / 45); |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,18 @@ |
||||
import React, { Component } from 'react'; |
||||
import {Link} from 'react-router-dom'; |
||||
|
||||
import './index.scss'; |
||||
export default class Subject extends Component { |
||||
render() { |
||||
const { data, number } = this.props; |
||||
return( |
||||
<Link
|
||||
className="scroll-subject d-flex justify-content-center align-items-center"
|
||||
style={{backgroundColor: data.backgroundColor, minWidth: window.innerWidth / number }} to={`/books`} |
||||
> |
||||
<h1>{data.name}</h1> |
||||
</Link> |
||||
|
||||
); |
||||
} |
||||
} |
||||
@ -0,0 +1,12 @@ |
||||
.scroll-subject{ |
||||
padding: 12px 0px; |
||||
font-family: numeralLight; |
||||
color: white; |
||||
text-decoration: none; |
||||
border-radius: 6px; |
||||
|
||||
h1{ |
||||
font-size: calc(100vw / 35); |
||||
margin: 0px; |
||||
} |
||||
} |
||||
@ -1,9 +1,26 @@ |
||||
.mobile-navbar{ |
||||
width: 100%; |
||||
height: 70px; |
||||
position: fixed; |
||||
top : 0px; |
||||
left : 0px; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
background-color: white; |
||||
z-index: 200; |
||||
padding: 15px 10px; |
||||
&__menu{ |
||||
img{ |
||||
width : calc(100vw / 12); |
||||
} |
||||
} |
||||
&__logo{ |
||||
img{ |
||||
width: calc(100vw / 4); |
||||
} |
||||
} |
||||
&__left{ |
||||
img{ |
||||
width : calc(100vw / 15); |
||||
} |
||||
} |
||||
} |
||||
Loading…
Reference in new issue