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}
>
- {
this.togglePublished();
}}
>
{t('Draft')}
-
+
);
}
@@ -80,7 +87,7 @@ export default class PublishedStatus extends React.Component {
placement="bottom"
title={draftDivTooltip}
>
- {t('Draft')}
+ {t('Draft')}
);
}
@@ -93,13 +100,13 @@ export default class PublishedStatus extends React.Component {
placement="bottom"
title={publishedTooltip}
>
- {
this.togglePublished();
}}
>
{t('Published')}
-
+
);
}
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 %}