Skip to content

Commit

Permalink
fix: Navbar styles and Welcome page text (#19586)
Browse files Browse the repository at this point in the history 
* Enhance navbar styles

* Clean up style
  • Loading branch information
@geido
geido committed Apr 12, 2022
1 parent 6a3220f commit 59dda1f
Show file tree
Hide file tree
Showing 3 changed files with 115 additions and 113 deletions.
9 changes: 4 additions & 5 deletions superset-frontend/src/assets/stylesheets/superset.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -539,12 +539,11 @@ td.filtered {
width: 100% !important;
}

// Remove this when the jinja menu/navbar is replaced with react.
// This style already exists in that view
/*
Hides the logo while loading the page.
Emotion styles will take care of the correct styling
*/
.navbar-brand {
display: flex;
flex-direction: column;
justify-content: center;
display: none;
}

Expand Down
36 changes: 20 additions & 16 deletions superset-frontend/src/views/CRUD/welcome/Welcome.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,23 +113,27 @@ const WelcomeContainer = styled.div`
`;

const WelcomeNav = styled.div`
height: 50px;
background-color: white;
.navbar-brand {
margin-left: ${({ theme }) => theme.gridUnit * 2}px;
font-weight: ${({ theme }) => theme.typography.weights.bold};
}
.switch {
float: right;
margin: ${({ theme }) => theme.gridUnit * 5}px;
${({ theme }) => `
display: flex;
flex-direction: row;
span {
display: block;
margin: ${({ theme }) => theme.gridUnit * 1}px;
line-height: 1;
justify-content: space-between;
height: 50px;
background-color: ${theme.colors.grayscale.light5};
.welcome-header {
font-size: ${theme.typography.sizes.l}px;
padding: ${theme.gridUnit * 4}px ${theme.gridUnit * 2 + 2}px;
margin: 0 ${theme.gridUnit * 2}px;
}
}
.switch {
display: flex;
flex-direction: row;
margin: ${theme.gridUnit * 4}px;
span {
display: block;
margin: ${theme.gridUnit * 1}px;
line-height: 1;
}
}
`}
`;

export const LoadingCards = ({ cover }: LoadingProps) => (
Expand Down Expand Up @@ -275,7 +279,7 @@ function Welcome({ user, addDangerToast }: WelcomeProps) {
return (
<WelcomeContainer>
<WelcomeNav>
<span className="navbar-brand">Home</span>
<h1 className="welcome-header">Home</h1>
{isFeatureEnabled(FeatureFlag.THUMBNAILS) ? (
<div className="switch">
<AntdSwitch checked={checked} onChange={handleToggle} />
Expand Down
183 changes: 91 additions & 92 deletions superset-frontend/src/views/components/Menu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,101 +84,100 @@ export interface MenuObjectProps extends MenuObjectChildProps {
}

const StyledHeader = styled.header`
background-color: white;
margin-bottom: 2px;
&:nth-last-of-type(2) nav {
margin-bottom: 2px;
}
.caret {
display: none;
}
.navbar-brand {
display: flex;
flex-direction: column;
justify-content: center;
/* must be exactly the height of the Antd navbar */
min-height: 50px;
padding: ${({ theme }) =>
`${theme.gridUnit}px ${theme.gridUnit * 2}px ${theme.gridUnit}px ${
theme.gridUnit * 4
}px`};
max-width: ${({ theme }) => `${theme.gridUnit * 37}px`};
img {
height: 100%;
object-fit: contain;
}
}
.navbar-brand-text {
border-left: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
border-right: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
height: 100%;
color: ${({ theme }) => theme.colors.grayscale.dark1};
padding-left: ${({ theme }) => theme.gridUnit * 4}px;
padding-right: ${({ theme }) => theme.gridUnit * 4}px;
margin-right: ${({ theme }) => theme.gridUnit * 6}px;
font-size: ${({ theme }) => theme.gridUnit * 4}px;
float: left;
display: flex;
flex-direction: column;
justify-content: center;
span {
max-width: ${({ theme }) => theme.gridUnit * 58}px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 1127px) {
display: none;
}
}
.main-nav .ant-menu-submenu-title > svg {
top: ${({ theme }) => theme.gridUnit * 5.25}px;
}
@media (max-width: 767px) {
.navbar-brand {
float: none;
}
}
.ant-menu-horizontal .ant-menu-item {
height: 100%;
line-height: inherit;
}
.ant-menu > .ant-menu-item > a {
padding: ${({ theme }) => theme.gridUnit * 4}px;
}
@media (max-width: 767px) {
.ant-menu-item {
padding: 0 ${({ theme }) => theme.gridUnit * 6}px 0
${({ theme }) => theme.gridUnit * 3}px !important;
}
.ant-menu > .ant-menu-item > a {
padding: 0px;
}
.main-nav .ant-menu-submenu-title > svg:nth-child(1) {
display: none;
}
.ant-menu-item-active > a {
&:hover {
color: ${({ theme }) => theme.colors.primary.base} !important;
background-color: transparent !important;
${({ theme }) => `
background-color: ${theme.colors.grayscale.light5};
margin-bottom: 2px;
&:nth-last-of-type(2) nav {
margin-bottom: 2px;
}
}
}
.caret {
display: none;
}
.navbar-brand {
display: flex;
flex-direction: column;
justify-content: center;
/* must be exactly the height of the Antd navbar */
min-height: 50px;
padding: ${theme.gridUnit}px ${theme.gridUnit * 2}px ${
theme.gridUnit
}px ${theme.gridUnit * 4}px;
max-width: ${theme.gridUnit * 37}px;
img {
height: 100%;
object-fit: contain;
}
}
.navbar-brand-text {
border-left: 1px solid ${theme.colors.grayscale.light2};
border-right: 1px solid ${theme.colors.grayscale.light2};
height: 100%;
color: ${theme.colors.grayscale.dark1};
padding-left: ${theme.gridUnit * 4}px;
padding-right: ${theme.gridUnit * 4}px;
margin-right: ${theme.gridUnit * 6}px;
font-size: ${theme.gridUnit * 4}px;
float: left;
display: flex;
flex-direction: column;
justify-content: center;
.ant-menu-item a {
&:hover {
color: ${({ theme }) => theme.colors.grayscale.dark1};
background-color: ${({ theme }) => theme.colors.primary.light5};
border-bottom: none;
margin: 0;
&:after {
opacity: 1;
width: 100%;
span {
max-width: ${theme.gridUnit * 58}px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 1127px) {
display: none;
}
}
}
}
.main-nav .ant-menu-submenu-title > svg {
top: ${theme.gridUnit * 5.25}px;
}
@media (max-width: 767px) {
.navbar-brand {
float: none;
}
}
.ant-menu-horizontal .ant-menu-item {
height: 100%;
line-height: inherit;
}
.ant-menu > .ant-menu-item > a {
padding: ${theme.gridUnit * 4}px;
}
@media (max-width: 767px) {
.ant-menu-item {
padding: 0 ${theme.gridUnit * 6}px 0
${theme.gridUnit * 3}px !important;
}
.ant-menu > .ant-menu-item > a {
padding: 0px;
}
.main-nav .ant-menu-submenu-title > svg:nth-child(1) {
display: none;
}
.ant-menu-item-active > a {
&:hover {
color: ${theme.colors.primary.base} !important;
background-color: transparent !important;
}
}
}
.ant-menu-item a {
&:hover {
color: ${theme.colors.grayscale.dark1};
background-color: ${theme.colors.primary.light5};
border-bottom: none;
margin: 0;
&:after {
opacity: 1;
width: 100%;
}
}
}
`}
`;
const globalStyles = (theme: SupersetTheme) => css`
.ant-menu-submenu.ant-menu-submenu-popup.ant-menu.ant-menu-light.ant-menu-submenu-placement-bottomLeft {
Expand Down

0 comments on commit 59dda1f

Please sign in to comment.