reza completed chatroom and start product

master
ravino 3 years ago
parent 422e4ae6fb
commit b94acb6143
  1. 114
      src/views/ChatRoom/Info/FileTabs/index.js
  2. 64
      src/views/ChatRoom/Info/FileTabs/index.scss
  3. 118
      src/views/ChatRoom/Info/index.js
  4. 16
      src/views/ChatRoom/Info/index.scss
  5. 6
      src/views/ChatRoom/index.js
  6. 38
      src/views/Product/BreadCrumb/index.js
  7. 5
      src/views/Product/BreadCrumb/index.scss
  8. 4
      src/views/Product/index.js
  9. 133
      src/views/Product/index.scss

@ -1,12 +1,32 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import './index.scss'; import './index.scss';
const maxDesktopSize = 1250;
const fontSize = {
desktop: {
li: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 90,
},
mobile: {
li: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 25,
},
};
export default class FileTabs extends Component { export default class FileTabs extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
type: 'media', type: 'media',
tabs : [
{id : 0, value: 'media', name: 'رسانه'},
{id : 1, value: 'video', name: 'ویدیو'},
{id : 2, value: 'voice', name: 'صوت'},
{id : 3, value: 'link', name: 'لینک'},
{id : 4, value: 'file', name: 'فایل'},
],
}; };
} }
setType = (val) => { setType = (val) => {
@ -16,49 +36,28 @@ export default class FileTabs extends Component {
}; };
render() { render() {
return ( return (
<>
{
window.innerWidth < 1000 ?
<div className="file-tabs d-flex flex-column"> <div className="file-tabs d-flex flex-column">
<div className="file-tabs__types d-flex"> <ul className="file-tabs__types d-flex flex-row-reverse">
<li
style={{ {
borderBottom: this.state.type === 'media' ? '2px solid rgb(13, 84, 150)' : 'none', this.state.tabs.map((item,i) => (
}}
onClick={() => this.setType('media')}
>
Media
</li>
<li
style={{
borderBottom: this.state.type === 'file' ? '2px solid rgb(13, 84, 150)' : 'none',
}}
onClick={() => this.setType('file')}
>
Files
</li>
<li
style={{
borderBottom: this.state.type === 'link' ? '2px solid rgb(13, 84, 150)' : 'none',
}}
onClick={() => this.setType('link')}
>
Links
</li>
<li
style={{
borderBottom: this.state.type === 'music' ? '2px solid rgb(13, 84, 150)' : 'none',
}}
onClick={() => this.setType('music')}
>
Music
</li>
<li <li
style={{ style={{
borderBottom: this.state.type === 'voice' ? '2px solid rgb(13, 84, 150)' : 'none', borderBottom: this.state.type === item.value ? '3px solid #00CC69' : 'none',
fontSize: fontSize.mobile.li,
color: this.state.type === item.value ? '#00CC69' : '#000'
}} }}
onClick={() => this.setType('voice')} onClick={() => this.setType(item.value)}
key={i}
> >
Voice {item.name}
</li> </li>
</div> ))
}
</ul>
{this.state.type === 'media' ? ( {this.state.type === 'media' ? (
<div className="file-tabs__media d-flex flex-wrap"> <div className="file-tabs__media d-flex flex-wrap">
<div className="file-tabs__media--item"></div> <div className="file-tabs__media--item"></div>
@ -84,7 +83,48 @@ export default class FileTabs extends Component {
<div className="file-tabs__media--item"></div> <div className="file-tabs__media--item"></div>
</div> </div>
) : null} ) : null}
</div> : null
}
{
window.innerWidth > 1000 ?
<div className="desktop-file-tabs d-flex flex-column">
<ul className="desktop-file-tabs__types d-flex flex-row-reverse">
{
this.state.tabs.map((item,i) => (
<li
style={{
borderBottom: this.state.type === item.value ? '3px solid #00CC69' : 'none',
fontSize: fontSize.desktop.li,
color: this.state.type === item.value ? '#00CC69' : '#000'
}}
onClick={() => this.setType(item.value)}
key={i}
>
{item.name}
</li>
))
}
</ul>
{this.state.type === 'media' ? (
<div className="desktop-file-tabs__media d-flex flex-wrap">
<div className="desktop-file-tabs__media--item"></div>
<div className="desktop-file-tabs__media--item"></div>
<div className="desktop-file-tabs__media--item"></div>
<div className="desktop-file-tabs__media--item"></div>
<div className="desktop-file-tabs__media--item"></div>
<div className="desktop-file-tabs__media--item"></div>
<div className="desktop-file-tabs__media--item"></div>
<div className="desktop-file-tabs__media--item"></div>
<div className="desktop-file-tabs__media--item"></div>
<div className="desktop-file-tabs__media--item"></div>
</div> </div>
) : null}
</div> : null
}
</>
); );
} }
} }

