diff --git a/superset-frontend/src/assets/stylesheets/mobile.less b/superset-frontend/src/assets/stylesheets/mobile.less new file mode 100644 index 000000000000..e04a5fe35a45 --- /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 7df33d0c5d7c..54641bf3b9cd 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 0473e3d9b238..da67b56e2b7a 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 8352482ed8ab..9508f3d4cc45 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 915ea0aecc96..e60cc07f821e 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 55d4783a6e89..116ef9cbcdbb 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 79085daee3f4..642dab877746 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 45019f58cdfc..82943da7ba37 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 309d75dac9a8..05979d9680bb 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 87b376f51dbf..d1358180b4e3 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 3cc61f524305..961782003426 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 fff57fdb9fa1..b7636b361a41 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 %}