Responsive labels (#995)

* Responsive labels

* Closing

* Update media.ts

* Remove errant log

packages/apps/src/Apps.tsx

@@ -7,6 +7,8 @@ import { SideBarTransition, SIDEBAR_TRANSITION_DURATION, SIDEBAR_MENU_THRESHOLD
 
 import React from 'react';
 import store from 'store';
+import styled, { ThemeProvider } from 'styled-components';
+import { media } from '@polkadot/ui-app';
 import { classes } from '@polkadot/ui-app/util';
 import Signer from '@polkadot/ui-signer';
 import settings from '@polkadot/ui-settings';
@@ -17,9 +19,6 @@ import Connecting from './Connecting';
 import Content from './Content';
 import SideBar from './SideBar';
 
-import styled, { ThemeProvider } from 'styled-components';
-import { media } from '@polkadot/ui-app/media';
-
 type Props = BareProps & {};
 
 type State = {
@@ -38,6 +37,7 @@ const Wrapper = styled.div`
   header {
     margin-bottom: 0.8rem;
     text-align: center;
+
     ${media.TABLET`
       margin-bottom: 1.1rem;
    `}

packages/apps/src/SideBar/index.tsx

@@ -8,8 +8,11 @@ import { SIDEBAR_MENU_THRESHOLD } from '../constants';
 import './SideBar.css';
 
 import React from 'react';
-import { Button, Icon, Menu } from '@polkadot/ui-app';
+import styled from 'styled-components';
+import { Responsive } from 'semantic-ui-react';
+import { Button, Icon, Menu, media } from '@polkadot/ui-app';
 import { classes } from '@polkadot/ui-app/util';
+import { logoBackground, logoPadding } from '@polkadot/ui-app/styles/theme';
 
 import routing from '../routing';
 import translate from '../translate';
@@ -17,11 +20,6 @@ import Item from './Item';
 import NodeInfo from './NodeInfo';
 import getLogo from './logos';
 
-import styled from 'styled-components';
-import { media } from '@polkadot/ui-app/media';
-import { Responsive } from 'semantic-ui-react';
-import { logoBackground, logoPadding } from '@polkadot/ui-app/styles/theme';
-
 type Props = I18nProps & {
   collapse: () => void,
   handleResize: () => void,

packages/ui-app/src/AddressMini.tsx

@@ -66,8 +66,6 @@ export default class AddressMini extends React.PureComponent<Props> {
 
     const name = getAddrName(address);
 
-    console.error('address', address, name);
-
     return (
       <div className={`ui--AddressMini-address ${name ? 'withName' : 'withAddr'}`}>{
          name || (

packages/ui-app/src/Labelled.tsx

@@ -8,6 +8,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 import Icon from './Icon';
+import media from './media';
 import { classes } from './util';
 
 type Props = BareProps & {
@@ -24,37 +25,12 @@ const defaultLabel: any = (// node?
 );
 
 const Wrapper = styled.div`
-  align-items: flex-start;
-  display: flex;
-  flex: 1 1;
-  text-align: left;
-
-  &.label-small {
-    display: block;
-
-    > label {
-      margin: 0;
-      min-width: 0;
-      padding-right: 0;
-    }
-  }
-
-  > .ui--Labelled-content {
-    box-sizing: border-box;
-    flex: 1 1;
-    min-width: 0;
-  }
+  display: block;
 
   > label {
-    align-items: center;
-    display: flex;
-    flex: 0 0 15rem;
-    justify-content: flex-end;
-    min-height: 2.715rem; /* more-or-less 2 lines with adjustments, 38px as per input box */
-    min-width: 15rem;
+    margin: 0.25rem 0 0 0;
     padding-right: 0.5rem;
     position: relative;
-    text-align: right;
     z-index: 1;
 
     .help-hover {
@@ -80,6 +56,40 @@ const Wrapper = styled.div`
       display: block;
     }
   }
+
+  &.label-small {
+    display: block;
+
+    > label {
+      margin: 0;
+      min-width: 0;
+      padding-right: 0;
+    }
+  }
+
+  > .ui--Labelled-content {
+    box-sizing: border-box;
+    flex: 1 1;
+    min-width: 0;
+  }
+
+  ${media.DESKTOP`
+    align-items: flex-start;
+    display: flex;
+    flex: 1 1;
+    margin: 0;
+    text-align: left;
+
+    > label {
+      align-items: center;
+      display: flex;
+      flex: 0 0 15rem;
+      justify-content: flex-end;
+      min-height: 2.715rem; /* more-or-less 2 lines with adjustments, 38px as per input box */
+      min-width: 15rem;
+      text-align: right;
+    }
+  `}
 `;
 
 export default class Labelled extends React.PureComponent<Props> {

packages/ui-app/src/index.tsx

@@ -40,3 +40,5 @@ export { default as Status } from './Status';
 export { default as SummaryBox } from './SummaryBox';
 export { default as Tabs } from './Tabs';
 export { default as TxButton } from './TxButton';
+
+export { default as media } from './media';

packages/ui-app/src/media.ts

@@ -5,15 +5,23 @@
 import { css } from 'styled-components';
 import { ScreenSizes } from './constants';
 
-export const media: any = Object
- .keys(ScreenSizes)
- .reduce((acc: any, label: any) => {
-   let size: any = ScreenSizes[label];
-   acc[label] = (...args: any) => (
-    css`
-     @media ( min-width: ${size / 16}em) {
-      ${css`${{ ...args }}`}
-     }
-    `);
-   return acc;
- }, {});
+type MediaCss = {
+  [index in keyof typeof ScreenSizes]: (values: TemplateStringsArray) => any
+};
+
+const media = Object
+  .keys(ScreenSizes)
+  .reduce((acc, label: any) => {
+    const size: number = ScreenSizes[label] as any;
+
+    acc[label] = (values: TemplateStringsArray) =>
+      css`
+        @media (min-width: ${size / 16}em) {
+          ${values}
+        }
+      `;
+
+    return acc;
+  }, {} as MediaCss);
+
+export default media;