From e7b282097612bc5ad1e8aa6ce2941d6361da101d Mon Sep 17 00:00:00 2001 From: Evan Rusackas Date: Wed, 4 May 2022 17:26:38 -0600 Subject: [PATCH] Hiding stuff, collapsing charts More hackery! removing some giant padding lint add dedicated mobile collapse button style action buttons replace down with up arrow Make it sticky Adding viewport tag Making Filters a Sidebar Again (and letting the header scroll away) delint Revert "chore(deps): bump d3-svg-legend in /superset-frontend (#19846)" (#19972) This reverts commit 528a9cd7c7c061691d0469c8294a20a28dc91d4c. customize font sizes --- .../src/assets/stylesheets/mobile.less | 19 +++++++++++ .../src/components/Chart/Chart.jsx | 9 +++++ .../src/components/FaveStar/index.tsx | 3 +- .../DashboardBuilder/DashboardBuilder.tsx | 34 ++++++++++++++++--- .../src/dashboard/components/Header/index.jsx | 10 ++++++ .../components/PublishedStatus/index.jsx | 19 +++++++---- .../FilterBar/ActionButtons/index.tsx | 18 ++++++++++ .../FilterControls/FilterControls.tsx | 3 ++ .../nativeFilters/FilterBar/Header/index.tsx | 4 +++ .../nativeFilters/FilterBar/index.tsx | 30 ++++++++++++++++ .../dashboard/stylesheets/components/row.less | 16 +++++++++ .../src/views/components/Menu.tsx | 9 +++-- superset/templates/superset/basic.html | 1 + 13 files changed, 161 insertions(+), 14 deletions(-) create mode 100644 superset-frontend/src/assets/stylesheets/mobile.less diff --git a/superset-frontend/src/assets/stylesheets/mobile.less b/superset-frontend/src/assets/stylesheets/mobile.less new file mode 100644 index 0000000000000..e04a5fe35a45a --- /dev/null +++ b/superset-frontend/src/assets/stylesheets/mobile.less @@ -0,0 +1,19 @@ +/** + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + \ No newline at end of file diff --git a/superset-frontend/src/components/Chart/Chart.jsx b/superset-frontend/src/components/Chart/Chart.jsx index 7df33d0c5d7cb..54641bf3b9cd5 100644 --- a/superset-frontend/src/components/Chart/Chart.jsx +++ b/superset-frontend/src/components/Chart/Chart.jsx @@ -106,6 +106,13 @@ const Styles = styled.div` .slice_container { height: ${p => p.height}px; } + @media (max-width: 767px) { + min-height: 0; + max-height: none; + .slice_container { + height: auto; + } + } `; const MonospaceDiv = styled.div` @@ -306,6 +313,8 @@ class Chart extends React.PureComponent {
767 ? this.props.width : '100%'} source={this.props.dashboardId ? 'dashboard' : 'explore'} data-test={this.props.vizType} /> diff --git a/superset-frontend/src/components/FaveStar/index.tsx b/superset-frontend/src/components/FaveStar/index.tsx index 0473e3d9b238b..da67b56e2b7a4 100644 --- a/superset-frontend/src/components/FaveStar/index.tsx +++ b/superset-frontend/src/components/FaveStar/index.tsx @@ -35,7 +35,8 @@ const StyledLink = styled.a` ${({ theme }) => css` font-size: ${theme.typography.sizes.xl}px; display: flex; - padding: 0 0 0 ${theme.gridUnit * 2}px; + margin: 0; + padding: 0; `}; `; diff --git a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx index 8352482ed8ab8..9508f3d4cc45f 100644 --- a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx +++ b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx @@ -82,6 +82,11 @@ const StyledDiv = styled.div` flex: 1; /* Special cases */ + @media (max-width: 767px) { + display: flex; + flex-direction: column; + } + /* A row within a column has inset hover menu */ .dragdroppable-column .dragdroppable-row .hover-menu--left { left: -12px; @@ -129,6 +134,15 @@ const FiltersPanel = styled.div` grid-column: 1; grid-row: 1 / span 2; z-index: 11; + + @media (max-width: 767px) { + background: ${({ theme }) => theme.colors.grayscale.light5}; + position: fixed; + left: 0; + bottom: 0; + top: 0; + z-index: 200; // make it go above the dashboard header + } `; const StickyPanel = styled.div<{ width: number }>` @@ -136,15 +150,27 @@ const StickyPanel = styled.div<{ width: number }>` top: -1px; width: ${({ width }) => width}px; flex: 0 0 ${({ width }) => width}px; + @media (max-width: 767px) { + position: relative; + width: 100%; + height: 100%; + } `; // @z-index-above-dashboard-popovers (99) + 1 = 100 -const StyledHeader = styled.div` +const StyledHeader = styled.div<{ dashboardFiltersOpen: boolean }>` grid-column: 2; grid-row: 1; - position: sticky; - top: 0; + /* position: sticky; */ + top: 32px; z-index: 100; + @media (max-width: 767px) { + /* ${({ dashboardFiltersOpen }) => + dashboardFiltersOpen && `display: none;`} */ + .dragdroppable { + margin-left: 0px !important; + } + } `; const StyledContent = styled.div<{ @@ -407,7 +433,7 @@ const DashboardBuilder: FC = () => { )} - + {/* @ts-ignore */} theme.gridUnit * 6}px; border-bottom: 1px solid ${({ theme }) => theme.colors.grayscale.light2}; + @media (max-width: 767px) { + .action-button { + display: none; + } + + .header-large { + font-weight: ${({ theme }) => theme.typography.weights.bold}; + font-size: ${({ theme }) => theme.typography.sizes.l}px; + } + } .action-button > span { color: ${({ theme }) => theme.colors.grayscale.base}; } diff --git a/superset-frontend/src/dashboard/components/PublishedStatus/index.jsx b/superset-frontend/src/dashboard/components/PublishedStatus/index.jsx index 915ea0aecc968..e60cc07f821e4 100644 --- a/superset-frontend/src/dashboard/components/PublishedStatus/index.jsx +++ b/superset-frontend/src/dashboard/components/PublishedStatus/index.jsx @@ -18,7 +18,7 @@ */ import React from 'react'; import PropTypes from 'prop-types'; -import { t } from '@superset-ui/core'; +import { styled, t } from '@superset-ui/core'; import { Tooltip } from 'src/components/Tooltip'; import Label from 'src/components/Label'; @@ -44,6 +44,13 @@ const publishedTooltip = t( 'This dashboard is published. Click to make it a draft.', ); +const StyledLabel = styled(Label)` + margin: 0; + @media (max-width: 767px) { + font-size: ${({ theme }) => theme.typography.sizes.xs}px; + } +`; + export default class PublishedStatus extends React.Component { componentDidMount() { this.togglePublished = this.togglePublished.bind(this); @@ -64,13 +71,13 @@ export default class PublishedStatus extends React.Component { placement="bottom" title={draftButtonTooltip} > - + ); } @@ -80,7 +87,7 @@ export default class PublishedStatus extends React.Component { placement="bottom" title={draftDivTooltip} > - + {t('Draft')} ); } @@ -93,13 +100,13 @@ export default class PublishedStatus extends React.Component { placement="bottom" title={publishedTooltip} > - + ); } diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/ActionButtons/index.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/ActionButtons/index.tsx index 55d4783a6e89c..116ef9cbcdbb3 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/ActionButtons/index.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/ActionButtons/index.tsx @@ -41,6 +41,7 @@ const ActionButtonsContainer = styled.div` ${({ theme }) => css` display: flex; flex-direction: column; + align-items: center; position: fixed; @@ -77,7 +78,24 @@ const ActionButtonsContainer = styled.div` color: ${theme.colors.grayscale.light1}; } } + + @media (max-width: 767px) { + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + + & > .filter-apply-button { + margin-bottom: 0; + } + } `}; + + @media (max-width: 767px) { + width: 100%; + /* bottom: auto; + position: relative; + background: purple; */ + } `; export const ActionButtons = ({ diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx index 79085daee3f48..642dab8777468 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx @@ -43,6 +43,9 @@ const Wrapper = styled.div` padding: ${({ theme }) => theme.gridUnit * 4}px; // 108px padding to make room for buttons with position: absolute padding-bottom: ${({ theme }) => theme.gridUnit * 27}px; + /* @media (max-width: 767px) { + padding-bottom: ${({ theme }) => theme.gridUnit}px; + } */ `; type FilterControlsProps = { diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Header/index.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Header/index.tsx index 45019f58cdfc7..82943da7ba376 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Header/index.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Header/index.tsx @@ -68,6 +68,10 @@ const AddFiltersButtonContainer = styled.div` .ant-btn > .anticon + span { margin-left: 0; } + @media (max-width: 767px) { + // hide the add/edit filters button because the modal SUUUUUCKS. + display: none; + } `} `; diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx index 309d75dac9a80..05979d9680bb4 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx @@ -80,9 +80,17 @@ const BarWrapper = styled.div<{ width: number }>` & .ant-tabs-top > .ant-tabs-nav { margin: 0; } + &.open { width: ${({ width }) => width}px; // arbitrary... } + @media (max-width: 767px) { + width: 100%; + height: 100vh; + &.open { + width: 100%; + } + } `; const Bar = styled.div<{ width: number }>` @@ -125,11 +133,33 @@ const CollapsedBar = styled.div<{ offset: number }>` svg { cursor: pointer; } + @media (max-width: 767px) { + position: fixed; + /* top: auto; */ + background: ${({ theme }) => theme.colors.primary.light3}; + bottom: ${({ theme }) => theme.gridUnit * 4}px; + left: ${({ theme }) => theme.gridUnit * 4}px; + width: ${({ theme }) => theme.gridUnit * 10}px; + height: ${({ theme }) => theme.gridUnit * 10}px; + border-radius: ${({ theme }) => theme.gridUnit * 5}px; + box-shadow: ${({ theme }) => theme.gridUnit}px + ${({ theme }) => theme.gridUnit}px ${({ theme }) => theme.gridUnit}px + ${({ theme }) => theme.colors.primary.light2}; + top: auto; + &.open { + flex-direction: row-reverse; + justify-content: center; + } + } `; const StyledCollapseIcon = styled(Icons.Collapse)` color: ${({ theme }) => theme.colors.primary.base}; margin-bottom: ${({ theme }) => theme.gridUnit * 3}px; + @media (max-width: 767px) { + /* margin-bottom: auto; */ + display: none; + } `; const StyledFilterIcon = styled(Icons.Filter)` diff --git a/superset-frontend/src/dashboard/stylesheets/components/row.less b/superset-frontend/src/dashboard/stylesheets/components/row.less index 87b376f51dbfd..d1358180b4e38 100644 --- a/superset-frontend/src/dashboard/stylesheets/components/row.less +++ b/superset-frontend/src/dashboard/stylesheets/components/row.less @@ -16,6 +16,8 @@ * specific language governing permissions and limitations * under the License. */ + + .grid-row { position: relative; display: flex; @@ -84,3 +86,17 @@ color: @gray; } } + +// hack the planet!!! +@media screen and (max-width: 767px) { + .grid-row { + flex-direction: column; + & > *, .resizable-container { + width: 100% !important; + min-width: 100% !important; + max-width: 100% !important; + max-height: none; + margin: 4px !important; + } + } +} diff --git a/superset-frontend/src/views/components/Menu.tsx b/superset-frontend/src/views/components/Menu.tsx index 3cc61f5243057..961782003426c 100644 --- a/superset-frontend/src/views/components/Menu.tsx +++ b/superset-frontend/src/views/components/Menu.tsx @@ -85,6 +85,9 @@ export interface MenuObjectProps extends MenuObjectChildProps { const StyledHeader = styled.header` ${({ theme }) => ` + @media (max-width: 767px) { + display: none; + } background-color: ${theme.colors.grayscale.light5}; margin-bottom: 2px; &:nth-last-of-type(2) nav { @@ -128,9 +131,6 @@ const StyledHeader = styled.header` overflow: hidden; text-overflow: ellipsis; } - @media (max-width: 1127px) { - display: none; - } } .main-nav .ant-menu-submenu-title > svg { top: ${theme.gridUnit * 5.25}px; @@ -147,6 +147,9 @@ const StyledHeader = styled.header` .ant-menu > .ant-menu-item > a { padding: ${theme.gridUnit * 4}px; } + @media (max-width: 767px) { + display: none; + } @media (max-width: 767px) { .ant-menu-item { padding: 0 ${theme.gridUnit * 6}px 0 diff --git a/superset/templates/superset/basic.html b/superset/templates/superset/basic.html index fff57fdb9fa18..b7636b361a413 100644 --- a/superset/templates/superset/basic.html +++ b/superset/templates/superset/basic.html @@ -24,6 +24,7 @@ {% set favicons = appbuilder.app.config['FAVICONS'] %} + {% block title %} {% if title %}