@ -1,24 +1,23 @@
@media screen and (max-width: 4500px) { @media screen and (max-width: 4500px) {
.file-tabs { .file-tabs {
width: 100%; width: 100%;
height: 100%; height: calc(100% - 55px);
position: relative; position: relative;
direction: rtl; direction: rtl;
position: sticky; position: sticky;
top: 0-5px; overflow-y: scroll;
font-family: numeralLight;
&__types { &__types {
width: 100%; width: 100%;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 3px calc((100vw - 310px) / 2) 3px calc((100vw - 310px) / 2);
direction: ltr; direction: ltr;
border-top: 8px solid rgb(13, 84, 150);
margin-top: 20px; margin-top: 20px;
background-color: #128c7e; margin-left: auto;
margin-right:auto;
padding: 0px 10px;
& li { & li {
font-size: 16px;
list-style: none; list-style: none;
font-weight: 600;
} }
} }
&__media { &__media {
@ -26,11 +25,54 @@
overflow-y: scroll; overflow-y: scroll;
padding-bottom: 52px; padding-bottom: 52px;
&--item { &--item {
width: calc(100% / 3); width: calc(100% / 3.6);
height: calc(100vw / 3); height: calc(100vw / 3.6);
border: 2px solid rgb(200, 183, 232); margin: 10px;
background-color: red; background-color: #eee;
}
}
}
}
.desktop-file-tabs {
width: 100%;
position: relative;
direction: rtl;
position: sticky;
min-height: 150px;
top: -5px;
&__types {
text-align: right;
width: 100%;
justify-content: space-between;
align-items: center;
margin: 0px;
padding: 0px;
direction: ltr;
margin-top: 20px;
padding: 5px 10px;
& li {
font-family: numeralLight;
font-size: 16px;
list-style: none;
padding: 0px 0px 7px 0px;
cursor: pointer;
}
} }
&__media {
width: 100%;
overflow-y: scroll;
padding-bottom: 52px;
&::-webkit-scrollbar{
display: none;
width: 0px;
}
&--item {
width: calc(100% / 3.35);
height: 120px;
background-color: #eee;
margin: 5px;
cursor: pointer;
} }
} }
} }

