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 (apache#19846)" (apache#19972) This reverts commit 528a9cd. customize font sizes
preset-io · May 6, 2022 · e7b2820 · e7b2820
1 parent 67d0500
commit e7b2820
Show file tree

Hide file tree

Showing 13 changed files with 161 additions and 14 deletions.
diff --git a/superset-frontend/src/assets/stylesheets/mobile.less 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.
+ */
+
diff --git 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 {
           <div className="slice_container" data-test="slice-container">
             <ChartRenderer
               {...this.props}
+              // this is gross..
+              width={window.innerWidth > 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
@@ -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
@@ -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,22 +134,43 @@ 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 }>`
   position: sticky;
   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<DashboardBuilderProps> = () => {
           </StickyPanel>
         </FiltersPanel>
       )}
-      <StyledHeader ref={headerRef}>
+      <StyledHeader ref={headerRef} dashboardFiltersOpen={dashboardFiltersOpen}>
         {/* @ts-ignore */}
         <DragDroppable
           data-test="top-level-tabs"

diff --git a/superset-frontend/src/dashboard/components/Header/index.jsx b/superset-frontend/src/dashboard/components/Header/index.jsx
@@ -121,6 +121,16 @@ const StyledDashboardHeader = styled.div`
   padding: 0 ${({ theme }) => 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
@@ -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}
           >
-            <Label
+            <StyledLabel
               onClick={() => {
                 this.togglePublished();
               }}
             >
               {t('Draft')}
-            </Label>
+            </StyledLabel>
           </Tooltip>
         );
       }
@@ -80,7 +87,7 @@ export default class PublishedStatus extends React.Component {
           placement="bottom"
           title={draftDivTooltip}
         >
-          <Label>{t('Draft')}</Label>
+          <StyledLabel>{t('Draft')}</StyledLabel>
         </Tooltip>
       );
     }
@@ -93,13 +100,13 @@ export default class PublishedStatus extends React.Component {
           placement="bottom"
           title={publishedTooltip}
         >
-          <Label
+          <StyledLabel
             onClick={() => {
               this.togglePublished();
             }}
           >
             {t('Published')}
-          </Label>
+          </StyledLabel>
         </Tooltip>
       );
     }

diff --git 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/...ontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx b/...ontend/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -24,6 +24,7 @@
 {% set favicons = appbuilder.app.config['FAVICONS'] %}
 <html>
   <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>
       {% block title %}
         {% if title %}