cha0s/reddichat-flat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: channel sizeness

Browse Source
This commit is contained in:
cha0s 2020-07-18 08:29:56 -05:00
parent 3282372ef6
commit e5c2c8af52
3 changed files with 15 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/client/channel.jsx
View File

@ -20,7 +20,11 @@ export default function Channel(props) {
href href
? ( ? (
<Link <Link
className="channel__link" className={classnames(
'channel__link',
{long: name.length >= 12},
{superlong: name.length >= 16},
)}
to={href} to={href}
> >
<span className="muted">{prefix}</span> <span className="muted">{prefix}</span>

8
src/client/channel.scss
View File

@ -14,6 +14,14 @@
font-size: 0.8em; font-size: 0.8em;
margin-right: 0.125em; margin-right: 0.125em;
} }
&.long {
font-size: 0.8em;
padding: 1.4em;
}
&.superlong {
font-size: 0.6em;
padding: 2em;
}
} }
.channel__actions { .channel__actions {

4
src/client/chat.jsx
View File

@ -50,13 +50,13 @@ export default function Chat() {
ref.current.classList.add('moving'); ref.current.classList.add('moving');
const offset = pageX - origin.point + origin.left; const offset = pageX - origin.point + origin.left;
const snapped = Math.abs(offset) < 64 ? 0 : offset; const snapped = Math.abs(offset) < 64 ? 0 : offset;
const max = Math.min(window.innerWidth - 32, (2 + 16) * 16); const max = Math.min(window.innerWidth - 32, 25 * 16);
ref.current.style.left = `${Math.max(-max, Math.min(max, snapped))}px`; ref.current.style.left = `${Math.max(-max, Math.min(max, snapped))}px`;
} }
}, },
up: () => { up: () => {
const left = parseInt(ref.current.style.left, 10); const left = parseInt(ref.current.style.left, 10);
const max = Math.min(window.innerWidth - 32, (2 + 16) * 16); const max = Math.min(window.innerWidth - 32, 25 * 16);
if (left >= max / 2) { if (left >= max / 2) {
ref.current.style.left = `${max}px`; ref.current.style.left = `${max}px`;
} }