From 9e57195b1d4fc3e7f70d2ceabd325e6f3c5b8969 Mon Sep 17 00:00:00 2001 From: ijin08 Date: Wed, 20 Mar 2019 09:48:19 +0100 Subject: [PATCH 1/9] removed dashboard variables, removed headings-font-family variable, created theme variables for links and z-index, removed unused class in _panel_editor and _dashboard --- .../src/themes/_variables.scss.tmpl.ts | 25 +++++++------------ packages/grafana-ui/src/themes/default.ts | 15 ++++++++++- packages/grafana-ui/src/types/theme.ts | 13 ++++++++++ public/sass/_variables.generated.scss | 9 +------ public/sass/base/_type.scss | 1 - public/sass/components/_panel_editor.scss | 12 +++------ public/sass/components/_panel_logs.scss | 3 +-- public/sass/components/_tabbed_view.scss | 2 +- public/sass/pages/_dashboard.scss | 9 ++----- public/sass/pages/_explore.scss | 16 ++++++------ 10 files changed, 52 insertions(+), 53 deletions(-) diff --git a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts index 16f4a20d139..89568ec7f6c 100644 --- a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts @@ -110,7 +110,6 @@ $font-size-h4: ${theme.typography.heading.h4} !default; $font-size-h5: ${theme.typography.heading.h5} !default; $font-size-h6: ${theme.typography.heading.h6} !default; -$headings-font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; $headings-line-height: ${theme.typography.lineHeight.sm} !default; // Components @@ -130,8 +129,8 @@ $page-sidebar-margin: 56px; // Links // ------------------------- -$link-decoration: none !default; -$link-hover-decoration: none !default; +$link-decoration: ${theme.typography.link.decoration} !default; +$link-hover-decoration: ${theme.typography.link.hoverDecoration} !default; // Tables // @@ -166,13 +165,13 @@ $form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www // ------------------------- // Used for a bird's eye view of components dependent on the z-axis // Try to avoid customizing these :) -$zindex-dropdown: 1000; -$zindex-navbar-fixed: 1020; -$zindex-sidemenu: 1025; -$zindex-tooltip: 1030; -$zindex-modal-backdrop: 1040; -$zindex-modal: 1050; -$zindex-typeahead: 1060; +$zindex-dropdown: ${theme.zIndex.dropdown}; +$zindex-navbar-fixed: ${theme.zIndex.navbarFixed}; +$zindex-sidemenu: ${theme.zIndex.sidemenu}; +$zindex-tooltip: ${theme.zIndex.tooltip}; +$zindex-modal-backdrop: ${theme.zIndex.modalBackdrop}; +$zindex-modal: ${theme.zIndex.modal}; +$zindex-typeahead: ${theme.zIndex.typeahead}; // Buttons // @@ -196,12 +195,6 @@ $btn-semi-transparent: rgba(0, 0, 0, 0.2) !default; // sidemenu $side-menu-width: 60px; -// dashboard -$dashboard-padding: 10px * 2; -$panel-horizontal-padding: 10; -$panel-vertical-padding: 5; -$panel-padding: 0px $panel-horizontal-padding + 0px $panel-vertical-padding + 0px $panel-horizontal-padding + 0px; - // tabs $tabs-padding: 10px 15px 9px; diff --git a/packages/grafana-ui/src/themes/default.ts b/packages/grafana-ui/src/themes/default.ts index 2dc50a7a5b1..934fa7634d1 100644 --- a/packages/grafana-ui/src/themes/default.ts +++ b/packages/grafana-ui/src/themes/default.ts @@ -4,7 +4,7 @@ const theme: GrafanaThemeCommons = { name: 'Grafana Default', typography: { fontFamily: { - sansSerif: "'Roboto', Helvetica, Arial, sans-serif", + sansSerif: "'Roboto', 'Helvetica Neue', Arial, sans-serif", monospace: "Menlo, Monaco, Consolas, 'Courier New', monospace", }, size: { @@ -34,6 +34,10 @@ const theme: GrafanaThemeCommons = { md: 4 / 3, lg: 1.5, }, + link: { + decoration: 'none', + hoverDecoration: 'none', + }, }, breakpoints: { xs: '0', @@ -66,6 +70,15 @@ const theme: GrafanaThemeCommons = { horizontal: 10, vertical: 5, }, + zIndex: { + dropdown: '1000', + navbarFixed: '1020', + sidemenu: '1025', + tooltip: '1030', + modalBackdrop: '1040', + modal: '1050', + typeahead: '1060', + }, }; export default theme; diff --git a/packages/grafana-ui/src/types/theme.ts b/packages/grafana-ui/src/types/theme.ts index 4da0ba8218c..fcc427541e6 100644 --- a/packages/grafana-ui/src/types/theme.ts +++ b/packages/grafana-ui/src/types/theme.ts @@ -46,6 +46,10 @@ export interface GrafanaThemeCommons { h5: string; h6: string; }; + link: { + decoration: string; + hoverDecoration: string; + }; }; spacing: { d: string; @@ -71,6 +75,15 @@ export interface GrafanaThemeCommons { horizontal: number; vertical: number; }; + zIndex: { + dropdown: string; + navbarFixed: string; + sidemenu: string; + tooltip: string; + modalBackdrop: string; + modal: string; + typeahead: string; + }; } export interface GrafanaTheme extends GrafanaThemeCommons { diff --git a/public/sass/_variables.generated.scss b/public/sass/_variables.generated.scss index 21fc602b8ba..340e56c8b78 100644 --- a/public/sass/_variables.generated.scss +++ b/public/sass/_variables.generated.scss @@ -90,7 +90,7 @@ $grid-gutter-width: 30px !default; // Typography // ------------------------- -$font-family-sans-serif: 'Roboto', Helvetica, Arial, sans-serif; +$font-family-sans-serif: 'Roboto', 'Helvetica Neue', Arial, sans-serif; $font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace; $font-size-root: 14px !default; @@ -113,7 +113,6 @@ $font-size-h4: 18px !default; $font-size-h5: 16px !default; $font-size-h6: 14px !default; -$headings-font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; $headings-line-height: 1.1 !default; // Components @@ -199,12 +198,6 @@ $btn-semi-transparent: rgba(0, 0, 0, 0.2) !default; // sidemenu $side-menu-width: 60px; -// dashboard -$dashboard-padding: 10px * 2; -$panel-horizontal-padding: 10; -$panel-vertical-padding: 5; -$panel-padding: 0px $panel-horizontal-padding + 0px $panel-vertical-padding + 0px $panel-horizontal-padding + 0px; - // tabs $tabs-padding: 10px 15px 9px; diff --git a/public/sass/base/_type.scss b/public/sass/base/_type.scss index 9efae56d5e4..479e0d6c9cd 100644 --- a/public/sass/base/_type.scss +++ b/public/sass/base/_type.scss @@ -110,7 +110,6 @@ h6, .h5, .h6 { margin-bottom: $space-sm; - font-family: $headings-font-family; font-weight: $font-weight-regular; line-height: $headings-line-height; color: $headings-color; diff --git a/public/sass/components/_panel_editor.scss b/public/sass/components/_panel_editor.scss index 8acf98be1b2..6df1cc60f60 100644 --- a/public/sass/components/_panel_editor.scss +++ b/public/sass/components/_panel_editor.scss @@ -9,14 +9,14 @@ &--edit { height: 40%; - margin: 0 $dashboard-padding; + margin: 0 $space-md; } &--view { flex: 1 1 0; height: 90%; - margin: 0 $dashboard-padding; - padding-top: $dashboard-padding; + margin: 0 $space-md; + padding-top: $space-md; } } @@ -80,11 +80,7 @@ } .submenu-controls { - padding: 0 $dashboard-padding $space-sm $dashboard-padding; - } - - .panel-editor-container__panel { - margin: 0 $dashboard-padding; + padding: 0 $space-md $space-sm $space-md; } .search-container { diff --git a/public/sass/components/_panel_logs.scss b/public/sass/components/_panel_logs.scss index 22c82461e85..4e2bc86d960 100644 --- a/public/sass/components/_panel_logs.scss +++ b/public/sass/components/_panel_logs.scss @@ -3,8 +3,7 @@ $column-horizontal-spacing: 10px; .logs-panel-options { display: flex; background-color: $page-bg; - padding: $panel-padding; - padding-top: 10px; + padding: $space-sm $space-md $space-sm $space-md; border-radius: $border-radius; margin: $space-md 0 $space-sm; border: $panel-border; diff --git a/public/sass/components/_tabbed_view.scss b/public/sass/components/_tabbed_view.scss index 6abadfa465b..e58b37711d0 100644 --- a/public/sass/components/_tabbed_view.scss +++ b/public/sass/components/_tabbed_view.scss @@ -13,7 +13,7 @@ .tabbed-view-header { box-shadow: $page-header-shadow; border-bottom: 1px solid $page-header-border-color; - padding: 0 $dashboard-padding; + padding: 0 $space-md; @include clearfix(); } diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss index c02c9227d29..c189df07f4a 100644 --- a/public/sass/pages/_dashboard.scss +++ b/public/sass/pages/_dashboard.scss @@ -1,5 +1,5 @@ .dashboard-container { - padding: $dashboard-padding $dashboard-padding 0 $dashboard-padding; + padding: $space-md $space-md 0 $space-md; width: 100%; height: 100%; box-sizing: border-box; @@ -78,7 +78,7 @@ div.flot-text { } .panel-content { - padding: $panel-padding; + padding: 0 $space-md $space-sm $space-md; height: calc(100% - 27px); position: relative; @@ -260,7 +260,6 @@ div.flot-text { } .dashboard-header { - font-family: $headings-font-family; font-size: $font-size-h3; text-align: center; overflow: hidden; @@ -273,10 +272,6 @@ div.flot-text { } } -.panel-full-edit { - padding-top: $dashboard-padding; -} - .dashboard-loading { height: 60vh; display: flex; diff --git a/public/sass/pages/_explore.scss b/public/sass/pages/_explore.scss index 60c1a600014..b610ac62534 100644 --- a/public/sass/pages/_explore.scss +++ b/public/sass/pages/_explore.scss @@ -31,7 +31,7 @@ flex-flow: row wrap; justify-content: flex-start; height: auto; - padding: 0 $dashboard-padding; + padding: 0 $space-md; border-bottom: 1px solid #0000; transition-duration: 0.35s; transition-timing-function: ease-in-out; @@ -91,7 +91,7 @@ } .explore-toolbar-content-item:first-child { - padding-left: $dashboard-padding; + padding-left: $space-md; margin-right: auto; } @@ -142,7 +142,7 @@ @media only screen and (max-width: 544px) { .explore-toolbar-header-title { .navbar-page-btn { - margin-left: $dashboard-padding; + margin-left: $space-md; } } } @@ -156,7 +156,7 @@ } .explore-container { - padding: $dashboard-padding; + padding: $space-md; } .explore-wrapper { @@ -172,16 +172,14 @@ } .explore-panel__body { - padding: $panel-padding; + padding: 0 $space-md $space-sm $space-md; } .explore-panel__header { - padding: $panel-padding; - padding-top: 5px; - padding-bottom: 0; + padding: $space-sm $space-md 0 $space-md; display: flex; cursor: pointer; - margin-bottom: 5px; + margin-bottom: $space-sm; transition: all 0.1s linear; } From 2a53be050cba90ec4f6da555a9a92005d1167580 Mon Sep 17 00:00:00 2001 From: ijin08 Date: Wed, 20 Mar 2019 10:29:28 +0100 Subject: [PATCH 2/9] fixed snapshot for test --- .../__snapshots__/ThresholdsEditor.test.tsx.snap | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap b/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap index 2bc5ee56d4d..6c67b5ec546 100644 --- a/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap +++ b/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap @@ -195,7 +195,7 @@ exports[`Render should render with base threshold 1`] = ` "typography": Object { "fontFamily": Object { "monospace": "Menlo, Monaco, Consolas, 'Courier New', monospace", - "sansSerif": "'Roboto', Helvetica, Arial, sans-serif", + "sansSerif": "'Roboto', 'Helvetica Neue', Arial, sans-serif", }, "heading": Object { "h1": "28px", @@ -339,7 +339,7 @@ exports[`Render should render with base threshold 1`] = ` "typography": Object { "fontFamily": Object { "monospace": "Menlo, Monaco, Consolas, 'Courier New', monospace", - "sansSerif": "'Roboto', Helvetica, Arial, sans-serif", + "sansSerif": "'Roboto', 'Helvetica Neue', Arial, sans-serif", }, "heading": Object { "h1": "28px", From 7fcb9777c094a4f734d7bc2a84d8281000b58e28 Mon Sep 17 00:00:00 2001 From: ijin08 Date: Wed, 20 Mar 2019 10:49:34 +0100 Subject: [PATCH 3/9] removed empty space in snapshot --- .../__snapshots__/ThresholdsEditor.test.tsx.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap b/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap index 6c67b5ec546..60a8c10492a 100644 --- a/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap +++ b/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap @@ -195,7 +195,7 @@ exports[`Render should render with base threshold 1`] = ` "typography": Object { "fontFamily": Object { "monospace": "Menlo, Monaco, Consolas, 'Courier New', monospace", - "sansSerif": "'Roboto', 'Helvetica Neue', Arial, sans-serif", + "sansSerif": "'Roboto', 'Helvetica Neue', Arial, sans-serif", }, "heading": Object { "h1": "28px", From 67e802c59561078a96664c3f97bc317c40aeb0f3 Mon Sep 17 00:00:00 2001 From: ijin08 Date: Wed, 20 Mar 2019 11:13:19 +0100 Subject: [PATCH 4/9] more fixes to snapshot --- .../ThresholdsEditor.test.tsx.snap | 26 +++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap b/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap index 60a8c10492a..bb7fca08f17 100644 --- a/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap +++ b/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap @@ -211,6 +211,10 @@ exports[`Render should render with base threshold 1`] = ` "sm": 1.1, "xs": 1, }, + "link": Object { + "decoration": "none", + "hoverDecoration": "none", + }, "size": Object { "base": "13px", "lg": "18px", @@ -224,6 +228,15 @@ exports[`Render should render with base threshold 1`] = ` "regular": 400, "semibold": 500, }, + "zIndex": Object { + "dropdown": "1000", + "modal": "1050", + "modalBackdrop": "1040", + "navbarFixed": "1020", + "sidemenu": "1025", + "tooltip": "1030", + "typeahead": "1060", + }, }, } } @@ -355,6 +368,10 @@ exports[`Render should render with base threshold 1`] = ` "sm": 1.1, "xs": 1, }, + "link": Object { + "decoration": "none", + "hoverDecoration": "none", + }, "size": Object { "base": "13px", "lg": "18px", @@ -368,6 +385,15 @@ exports[`Render should render with base threshold 1`] = ` "regular": 400, "semibold": 500, }, + "zIndex": Object { + "dropdown": "1000", + "modal": "1050", + "modalBackdrop": "1040", + "navbarFixed": "1020", + "sidemenu": "1025", + "tooltip": "1030", + "typeahead": "1060", + }, }, } } From 6471f6feb0299d3a67031a1e84e9a90a952ad0fd Mon Sep 17 00:00:00 2001 From: ijin08 Date: Wed, 20 Mar 2019 11:37:45 +0100 Subject: [PATCH 5/9] more fixes to snapshot --- .../ThresholdsEditor.test.tsx.snap | 36 +++++++++---------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap b/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap index bb7fca08f17..7487a10f363 100644 --- a/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap +++ b/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap @@ -228,15 +228,15 @@ exports[`Render should render with base threshold 1`] = ` "regular": 400, "semibold": 500, }, - "zIndex": Object { - "dropdown": "1000", - "modal": "1050", - "modalBackdrop": "1040", - "navbarFixed": "1020", - "sidemenu": "1025", - "tooltip": "1030", - "typeahead": "1060", - }, + }, + "zIndex": Object { + "dropdown": "1000", + "modal": "1050", + "modalBackdrop": "1040", + "navbarFixed": "1020", + "sidemenu": "1025", + "tooltip": "1030", + "typeahead": "1060", }, } } @@ -385,15 +385,15 @@ exports[`Render should render with base threshold 1`] = ` "regular": 400, "semibold": 500, }, - "zIndex": Object { - "dropdown": "1000", - "modal": "1050", - "modalBackdrop": "1040", - "navbarFixed": "1020", - "sidemenu": "1025", - "tooltip": "1030", - "typeahead": "1060", - }, + }, + "zIndex": Object { + "dropdown": "1000", + "modal": "1050", + "modalBackdrop": "1040", + "navbarFixed": "1020", + "sidemenu": "1025", + "tooltip": "1030", + "typeahead": "1060", }, } } From 29e68ba1fc4ee9fb21a8924a5409aff683e89ea9 Mon Sep 17 00:00:00 2001 From: ijin08 Date: Thu, 21 Mar 2019 11:10:44 +0100 Subject: [PATCH 6/9] brought back dashboard-padding and panel-padding variables, made dashboard-padding more specific --- packages/grafana-ui/src/themes/_variables.scss.tmpl.ts | 4 ++++ public/sass/_variables.generated.scss | 4 ++++ public/sass/pages/_dashboard.scss | 4 ++-- public/sass/pages/_explore.scss | 4 ++-- 4 files changed, 12 insertions(+), 4 deletions(-) diff --git a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts index 89568ec7f6c..0c6ff640fe4 100644 --- a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts @@ -195,6 +195,10 @@ $btn-semi-transparent: rgba(0, 0, 0, 0.2) !default; // sidemenu $side-menu-width: 60px; +// dashboard +$dashboard-padding: $space-md $space-md 0 $space-md; +$panel-padding: 0 $space-md $space-sm $space-md; + // tabs $tabs-padding: 10px 15px 9px; diff --git a/public/sass/_variables.generated.scss b/public/sass/_variables.generated.scss index 340e56c8b78..cb0c8688ecc 100644 --- a/public/sass/_variables.generated.scss +++ b/public/sass/_variables.generated.scss @@ -198,6 +198,10 @@ $btn-semi-transparent: rgba(0, 0, 0, 0.2) !default; // sidemenu $side-menu-width: 60px; +// dashboard +$dashboard-padding: $space-md $space-md 0 $space-md; +$panel-padding: 0 $space-md $space-sm $space-md; + // tabs $tabs-padding: 10px 15px 9px; diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss index c189df07f4a..42a5988efb4 100644 --- a/public/sass/pages/_dashboard.scss +++ b/public/sass/pages/_dashboard.scss @@ -1,5 +1,5 @@ .dashboard-container { - padding: $space-md $space-md 0 $space-md; + padding: $dashboard-padding; width: 100%; height: 100%; box-sizing: border-box; @@ -78,7 +78,7 @@ div.flot-text { } .panel-content { - padding: 0 $space-md $space-sm $space-md; + padding: $panel-padding; height: calc(100% - 27px); position: relative; diff --git a/public/sass/pages/_explore.scss b/public/sass/pages/_explore.scss index b610ac62534..666c5e4327c 100644 --- a/public/sass/pages/_explore.scss +++ b/public/sass/pages/_explore.scss @@ -156,7 +156,7 @@ } .explore-container { - padding: $space-md; + padding: $dashboard-padding; } .explore-wrapper { @@ -172,7 +172,7 @@ } .explore-panel__body { - padding: 0 $space-md $space-sm $space-md; + padding: $panel-padding; } .explore-panel__header { From 8d03db24748a99b2a406ade7af867b31d3c9aa97 Mon Sep 17 00:00:00 2001 From: ijin08 Date: Thu, 21 Mar 2019 12:15:13 +0100 Subject: [PATCH 7/9] reversed dashboard-padding --- packages/grafana-ui/src/themes/_variables.scss.tmpl.ts | 2 +- public/sass/components/_panel_editor.scss | 8 ++++---- public/sass/pages/_dashboard.scss | 2 +- public/sass/pages/_explore.scss | 6 +++--- 4 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts index 0c6ff640fe4..23e63655f21 100644 --- a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts @@ -196,7 +196,7 @@ $btn-semi-transparent: rgba(0, 0, 0, 0.2) !default; $side-menu-width: 60px; // dashboard -$dashboard-padding: $space-md $space-md 0 $space-md; +$dashboard-padding: $space-md; $panel-padding: 0 $space-md $space-sm $space-md; // tabs diff --git a/public/sass/components/_panel_editor.scss b/public/sass/components/_panel_editor.scss index 6df1cc60f60..a50ab0d072d 100644 --- a/public/sass/components/_panel_editor.scss +++ b/public/sass/components/_panel_editor.scss @@ -9,14 +9,14 @@ &--edit { height: 40%; - margin: 0 $space-md; + margin: 0 $dashboard-padding; } &--view { flex: 1 1 0; height: 90%; - margin: 0 $space-md; - padding-top: $space-md; + margin: 0 $dashboard-padding; + padding-top: $dashboard-padding; } } @@ -80,7 +80,7 @@ } .submenu-controls { - padding: 0 $space-md $space-sm $space-md; + padding: 0 $dashboard-padding $space-sm $dashboard-padding; } .search-container { diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss index 42a5988efb4..df3a34e1d06 100644 --- a/public/sass/pages/_dashboard.scss +++ b/public/sass/pages/_dashboard.scss @@ -1,5 +1,5 @@ .dashboard-container { - padding: $dashboard-padding; + padding: $dashboard-padding $dashboard-padding 0 $dashboard-padding; width: 100%; height: 100%; box-sizing: border-box; diff --git a/public/sass/pages/_explore.scss b/public/sass/pages/_explore.scss index 666c5e4327c..0b26417005b 100644 --- a/public/sass/pages/_explore.scss +++ b/public/sass/pages/_explore.scss @@ -31,7 +31,7 @@ flex-flow: row wrap; justify-content: flex-start; height: auto; - padding: 0 $space-md; + padding: 0 $dashboard-padding; border-bottom: 1px solid #0000; transition-duration: 0.35s; transition-timing-function: ease-in-out; @@ -91,7 +91,7 @@ } .explore-toolbar-content-item:first-child { - padding-left: $space-md; + padding-left: $dashboard-spacer; margin-right: auto; } @@ -142,7 +142,7 @@ @media only screen and (max-width: 544px) { .explore-toolbar-header-title { .navbar-page-btn { - margin-left: $space-md; + margin-left: $dashboard-padding; } } } From 45e361ef13d9006b60355f0cab19a6ef2fd8a636 Mon Sep 17 00:00:00 2001 From: ijin08 Date: Thu, 21 Mar 2019 12:26:35 +0100 Subject: [PATCH 8/9] change that didn't come with in last commit --- public/sass/_variables.generated.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/sass/_variables.generated.scss b/public/sass/_variables.generated.scss index cb0c8688ecc..fe9476f3b5f 100644 --- a/public/sass/_variables.generated.scss +++ b/public/sass/_variables.generated.scss @@ -199,7 +199,7 @@ $btn-semi-transparent: rgba(0, 0, 0, 0.2) !default; $side-menu-width: 60px; // dashboard -$dashboard-padding: $space-md $space-md 0 $space-md; +$dashboard-padding: $space-md; $panel-padding: 0 $space-md $space-sm $space-md; // tabs From eaaa1681e243abd337b0ffb5140538d89e04b2b3 Mon Sep 17 00:00:00 2001 From: ijin08 Date: Thu, 21 Mar 2019 12:29:13 +0100 Subject: [PATCH 9/9] another change that didn't come with earlier commit --- public/sass/pages/_explore.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/sass/pages/_explore.scss b/public/sass/pages/_explore.scss index 0b26417005b..9784f8c89e4 100644 --- a/public/sass/pages/_explore.scss +++ b/public/sass/pages/_explore.scss @@ -91,7 +91,7 @@ } .explore-toolbar-content-item:first-child { - padding-left: $dashboard-spacer; + padding-left: $dashboard-padding; margin-right: auto; }