Skip to content

Commit

Permalink
Shrank pages so that users on wide screen don't have the pages take u…
Browse files Browse the repository at this point in the history
…p the entire viewport
  • Loading branch information
ides15 committed Dec 13, 2018
1 parent cf49466 commit 7368661
Show file tree
Hide file tree
Showing 6 changed files with 71 additions and 32 deletions.
63 changes: 36 additions & 27 deletions app/src/components/Navbar.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,39 +9,48 @@ import {
Button
} from "@blueprintjs/core";
import { Flex } from "reflexbox";
import styled from "styled-components";

import APIButton from "./APIButton";

const Container = styled.div`
max-width: 1750px;
width: 100%;
margin: auto;
`;

const Navbar = ({ darkTheme, toggleDarkTheme }) => {
return (
<Nav>
<NavbarGroup>
<NavbarHeading>Tupperware</NavbarHeading>
<ButtonGroup>
<APIButton route="/info" icon="info-sign" intent="primary">
Info
</APIButton>
<APIButton route="/containers" icon="box" intent="warning">
Containers
</APIButton>
<APIButton route="/images" icon="application" intent="danger">
Images
</APIButton>
<APIButton route="/networks" icon="globe-network" intent="success">
Networks
</APIButton>
<APIButton route="/volumes" icon="database">
Volumes
</APIButton>
</ButtonGroup>
</NavbarGroup>
<NavbarGroup align={Alignment.RIGHT}>
<Flex align="center">
<Button minimal onClick={() => toggleDarkTheme()}>
<b>shift + d</b>
</Button>
</Flex>
</NavbarGroup>
<Container>
<NavbarGroup>
<NavbarHeading>Tupperware</NavbarHeading>
<ButtonGroup>
<APIButton route="/info" icon="info-sign" intent="primary">
Info
</APIButton>
<APIButton route="/containers" icon="box" intent="warning">
Containers
</APIButton>
<APIButton route="/images" icon="application" intent="danger">
Images
</APIButton>
<APIButton route="/networks" icon="globe-network" intent="success">
Networks
</APIButton>
<APIButton route="/volumes" icon="database">
Volumes
</APIButton>
</ButtonGroup>
</NavbarGroup>
<NavbarGroup align={Alignment.RIGHT}>
<Flex align="center">
<Button minimal onClick={() => toggleDarkTheme()}>
<b>shift + d</b>
</Button>
</Flex>
</NavbarGroup>
</Container>
</Nav>
);
};
Expand Down
8 changes: 7 additions & 1 deletion app/src/components/pages/Containers.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {
AnchorButton,
Button,
Icon,
Collapse,
Collapse as C,
Tooltip,
Position,
Tag,
Expand All @@ -23,6 +23,12 @@ const Title = styled.h2`
margin: 0;
`;

const Collapse = styled(C)`
max-width: 1750px;
width: 100%;
margin: auto;
`;

class Containers extends Component {
constructor() {
super();
Expand Down
8 changes: 7 additions & 1 deletion app/src/components/pages/Images.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import React, { Component } from "react";
import styled from "styled-components";
import { Flex, Box } from "reflexbox";
import {
Collapse,
Collapse as C,
Tag,
Button,
Icon,
Expand All @@ -19,6 +19,12 @@ const Title = styled.h2`
margin: 0;
`;

const Collapse = styled(C)`
max-width: 1750px;
width: 100%;
margin: auto;
`;

class Images extends Component {
state = {
images: []
Expand Down
8 changes: 7 additions & 1 deletion app/src/components/pages/Info.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { Component } from "react";

import { Collapse } from "@blueprintjs/core";
import { Collapse as C } from "@blueprintjs/core";
import { Route } from "react-router-dom";
import { Box } from "reflexbox";
import styled from "styled-components";
Expand All @@ -9,6 +9,12 @@ const Title = styled.h2`
margin: 0;
`;

const Collapse = styled(C)`
max-width: 1750px;
width: 100%;
margin: auto;
`;

class Info extends Component {
state = {
info: null
Expand Down
8 changes: 7 additions & 1 deletion app/src/components/pages/Networks.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from "react";

import { Collapse } from "@blueprintjs/core";
import { Collapse as C } from "@blueprintjs/core";
import { Route } from "react-router-dom";
import styled from "styled-components";
import { Box } from "reflexbox";
Expand All @@ -9,6 +9,12 @@ const Title = styled.h2`
margin: 0;
`;

const Collapse = styled(C)`
max-width: 1750px;
width: 100%;
margin: auto;
`;

const Networks = () => {
return (
<Route
Expand Down
8 changes: 7 additions & 1 deletion app/src/components/pages/Volumes.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from "react";

import { Collapse } from "@blueprintjs/core";
import { Collapse as C } from "@blueprintjs/core";
import { Route } from "react-router-dom";
import styled from "styled-components";
import { Box } from "reflexbox";
Expand All @@ -9,6 +9,12 @@ const Title = styled.h2`
margin: 0;
`;

const Collapse = styled(C)`
max-width: 1750px;
width: 100%;
margin: auto;
`;

const Volumes = () => {
return (
<Route
Expand Down

0 comments on commit 7368661

Please sign in to comment.