mirror of
https://github.com/filecoin-project/slate.git
synced 2024-11-23 22:12:19 +03:00
mobile: prevent table distortions on mobile and smaller viewports
This commit is contained in:
jimmylee
parent
83872f3fe9
commit
1bcc40d26b
@ -38,6 +38,10 @@ const STYLES_HEADER = css`
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
display: none;
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_CONTENT = css`
|
||||
@ -84,7 +88,7 @@ const STYLES_NAVIGATION = css`
|
||||
|
||||
${STYLES_SCROLL}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
width: auto;
|
||||
}
|
||||
`;
|
||||
@ -109,7 +113,7 @@ const STYLES_SIDEBAR_WEB = css`
|
||||
|
||||
${STYLES_SCROLL}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
display: none;
|
||||
}
|
||||
`;
|
||||
|
||||
@ -9,7 +9,7 @@ const STYLES_SCENE = css`
|
||||
padding: 88px 48px 128px 48px;
|
||||
|
||||
@media (max-width: ${Constants.sizes.mobile}px) {
|
||||
padding: 88px 24px 128px 24px;
|
||||
padding: 104px 24px 128px 24px;
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
@ -6,6 +6,7 @@ import { css } from "@emotion/react";
|
||||
|
||||
const STYLES_SECTION = css`
|
||||
width: 100%;
|
||||
min-width: 960px;
|
||||
box-shadow: 0 0 0 1px ${Constants.system.gray}, 0 1px 4px rgba(0, 0, 0, 0.04);
|
||||
border-radius: 4px;
|
||||
font-weight: 400;
|
||||
@ -56,8 +57,7 @@ const STYLES_BUTTON = css`
|
||||
letter-spacing: 0.2px;
|
||||
font-family: ${Constants.font.semiBold};
|
||||
transition: 200ms ease all;
|
||||
box-shadow: 0 0 0 1px ${Constants.system.border},
|
||||
0 1px 4px rgba(0, 0, 0, 0.07);
|
||||
box-shadow: 0 0 0 1px ${Constants.system.border}, 0 1px 4px rgba(0, 0, 0, 0.07);
|
||||
cursor: pointer;
|
||||
background-color: ${Constants.system.white};
|
||||
color: ${Constants.system.black};
|
||||
@ -83,11 +83,7 @@ export default (props) => {
|
||||
<div css={STYLES_RIGHT}>
|
||||
{props.buttons.map((b) => {
|
||||
return (
|
||||
<span
|
||||
key={b.name}
|
||||
css={STYLES_BUTTON}
|
||||
onClick={() => props.onAction(b)}
|
||||
>
|
||||
<span key={b.name} css={STYLES_BUTTON} onClick={() => props.onAction(b)}>
|
||||
{b.name}
|
||||
</span>
|
||||
);
|
||||
|
||||
@ -1,3 +1,8 @@
|
||||
// TODO(jim):
|
||||
// Deprecate the Table component.
|
||||
|
||||
// NOTE(jim):
|
||||
// Only use the Table component for prototyping.
|
||||
import * as React from "react";
|
||||
import * as Constants from "~/common/constants";
|
||||
import * as Strings from "~/common/strings";
|
||||
@ -26,6 +31,7 @@ const STYLES_TABLE_EXPAND_SECTION = css`
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: 200ms ease all;
|
||||
|
||||
svg {
|
||||
transition: 200ms ease all;
|
||||
}
|
||||
@ -51,6 +57,7 @@ const STYLES_TABLE_ROW = css`
|
||||
border-bottom: 1px solid ${Constants.system.gray};
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
transition: 200ms ease all;
|
||||
|
||||
:last-child {
|
||||
@ -67,10 +74,10 @@ const STYLES_TABLE_SELECTED_ROW = css`
|
||||
const STYLES_TABLE_TOP_ROW = css`
|
||||
box-sizing: border-box;
|
||||
font-family: ${Constants.font.semiBold};
|
||||
width: 100%;
|
||||
padding: 0 8px 0 8px;
|
||||
border-bottom: 1px solid ${Constants.system.gray};
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: flex-start;
|
||||
`;
|
||||
|
||||
@ -124,11 +131,7 @@ export class Table extends React.Component {
|
||||
{this.props.noLabel ? null : (
|
||||
<div css={STYLES_TABLE_TOP_ROW}>
|
||||
{data.columns.map((c, cIndex) => {
|
||||
const text = c.hideLabel
|
||||
? ""
|
||||
: Strings.isEmpty(c.name)
|
||||
? c.key
|
||||
: c.name;
|
||||
const text = c.hideLabel ? "" : Strings.isEmpty(c.name) ? c.key : c.name;
|
||||
let localWidth = c.width ? c.width : width;
|
||||
let flexShrink = c.width && c.width !== "100%" ? "0" : null;
|
||||
if (cIndex === 0 && !c.width) {
|
||||
@ -144,15 +147,12 @@ export class Table extends React.Component {
|
||||
backgroundColor: ac[c.key].color,
|
||||
flexShrink,
|
||||
}}
|
||||
tooltip={c.tooltip}
|
||||
>
|
||||
tooltip={c.tooltip}>
|
||||
{text}
|
||||
</SubSystem.TableColumn>
|
||||
);
|
||||
})}
|
||||
{this.props.onClick ? (
|
||||
<div css={STYLES_TABLE_EXPAND_SECTION} />
|
||||
) : null}
|
||||
{this.props.onClick ? <div css={STYLES_TABLE_EXPAND_SECTION} /> : null}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -167,8 +167,7 @@ export class Table extends React.Component {
|
||||
const text = r[each];
|
||||
|
||||
let localWidth = field.width ? field.width : width;
|
||||
let flexShrink =
|
||||
field.width && field.width !== "100%" ? "0" : null;
|
||||
let flexShrink = field.width && field.width !== "100%" ? "0" : null;
|
||||
if (cIndex === 0 && !field.width) {
|
||||
localWidth = "100%";
|
||||
}
|
||||
@ -178,14 +177,11 @@ export class Table extends React.Component {
|
||||
key={`${each}-${i}-${cIndex}`}
|
||||
style={{
|
||||
width: localWidth,
|
||||
backgroundColor: this.props.noColor
|
||||
? null
|
||||
: field.color,
|
||||
backgroundColor: this.props.noColor ? null : field.color,
|
||||
flexShrink,
|
||||
}}
|
||||
contentStyle={field.contentStyle}
|
||||
copyable={field.copyable}
|
||||
>
|
||||
copyable={field.copyable}>
|
||||
<div style={field.style}>
|
||||
<SubSystem.TableContent
|
||||
data={r}
|
||||
@ -207,16 +203,14 @@ export class Table extends React.Component {
|
||||
alignItems: "center",
|
||||
alignSelf: "center",
|
||||
justifyContent: "flex-start",
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
<div
|
||||
css={STYLES_TABLE_EXPAND_SECTION}
|
||||
onClick={() => this._handleClick(r.id)}
|
||||
style={{
|
||||
cursor: r.children ? "pointer" : "default",
|
||||
display: "inline-flex",
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
{r.children ? (
|
||||
<SVG.Plus
|
||||
height="16px"
|
||||
|
||||
@ -65,10 +65,7 @@ export default class SceneFilesFolder extends React.Component {
|
||||
let rows = this.props.viewer.library[0].children.map((each) => {
|
||||
return {
|
||||
...each,
|
||||
button:
|
||||
each.networks && each.networks.includes("FILECOIN")
|
||||
? null
|
||||
: "Store on Filecoin",
|
||||
button: each.networks && each.networks.includes("FILECOIN") ? null : "Store on Filecoin",
|
||||
};
|
||||
});
|
||||
|
||||
@ -116,27 +113,20 @@ export default class SceneFilesFolder extends React.Component {
|
||||
description="At the moment there are some bugs with deals on our Devnet but our team is working through them."
|
||||
/>
|
||||
|
||||
<DataMeter
|
||||
stats={this.props.viewer.stats}
|
||||
style={{ margin: "48px 0 24px 0" }}
|
||||
/>
|
||||
<DataMeter stats={this.props.viewer.stats} style={{ margin: "48px 0 24px 0" }} />
|
||||
|
||||
<System.H1 style={{ marginTop: 48 }}>
|
||||
{this.props.current.name}
|
||||
</System.H1>
|
||||
<System.H1 style={{ marginTop: 48 }}>{this.props.current.name}</System.H1>
|
||||
<Section
|
||||
onAction={this.props.onAction}
|
||||
title={`${Strings.bytesToSize(
|
||||
this.props.viewer.stats.bytes
|
||||
)} uploaded`}
|
||||
title={`${Strings.bytesToSize(this.props.viewer.stats.bytes)} uploaded`}
|
||||
style={{ minWidth: "1200px" }}
|
||||
buttons={[
|
||||
{
|
||||
name: "Upload data",
|
||||
type: "SIDEBAR",
|
||||
value: "SIDEBAR_ADD_FILE_TO_BUCKET",
|
||||
},
|
||||
]}
|
||||
>
|
||||
]}>
|
||||
<System.Table
|
||||
key={this.props.current.folderId}
|
||||
data={data}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user