fix: prevent image card from growing to much
This commit is contained in:
parent
33d3d4343d
commit
d591d93547
@ -2,7 +2,7 @@ import React, { Fragment } from 'react';
|
|||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import { Field } from 'redux-form';
|
import { Field } from 'redux-form';
|
||||||
import Flex from 'styled-flex-component';
|
import Flex, { FlexItem } from 'styled-flex-component';
|
||||||
import { Padding, Margin } from 'styled-components-spacing';
|
import { Padding, Margin } from 'styled-components-spacing';
|
||||||
import remcalc from 'remcalc';
|
import remcalc from 'remcalc';
|
||||||
|
|
||||||
@ -56,7 +56,6 @@ const Content = styled(Padding)`
|
|||||||
|
|
||||||
const Max = styled(Flex)`
|
const Max = styled(Flex)`
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
height: 100%;
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Actions = styled(Flex)`
|
const Actions = styled(Flex)`
|
||||||
@ -75,6 +74,7 @@ const PopoverDivider = styled(BasePopoverDivider)`
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
|
||||||
export const Image = ({
|
export const Image = ({
|
||||||
name,
|
name,
|
||||||
id,
|
id,
|
||||||
@ -97,15 +97,19 @@ export const Image = ({
|
|||||||
<CardHeader white radius>
|
<CardHeader white radius>
|
||||||
<Padding left={2} right={2}>
|
<Padding left={2} right={2}>
|
||||||
<Flex full alignCenter>
|
<Flex full alignCenter>
|
||||||
|
<FlexItem>
|
||||||
<Margin right={2}>
|
<Margin right={2}>
|
||||||
{React.createElement(OS[os], {
|
{React.createElement(OS[os], {
|
||||||
width: '24',
|
width: '24',
|
||||||
height: '24'
|
height: '24'
|
||||||
})}
|
})}
|
||||||
</Margin>
|
</Margin>
|
||||||
|
</FlexItem>
|
||||||
|
<FlexItem>
|
||||||
<A to={`/images/${id}/summary`} component={Link}>
|
<A to={`/images/${id}/summary`} component={Link}>
|
||||||
{name}
|
{name}
|
||||||
</A>
|
</A>
|
||||||
|
</FlexItem>
|
||||||
</Flex>
|
</Flex>
|
||||||
</Padding>
|
</Padding>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
|
@ -42,9 +42,6 @@ export const List = ({
|
|||||||
handleRemove
|
handleRemove
|
||||||
}) => (
|
}) => (
|
||||||
<ViewContainer main>
|
<ViewContainer main>
|
||||||
<Margin top={5}>
|
|
||||||
<H3>Images</H3>
|
|
||||||
</Margin>
|
|
||||||
<Margin top={4}>
|
<Margin top={4}>
|
||||||
<ReduxForm form={LIST_TOOLBAR_FORM}>
|
<ReduxForm form={LIST_TOOLBAR_FORM}>
|
||||||
{props => <ToolbarForm {...props} actionable={!loading} />}
|
{props => <ToolbarForm {...props} actionable={!loading} />}
|
||||||
|
@ -576,7 +576,6 @@ exports[`renders <AddForm /> without throwing 1`] = `
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
height: auto;
|
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-top: 0px;
|
border-top: 0px;
|
||||||
border-left: 0px;
|
border-left: 0px;
|
||||||
@ -1639,7 +1638,6 @@ exports[`renders <EditForm /> without throwing 1`] = `
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
height: auto;
|
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-top: 0px;
|
border-top: 0px;
|
||||||
border-left: 0px;
|
border-left: 0px;
|
||||||
|
@ -1133,7 +1133,6 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
height: auto;
|
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-top: 0px;
|
border-top: 0px;
|
||||||
border-left: 0px;
|
border-left: 0px;
|
||||||
@ -3657,7 +3656,6 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
height: auto;
|
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-top: 0px;
|
border-top: 0px;
|
||||||
border-left: 0px;
|
border-left: 0px;
|
||||||
|
@ -1201,7 +1201,6 @@ exports[`renders <Networks networks /> without throwing 1`] = `
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
height: auto;
|
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-top: 0px;
|
border-top: 0px;
|
||||||
border-left: 0px;
|
border-left: 0px;
|
||||||
@ -1214,7 +1213,6 @@ exports[`renders <Networks networks /> without throwing 1`] = `
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
height: auto;
|
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-top: 0px;
|
border-top: 0px;
|
||||||
border-left: 0px;
|
border-left: 0px;
|
||||||
|
@ -1195,7 +1195,6 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
height: auto;
|
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-top: 0px;
|
border-top: 0px;
|
||||||
border-left: 0px;
|
border-left: 0px;
|
||||||
@ -2931,7 +2930,6 @@ exports[`renders <Tags editing /> without throwing 1`] = `
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
height: auto;
|
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-top: 0px;
|
border-top: 0px;
|
||||||
border-left: 0px;
|
border-left: 0px;
|
||||||
@ -4342,7 +4340,6 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
height: auto;
|
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-top: 0px;
|
border-top: 0px;
|
||||||
border-left: 0px;
|
border-left: 0px;
|
||||||
|
@ -238,7 +238,6 @@ exports[`renders <Network /> without throwing 1`] = `
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
height: auto;
|
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-top: 0px;
|
border-top: 0px;
|
||||||
border-left: 0px;
|
border-left: 0px;
|
||||||
@ -1119,7 +1118,6 @@ exports[`renders <Network {...network} /> without throwing 1`] = `
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
height: auto;
|
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-top: 0px;
|
border-top: 0px;
|
||||||
border-left: 0px;
|
border-left: 0px;
|
||||||
@ -2013,7 +2011,6 @@ exports[`renders <Network {...network} /> without throwing 3`] = `
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
height: auto;
|
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-top: 0px;
|
border-top: 0px;
|
||||||
border-left: 0px;
|
border-left: 0px;
|
||||||
@ -2944,7 +2941,6 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
height: auto;
|
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-top: 0px;
|
border-top: 0px;
|
||||||
border-left: 0px;
|
border-left: 0px;
|
||||||
@ -2957,7 +2953,6 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
height: auto;
|
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-top: 0px;
|
border-top: 0px;
|
||||||
border-left: 0px;
|
border-left: 0px;
|
||||||
@ -4092,7 +4087,6 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
height: auto;
|
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-top: 0px;
|
border-top: 0px;
|
||||||
border-left: 0px;
|
border-left: 0px;
|
||||||
@ -5359,7 +5353,6 @@ exports[`renders <Network {...network} public /> without throwing 1`] = `
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
height: auto;
|
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-top: 0px;
|
border-top: 0px;
|
||||||
border-left: 0px;
|
border-left: 0px;
|
||||||
|
@ -59,7 +59,6 @@ exports[`Card Card With Header 1`] = `
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
height: auto;
|
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-top: 0px;
|
border-top: 0px;
|
||||||
border-left: 0px;
|
border-left: 0px;
|
||||||
|
@ -12,7 +12,6 @@ const BaseHeader = styled(BaseCard)`
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
line-height: ${remcalc(24)};
|
line-height: ${remcalc(24)};
|
||||||
height: auto;
|
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-top: 0px;
|
border-top: 0px;
|
||||||
border-left: 0px;
|
border-left: 0px;
|
||||||
|
@ -310,7 +310,6 @@ exports[`renders <KeyValue /> without throwing 1`] = `
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
height: auto;
|
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-top: 0px;
|
border-top: 0px;
|
||||||
border-left: 0px;
|
border-left: 0px;
|
||||||
@ -1114,7 +1113,6 @@ exports[`renders <KeyValue expanded={false} /> without throwing 1`] = `
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
height: auto;
|
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-top: 0px;
|
border-top: 0px;
|
||||||
border-left: 0px;
|
border-left: 0px;
|
||||||
@ -1522,7 +1520,6 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
height: auto;
|
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-top: 0px;
|
border-top: 0px;
|
||||||
border-left: 0px;
|
border-left: 0px;
|
||||||
@ -2473,7 +2470,6 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
height: auto;
|
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-top: 0px;
|
border-top: 0px;
|
||||||
border-left: 0px;
|
border-left: 0px;
|
||||||
@ -3589,7 +3585,6 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
height: auto;
|
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-top: 0px;
|
border-top: 0px;
|
||||||
border-left: 0px;
|
border-left: 0px;
|
||||||
@ -4587,7 +4582,6 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
height: auto;
|
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-top: 0px;
|
border-top: 0px;
|
||||||
border-left: 0px;
|
border-left: 0px;
|
||||||
@ -5599,7 +5593,6 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
height: auto;
|
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-top: 0px;
|
border-top: 0px;
|
||||||
border-left: 0px;
|
border-left: 0px;
|
||||||
@ -6679,7 +6672,6 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
height: auto;
|
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-top: 0px;
|
border-top: 0px;
|
||||||
border-left: 0px;
|
border-left: 0px;
|
||||||
@ -7816,7 +7808,6 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
height: auto;
|
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-top: 0px;
|
border-top: 0px;
|
||||||
border-left: 0px;
|
border-left: 0px;
|
||||||
|
Loading…
Reference in New Issue
Block a user