Fix dashboard responsive

GladysAssistant · Jul 19, 2021 · 4f4936c · 4f4936c
1 parent 132dcce
commit 4f4936c
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 9 deletions.
diff --git a/front/src/routes/dashboard/BoxColumns.jsx b/front/src/routes/dashboard/BoxColumns.jsx
@@ -9,7 +9,8 @@ const BoxColumns = ({ children, ...props }) => (
         <div
           class={cx('d-flex flex-column col-lg-4', {
             [style.removePaddingFirstCol]: x === 0,
-            [style.removePaddingLastCol]: x === 2
+            [style.removePaddingLastCol]: x === 2,
+            [style.removePadding]: true // it will remove padding when in mobile view
           })}
         >
           {column.map((box, y) => (

diff --git a/front/src/routes/dashboard/DashboardPage.jsx b/front/src/routes/dashboard/DashboardPage.jsx
@@ -6,6 +6,8 @@ import EditBoxColumns from './EditBoxColumns';
 import EmptyState from './EmptyState';
 import EditActions from './EditActions';
 
+import style from './style.css';
+
 const marginBottom = {
   marginBottom: '10rem'
 };
@@ -45,9 +47,9 @@ const DashboardPage = ({ children, ...props }) => (
                     )}
                   </div>
 
-                  <div class="page-options d-flex">
+                  <div class="page-options d-flex align-content-between flex-wrap">
                     {!props.dashboardNotConfigured && props.browserFullScreenCompatible && (
-                      <button onClick={props.toggleFullScreen} class="btn btn-outline-secondary btn-sm ml-2">
+                      <button onClick={props.toggleFullScreen} class={cx('btn btn-outline-secondary ml-2 btn-sm')}>
                         <span>
                           {!props.fullScreen && <Text id="dashboard.enableFullScreen" />}
                           {props.fullScreen && <Text id="dashboard.disableFullScreen" />}{' '}
@@ -57,13 +59,19 @@ const DashboardPage = ({ children, ...props }) => (
                       </button>
                     )}
                     {props.currentDashboard && (
-                      <button onClick={props.editDashboard} class="btn btn-outline-primary btn-sm ml-2">
+                      <button
+                        onClick={props.editDashboard}
+                        class={cx('btn btn-outline-primary ml-2', style.smallButtonOnBigScreen)}
+                      >
                         <span>
                           <Text id="dashboard.editDashboardButton" /> <i class="fe fe-edit" />
                         </span>
                       </button>
                     )}
-                    <Link href="/dashboard/create/new" class="btn btn-outline-success btn-sm ml-2">
+                    <Link
+                      href="/dashboard/create/new"
+                      class={cx('btn btn-outline-success ml-2', style.smallButtonOnBigScreen)}
+                    >
                       <span>
                         <Text id="dashboard.newDashboardButton" /> <i class="fe fe-plus" />
                       </span>

diff --git a/front/src/routes/dashboard/style.css b/front/src/routes/dashboard/style.css
@@ -19,10 +19,29 @@
   margin-top: 20px;
 }
 
-.removePaddingFirstCol {
-  padding-left: 0;
+@media (min-width: 992px) {
+  .removePaddingFirstCol {
+    padding-left: 0;
+  }
+
+  .removePaddingLastCol {
+    padding-right: 0;
+  }
+}
+
+@media (max-width: 992px) {
+  .removePadding {
+    padding-left: 0;
+    padding-right: 0;
+  }
 }
 
-.removePaddingLastCol {
-  padding-right: 0;
+@media (min-width: 992px) {
+  .smallButtonOnBigScreen {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.75rem;
+    min-width: 1.625rem;
+    line-height: 1.33333333;
+    border-radius: 3px;
+  }
 }