diff --git a/src/views/ChatRoom/Info/FileTabs/index.js b/src/views/ChatRoom/Info/FileTabs/index.js index 16d75aa..89d9f0e 100644 --- a/src/views/ChatRoom/Info/FileTabs/index.js +++ b/src/views/ChatRoom/Info/FileTabs/index.js @@ -1,12 +1,32 @@ import React, { Component } from 'react'; 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 { constructor(props) { super(props); this.state = { 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) => { @@ -16,75 +36,95 @@ export default class FileTabs extends Component { }; render() { return ( -
-
-
  • this.setType('media')} - > - Media -
    • -
  • this.setType('file')} - > - Files -
    • -
  • this.setType('link')} - > - Links -
    • -
  • this.setType('music')} - > - Music -
    • -
  • this.setType('voice')} - > - Voice -
    • -
    - {this.state.type === 'media' ? ( -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    - ) : null} -
    + <> + { + window.innerWidth < 1000 ? +
    + + {this.state.type === 'media' ? ( +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + ) : null} +
    : null + } + { + window.innerWidth > 1000 ? +
    + + {this.state.type === 'media' ? ( +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    + ) : null} +
    : null + } + + ); } } diff --git a/src/views/ChatRoom/Info/FileTabs/index.scss b/src/views/ChatRoom/Info/FileTabs/index.scss index 73224c7..bfe7c2d 100644 --- a/src/views/ChatRoom/Info/FileTabs/index.scss +++ b/src/views/ChatRoom/Info/FileTabs/index.scss @@ -1,24 +1,23 @@ @media screen and (max-width: 4500px) { .file-tabs { width: 100%; - height: 100%; + height: calc(100% - 55px); position: relative; direction: rtl; position: sticky; - top: 0-5px; + overflow-y: scroll; + font-family: numeralLight; &__types { width: 100%; justify-content: space-between; align-items: center; - padding: 3px calc((100vw - 310px) / 2) 3px calc((100vw - 310px) / 2); direction: ltr; - border-top: 8px solid rgb(13, 84, 150); margin-top: 20px; - background-color: #128c7e; + margin-left: auto; + margin-right:auto; + padding: 0px 10px; & li { - font-size: 16px; list-style: none; - font-weight: 600; } } &__media { @@ -26,11 +25,54 @@ overflow-y: scroll; padding-bottom: 52px; &--item { - width: calc(100% / 3); - height: calc(100vw / 3); - border: 2px solid rgb(200, 183, 232); - background-color: red; + width: calc(100% / 3.6); + height: calc(100vw / 3.6); + margin: 10px; + 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; + } + } +} diff --git a/src/views/ChatRoom/Info/index.js b/src/views/ChatRoom/Info/index.js index 0c4ebb8..6e12e4e 100644 --- a/src/views/ChatRoom/Info/index.js +++ b/src/views/ChatRoom/Info/index.js @@ -8,26 +8,38 @@ import MoreHorizOutlinedIcon from "@material-ui/icons/MoreHorizOutlined"; import Switch from "@material-ui/core/Switch"; import { withStyles } from "@material-ui/core/styles"; 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 "./index.scss"; const maxDesktopSize = 1250; +const maxMobileSize = 650; const fontSize = { desktop: { h1: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 70, h2: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 80, - p: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 85, - h3: window.innerWidth > maxDesktopSize ? 17 : window.innerWidth / 85, - span: window.innerWidth > maxDesktopSize ? 17 : window.innerWidth / 85, + p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 85, + h3: window.innerWidth > maxDesktopSize ? 16 : 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 { constructor(props) { super(props); this.state = { + gallery : false, alarms: false, buttons: [ { @@ -55,7 +67,6 @@ export default class ChatInfo extends Component { backgroundColor: "grey", }, ], - gallery: null, user: { profileImages: [ { id: 0, src: user2 }, @@ -93,8 +104,17 @@ export default class ChatInfo extends Component { <> {window.innerWidth > 1000 ? (
    -
    -
    +
    + { + this.state.gallery ? + this.setState({ gallery: false})} style={{ cursor: 'pointer', width: 35, height: 35, position: 'absolute', left: 10, top: 10}} /> : + this.props.parent.handleDrawerClose()} style={{ cursor: 'pointer', width: 35, height: 35, position: 'absolute', left: 10, top: 10}} /> + } +
    + + { + !this.state.gallery ? +
    مشخصات تحصیلی
      {user.educationalInfo.map((item, i) => ( -
    • {item}
      • +
    • {item}
      • ))}
    @@ -127,50 +147,88 @@ export default class ChatInfo extends Component {

    اعلانات

    - {alarms ? 'روشن ': 'خاموش'} + {alarms ? 'روشن ': 'خاموش'}
    this.handleChange()} />
    -
    - مسدود سازی مخاطب - +
    this.setState({ gallery: true })}> +

    رسانه,فیلم,عکس

    +
    -
    +
    +

    مسدود سازی مخاطب

    + +
    +
    : + }
    ) : null} {window.innerWidth < 1000 ? ( -
    -
    +
    +
    + { + this.state.gallery ? + this.setState({ gallery: false})} style={{ cursor: 'pointer', width: 35, height: 35, position: 'absolute', left: 10, top: 10}} /> : + 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}} /> + } +
    + + { + !this.state.gallery ? +
    this.setGallery("profile")} - alt="" + alt="عکس کاربر" /> -
    this.props.parent.handleDrawerClose()} - > - +

    {user.name}

    +
    +

    اطلاعات

    +

    {user.bio}

    +

    مشخصات تحصیلی

    +
      + {user.educationalInfo.map((item, i) => ( +
    • {item}
      • + ))} +
    +
    +
    + {buttons.map((item, i) => ( +
  • + {item.icon} +
    • + ))}
    -
    -
    -
    -

    {user.name}

    -

    {user.lastAct}

    +
    +

    نام کاربری

    + + {user.username}@ +
    -
    -

    {user.bio}

    +
    +
    +

    اعلانات

    + {alarms ? 'روشن ': 'خاموش'} +
    + this.handleChange()} + />
    - -
    - {gallery === "profile" ? ( - - ) : null} - {gallery === "media" ? : null} -
    +
    this.setState({ gallery: true })}> +

    رسانه,فیلم,عکس

    + +
    +
    +

    مسدود سازی مخاطب

    + +
    +
    : + } +
    ) : null} ); diff --git a/src/views/ChatRoom/Info/index.scss b/src/views/ChatRoom/Info/index.scss index e7db2af..57caf58 100644 --- a/src/views/ChatRoom/Info/index.scss +++ b/src/views/ChatRoom/Info/index.scss @@ -93,17 +93,19 @@ width: 0px; } &__header{ - height: 55px; + min-height: 55px; width : 100%; border-bottom: 1px solid rgb(224, 224, 224); + position: relative; } &__body{ width: 100%; height: calc(100% - 55px); padding-top: 20px; + overflow-x: hidden; &--profileImage{ - width: 100px; - height: 100px; + width: 140px; + min-height: 140px; border-radius: 50%; } h1{ @@ -114,9 +116,11 @@ &--bio{ width: 100%; padding: 0px 10px; + margin-top: 10px; h2{ font-family: numeralMedium; color: #00CC69; + margin-top: 10px; } p{ font-family: numeralLight; @@ -138,6 +142,7 @@ &--buttons{ width: 80%; margin-bottom: 15px; + margin-top: 25px; li{ list-style: none; padding: 10px; @@ -148,14 +153,19 @@ width: calc(100% - 20px); padding: 15px 0px; border-bottom: 1px solid rgb(224, 224, 224); + margin-top: 10px; h3{ font-family: numeralMedium; color: #6F7074; + margin: 0px; } span{ font-family: numeralLight; color: #6F7074; } + &__click{ + cursor: pointer; + } } } } \ No newline at end of file diff --git a/src/views/ChatRoom/index.js b/src/views/ChatRoom/index.js index aee56f2..fcd3532 100644 --- a/src/views/ChatRoom/index.js +++ b/src/views/ChatRoom/index.js @@ -53,18 +53,18 @@ export default class ChatRoom extends Component { ) : null} {window.innerWidth < 1000 ? (
    -
    {this.state.page === "chatroom" ? ( <> +
    ) : ( <> - + )}
    diff --git a/src/views/Product/BreadCrumb/index.js b/src/views/Product/BreadCrumb/index.js new file mode 100644 index 0000000..f8c7e1e --- /dev/null +++ b/src/views/Product/BreadCrumb/index.js @@ -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 ( + + maxDesktopSize ? fontSize.desktop : fontSize.mobile}} to={'/products'} onClick={handleClick}> + محصولات + + maxDesktopSize ? fontSize.desktop : fontSize.mobile}} to="/products" onClick={handleClick}> + پایه هفتم + + maxDesktopSize ? fontSize.desktop : fontSize.mobile}} + to="/products/1" + onClick={handleClick} + > + زیست شناسی + + + ); +} diff --git a/src/views/Product/BreadCrumb/index.scss b/src/views/Product/BreadCrumb/index.scss new file mode 100644 index 0000000..b971486 --- /dev/null +++ b/src/views/Product/BreadCrumb/index.scss @@ -0,0 +1,5 @@ +a { + text-decoration: none; + font-family: numeralLight; + color: #6F7074; +} \ No newline at end of file diff --git a/src/views/Product/index.js b/src/views/Product/index.js index 30599d0..0c34845 100644 --- a/src/views/Product/index.js +++ b/src/views/Product/index.js @@ -4,6 +4,7 @@ import {Link} from 'react-router-dom'; import Footer from "../Home/Footer/index"; import Navbar from "../Home/Navbar/index"; import Comment from './Comment/index'; +import Breadcrumbs from './BreadCrumb/index'; import book2 from "../../assets/images/book2.png"; @@ -17,7 +18,10 @@ export default class Product extends Component { <>
    - + +
    + +