parent
7a3ffff850
commit
635a0c1416
20 changed files with 702 additions and 151 deletions
@ -1,44 +1,83 @@ |
|||||||
.mobile-activation-history{ |
.mobile-activation-history { |
||||||
width: 100%; |
width: 100%; |
||||||
padding: 15px 10px; |
padding: 15px 10px; |
||||||
justify-content: space-between; |
justify-content: space-between; |
||||||
background-color:white; |
background-color: white; |
||||||
align-items:center; |
align-items: center; |
||||||
border-radius: 10px; |
border-radius: 10px; |
||||||
box-shadow: 0px 0px 10px rgb(226, 226, 226); |
box-shadow: 0px 0px 10px rgb(226, 226, 226); |
||||||
&__right{ |
&__right { |
||||||
align-items:center; |
align-items: center; |
||||||
img{ |
img { |
||||||
height: 100px; |
height: 100px; |
||||||
border-radius: 10px; |
border-radius: 10px; |
||||||
margin-left: 15px; |
margin-left: 15px; |
||||||
} |
} |
||||||
strong{ |
strong { |
||||||
font-family: numeralMedium; |
font-family: numeralMedium; |
||||||
font-size: calc(100vw / 30); |
font-size: calc(100vw / 30); |
||||||
font-weight: 600; |
font-weight: 600; |
||||||
letter-spacing: -1px; |
letter-spacing: -1px; |
||||||
} |
} |
||||||
span{ |
span { |
||||||
font-family: numeralMedium; |
font-family: numeralMedium; |
||||||
font-size: calc(100vw / 35); |
font-size: calc(100vw / 35); |
||||||
color: #00CC69; |
color: #00cc69; |
||||||
} |
} |
||||||
} |
} |
||||||
&__left{ |
&__left { |
||||||
button{ |
button { |
||||||
display: inline; |
display: inline; |
||||||
font-family: numeralLight; |
font-family: numeralLight; |
||||||
text-decoration: none; |
text-decoration: none; |
||||||
padding: 5px 20px 3px; |
padding: 5px 20px 3px; |
||||||
color: #00CC69; |
color: #00cc69; |
||||||
border-radius: 25px; |
border-radius: 25px; |
||||||
font-size: calc(100vw / 26); |
font-size: calc(100vw / 26); |
||||||
border: 1px solid #00cc69; |
border: 1px solid #00cc69; |
||||||
background-color: white; |
background-color: white; |
||||||
&:focus:enabled{ |
&:focus:enabled { |
||||||
text-decoration: none; |
text-decoration: none; |
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
|
.activation-history { |
||||||
|
width: 100%; |
||||||
|
padding: 10px 10px; |
||||||
|
justify-content: space-between; |
||||||
|
background-color: white; |
||||||
|
align-items: center; |
||||||
|
border-radius: 10px; |
||||||
|
box-shadow: 0px 0px 10px rgb(226, 226, 226); |
||||||
|
align-items: center; |
||||||
|
img { |
||||||
|
height: 100px; |
||||||
|
border-radius: 10px; |
||||||
|
margin-left: 15px; |
||||||
|
} |
||||||
|
strong { |
||||||
|
font-family: numeralMedium; |
||||||
|
font-weight: 600; |
||||||
|
letter-spacing: -1px; |
||||||
|
} |
||||||
|
span { |
||||||
|
font-family: numeralMedium; |
||||||
|
color: #00cc69; |
||||||
|
} |
||||||
|
|
||||||
|
button { |
||||||
|
display: inline; |
||||||
|
font-family: numeralLight; |
||||||
|
text-decoration: none; |
||||||
|
padding: 5px 20px 3px; |
||||||
|
color: #00cc69; |
||||||
|
border-radius: 25px; |
||||||
|
border: 1px solid #00cc69; |
||||||
|
background-color: white; |
||||||
|
&:focus:enabled { |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
@ -1,53 +1,130 @@ |
|||||||
import React, { Component } from "react"; |
import React, { Component } from "react"; |
||||||
import Navbar from "../Home/Navbar/index"; |
import Navbar from "../Home/Navbar/index"; |
||||||
import Footer from "../Home/Footer/index"; |
import Footer from "../Home/Footer/index"; |
||||||
import Collapse from './Collapse/index'; |
import Collapse from "./Collapse/index"; |
||||||
|
|
||||||
import "./index.scss"; |
import "./index.scss"; |
||||||
|
|
||||||
|
const maxDesktopSize = 1250; |
||||||
|
const maxMobileSize = 650; |
||||||
|
|
||||||
|
const fontSize = { |
||||||
|
mobile: { |
||||||
|
h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 20, |
||||||
|
button: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 25, |
||||||
|
p: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 70, |
||||||
|
span: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 75, |
||||||
|
form: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 70, |
||||||
|
}, |
||||||
|
}; |
||||||
export default class Faq extends Component { |
export default class Faq extends Component { |
||||||
state = { |
state = { |
||||||
messages: [ |
messages: [ |
||||||
{id: 0, title : 'چگونه میتوانم در سایت ثبت نام کنم و کتاب سفارش دهم؟', description: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.', active: false}, |
{ |
||||||
{id: 1, title : 'نحوه سفارش برای خارج از کشور چگونه است؟', description: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.', active: false}, |
id: 0, |
||||||
{id: 2, title : 'آیا داشتن رمز دوم برای خریدهای اینترنتی لازم است؟', description: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.', active: false}, |
title: "چگونه میتوانم در سایت ثبت نام کنم و کتاب سفارش دهم؟", |
||||||
{id: 3, title : 'در صورت فراموشی رمزعبور باید چکار کنیم؟', description: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.', active: false}, |
description: |
||||||
{id: 4, title : 'امکان بازگشت وجه تا چند روز ممکن است؟', description: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.', active: false}, |
"لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.", |
||||||
|
active: false, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 1, |
||||||
|
title: "نحوه سفارش برای خارج از کشور چگونه است؟", |
||||||
|
description: |
||||||
|
"لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.", |
||||||
|
active: false, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 2, |
||||||
|
title: "آیا داشتن رمز دوم برای خریدهای اینترنتی لازم است؟", |
||||||
|
description: |
||||||
|
"لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.", |
||||||
|
active: false, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 3, |
||||||
|
title: "در صورت فراموشی رمزعبور باید چکار کنیم؟", |
||||||
|
description: |
||||||
|
"لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.", |
||||||
|
active: false, |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 4, |
||||||
|
title: "امکان بازگشت وجه تا چند روز ممکن است؟", |
||||||
|
description: |
||||||
|
"لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.", |
||||||
|
active: false, |
||||||
|
}, |
||||||
], |
], |
||||||
} |
}; |
||||||
|
|
||||||
setMessageActive = (id, status) => { |
setMessageActive = (id, status) => { |
||||||
if(status){ |
if (status) { |
||||||
this.setState(prevState => ({ |
this.setState((prevState) => ({ |
||||||
messages: prevState.messages.map(item => item.id === id ? {...item, active: false}: item) |
messages: prevState.messages.map((item) => |
||||||
|
item.id === id ? { ...item, active: false } : item |
||||||
|
), |
||||||
})); |
})); |
||||||
}else{ |
} else { |
||||||
this.setState(prevState => ({ |
this.setState((prevState) => ({ |
||||||
messages: prevState.messages.map(item => item.id === id ? {...item, active: true}: {...item, active: false}) |
messages: prevState.messages.map((item) => |
||||||
|
item.id === id |
||||||
|
? { ...item, active: true } |
||||||
|
: { ...item, active: false } |
||||||
|
), |
||||||
})); |
})); |
||||||
} |
} |
||||||
} |
}; |
||||||
render() { |
render() { |
||||||
return ( |
return ( |
||||||
|
<> |
||||||
|
{window.innerWidth > 1000 ? ( |
||||||
<> |
<> |
||||||
<div className="faq d-flex flex-column align-items-center"> |
<div className="faq d-flex flex-column align-items-center"> |
||||||
<Navbar /> |
<Navbar page={"faq"} /> |
||||||
<header className="faq__header d-flex flex-column align-items-center"> |
<header className="faq__header d-flex flex-column align-items-center"> |
||||||
<h1>سلام چطوری میتونم کمکتون کنم؟</h1> |
<h1>سلام چطوری میتونم کمکتون کنم؟</h1> |
||||||
<div className="faq__header--search d-flex align-items-center"> |
<div className="faq__header--search d-flex align-items-center"> |
||||||
<input type="search" placeholder="دنبال چه چیزی برات باشیم؟" /> |
<input |
||||||
<button type="submit">جستجو</button> |
type="search" |
||||||
|
placeholder="دنبال چه چیزی برات باشیم؟" |
||||||
|
/> |
||||||
|
<button type="submit" style={{fontSize: fontSize.mobile.button}}>جستجو</button> |
||||||
</div> |
</div> |
||||||
</header> |
</header> |
||||||
<div className="faq__list d-flex flex-column"> |
<div className="faq__list d-flex flex-column"> |
||||||
{ |
{this.state.messages.map((item, i) => ( |
||||||
this.state.messages.map((item,i) => ( |
<Collapse |
||||||
<Collapse setMessageActive={this.setMessageActive} message={item} key={i} /> |
setMessageActive={this.setMessageActive} |
||||||
)) |
message={item} |
||||||
} |
key={i} |
||||||
|
/> |
||||||
|
))} |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
<Footer /> |
<Footer /> |
||||||
</> |
</> |
||||||
|
) : null} |
||||||
|
{window.innerWidth < 1000 ? ( |
||||||
|
<div className="mobile-faq d-flex flex-column align-items-center"> |
||||||
|
<Navbar page={"mobile-faq"} /> |
||||||
|
<header className="mobile-faq__header d-flex flex-column align-items-center"> |
||||||
|
<h1 style={{fontSize: fontSize.mobile.h1 }}>سلام چطوری میتونم کمکتون کنم؟</h1> |
||||||
|
<input type="search" placeholder="دنبال چه چیزی برات باشیم؟" /> |
||||||
|
<button type="submit">جستجو</button> |
||||||
|
</header> |
||||||
|
<div className="mobile-faq__list d-flex flex-column"> |
||||||
|
{this.state.messages.map((item, i) => ( |
||||||
|
<Collapse |
||||||
|
setMessageActive={this.setMessageActive} |
||||||
|
message={item} |
||||||
|
key={i} |
||||||
|
/> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
) : null} |
||||||
|
</> |
||||||
); |
); |
||||||
} |
} |
||||||
} |
} |
||||||
|
Loading…
Reference in new issue