feat(common): fix common navigation, board navigation elements in sma…

…ller screen. fix #2105
erxes · Aug 9, 2020 · d7040ce · d7040ce
1 parent 4771734
commit d7040ce
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 1 deletion.
diff --git a/ui/src/modules/boards/styles/header.ts b/ui/src/modules/boards/styles/header.ts
@@ -11,6 +11,11 @@ export const PageHeader = styled.div`
   background: ${colors.colorWhite};
   box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
   min-height: 50px;
+
+  @media (max-width: 768px) {
+    min-height: auto;
+    flex-direction: column;
+  }
 `;
 
 export const ButtonGroup = styled.div`
@@ -50,6 +55,10 @@ export const ButtonGroup = styled.div`
 export const HeaderItems = styled(BarItems)`
   display: flex;
   align-items: center;
+
+  @media (max-width: 768px) {
+    flex-wrap: wrap;
+  }
 `;
 
 export const HeaderButton = styledTS<{

diff --git a/ui/src/modules/common/components/breadcrumb/BreadCrumb.tsx b/ui/src/modules/common/components/breadcrumb/BreadCrumb.tsx
@@ -10,6 +10,10 @@ const Items = styled.ul`
   margin: 0 ${dimensions.coreSpacing}px 0 0;
   list-style: none;
   font-size: 14px;
+
+  @media (max-width: 560px) {
+    display: none;
+  }
 `;
 
 class BreadCrumb extends React.Component<{

diff --git a/ui/src/modules/common/components/submenu/MenuItem.tsx b/ui/src/modules/common/components/submenu/MenuItem.tsx
@@ -27,6 +27,10 @@ const Item = styled.li`
       bottom: 0;
     }
   }
+
+  @media (max-width: 768px) {
+    padding-right: 10px;
+  }
 `;
 
 type Props = {

diff --git a/ui/src/modules/common/styles/main.ts b/ui/src/modules/common/styles/main.ts
@@ -18,6 +18,10 @@ const MiddleContent = styledTS<{ transparent?: boolean }>(styled.div)`
   height: calc(100% - 20px);
   background: ${props => !props.transparent && colors.colorWhite};
   margin: 10px 0;
+
+  @media (max-width: 900px) {
+    width: 100%;
+  }
 `;
 
 const BoxRoot = styledTS<{ selected?: boolean }>(styled.div)`

diff --git a/ui/src/modules/customers/styles.ts b/ui/src/modules/customers/styles.ts
@@ -179,6 +179,10 @@ export const LeadStateWrapper = styled.div`
   margin-bottom: ${dimensions.unitSpacing}px;
   align-items: center;
 
+  @media (max-width: 768px) {
+   flex-wrap: wrap;
+  }
+
   > button {
     margin-left: 10px;
   }
@@ -293,7 +297,11 @@ export const StateItem = styledTS<{ active?: boolean; past?: boolean }>(
 		font-weight: normal;
 		font-size: 90%;
 		margin-left: 5px;
-	}
+  }
+  
+  @media (max-width: 768px) {
+    margin-bottom: 5px;
+  }
 `;
 
 export {

diff --git a/ui/src/modules/layout/components/QuickNavigation.tsx b/ui/src/modules/layout/components/QuickNavigation.tsx
@@ -89,6 +89,10 @@ const Round = styled(NavItem)`
       background: ${lighten(colors.colorPrimary, 15)};
     }
   }
+
+  @media (max-width: 768px) {
+    display: none;
+  }
 `;
 
 const QuickNavigation = ({

diff --git a/ui/src/modules/layout/styles.ts b/ui/src/modules/layout/styles.ts
@@ -143,6 +143,12 @@ const BarItems = styled.div`
     width: auto;
     display: inline-block;
   }
+
+  @media (max-width: 768px) {
+    > * + * {
+      margin: 0 ${dimensions.unitSpacing}px 0 0;
+    }
+  }
 `;
 
 const HeaderItems = styledTS<{ rightAligned?: boolean }>(styled.div)`