Responsive for mobile (#1331)

* style(Page.js): Add max-width to .page class

* style(Editor.js): Make buttons vertically aligned when on mobile

* style: Fix Button width for mobile

* style(Popout.js): Add z-index

* refactor(Editor.js): .buttons->.share-buttons
main
hatsu 3 years ago committed by GitHub
parent 85be5281c6
commit 3da8262e10
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -118,6 +118,7 @@ function CopyMenu({ isVisible, toggleVisibility, copyImage, carbonRef }) {
position: relative; position: relative;
color: ${COLORS.SECONDARY}; color: ${COLORS.SECONDARY};
flex: 1; flex: 1;
max-width: 40px;
} }
.copy-row { .copy-row {

@ -345,6 +345,7 @@ class Editor extends React.Component {
onChange={this.updateLanguage} onChange={this.updateLanguage}
/> />
<div className="toolbar-second-row"> <div className="toolbar-second-row">
<div className="setting-buttons">
<BackgroundSelect <BackgroundSelect
onChange={this.updateBackground} onChange={this.updateBackground}
updateHighlights={this.updateHighlights} updateHighlights={this.updateHighlights}
@ -361,9 +362,10 @@ class Editor extends React.Component {
applyPreset={this.applyPreset} applyPreset={this.applyPreset}
getCarbonImage={this.getCarbonImage} getCarbonImage={this.getCarbonImage}
/> />
<div id="style-editor-button" />
<div className="buttons">
<CopyMenu copyImage={this.copyImage} carbonRef={this.carbonNode.current} /> <CopyMenu copyImage={this.copyImage} carbonRef={this.carbonNode.current} />
</div>
<div id="style-editor-button" />
<div className="share-buttons">
<ShareMenu tweet={this.tweet} imgur={this.imgur} /> <ShareMenu tweet={this.tweet} imgur={this.imgur} />
<ExportMenu <ExportMenu
onChange={this.updateSetting} onChange={this.updateSetting}
@ -414,16 +416,17 @@ class Editor extends React.Component {
padding: 16px; padding: 16px;
} }
.buttons { .share-buttons,
.setting-buttons {
display: flex; display: flex;
margin-left: auto; margin-left: auto;
height: 40px;
} }
.toolbar-second-row { .toolbar-second-row {
height: 40px;
display: flex; display: flex;
flex: 1 1 auto; flex: 1 1 auto;
} }
.toolbar-second-row > :global(div:not(:last-of-type)) { .setting-buttons > :global(div) {
margin-right: 0.5rem; margin-right: 0.5rem;
} }
@ -431,6 +434,14 @@ class Editor extends React.Component {
display: flex; display: flex;
align-items: center; align-items: center;
} }
@media (max-width: 768px) {
.toolbar-second-row {
display: block;
}
#style-editor-button {
margin-top: 0.5rem;
}
}
`} `}
</style> </style>
</div> </div>

@ -55,7 +55,11 @@ function ExportMenu({ onChange, exportSize, isVisible, toggleVisibility, exportI
onClick={toggleVisibility} onClick={toggleVisibility}
data-cy="export-button" data-cy="export-button"
margin="0 0 0 -1px" margin="0 0 0 -1px"
style={{ borderBottomLeftRadius: 0, borderTopLeftRadius: 0 }} style={{
borderBottomLeftRadius: 0,
borderTopLeftRadius: 0,
maxWidth: '26px',
}}
title="Export menu dropdown" title="Export menu dropdown"
> >
<ArrowDown color={COLORS.PURPLE} /> <ArrowDown color={COLORS.PURPLE} />

@ -40,10 +40,17 @@ class Page extends React.Component {
top: 1.4rem; top: 1.4rem;
right: 1rem; right: 1rem;
} }
.page {
max-width: 100%;
padding: 0 1rem;
}
@media (min-width: 1024px) { @media (min-width: 1024px) {
.main { .main {
${COLUMN}; ${COLUMN};
} }
.page {
padding: 0;
}
} }
`} `}
</style> </style>

@ -69,6 +69,7 @@ class Popout extends React.PureComponent {
border-radius: 3px; border-radius: 3px;
margin-top: 10px; margin-top: 10px;
font-size: 12px; font-size: 12px;
z-index: 1;
} }
`} `}
</style> </style>

@ -49,7 +49,11 @@ function ShareMenu({ isVisible, toggleVisibility, tweet, imgur }) {
margin="0 8px 0 -1px" margin="0 8px 0 -1px"
onClick={toggleVisibility} onClick={toggleVisibility}
data-cy="share-button" data-cy="share-button"
style={{ borderBottomLeftRadius: 0, borderTopLeftRadius: 0 }} style={{
borderBottomLeftRadius: 0,
borderTopLeftRadius: 0,
maxWidth: '26px',
}}
title="Share menu dropdown" title="Share menu dropdown"
> >
<ArrowDown color={COLORS.BLUE} /> <ArrowDown color={COLORS.BLUE} />

Loading…
Cancel
Save