client: improved mobile stylings
This commit is contained in:
parent
4ca525fb12
commit
d8447f759d
5 changed files with 17 additions and 15 deletions
|
@ -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} />}
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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}>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -17,8 +17,8 @@ type props = {
|
|||
|
||||
const Title = ({ setTitle, title }: props) => {
|
||||
return (<div className={styles.title}>
|
||||
<Text h1 width={"150px"} className={styles.drift}>Drift —</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 || ""}
|
||||
|
|
Loading…
Reference in a new issue