add resposive layout (#385)

* chore(): responsive layout * chore(): fix tslint errors * chore(): add sidebar toggler * chore(): fix circleci * chore(): fulfill review requests
AKASHAorg · Jan 29, 2020 · 8ce113e · 8ce113e
1 parent 8dbe6a8
commit 8ce113e
Show file tree

Hide file tree

Showing 50 changed files with 490 additions and 549 deletions.
diff --git a/examples/ui/feed-app/package.json b/examples/ui/feed-app/package.json
@@ -5,7 +5,7 @@
   "dependencies": {},
   "peerDependencies": {},
   "scripts": {
-    "start": "webpack-dev-server --config ./webpack.config.js --port 8131",
+    "start": "webpack-dev-server --config ./webpack.config.js --port 8131 --host 0.0.0.0",
     "prepare": "tsc --build",
     "prestart": "tsc --build",
     "build:staging": "webpack --config ./webpack.config.js"

diff --git a/examples/ui/feed-app/public/index.html b/examples/ui/feed-app/public/index.html
@@ -47,5 +47,5 @@
       You need to enable JavaScript to run this app.
     </noscript>
     <div id="root"></div>
-  <script type="text/javascript" src="/akasha.runtime.89fe2c05a990d962166d.js"></script><script type="text/javascript" src="/akasha.vendors.aa77836b5d4ffd4f96ac.js"></script><script type="text/javascript" src="/akasha.main.c2a17a194f5224a6cd66.js"></script></body>
+  <script type="text/javascript" src="/akasha.runtime.89fe2c05a990d962166d.js"></script><script type="text/javascript" src="/akasha.vendors.a8444420d8b3d463748d.js"></script><script type="text/javascript" src="/akasha.main.35624769ded7505bf023.js"></script></body>
 </html>
diff --git a/examples/ui/feed-app/webpack.config.js b/examples/ui/feed-app/webpack.config.js
@@ -33,13 +33,20 @@ module.exports = {
     ],
   },
   plugins: [
-    new CopyPlugin([{ from: path.resolve(__dirname, '../../../ui/build') }, {
+    new CopyPlugin([{ from: path.resolve(__dirname, '../../../ui/build') },
+    {
       from: path.resolve(__dirname, '../../../locales'),
       to: 'locales',
-    }]),
+    }
+    ]),
     new HtmlWebpackPlugin({ template: path.resolve(__dirname, './public/index.html') }),
     new webpack.HotModuleReplacementPlugin(),
   ],
+  // fix infinite loop of compilation when
+  // a new string is added to translations
+  watchOptions: {
+    ignored: [path.resolve(__dirname, '../../../locales'), 'node_modules'],
+  },
   devServer: {
     contentBase: './public',
     historyApiFallback: true,

diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
     "start:design-system:storybook": "lerna run storybook --scope @akashaproject/storybook --stream",
     "pack:ui-apps": "lerna run pack --scope @akashaproject/ui-* --scope @akashaproject/design-* --stream",
     "pack:only": "lerna run pack --scope $AWF_PACKAGE --stream",
+    "pack:watch": "lerna run pack:watch --scope $AWF_PACKAGE --stream",
     "start:only": "lerna run start --scope $AWF_PACKAGE --stream",
     "compile:sc": "lerna run compile:sc",
     "deploy:sc": "lerna run deploy:sc",
@@ -46,6 +47,7 @@
     "i18next-parser": "1.0.0-beta37",
     "jest": "24.9.0",
     "lerna": "3.19.0",
+    "nodemon": "^2.0.2",
     "prettier": "1.19.1",
     "pretty-quick": "2.0.1",
     "react": "16.12.0",

diff --git a/ui/design/package.json b/ui/design/package.json
@@ -33,7 +33,13 @@
     "tsc": "tsc --build",
     "prepare": "npm run tsc",
     "pack": "NODE_OPTIONS='--max-old-space-size=4096' webpack --config webpack.config.js",
-    "postpack": "copyfiles -f ./dist/*design-system.* ../build/"
+    "postpack": "copyfiles -f ./dist/*design-system.* ../build/",
+    "pack:watch": "nodemon"
+  },
+  "nodemonConfig": {
+    "ignore": ["lib/*", "dist/*", "build/*"],
+    "exec": "npm run pack",
+    "ext": "ts,tsx"
   },
   "eslintConfig": {
     "extends": "react-app"

diff --git a/ui/design/src/components/Buttons/icon-buttons/styled-icon-button.tsx b/ui/design/src/components/Buttons/icon-buttons/styled-icon-button.tsx
@@ -11,7 +11,7 @@ export interface IIconButtonProps {
 }
 
 const StyledIconButton = styled(Button)<IIconButtonProps>`
-  height: 22px;
+  height: 1.375em;
   border-radius: ${props => props.theme.shapes.largeBorderRadius};
   border: none;
   padding: 0 0.8em;

diff --git a/ui/design/src/components/Buttons/icon-buttons/styled-icon-link.tsx b/ui/design/src/components/Buttons/icon-buttons/styled-icon-link.tsx
@@ -19,7 +19,7 @@ const StyledIconLink = styled(Anchor)<ILinkIconButtonProps>`
   }
   svg {
     height: 100%;
-    width: 20px;
+    width: 1.25em;
     stroke: ${props => props.theme.colors.lightGrey};
     & * {
       stroke: ${props => props.theme.colors.secondaryText};

diff --git a/ui/design/src/components/Cards/entry-cards/styled-entry-box.ts b/ui/design/src/components/Cards/entry-cards/styled-entry-box.ts
@@ -2,15 +2,15 @@ import { Box, Drop } from 'grommet';
 import styled from 'styled-components';
 
 const StyledLayerElemDiv = styled.div`
-  border-radius: ${props => props.theme.shapes.borderRadius}
-  padding: ${props => `${props.theme.shapes.baseSpacing * 3}px`}
-  border: 1px solid ${props => props.theme.colors.border}
-  margin-bottom: ${props => `${props.theme.shapes.baseSpacing * 3}px`}
+  border-radius: ${props => props.theme.shapes.borderRadius};
+  padding: ${props => `${props.theme.shapes.baseSpacing * 3}px`};
+  border: 1px solid ${props => props.theme.colors.border};
+  margin-bottom: ${props => `${props.theme.shapes.baseSpacing * 3}px`};
 `;
 
 const StyledDrop = styled(Drop)`
-  margin-top: -10px;
-  margin-left: 25px;
+  margin-top: -0.625em;
+  margin-left: 1.563em;
   border-radius: ${props => props.theme.shapes.smallBorderRadius};
 `;
 

diff --git a/ui/design/src/components/Cards/profile-cards/profile-widget-card.tsx b/ui/design/src/components/Cards/profile-cards/profile-widget-card.tsx
@@ -56,12 +56,12 @@ const ProfileWidgetCard: React.FC<IProfileWidgetCard> = props => {
   return (
     <BasicCardBox className={className}>
       <Box
-        height="88px"
+        height="5.5em"
         background={profileData.coverImage}
         pad="none"
         round={{ corner: 'top', size: 'xsmall' }}
       />
-      <Box height="56px" direction="row" pad={{ left: '14px', right: 'medium' }}>
+      <Box height="3.5em" direction="row" pad={{ left: '.875em', right: 'medium' }}>
         <AvatarDiv>
           <Avatar
             withBorder={true}
@@ -81,7 +81,7 @@ const ProfileWidgetCard: React.FC<IProfileWidgetCard> = props => {
         </Box>
       </Box>
       <Box
-        height="72px"
+        height="4.5em"
         border={{ color: 'border', size: 'xsmall', style: 'solid', side: 'bottom' }}
         margin={{ horizontal: 'medium' }}
         direction="row"

diff --git a/ui/design/src/components/Input/comment-input/comment-input.tsx b/ui/design/src/components/Input/comment-input/comment-input.tsx
@@ -49,7 +49,7 @@ const CommentInput: React.FC<ICommentInput> = props => {
         fill="horizontal"
         direction="row"
         align="center"
-        height="40px"
+        height="2.5em"
         pad={{ horizontal: 'small', vertical: 'xsmall' }}
         round="small"
         border={{

diff --git a/ui/design/src/components/Input/search-input/content/search-input-apps.tsx b/ui/design/src/components/Input/search-input/content/search-input-apps.tsx
@@ -24,7 +24,7 @@ const SearchInputApps: React.FC<ISearchInputAppsProps> = props => {
           onClick={() => onClickApp(name)}
           key={index}
           round={{ size: 'xxsmall' }}
-          height="40px"
+          height="2.5em"
           justify="center"
         >
           <Box
@@ -37,7 +37,7 @@ const SearchInputApps: React.FC<ISearchInputAppsProps> = props => {
               horizontal: 'small',
             }}
           >
-            <Image width="32px" height="32px" src={imageUrl} style={{ borderRadius: '100%' }} />
+            <Image width="2em" height="2em" src={imageUrl} style={{ borderRadius: '100%' }} />
             <Text size="large">{name}</Text>
           </Box>
         </StyledSelectBox>

diff --git a/ui/design/src/components/Input/search-input/content/search-input-tags.tsx b/ui/design/src/components/Input/search-input/content/search-input-tags.tsx
@@ -24,7 +24,7 @@ const SearchInputTags: React.FC<ISearchInputTagsProps> = props => {
           onClick={() => onClickTag(tag)}
           key={index}
           round={{ size: 'xxsmall' }}
-          height="40px"
+          height="2.5em"
           justify="center"
         >
           <Box

diff --git a/ui/design/src/components/Input/search-input/content/search-input-users.tsx b/ui/design/src/components/Input/search-input/content/search-input-users.tsx
@@ -24,7 +24,7 @@ const SearchInputUsers: React.FC<ISearchInputUsersProps> = props => {
           onClick={() => onClickUser(name)}
           key={index}
           round={{ size: 'xxsmall' }}
-          height="40px"
+          height="2.5em"
           justify="center"
         >
           <Box
@@ -37,7 +37,7 @@ const SearchInputUsers: React.FC<ISearchInputUsersProps> = props => {
               horizontal: 'small',
             }}
           >
-            <Image width="32px" height="32px" src={imageUrl} style={{ borderRadius: '100%' }} />
+            <Image width="2em" height="2em" src={imageUrl} style={{ borderRadius: '100%' }} />
             <Text size="large">{name}</Text>
           </Box>
         </StyledSelectBox>

diff --git a/ui/design/src/components/Input/search-input/styled-search-input.ts b/ui/design/src/components/Input/search-input/styled-search-input.ts
@@ -18,13 +18,13 @@ const StyledSelectBox = styled(Box)<BoxProps>`
 `;
 
 const StyledDrop = styled(Drop)<DropProps>`
-  margin-top: 5px;
+  margin-top: 0.313em;
   border-radius: ${props => props.theme.shapes.largeBorderRadius};
 `;
 
 const StyledTextInput = styled(TextInput)<TextInputProps>`
   padding: 0;
-  height: 23px;
+  height: 1.438em;
 
   ${props => css`
     font-family: ${props.theme.shapes.fontFamily};
@@ -58,7 +58,7 @@ const StyledTab = styled(Tab)<TabProps>`
       margin: 0;
       border-bottom: 1px solid ${props.theme.colors.lightGrey};
       text-align: center;
-      padding: 12px 0;
+      padding: 0.75em 0;
 
       > span {
         font-family: ${props.theme.shapes.fontFamily};

diff --git a/ui/design/src/components/Modals/list/list-modal.tsx b/ui/design/src/components/Modals/list/list-modal.tsx
@@ -49,9 +49,9 @@ const ListModal: React.FC<IlistModal> = props => {
   };
   return (
     <StyledLayer onEsc={closeModal} onClickOutside={closeModal} modal={true} className={className}>
-      <Box pad="none" width="579px" height="386px">
+      <Box pad="none" width="36em" height="24em">
         <Box pad="medium" justify="between" direction="row" align="center">
-          <TextIcon iconType={iconType} label={label} margin={{ right: '40px' }} />
+          <TextIcon iconType={iconType} label={label} margin={{ right: '2.5em' }} />
           <Text size="large" color="secondaryText">
             {secondaryLabel}
           </Text>

diff --git a/ui/design/src/components/Popovers/emoji/styled-emoji-popover.ts b/ui/design/src/components/Popovers/emoji/styled-emoji-popover.ts
@@ -2,7 +2,7 @@ import { Box, Drop, Text } from 'grommet';
 import styled from 'styled-components';
 
 const StyledContentDiv = styled.div`
-  height: 200px;
+  height: 12.5em;
   overflow: auto;
   display: flex;
   flex-direction: column;
@@ -16,22 +16,22 @@ const StyledList = styled.div`
 
 const StyledListElem = styled.span`
   cursor: pointer;
-  font-size: 20px;
-  width: 32px;
-  height: 32px;
+  font-size: 1.25em;
+  width: 2em;
+  height: 2em;
   text-align: center;
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: ${props => props.theme.shapes.smallBorderRadius}
+  border-radius: ${props => props.theme.shapes.smallBorderRadius};
   :hover {
-    background-color: rgba(78,113,255,0.2);
+    background-color: rgba(78, 113, 255, 0.2);
   }
 `;
 
 const StyledFooter = styled(Box)`
   background-color: ${props => props.theme.colors.lightBackground};
-  height: 56px;
+  height: 3.5em;
 `;
 
 const StyledCategoryContainer = styled.div`
@@ -41,23 +41,23 @@ const StyledCategoryContainer = styled.div`
 
 const StyledSearchContainer = styled.div`
   margin: ${props => `${props.theme.shapes.baseSpacing}px ${props.theme.shapes.baseSpacing * 3}px`};
-  height: 48px;
+  height: 3em;
 `;
 
 const StyledEmojiDrop = styled(Drop)`
-  width: 350px;
-  margin-top: 5px;
-  margin-left: -25px;
+  width: 21.875em;
+  margin-top: 0.313em;
+  margin-left: -1.563em;
   border-radius: ${props => props.theme.shapes.largeBorderRadius};
 `;
 
 const StyledHoveredEmoji = styled.div`
-  padding: ${props => `0 ${props.theme.shapes.baseSpacing * 3}px`}
-  font-size: 20px;
+  padding: ${props => `0 ${props.theme.shapes.baseSpacing * 3}px`};
+  font-size: 1.25em;
 `;
 
 const StyledHoveredEmojiName = styled.div`
-padding: ${props => `0 ${props.theme.shapes.baseSpacing * 3}px 0 0`}
+  padding: ${props => `0 ${props.theme.shapes.baseSpacing * 3}px 0 0`};
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;

diff --git a/ui/design/src/components/Popovers/image/styled-image-popover.ts b/ui/design/src/components/Popovers/image/styled-image-popover.ts
@@ -2,15 +2,15 @@ import { Button, Drop, Tab, Text } from 'grommet';
 import styled, { css } from 'styled-components';
 
 const StyledDrop = styled(Drop)`
-  height: 220px;
-  width: 350px;
-  margin-top: 5px;
+  height: 13.75em;
+  width: 21.875em;
+  margin-top: 0.313em;
   border-radius: ${props => props.theme.shapes.largeBorderRadius};
 `;
 
 const StyledInputDiv = styled.div`
-  height: 130px;
-  width: 318px;
+  height: 8.125em;
+  width: 19.875em;
   background-color: ${props => props.theme.colors.lightBackground};
   border: 1px dashed ${props => props.theme.colors.mediumGrey};
   border-radius: ${props => props.theme.shapes.borderRadius};
@@ -21,7 +21,7 @@ const StyledInputDiv = styled.div`
 `;
 
 const StyledText = styled(Text)`
-  padding: 0 50px;
+  padding: 0 3.125em;
   text-align: center;
 `;
 
@@ -35,8 +35,8 @@ const StyledImageInput = styled.input`
 `;
 
 const StyledImg = styled.img`
-  height: 48px;
-  width: 48px;
+  height: 3em;
+  width: 3em;
 `;
 
 const StyledTab = styled(Tab)`
@@ -47,7 +47,7 @@ const StyledTab = styled(Tab)`
       margin: 0;
       border-bottom: 1px solid ${props.theme.colors.border};
       text-align: center;
-      padding: 12px 0;
+      padding: 0.75em 0;
 
       > span {
         font-family: ${props.theme.shapes.fontFamily};

diff --git a/ui/design/src/components/Popovers/notifications/notifications-popover.tsx b/ui/design/src/components/Popovers/notifications/notifications-popover.tsx
@@ -23,7 +23,12 @@ export interface INotification {
 const NotificationsPopover: React.FC<INotificationsPopover> = props => {
   const { className, closePopover, dataSource, onClickNotification, target } = props;
   return (
-    <BasicPopover closePopover={closePopover} target={target} gap={'-5px'} className={className}>
+    <BasicPopover
+      closePopover={closePopover}
+      target={target}
+      gap={'-0.313em'}
+      className={className}
+    >
       <StyledListContainer pad={{ vertical: 'small', horizontal: 'xxsmall' }} overflow="scroll">
         {dataSource &&
           dataSource.map((notification, index) => (

diff --git a/ui/design/src/components/Popovers/notifications/styled-notifications-popover.ts b/ui/design/src/components/Popovers/notifications/styled-notifications-popover.ts
@@ -19,7 +19,7 @@ const StyledListElem = styled.div`
         cursor: pointer;
       }
       border-radius: ${props.theme.shapes.borderRadius}
-      height: 49px;
+      height: 3em;
       display: flex;
       align-items: center;
     `}

diff --git a/ui/design/src/components/Spinner/index.tsx b/ui/design/src/components/Spinner/index.tsx
@@ -6,7 +6,7 @@ const Wrapper = styled.div<{ minHeight: number }>`
   display: flex;
   min-height: ${props => props.minHeight}px;
   justify-content: center;
-  padding: 10px 0 0 0;
+  padding: 0.625em 0 0 0;
 `;
 
 const rotator = keyframes`

diff --git a/ui/design/src/components/TextIcon/subtitle-text/styled-subtitle-text-icon.ts b/ui/design/src/components/TextIcon/subtitle-text/styled-subtitle-text-icon.ts
@@ -7,8 +7,8 @@ export interface IIconDiv {
 
 const IconDiv = styled.div<IIconDiv>`
   ${props => {
-    const size = props.iconSize ? props.iconSize : '28px';
-    const radius = props.iconSize ? '100%' : '14px';
+    const size = props.iconSize ? props.iconSize : '1.75em';
+    const radius = props.iconSize ? '100%' : '0.875em';
     return css`
       border-radius: ${radius};
       width: ${size};

diff --git a/ui/design/src/components/TextIcon/title-text/styled-text-icon.ts b/ui/design/src/components/TextIcon/title-text/styled-text-icon.ts
@@ -23,7 +23,7 @@ const StyledTextIcon = styled.div<ITextIconProps>`
 
     return css`
       & > *:first-child {
-        margin-right: ${spacing ? spacing : '10px'};
+        margin-right: ${spacing ? spacing : '0.625em'};
       }
       background-color: ${backgroundColor ? backgroundColor : ''};
       color: ${color ? color : colors.dark};