@ -8,26 +8,38 @@ import MoreHorizOutlinedIcon from "@material-ui/icons/MoreHorizOutlined";
import Switch from "@material-ui/core/Switch"; import Switch from "@material-ui/core/Switch";
import { withStyles } from "@material-ui/core/styles"; import { withStyles } from "@material-ui/core/styles";
import BlockIcon from '@material-ui/icons/Block'; import BlockIcon from '@material-ui/icons/Block';
import KeyboardArrowLeftIcon from '@material-ui/icons/KeyboardArrowLeft';
import KeyboardBackspaceIcon from '@material-ui/icons/KeyboardBackspace';
import CloseIcon from '@material-ui/icons/Close';
import user2 from "../../../assets/images/user2.png"; import user2 from "../../../assets/images/user2.png";
import "./index.scss"; import "./index.scss";
const maxDesktopSize = 1250; const maxDesktopSize = 1250;
const maxMobileSize = 650;
const fontSize = { const fontSize = {
desktop: { desktop: {
h1: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 70, h1: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 70,
h2: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 80, h2: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 80,
p: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 85, p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 85,
h3: window.innerWidth > maxDesktopSize ? 17 : window.innerWidth / 85, h3: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 85,
span: window.innerWidth > maxDesktopSize ? 17 : window.innerWidth / 85, span: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 85,
},
mobile: {
h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 20,
h2: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 23,
p: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 30,
h3: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 25,
span: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 28,
}, },
}; };
export default class ChatInfo extends Component { export default class ChatInfo extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
gallery : false,
alarms: false, alarms: false,
buttons: [ buttons: [
{ {
@ -55,7 +67,6 @@ export default class ChatInfo extends Component {
backgroundColor: "grey", backgroundColor: "grey",
}, },
], ],
gallery: null,
user: { user: {
profileImages: [ profileImages: [
{ id: 0, src: user2 }, { id: 0, src: user2 },
@ -93,7 +104,16 @@ export default class ChatInfo extends Component {
<> <>
{window.innerWidth > 1000 ? ( {window.innerWidth > 1000 ? (
<section className="desktop-contact-info d-flex flex-column"> <section className="desktop-contact-info d-flex flex-column">
<header className="desktop-contact-info__header d-flex align-items-center justify-content-center"></header> <header className="desktop-contact-info__header d-flex align-items-center justify-content-center">
{
this.state.gallery ?
<KeyboardBackspaceIcon onClick={() => this.setState({ gallery: false})} style={{ cursor: 'pointer', width: 35, height: 35, position: 'absolute', left: 10, top: 10}} /> :
<CloseIcon onClick={ () => this.props.parent.handleDrawerClose()} style={{ cursor: 'pointer', width: 35, height: 35, position: 'absolute', left: 10, top: 10}} />
}
</header>
{
!this.state.gallery ?
<div className="desktop-contact-info__body d-flex flex-column align-items-center"> <div className="desktop-contact-info__body d-flex flex-column align-items-center">
<img <img
className="desktop-contact-info__body--profileImage" className="desktop-contact-info__body--profileImage"
@ -107,7 +127,7 @@ export default class ChatInfo extends Component {
<h2 style={{ fontSize: fontSize.desktop.h2 }}>مشخصات تحصیلی</h2> <h2 style={{ fontSize: fontSize.desktop.h2 }}>مشخصات تحصیلی</h2>
<ul> <ul>
{user.educationalInfo.map((item, i) => ( {user.educationalInfo.map((item, i) => (
<li key={i}>{item}</li> <li key={i} style={{ fontSize: fontSize.desktop.p}}>{item}</li>
))} ))}
</ul> </ul>
</div> </div>
@ -127,50 +147,88 @@ export default class ChatInfo extends Component {
<div className="desktop-contact-info__body--options d-flex justify-content-between align-items-center"> <div className="desktop-contact-info__body--options d-flex justify-content-between align-items-center">
<div> <div>
<h3 style={{ fontSize: fontSize.desktop.h3 }}>اعلانات</h3> <h3 style={{ fontSize: fontSize.desktop.h3 }}>اعلانات</h3>
<span style={{color: alarms ? '#00CC69' : 'red'}}>{alarms ? 'روشن ': 'خاموش'}</span> <span style={{ fontSize: fontSize.desktop.span }}>{alarms ? 'روشن ': 'خاموش'}</span>
</div> </div>
<AntSwitch <AntSwitch
checked={alarms} checked={alarms}
onChange={() => this.handleChange()} onChange={() => this.handleChange()}
/> />
</div> </div>
<div className="desktop-contact-info__body--options d-flex justify-content-between"> <div className="desktop-contact-info__body--options desktop-contact-info__body--options__click d-flex justify-content-between align-items-center" onClick={() => this.setState({ gallery: true })}>
<span style={{ color : 'red',fontSize: fontSize.desktop.h3 }}>مسدود سازی مخاطب</span> <h3 style={{ fontSize: fontSize.desktop.h3 }}>رسانه,فیلم,عکس</h3>
<BlockIcon style={{width : 35, height : 35, color : 'red'}} /> <KeyboardArrowLeftIcon style={{width : 30, height : 30, color : 'grey'}} />
</div> </div>
<div className="desktop-contact-info__body--options desktop-contact-info__body--options__click d-flex justify-content-between align-items-center">
<h3 style={{ color : 'red',fontSize: fontSize.desktop.h3 }}>مسدود سازی مخاطب</h3>
<BlockIcon style={{width : 30, height : 30, color : 'red'}} />
</div> </div>
</div> : <FileTabs />
}
</section> </section>
) : null} ) : null}
{window.innerWidth < 1000 ? ( {window.innerWidth < 1000 ? (
<div className="contact-info d-flex flex-column"> <section className="desktop-contact-info d-flex flex-column">
<div className="chat-info__image d-flex"> <header className="desktop-contact-info__header d-flex align-items-center justify-content-center">
{
this.state.gallery ?
<KeyboardBackspaceIcon onClick={() => this.setState({ gallery: false})} style={{ cursor: 'pointer', width: 35, height: 35, position: 'absolute', left: 10, top: 10}} /> :
<CloseIcon onClick={ () => window.innerWidth > 1000 ? this.props.parent.handleDrawerClose() : this.props.parent.setState({ page : 'chatroom' })} style={{ cursor: 'pointer', width: 35, height: 35, position: 'absolute', left: 10, top: 10}} />
}
</header>
{
!this.state.gallery ?
<div className="desktop-contact-info__body d-flex flex-column align-items-center">
<img <img
className="desktop-contact-info__body--profileImage"
src={user.profileImages[0].src} src={user.profileImages[0].src}
onClick={() => this.setGallery("profile")} alt="عکس کاربر"
alt=""
/> />
<div <h1 style={{ fontSize: fontSize.mobile.h1 }}>{user.name}</h1>
className="chat-info__image--float d-flex" <div className="desktop-contact-info__body--bio d-flex flex-column">
onClick={() => this.props.parent.handleDrawerClose()} <h2 style={{ fontSize: fontSize.mobile.h2 }}>اطلاعات</h2>
> <p style={{ fontSize: fontSize.mobile.p }}>{user.bio}</p>
<ChatIcon style={{ color: "white", width: 46, height: 46 }} /> <h2 style={{ fontSize: fontSize.mobile.h2 }}>مشخصات تحصیلی</h2>
<ul>
{user.educationalInfo.map((item, i) => (
<li key={i} style={{ fontSize: fontSize.mobile.p}}>{item}</li>
))}
</ul>
</div> </div>
<div className="desktop-contact-info__body--buttons d-flex justify-content-around">
{buttons.map((item, i) => (
<li style={{ backgroundColor: item.backgroundColor }} key={i}>
{item.icon}
</li>
))}
</div> </div>
<div className="chat-info__box d-flex flex-column"> <div className="desktop-contact-info__body--options d-flex justify-content-between">
<div className="chat-info__box--status d-flex flex-column"> <h3 style={{ fontSize: fontSize.mobile.h3 }}>نام کاربری</h3>
<h1>{user.name}</h1> <span style={{ fontSize: fontSize.mobile.span }}>
<p>{user.lastAct}</p> {user.username}@
</span>
</div> </div>
<div className="chat-info__box--description d-flex"> <div className="desktop-contact-info__body--options d-flex justify-content-between align-items-center">
<p>{user.bio}</p> <div>
<h3 style={{ fontSize: fontSize.mobile.h3 }}>اعلانات</h3>
<span style={{ fontSize: fontSize.mobile.span }}>{alarms ? 'روشن ': 'خاموش'}</span>
</div> </div>
<FileTabs onClick={this.setGallery} /> <AntSwitch
checked={alarms}
onChange={() => this.handleChange()}
/>
</div> </div>
{gallery === "profile" ? ( <div className="desktop-contact-info__body--options desktop-contact-info__body--options__click d-flex justify-content-between align-items-center" onClick={() => this.setState({ gallery: true })}>
<Gallery data={user.profileImages} onClick={this.setGallery} /> <h3 style={{ fontSize: fontSize.mobile.h3 }}>رسانه,فیلم,عکس</h3>
) : null} <KeyboardArrowLeftIcon style={{width : 30, height : 30, color : 'grey'}} />
{gallery === "media" ? <Gallery data={null} /> : null} </div>
<div className="desktop-contact-info__body--options desktop-contact-info__body--options__click d-flex justify-content-between align-items-center">
<h3 style={{ color : 'red',fontSize: fontSize.mobile.h3 }}>مسدود سازی مخاطب</h3>
<BlockIcon style={{width : 30, height : 30, color : 'red'}} />
</div> </div>
</div> : <FileTabs />
}
</section>
) : null} ) : null}
</> </>
); );

@ -93,17 +93,19 @@
width: 0px; width: 0px;
} }
&__header{ &__header{
height: 55px; min-height: 55px;
width : 100%; width : 100%;
border-bottom: 1px solid rgb(224, 224, 224); border-bottom: 1px solid rgb(224, 224, 224);
position: relative;
} }
&__body{ &__body{
width: 100%; width: 100%;
height: calc(100% - 55px); height: calc(100% - 55px);
padding-top: 20px; padding-top: 20px;
overflow-x: hidden;
&--profileImage{ &--profileImage{
width: 100px; width: 140px;
height: 100px; min-height: 140px;
border-radius: 50%; border-radius: 50%;
} }
h1{ h1{
@ -114,9 +116,11 @@
&--bio{ &--bio{
width: 100%; width: 100%;
padding: 0px 10px; padding: 0px 10px;
margin-top: 10px;
h2{ h2{
font-family: numeralMedium; font-family: numeralMedium;
color: #00CC69; color: #00CC69;
margin-top: 10px;
} }
p{ p{
font-family: numeralLight; font-family: numeralLight;
@ -138,6 +142,7 @@
&--buttons{ &--buttons{
width: 80%; width: 80%;
margin-bottom: 15px; margin-bottom: 15px;
margin-top: 25px;
li{ li{
list-style: none; list-style: none;
padding: 10px; padding: 10px;
@ -148,14 +153,19 @@
width: calc(100% - 20px); width: calc(100% - 20px);
padding: 15px 0px; padding: 15px 0px;
border-bottom: 1px solid rgb(224, 224, 224); border-bottom: 1px solid rgb(224, 224, 224);
margin-top: 10px;
h3{ h3{
font-family: numeralMedium; font-family: numeralMedium;
color: #6F7074; color: #6F7074;
margin: 0px;
} }
span{ span{
font-family: numeralLight; font-family: numeralLight;
color: #6F7074; color: #6F7074;
} }
&__click{
cursor: pointer;
}
} }
} }
} }

@ -53,18 +53,18 @@ export default class ChatRoom extends Component {
) : null} ) : null}
{window.innerWidth < 1000 ? ( {window.innerWidth < 1000 ? (
<div className="chat-room d-flex flex-column"> <div className="chat-room d-flex flex-column">
{this.state.page === "chatroom" ? (
<>
<Header <Header
page={this.state.page} page={this.state.page}
setPage={this.setPage} setPage={this.setPage}
parent={this} parent={this}
/> />
{this.state.page === "chatroom" ? (
<>
<Body id={this.props.id} setPage={this.setPage} /> <Body id={this.props.id} setPage={this.setPage} />
</> </>
) : ( ) : (
<> <>
<Info /> <Info parent={this} />
</> </>
)} )}
</div> </div>

@ -0,0 +1,38 @@
import React from 'react';
import Breadcrumbs from '@material-ui/core/Breadcrumbs';
import {Link} from 'react-router-dom';
import './index.scss';
function handleClick(event) {
event.preventDefault();
console.info('You clicked a breadcrumb.');
}
const maxDesktopSize = 1250;
const maxMobileSize = 650;
const fontSize = {
desktop: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 85,
mobile : window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 25,
};
export default function ActiveLastBreadcrumb() {
return (
<Breadcrumbs aria-label="breadcrumb">
<Link style={{ fontSize: window.innerWidth > maxDesktopSize ? fontSize.desktop : fontSize.mobile}} to={'/products'} onClick={handleClick}>
محصولات
</Link>
<Link style={{ fontSize: window.innerWidth > maxDesktopSize ? fontSize.desktop : fontSize.mobile}} to="/products" onClick={handleClick}>
پایه هفتم
</Link>
<Link
style={{ fontSize: window.innerWidth > maxDesktopSize ? fontSize.desktop : fontSize.mobile}}
to="/products/1"
onClick={handleClick}
>
زیست شناسی
</Link>
</Breadcrumbs>
);
}

@ -0,0 +1,5 @@
a {
text-decoration: none;
font-family: numeralLight;
color: #6F7074;
}

@ -4,6 +4,7 @@ import {Link} from 'react-router-dom';
import Footer from "../Home/Footer/index"; import Footer from "../Home/Footer/index";
import Navbar from "../Home/Navbar/index"; import Navbar from "../Home/Navbar/index";
import Comment from './Comment/index'; import Comment from './Comment/index';
import Breadcrumbs from './BreadCrumb/index';
import book2 from "../../assets/images/book2.png"; import book2 from "../../assets/images/book2.png";
@ -17,7 +18,10 @@ export default class Product extends Component {
<> <>
<div className="product d-flex flex-column"> <div className="product d-flex flex-column">
<Navbar /> <Navbar />
<Breadcrumbs />
<header class="product__header d-flex mt-4">
</header>
</div> </div>
<Footer /> <Footer />
</> </>

@ -154,137 +154,6 @@
min-height: calc(100vh - 288px); min-height: calc(100vh - 288px);
&__header{ &__header{
width: 100%; width: 100%;
img{ padding: 0px 10px;
height: calc(100vh / 2.7);
}
h1{
margin-top: 10px;
font-family: numeralBold;
font-size: calc(100vw / 20);
color: #7dc241;
letter-spacing: -1px;
}
h2{
font-family: numeralMedium;
font-size: calc(100vw / 28);
color: #6f7074;
}
a{
border: 0px;
font-family: numeralMedium;
font-size: calc(100vw / 25);
padding: 15px 0px;
width: 150px;
text-align: center;
letter-spacing: -1px;
text-decoration: none;
}
&--purchase{
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
background-color: #00cc69;
color: white !important;
}
&--sampleButton{
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
background-color: #efefef;
color: #6f7074 !important;
}
}
&__abstraction{
margin-top: 30px;
width: 100%;
h1{
font-family: numeralBold;
font-size: calc(100vw / 22);
color: #6f7074;
letter-spacing: -1px;
}
p{
font-family: numeralLight;
font-size: calc(100vw / 30);
color: #6f7074;
letter-spacing: -1px;
text-align: justify;
}
}
&__modules{
margin-top: 20px;
width: 100%;
padding: 20px 10px;
background-color: #baffdc2f;
border-radius: 10px;
h1{
font-family: numeralBold;
font-size: calc(100vw / 28);
color: #02733c;
letter-spacing: -1px;
}
ul{
list-style: none;
padding: 0px;
margin: 0px;
margin-top: 10px;
li{
font-family: numeralLight;
font-size: calc(100vw / 28);
color: #02733c;
letter-spacing: -1px;
}
}
}
&__tips{
margin-top: 20px;
width: 100%;
padding: 20px 10px;
background-color: #1f6fb528;
border-radius: 10px;
h1{
font-family: numeralBold;
font-size: calc(100vw / 28);
color: #074f8b;
letter-spacing: -1px;
}
ul{
list-style: none;
padding: 0px;
margin: 0px;
margin-top: 10px;
li{
font-family: numeralLight;
font-size: calc(100vw / 30);
color: #074f8b;
letter-spacing: -1px;
margin-bottom: 3px;
}
}
}
&__description{
width: 100%;
margin-top: 20px;
p{
font-family: numeralLight;
font-size: calc(100vw / 30);
color: #6f7074;
letter-spacing: -1px;
text-align: justify;
}
}
&__comments{
max-width: 100%;
margin-top: 30px;
h1{
font-family: numeralBold;
font-size: calc(100vw / 22);
color: #6f7074;
letter-spacing: -1px;
margin-bottom: 30px;
}
&--list{
width: 100vw;
overflow-x: scroll !important;
transform: translateX(10px);
}
} }
} }

Loading…
Cancel
Save