From a2f46dd5514ca4cc2cfc10921c5e366564cf5f5a Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Fri, 12 Apr 2019 14:51:29 +0200 Subject: [PATCH] Responsive labels (#995) * Responsive labels * Closing * Update media.ts * Remove errant log --- packages/apps/src/Apps.tsx | 6 +-- packages/apps/src/SideBar/index.tsx | 10 ++--- packages/ui-app/src/AddressMini.tsx | 2 - packages/ui-app/src/Labelled.tsx | 64 +++++++++++++++++------------ packages/ui-app/src/index.tsx | 2 + packages/ui-app/src/media.ts | 32 +++++++++------ 6 files changed, 66 insertions(+), 50 deletions(-) diff --git a/packages/apps/src/Apps.tsx b/packages/apps/src/Apps.tsx index 9b05a3e5a0..c602a3ef0d 100644 --- a/packages/apps/src/Apps.tsx +++ b/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; `} diff --git a/packages/apps/src/SideBar/index.tsx b/packages/apps/src/SideBar/index.tsx index 5c7a0ecaf4..e67c33823e 100644 --- a/packages/apps/src/SideBar/index.tsx +++ b/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, diff --git a/packages/ui-app/src/AddressMini.tsx b/packages/ui-app/src/AddressMini.tsx index 5ec222358f..e04aca0fdb 100644 --- a/packages/ui-app/src/AddressMini.tsx +++ b/packages/ui-app/src/AddressMini.tsx @@ -66,8 +66,6 @@ export default class AddressMini extends React.PureComponent { const name = getAddrName(address); - console.error('address', address, name); - return (
{ name || ( diff --git a/packages/ui-app/src/Labelled.tsx b/packages/ui-app/src/Labelled.tsx index 1859584efe..f92e8e045c 100644 --- a/packages/ui-app/src/Labelled.tsx +++ b/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 { diff --git a/packages/ui-app/src/index.tsx b/packages/ui-app/src/index.tsx index 517fc3abe3..ec062bad3f 100644 --- a/packages/ui-app/src/index.tsx +++ b/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'; diff --git a/packages/ui-app/src/media.ts b/packages/ui-app/src/media.ts index 48221c41e2..43ad869753 100644 --- a/packages/ui-app/src/media.ts +++ b/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;