Responsive for mobile (carbon-app#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
PENEKhun · Feb 8, 2022 · 3da8262 · 3da8262
1 parent 85be528
commit 3da8262
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 23 deletions.
diff --git a/components/CopyMenu.js b/components/CopyMenu.js
@@ -118,6 +118,7 @@ function CopyMenu({ isVisible, toggleVisibility, copyImage, carbonRef }) {
             position: relative;
             color: ${COLORS.SECONDARY};
             flex: 1;
+            max-width: 40px;
           }
 
           .copy-row {

diff --git a/components/Editor.js b/components/Editor.js
@@ -345,25 +345,27 @@ class Editor extends React.Component {
             onChange={this.updateLanguage}
           />
           <div className="toolbar-second-row">
-            <BackgroundSelect
-              onChange={this.updateBackground}
-              updateHighlights={this.updateHighlights}
-              mode={backgroundMode}
-              color={backgroundColor}
-              image={backgroundImage}
-              carbonRef={this.carbonNode.current}
-            />
-            <Settings
-              {...config}
-              onChange={this.updateSetting}
-              resetDefaultSettings={this.resetDefaultSettings}
-              format={this.format}
-              applyPreset={this.applyPreset}
-              getCarbonImage={this.getCarbonImage}
-            />
-            <div id="style-editor-button" />
-            <div className="buttons">
+            <div className="setting-buttons">
+              <BackgroundSelect
+                onChange={this.updateBackground}
+                updateHighlights={this.updateHighlights}
+                mode={backgroundMode}
+                color={backgroundColor}
+                image={backgroundImage}
+                carbonRef={this.carbonNode.current}
+              />
+              <Settings
+                {...config}
+                onChange={this.updateSetting}
+                resetDefaultSettings={this.resetDefaultSettings}
+                format={this.format}
+                applyPreset={this.applyPreset}
+                getCarbonImage={this.getCarbonImage}
+              />
               <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} />
               <ExportMenu
                 onChange={this.updateSetting}
@@ -414,23 +416,32 @@ class Editor extends React.Component {
               padding: 16px;
             }
 
-            .buttons {
+            .share-buttons,
+            .setting-buttons {
               display: flex;
               margin-left: auto;
+              height: 40px;
             }
             .toolbar-second-row {
-              height: 40px;
               display: flex;
               flex: 1 1 auto;
             }
-            .toolbar-second-row > :global(div:not(:last-of-type)) {
+            .setting-buttons > :global(div) {
               margin-right: 0.5rem;
             }
 
             #style-editor-button {
               display: flex;
               align-items: center;
             }
+            @media (max-width: 768px) {
+              .toolbar-second-row {
+                display: block;
+              }
+              #style-editor-button {
+                margin-top: 0.5rem;
+              }
+            }
           `}
         </style>
       </div>

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

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

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

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