Просмотр исходного кода

Fix layout for the main templates on small screen

Resizing the wizard, the lists or the details pages to a small size
would mess up the header of the page and in the case of the details page
would also make some elements on the page inaccessible.
Sergiu Miclea 8 лет назад
Родитель
Сommit
efd4c40625

+ 1 - 1
src/components/organisms/MainDetails/index.jsx

@@ -47,7 +47,7 @@ const Arrow = styled.div`
   width: 34px;
   height: 24px;
   background: url('${arrowImage}') center no-repeat;
-  margin-top: 68px;
+  margin-top: 84px;
 `
 const Row = styled.div`
   margin-bottom: 32px;

+ 3 - 1
src/components/templates/DetailsTemplate/index.jsx

@@ -17,7 +17,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import * as React from 'react'
 import styled from 'styled-components'
 
-const Wrapper = styled.div``
+const Wrapper = styled.div`
+  min-width: 1100px;
+`
 const PageHeader = styled.div``
 const ContentHeader = styled.div``
 const Content = styled.div`

+ 3 - 1
src/components/templates/MainTemplate/index.jsx

@@ -39,7 +39,9 @@ const List = styled.div`
   padding-bottom: 32px;
   margin-left: ${props => props.noMargin ? 0 : '-32px'};
 `
-const Header = styled.div``
+const Header = styled.div`
+  min-width: 800px;
+`
 
 type Props = {
   navigationComponent: React.Node,

+ 1 - 0
src/components/templates/WizardTemplate/index.jsx

@@ -23,6 +23,7 @@ const Wrapper = styled.div`
   left: 0;
   right: 0;
   bottom: 0;
+  min-width: 900px;
 `
 const PageHeader = styled.div``
 const PageContent = styled.div`