client: improved mobile stylings

This commit is contained in:
Max Leiter 2022-03-09 01:50:55 -08:00
parent 4ca525fb12
commit d8447f759d
No known key found for this signature in database
GPG key ID: A3512F2F2F17EBDA
5 changed files with 17 additions and 15 deletions

View file

@ -55,7 +55,7 @@ const Document = ({ remove, editable, title, content, setTitle, setContent, init
disabled={!editable}
width={"100%"}
/>
{remove && editable && <Button type="error" ghost icon={<Trash />} auto height={'36px'} width={'36px'} onClick={() => removeFile(remove)} />}
{remove && editable && <Button type="abort" ghost icon={<Trash />} auto height={'36px'} width={'36px'} onClick={() => removeFile(remove)} />}
</div>
<div className={styles.descriptionContainer}>
{tab === 'edit' && editable && <FormattingIcons setText={setContent} textareaRef={codeEditorRef} />}

View file

@ -30,10 +30,10 @@
}
}
.controls {
flex: 1 1;
display: flex;
align-items: center;
.controls button:active,
.controls button:focus,
.controls button:hover {
outline: 1px solid rgba(0, 0, 0, 0.2);
}
.wrapper {

View file

@ -121,8 +121,10 @@ const Header = ({ changeTheme, theme }: DriftProps) => {
<Button
auto
type="abort"
onClick={() => setExpanded(!expanded)}>
<MenuIcon size="1.125rem" />
onClick={() => setExpanded(!expanded)}
>
<Spacer height={5 / 6} width={0} />
<MenuIcon size="1.5rem" />
</Button>
</div>
{isMobile && expanded && (<div className={styles.mobile}>

View file

@ -10,12 +10,12 @@
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.title > div {
flex-grow: 1;
}
.mygist {
flex-grow: 0.4;
@media screen and (max-width: 650px) {
.title {
align-items: flex-start;
flex-direction: column;
}
}

View file

@ -17,8 +17,8 @@ type props = {
const Title = ({ setTitle, title }: props) => {
return (<div className={styles.title}>
<Text h1 width={"150px"} className={styles.drift}>Drift &mdash;</Text>
<ShiftBy y={-6}>
<Text h1 width={"150px"} className={styles.drift}>Drift</Text>
<ShiftBy y={-3}>
<Input
placeholder={titlePlaceholders[Math.floor(Math.random() * titlePlaceholders.length)]}
value={title || ""}