diff --git a/src/common/AsideMenu.scss b/src/common/AsideMenu.scss index 22547a50..09e0dc3e 100644 --- a/src/common/AsideMenu.scss +++ b/src/common/AsideMenu.scss @@ -1,9 +1,8 @@ @import '../utils/base'; @import '../utils/mixins/vertical-align'; -$asideMenuMobileWidth: 280px; - .aside-menu { + width: $asideMenuWidth; background-color: white; box-shadow: rgba(0, 0, 0, .05) 0 8px 15px; position: fixed !important; @@ -23,7 +22,6 @@ $asideMenuMobileWidth: 280px; } @media (max-width: $smMax) { - width: $asideMenuMobileWidth !important; transition: left 300ms; top: $headerHeight - 3px; box-shadow: -10px 0 50px 11px rgba(0, 0, 0, .55); @@ -32,7 +30,7 @@ $asideMenuMobileWidth: 280px; .aside-menu--hidden { @media (max-width: $smMax) { - left: -($asideMenuMobileWidth + 35px); + left: -($asideMenuWidth + 35px); } } @@ -45,6 +43,10 @@ $asideMenuMobileWidth: 280px; margin: 0 -15px; text-decoration: none !important; cursor: pointer; + + @media (max-width: $smMax) { + margin: 0; + } } .aside-menu__item:hover { diff --git a/src/common/AsideMenu.tsx b/src/common/AsideMenu.tsx index 28cfb9f7..3d9fd4b8 100644 --- a/src/common/AsideMenu.tsx +++ b/src/common/AsideMenu.tsx @@ -22,7 +22,6 @@ export interface AsideMenuProps { interface AsideMenuItemProps extends NavLinkProps { to: string; - className?: string; } const AsideMenuItem: FC = ({ children, to, className, ...rest }) => ( @@ -37,10 +36,10 @@ const AsideMenuItem: FC = ({ children, to, className, ...res ); const AsideMenu = (DeleteServerButton: FC) => ( - { selectedServer, className, showOnMobile = false }: AsideMenuProps, + { selectedServer, showOnMobile = false }: AsideMenuProps, ) => { const serverId = selectedServer ? selectedServer.id : ''; - const asideClass = classNames('aside-menu', className, { + const asideClass = classNames('aside-menu', { 'aside-menu--hidden': !showOnMobile, }); const shortUrlsIsActive = (_: null, location: Location) => location.pathname.match('/list-short-urls') !== null; diff --git a/src/common/MenuLayout.scss b/src/common/MenuLayout.scss index 0d4cce73..7eae132d 100644 --- a/src/common/MenuLayout.scss +++ b/src/common/MenuLayout.scss @@ -33,11 +33,11 @@ color: white; } -.menu-layout__container { +.menu-layout__container.menu-layout__container { padding: 20px 0 0; min-height: 100%; @media (min-width: $mdMin) { - padding: 30px 15px 0; + padding: 30px 0 0 $asideMenuWidth; } } diff --git a/src/common/MenuLayout.tsx b/src/common/MenuLayout.tsx index 15f8c491..e4a32144 100644 --- a/src/common/MenuLayout.tsx +++ b/src/common/MenuLayout.tsx @@ -56,10 +56,10 @@ const MenuLayout = (
-
- -
hideSidebar()}> -
+
+ +
hideSidebar()}> +
diff --git a/src/common/ShlinkVersionsContainer.scss b/src/common/ShlinkVersionsContainer.scss new file mode 100644 index 00000000..296731cf --- /dev/null +++ b/src/common/ShlinkVersionsContainer.scss @@ -0,0 +1,9 @@ +@import '../utils/base'; + +.shlink-versions-container--with-server { + margin-left: 0; + + @media (min-width: $mdMin) { + margin-left: $asideMenuWidth; + } +} diff --git a/src/common/ShlinkVersionsContainer.tsx b/src/common/ShlinkVersionsContainer.tsx index 894174fc..be3b9d74 100644 --- a/src/common/ShlinkVersionsContainer.tsx +++ b/src/common/ShlinkVersionsContainer.tsx @@ -1,23 +1,20 @@ import classNames from 'classnames'; import { isReachableServer, SelectedServer } from '../servers/data'; import ShlinkVersions from './ShlinkVersions'; +import './ShlinkVersionsContainer.scss'; export interface ShlinkVersionsContainerProps { selectedServer: SelectedServer; } const ShlinkVersionsContainer = ({ selectedServer }: ShlinkVersionsContainerProps) => { - const serverIsReachable = isReachableServer(selectedServer); - const colClasses = classNames('text-center', { - 'col-12': !serverIsReachable, - 'col-lg-10 offset-lg-2 col-md-9 offset-md-3': serverIsReachable, + const classes = classNames('text-center', { + 'shlink-versions-container--with-server': isReachableServer(selectedServer), }); return ( -
-
- -
+
+
); }; diff --git a/src/utils/base.scss b/src/utils/base.scss index a26b7909..e87c9d0b 100644 --- a/src/utils/base.scss +++ b/src/utils/base.scss @@ -17,6 +17,7 @@ $mediumGrey: #dee2e6; // Misc $headerHeight: 57px; +$asideMenuWidth: 260px; $footer-height: 2.3rem; $footer-margin: .8rem; diff --git a/test/common/ShlinkVersionsContainer.test.tsx b/test/common/ShlinkVersionsContainer.test.tsx index 063dcdf4..ba4bec86 100644 --- a/test/common/ShlinkVersionsContainer.test.tsx +++ b/test/common/ShlinkVersionsContainer.test.tsx @@ -15,13 +15,13 @@ describe('', () => { afterEach(() => wrapper?.unmount()); test.each([ - [ null, 'col-12' ], - [ Mock.of({ serverNotFound: true }), 'col-12' ], - [ Mock.of({ serverNotReachable: true }), 'col-12' ], - [ Mock.of({ printableVersion: 'v1.0.0' }), 'col-lg-10 offset-lg-2 col-md-9 offset-md-3' ], + [ null, 'text-center' ], + [ Mock.of({ serverNotFound: true }), 'text-center' ], + [ Mock.of({ serverNotReachable: true }), 'text-center' ], + [ Mock.of({ printableVersion: 'v1.0.0' }), 'text-center shlink-versions-container--with-server' ], ])('renders proper col classes based on type of selected server', (selectedServer, expectedClasses) => { const wrapper = createWrapper(selectedServer); - expect(wrapper.find('div').at(1).prop('className')).toEqual(`text-center ${expectedClasses}`); + expect(wrapper.find('div').prop('className')).toEqual(`${expectedClasses}`); }); });