This commit is contained in:
beckerinj
2022-08-07 15:20:08 -04:00
parent 6fa851b6f8
commit 8522ef7edb
2 changed files with 68 additions and 1 deletions
+56 -1
View File
@@ -1,4 +1,4 @@
import { Component, For, Show } from "solid-js";
import { Component, For, Match, Show, Switch } from "solid-js";
import { useAppState } from "../../state/StateProvider";
import { useTheme } from "../../state/ThemeProvider";
import { useUser } from "../../state/UserProvider";
@@ -10,9 +10,11 @@ import s from "./home.module.scss";
import AddServer from "./Tree/AddServer";
import Summary from "./Summary/Summary";
import Updates from "./Updates/Updates";
import { useAppDimensions } from "../../state/DimensionProvider";
const Home: Component<{}> = (p) => {
const { servers } = useAppState();
const { width, isMobile } = useAppDimensions();
const serverIDs = () => servers.loaded() && servers.ids();
return (
<Grid gap="0rem" class={s.Home} placeItems="start center">
@@ -40,6 +42,59 @@ const Home: Component<{}> = (p) => {
<Updates />
</Grid>
</Grid>
// <Switch>
// <Match when={width() >= 1200}>
// <Grid gap="0rem" class={s.Home} placeItems="start center">
// <Tabs
// localStorageKey="home-tab"
// containerClass={s.Tabs}
// tabs={[
// {
// title: "deployments",
// element: (
// <Grid>
// <For each={serverIDs()}>{(id) => <Server id={id} />}</For>
// <AddServer />
// </Grid>
// ),
// },
// {
// title: "builds",
// element: <Builds />,
// },
// ]}
// />
// <Grid gap="0rem" style={{ width: "80%" }}>
// <Summary />
// <Updates />
// </Grid>
// </Grid>
// </Match>
// <Match when={width() < 1200}>
// <Grid gap="0rem" class={s.Home} placeItems="start center">
// <Summary />
// <Tabs
// localStorageKey="home-tab"
// containerClass={s.Tabs}
// tabs={[
// {
// title: "deployments",
// element: (
// <Grid>
// <For each={serverIDs()}>{(id) => <Server id={id} />}</For>
// <AddServer />
// </Grid>
// ),
// },
// {
// title: "builds",
// element: <Builds />,
// },
// ]}
// />
// </Grid>
// </Match>
// </Switch>
);
};
@@ -6,6 +6,12 @@
padding-top: 1rem;
}
@media only screen and (max-width: 1200px) {
.Home {
grid-template-columns: 1fr;
}
}
.Tabs {
padding: 1rem;
width: 80%;
@@ -74,6 +80,12 @@
margin: 1rem;
}
@media only screen and (max-width: 1200px) {
.Summary {
width: 80%;
}
}
.Updates {
padding: 1rem;
margin: 1rem;