Verified Commit 11bd6247 authored by insert's avatar insert

Fix sidebar.

parent 2c8e236b
Pipeline #279 passed with stage
in 4 minutes and 11 seconds
......@@ -3,7 +3,7 @@ import Helmet from 'react-helmet';
import styles from './Chat.module.scss';
import { SwipeableDrawer } from 'flatbase/dist';
import { useCheckWidth } from 'flatbase/dist/util';
import MediaQuery from 'react-responsive';
import { HomeSidebar } from './chat/sidebar/conversation/Home';
import { GuildSidebar } from './chat/sidebar/conversation/Guild';
......@@ -58,7 +58,14 @@ const Chat = memo(() => {
body = <div>you have no friends lol</div>;
}
let is900 = useCheckWidth(900);
let sidebar = <div className={styles.sidebar}>
<Browser />
<div className={styles.conversation}>
{ page ? <HomeSidebar /> : <GuildSidebar /> }
<Profile />
</div>
</div>;
let [ color, processRef ] = useVar('primary');
return (
<ChatContext.Provider value={states}>
......@@ -66,16 +73,16 @@ const Chat = memo(() => {
<meta name="theme-color" content={color || '#000000'}/>
</Helmet>
<div className={styles.chat} ref={ref => processRef(ref)}>
<SwipeableDrawer open={drawer} onChange={setDrawer}
closeOnOpacityClick={true} variant={is900 ? 'permanent' : 'temporary'}>
<div className={styles.sidebar}>
<Browser />
<div className={styles.conversation}>
{ page ? <HomeSidebar /> : <GuildSidebar /> }
<Profile />
</div>
</div>
</SwipeableDrawer>
<MediaQuery maxWidth={901}>
<SwipeableDrawer open={drawer} onChange={setDrawer}
closeOnOpacityClick={true}>
nice
{sidebar}
</SwipeableDrawer>
</MediaQuery>
<MediaQuery minWidth={900}>
{sidebar}
</MediaQuery>
<div className={styles.main}>
{ body }
</div>
......
......@@ -33,12 +33,7 @@
@media only screen and (max-width: 900px) {font-size: 1rem;}
}
.dropdown {
margin: 0 4px;
svg {
cursor: pointer;
}
}
.dropdown {margin: 0 4px; svg {cursor: pointer; }}
.divider {
width: 1px;
......@@ -49,9 +44,7 @@
background: var(--divider);
}
.description {
font-size: 14px;
}
.description { font-size: .875rem; }
.indicator {
display: none;
......@@ -75,10 +68,11 @@
flex: 0 0 auto;
.icon {
cursor: pointer;
margin-left: 10px;
&:first-child { margin-left: 0; }
}
.feedback { margin-left: 20px; }
.feedback { cursor: pointer; margin-left: 20px; }
}
}
\ No newline at end of file
......@@ -13,7 +13,8 @@
--home: #BCBCBC;
--home-active: lighten(#BCBCBC, 10%);
--divider: lighten(#707070, 50%);
//--divider: lighten(#707070, 50%);
--divider: #707070;
--button-hover: #E8E8E8;
--button-active: #E8E8E8;
......
......@@ -1411,6 +1411,13 @@
dependencies:
"@types/react" "*"
"@types/[email protected]^3.0.3":
version "3.0.3"
resolved "https://registry.yarnpkg.com/@types/react-responsive/-/react-responsive-3.0.3.tgz#a31b599c7cfe4135c5cc2f45d0b71df64803b23f"
integrity sha512-paTAvXIFgv/jG60d7WSV0+yWCjqJ05cG+KOV48SiqYGjGi9kFdss9QnVTTLnFJmbUwWnoM+VD1Iyay1JBy/HPQ==
dependencies:
"@types/react" "*"
"@types/[email protected]*", "@types/[email protected]":
version "16.8.23"
resolved "https://registry.yarnpkg.com/@types/react/-/react-16.8.23.tgz#ec6be3ceed6353a20948169b6cb4c97b65b97ad2"
......@@ -3172,6 +3179,11 @@ [email protected]:
postcss-value-parser "^3.3.0"
schema-utils "^1.0.0"
[email protected]^0.1.2:
version "0.1.2"
resolved "https://registry.yarnpkg.com/css-mediaquery/-/css-mediaquery-0.1.2.tgz#6a2c37344928618631c54bd33cedd301da18bea0"
integrity sha1-aiw3NEkoYYYxxUvTPO3TAdoYvqA=
[email protected]^3.1.1:
version "3.1.1"
resolved "https://registry.yarnpkg.com/css-prefers-color-scheme/-/css-prefers-color-scheme-3.1.1.tgz#6f830a2714199d4f0d0d0bb8a27916ed65cff1f4"
......@@ -5103,7 +5115,7 @@ [email protected]^1.0.0:
resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=
[email protected]^1.0.2:
[email protected]^1.0.0, [email protected]^1.0.2:
version "1.0.3"
resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz#097bb7fa0b8f1a9cf0bd5c734cf95899981a9b48"
integrity sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ==
......@@ -6691,6 +6703,13 @@ [email protected]^1.1.0:
resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-1.1.3.tgz#9fcb69bcfdb8717bfd0398c6ec2d93036ef8de60"
integrity sha512-1RUZVgQlpJSPWYbFSpmudq5nHY1doEIv89gBtF0s4gW1GF2XorxcA/70M5vq7rLv0a6mhOUccRsqkwhwLCIQ2Q==
[email protected]^0.3.0:
version "0.3.0"
resolved "https://registry.yarnpkg.com/matchmediaquery/-/matchmediaquery-0.3.0.tgz#6f672bcdbc44de16825c6917fbcdcfb9b82607b1"
integrity sha512-u0dlv+VENJ+3YepvwSPBieuvnA6DWfaYa/ctwysAR13y4XLJNyt7bEVKzNj/Nvjo+50d88Pj+xL9xaSo6JmX/w==
dependencies:
css-mediaquery "^0.1.2"
[email protected]^2.1.0:
version "2.1.1"
resolved "https://registry.yarnpkg.com/mathml-tag-names/-/mathml-tag-names-2.1.1.tgz#6dff66c99d55ecf739ca53c492e626f1d12a33cc"
......@@ -8926,6 +8945,15 @@ [email protected]^16.8.1, [email protected]^16.8.4:
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==
[email protected]^7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/react-responsive/-/react-responsive-7.0.0.tgz#0abde0ccbb50e5e8407e3d61dd4696447e7ebd3c"
integrity sha512-RukaKD+UI/MIR+P8eUgVGURfiCafRvvcVnq41scT0eEQWHwDGliH/OAlrwIr1oyz8aKLGroZa+U8mTZV5ihPfA==
dependencies:
hyphenate-style-name "^1.0.0"
matchmediaquery "^0.3.0"
prop-types "^15.6.1"
[email protected]^4.2.2:
version "4.3.1"
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.3.1.tgz#4c2619fc24c4fa87c9fd18f4fb4a43fe63fbd5c6"
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment