reza added some change

master
ravino 3 years ago
parent d948b16c4a
commit 7a3ffff850
  1. 2
      src/views/Home/HomeScroll/index.scss
  2. 22
      src/views/Home/HomeSlider/Simple/index.js
  3. 5
      src/views/Home/HomeSlider/Simple/index.scss
  4. 13
      src/views/Home/HomeSlider/index.js
  5. 13
      src/views/Home/HomeStatic/index.js
  6. 2
      src/views/Home/HomeStatic/index.scss
  7. 17
      src/views/Home/Navbar/Laptop/index.js
  8. 3
      src/views/Home/Navbar/Laptop/index.scss
  9. 17
      src/views/Home/SingleBlog/index.js
  10. 2
      src/views/Home/SingleBlog/index.scss

@ -10,7 +10,6 @@
&--right{
position: relative;
h1{
font-size: calc(100vw / 60);
font-family: numeralBold;
letter-spacing: -1px;
}
@ -27,7 +26,6 @@
&--more{
span{
font-size: calc(100vw / 75);
color: #7dc241;
font-family: numeralMedium;
}

@ -2,6 +2,18 @@ import React, { Component } from 'react';
import {Link} from 'react-router-dom';
import './index.scss';
const maxDesktopSize = 1250;
const fontSize = {
desktop: {
h1: window.innerWidth > maxDesktopSize ? 22 : window.innerWidth / 65,
h2: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 85,
notAvailable: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 70,
available: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 70,
},
};
export default class Simple extends Component {
render() {
const { height, data } = this.props;
@ -12,24 +24,24 @@ export default class Simple extends Component {
}}>
<Link to={`/books/${data.id}`}>
<img src={data.image} alt={data.title} />
<h1>{data.title}</h1>
<h2>{data.subTitle}</h2>
<h1 style={{fontSize : fontSize.desktop.h1 }}>{data.title}</h1>
<h2 style={{fontSize: fontSize.desktop.h2 }}>{data.subTitle}</h2>
{
data.price ?
<div className="slider-simple__price d-flex justify-content-center">
{
data.oldPrice ?
<div>
<div className="slider-simple__price--old d-flex">
<div style={{fontSize: fontSize.desktop.available }} className="slider-simple__price--old d-flex">
{data.oldPrice} تومان
<span></span>
</div>
</div> : null
}
<div className="slider-simple__price--price">{data.price} تومان</div>
<div style={{fontSize: fontSize.desktop.available }} className="slider-simple__price--price">{data.price} تومان</div>
</div> :
<div className="slider-simple__notAvailabe">ناموجود</div>
<div style={{fontSize: fontSize.desktop.notAvailable }} className="slider-simple__notAvailabe">ناموجود</div>
}
</Link>
</article>

@ -14,27 +14,23 @@
h1{
font-family: numeralBold;
margin-top: 15px;
font-size: calc(100vw / 70);
color: #7dc241;
letter-spacing: -1px;
}
h2{
font-family: numeralLight;
margin-top: 10px;
font-size: calc(100vw / 95);
color: #6f7074;
}
}
&__notAvailabe{
font-family: numeralBold;
font-size: calc(100vw / 80);
width : 100%;
text-align: center;
color: #6f7074;
margin-top: 15px;
}
&__price{
font-size: calc(100vw / 85);
width : 100%;
margin-top: 15px;
text-align: center;
@ -44,7 +40,6 @@
position: relative;
margin-left: 10px;
align-items:center;
font-size: calc(100vw / 80);
span{
position: absolute;
left: 0px;

@ -8,17 +8,26 @@ import dropdown from "../../../assets/icons/dropdown.png";
import "./index.scss";
const maxDesktopSize = 1250;
const fontSize = {
desktop: {
h1: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 65,
span: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 75,
},
};
const SimpleHeader = (props) => {
return (
<>
{window.innerWidth > 1000 ? (
<div className="home-scroll__header d-flex">
<div className="home-scroll__header--right d-flex">
<h1>{props.title}</h1>
<h1 style={{ fontSize: fontSize.desktop.h1 }}>{props.title}</h1>
<span></span>
</div>
<div className="home-scroll__header--more d-flex">
<span>ادامه لیست</span>
<span style={{ fontSize: fontSize.desktop.h1 }}>ادامه لیست</span>
<img src={dropdown} alt="فلش" />
</div>
</div>

@ -2,6 +2,15 @@ import React, { Component } from "react";
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
import "./index.scss";
const maxDesktopSize = 1250;
const fontSize = {
desktop: {
h2: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 85,
},
};
export default class HomeStatic extends Component {
render() {
const { data, height, title } = this.props;
@ -49,8 +58,8 @@ const Item = (props) => {
className="home-static__list--item d-flex"
>
<div className="d-flex flex-column">
<h2 style={{ color: "#02733c" }}>{props.data.topText}</h2>
<h2 style={{ color: "#7dc241" }}>{props.data.bottomText}</h2>
<h2 style={{ color: "#02733c", fontSize: fontSize.desktop.h2 }}>{props.data.topText}</h2>
<h2 style={{ color: "#7dc241", fontSize: fontSize.desktop.h2 }}>{props.data.bottomText}</h2>
</div>
<img src={props.data.image} alt="عکس" />
</div>

@ -19,8 +19,8 @@
}
img {
margin-right: 20px;
transform: scale(0.9);
border-radius: 10px;
width: 80px;
}
}
}

@ -4,6 +4,17 @@ import { Link } from "react-router-dom";
import logo from '../../../../assets/icons/logo.png';
import "./index.scss";
const maxDesktopSize = 1250;
const fontSize = {
desktop: {
li: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 85,
a: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 85,
},
};
export default class LaptopNavbar extends Component {
render() {
const { links } = this.props;
@ -15,15 +26,15 @@ export default class LaptopNavbar extends Component {
</div>
<ul className="laptop-navbar__list d-flex">
{links.map((item, i) => (
<li key={i}>
<li style={{fontSize : fontSize.desktop.li }} key={i}>
<Link to={item.to}>{item.name}</Link>
</li>
))}
</ul>
</div>
<div className="d-flex">
<Link to={'/signin'} className="laptop-navbar__signin">ورود به حساب کاربری</Link>
<Link to={'/signup'} className="laptop-navbar__signup">ثبت نام</Link>
<Link style={{fontSize : fontSize.desktop.a }} to={'/signin'} className="laptop-navbar__signin">ورود به حساب کاربری</Link>
<Link style={{fontSize : fontSize.desktop.a }} to={'/signup'} className="laptop-navbar__signup">ثبت نام</Link>
</div>
</nav>
);

@ -20,7 +20,6 @@
margin: 0px 10px;
padding: 0px 15px;
text-decoration: none;
font-size: calc(100vw / 90);
a{
text-decoration: none;
color: #6f7074;
@ -36,7 +35,6 @@
color: #6cbe44;
padding : 10px 20px;
margin-left: 12px;
font-size: calc(100vw / 90);
&:hover{
color: #6cbe44;
}
@ -49,7 +47,6 @@
background-color: #6cbe44;
border-radius: 6px;
padding : 10px 20px;
font-size: calc(100vw / 90);
&:hover{
color: white;
}

@ -2,6 +2,17 @@ import React, { Component } from "react";
import {Link} from 'react-router-dom';
import "./index.scss";
const maxDesktopSize = 1250;
const fontSize = {
desktop: {
h1: window.innerWidth > maxDesktopSize ? 28 : window.innerWidth / 45,
p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 85,
a: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 70,
},
};
export default class SingleBlog extends Component {
render() {
const { height, data, direction } = this.props;
@ -11,9 +22,9 @@ export default class SingleBlog extends Component {
className="single-blog d-flex"
>
<div className="single-blog__right d-flex flex-column justify-content-center">
<h1>{data.title}</h1>
<p>{data.subTitle}</p>
<Link to={data.link}>
<h1 style={{ fontSize: fontSize.desktop.h1 }}>{data.title}</h1>
<p style={{fontSize: fontSize.desktop.p }}>{data.subTitle}</p>
<Link style={{fontSize : fontSize.desktop.a }} to={data.link}>
{data.buttonText}
</Link>
</div>

@ -9,12 +9,10 @@
h1{
font-family: numeralBold;
color: #1bbc6e;
font-size: calc(100vw / 45);
text-align: justify;
}
p{
font-family: numeralLight;
font-size: calc(100vw / 110);
text-align: justify;
margin-top: 15px;
color: #a5a5a5;

Loading…
Cancel
Save