diff --git a/packages/instance-steps/src/package/components.js b/packages/instance-steps/src/package/components.js
index a0a00232..4e05d2f7 100644
--- a/packages/instance-steps/src/package/components.js
+++ b/packages/instance-steps/src/package/components.js
@@ -14,13 +14,13 @@ import {
FormGroup,
Card,
Button,
- TableTh,
+ TableTh as BaseTableTh,
TableTr,
- TableThead,
+ TableThead as BaseTableThead,
Divider,
TableTbody,
Table,
- TableTd,
+ TableTd as BaseTableTd,
Radio,
Checkbox,
FormLabel,
@@ -31,6 +31,7 @@ import {
} from 'joyent-ui-toolkit';
import { NoPackages } from 'joyent-logo-assets';
+import { breakpoints } from 'joyent-ui-toolkit/dist/es/breakpoints/screens';
const GroupIcons = {
MEMORY: ,
@@ -60,6 +61,67 @@ const FullWidthCard = styled(Card)`
`};
`;
+const TableThead = styled(BaseTableThead)`
+ ${is('smallScreen')`
+ background-color: transparent;
+ `};
+`;
+
+const TableTh = styled(BaseTableTh)`
+ @media only screen and (min-width: ${remcalc(
+ breakpoints.medium.lower
+ )}) and (max-width: ${remcalc(700)}) {
+ &:not(:first-child) {
+ width: auto;
+ }
+ padding: 0 ${remcalc(3)};
+ }
+
+ ${is('smallScreen')`
+ border: none;
+ color: #979797;
+ font-size: ${remcalc(13)};
+ height: auto;
+ padding: 0;
+ `};
+`;
+
+const TableTd = styled(BaseTableTd)`
+ @media only screen and (min-width: ${remcalc(
+ breakpoints.medium.lower
+ )}) and (max-width: ${remcalc(700)}) {
+ &:not(:first-child) {
+ width: auto;
+ }
+ padding: 0 ${remcalc(3)};
+ }
+
+ ${is('smallScreen')`
+ border: none;
+ font-size: ${remcalc(15)};
+ height: auto;
+ padding: ${remcalc(4)} 0;
+ `};
+`;
+
+const FormItem = styled('form')`
+ border: 1px solid #d8d8d8;
+ border-radius: 4px;
+
+ ${is('selected')`
+ border-color: #3B46CC;
+ background-color: rgba(59,70,204,0.05);
+ `};
+`;
+
+const PackageSpecs = styled('div')`
+ border-top: 1px solid #d8d8d8;
+
+ ${is('selected')`
+ border-color: #3B46CC;
+ `};
+`;
+
export const Filters = ({ onResetFilters }) => (
@@ -142,48 +204,143 @@ export const Package = ({
ssd,
hasVms,
sortBy,
- onRowClick
-}) => (
- onRowClick(id)}>
-
-
-
-
-
- {GroupIcons[group]}
-
-
-
- {name}
-
-
-
-
-
-
-
- {bytes(memory, { decimalPlaces: 0, unitSeparator: ' ' })}
-
-
-
- {bytes(disk, { decimalPlaces: 0, unitSeparator: ' ' })}
-
- {ssd && SSD}
-
- {hasVms && (
-
- {vcpus}
+ onRowClick,
+ xs
+}) => {
+ return xs ? (
+
+ onRowClick(id)}>
+
+
+
+
+ {GroupIcons[group]}
+
+
+
+ {`${name} `}
+ {ssd && SSD}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ RAM
+
+
+
+
+ Disk
+
+
+ {hasVms && (
+
+
+ vCPU
+
+
+ )}
+
+
+ $/hour
+
+
+
+
+
+ onRowClick(id)}>
+
+ {bytes(memory, { decimalPlaces: 0, unitSeparator: ' ' })}
+
+
+
+ {bytes(disk, { decimalPlaces: 0, unitSeparator: ' ' })}
+
+
+ {hasVms && (
+
+ {vcpus}
+
+ )}
+
+ {fourDecimals(price)}
+
+
+
+
+
+
+
+ ) : (
+ onRowClick(id)}>
+
+
+
+
+
+ {GroupIcons[group]}
+
+
+
+ {name}
+
+
+
+
+
- )}
-
- {fourDecimals(price)}
-
-
-);
+
+ {bytes(memory, { decimalPlaces: 0, unitSeparator: ' ' })}
+
+
+
+ {bytes(disk, { decimalPlaces: 0, unitSeparator: ' ' })}
+
+ {ssd && SSD}
+
+ {hasVms && (
+
+ {vcpus}
+
+ )}
+
+ {fourDecimals(price)}
+
+
+ );
+};
export const Packages = ({
pristine,
diff --git a/packages/instance-steps/src/package/index.js b/packages/instance-steps/src/package/index.js
index e4f84481..0184b211 100644
--- a/packages/instance-steps/src/package/index.js
+++ b/packages/instance-steps/src/package/index.js
@@ -27,6 +27,9 @@ import { Filters, Packages, Package, Overview } from './components';
import getPackages from '../graphql/get-packages.gql';
import priceData from './prices.json';
import { Forms, Values } from '../constants';
+import { QueryBreakpoints } from 'joyent-ui-toolkit';
+
+const { SmallOnly, Medium } = QueryBreakpoints;
const { IC_PKG_F_SELECT, IC_PKG_F_FILTER } = Forms;
@@ -84,14 +87,7 @@ const PackageComponent = ({
) : (
-
+
{packages.map(({ id, ...pkg }) => (
))}
-
+
+
+
+ {packages.map(({ id, ...pkg }) => (
+
+ ))}
+
+