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

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

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

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

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

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

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

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

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

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

Loading…
Cancel
Save