starred/komodo
1
0
Fork 0
mirror of https://github.com/moghtech/komodo.git synced 2026-09-10 16:01:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

more mobile improvements

Browse Source
This commit is contained in:
mbecker20
2022-04-16 11:17:38 -07:00
parent 859c163900
commit d3c665a930
22 changed files with 65 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/builds/tabs/build-config/CliBuild.tsx
+2
View File
@@ -13,6 +13,7 @@ const CliBuild: Component<{}> = (p) => {
<Flex
justifyContent={userCanUpdate() ? "space-between" : undefined}
alignItems="center"
style={{ "flex-wrap": "wrap" }}
>
<h2>build path: </h2>
<Input
@@ -25,6 +26,7 @@ const CliBuild: Component<{}> = (p) => {
<Flex
justifyContent={userCanUpdate() ? "space-between" : undefined}
alignItems="center"
style={{ "flex-wrap": "wrap" }}
>
<h2>command: </h2>
<Input
frontend/src/components/builds/tabs/build-config/Docker.tsx
+4 -1
View File
@@ -17,6 +17,7 @@ const Docker: Component<{}> = (p) => {
<Flex
justifyContent={userCanUpdate() ? "space-between" : undefined}
alignItems="center"
style={{ "flex-wrap": "wrap" }}
>
<h2>build path: </h2>
<Input
@@ -29,6 +30,7 @@ const Docker: Component<{}> = (p) => {
<Flex
justifyContent={userCanUpdate() ? "space-between" : undefined}
alignItems="center"
style={{ "flex-wrap": "wrap" }}
>
<h2>dockerfile path: </h2>
<Input
@@ -47,8 +49,9 @@ const Docker: Component<{}> = (p) => {
<Flex
justifyContent={userCanUpdate() ? "space-between" : undefined}
alignItems="center"
style={{ "flex-wrap": "wrap" }}
>
<h2>account: </h2>
<h2>dockerhub account: </h2>
<Selector
targetClass="blue"
selected={build.dockerAccount || "none"}
frontend/src/components/builds/tabs/git-config/Git.tsx
+3 -1
View File
@@ -16,6 +16,7 @@ const Git: Component<{}> = (p) => {
<Flex
justifyContent={userCanUpdate() ? "space-between" : undefined}
alignItems="center"
style={{ "flex-wrap": "wrap" }}
>
<h2>repo: </h2>
<Input
@@ -28,6 +29,7 @@ const Git: Component<{}> = (p) => {
<Flex
justifyContent={userCanUpdate() ? "space-between" : undefined}
alignItems="center"
style={{ "flex-wrap": "wrap" }}
>
<h2>branch: </h2>
<Input
@@ -41,6 +43,7 @@ const Git: Component<{}> = (p) => {
<Flex
justifyContent={userCanUpdate() ? "space-between" : undefined}
alignItems="center"
style={{ "flex-wrap": "wrap" }}
>
<h2>github account: </h2>
<Selector
@@ -58,7 +61,6 @@ const Git: Component<{}> = (p) => {
/>
</Flex>
</Show>
</Grid>
);
};
frontend/src/components/builds/tabs/git-config/GitConfig.tsx
+1 -1
View File
@@ -23,7 +23,7 @@ const GitConfig: Component<{}> = (p) => {
<Grid class="config-item shadow">
<h1>webhook url</h1>
<Flex justifyContent="space-between" alignItems="center">
<div class="ellipsis" style={{ width: "350px" }}>
<div class="ellipsis" style={{ width: "250px" }}>
{listenerUrl()}
</div>
<ConfirmButton
frontend/src/components/builds/tabs/git-config/OnClone.tsx
+2
View File
@@ -14,6 +14,7 @@ const OnClone: Component = () => {
<Flex
alignItems="center"
justifyContent={userCanUpdate() ? "space-between" : undefined}
style={{ "flex-wrap": "wrap" }}
>
<h2>path:</h2>
<Input
@@ -36,6 +37,7 @@ const OnClone: Component = () => {
<Flex
alignItems="center"
justifyContent={userCanUpdate() ? "space-between" : undefined}
style={{ "flex-wrap": "wrap" }}
>
<h2>command:</h2>
<Input
frontend/src/components/deployment/tabs/config/Config.tsx
+1 -1
View File
@@ -56,7 +56,7 @@ const Config: Component<{}> = (p) => {
<Grid class="config-item shadow">
<h1>webhook url</h1>
<Flex justifyContent="space-between" alignItems="center">
<div class="ellipsis" style={{ width: "350px" }}>
<div class="ellipsis" style={{ width: "250px" }}>
{listenerUrl()}
</div>
<ConfirmButton
frontend/src/components/deployment/tabs/config/container/DockerAccount.tsx
+1
View File
@@ -13,6 +13,7 @@ const DockerAccount: Component<{}> = (p) => {
class="config-item shadow"
justifyContent="space-between"
alignItems="center"
style={{ "flex-wrap": "wrap" }}
>
<h1>docker account</h1>
<Selector
frontend/src/components/deployment/tabs/config/container/Env.tsx
+1
View File
@@ -42,6 +42,7 @@ const Env: Component<{}> = (p) => {
<Flex
justifyContent={userCanUpdate() ? "space-between" : undefined}
alignItems="center"
style={{ "flex-wrap": "wrap" }}
>
<Input
placeholder="variable"
frontend/src/components/deployment/tabs/config/container/Image.tsx
+1 -1
View File
@@ -14,7 +14,7 @@ const Image: Component<{}> = (p) => {
return (
<Flex class="config-item shadow" justifyContent="space-between">
<h1>{deployment.buildID ? "build" : "image"}</h1>
<Flex alignItems="center">
<Flex alignItems="center" style={{ "flex-wrap": "wrap" }}>
<Show when={!deployment.buildID}>
<Input
placeholder="image"
frontend/src/components/deployment/tabs/config/container/Ports.tsx
+1
View File
@@ -36,6 +36,7 @@ const Ports: Component<{}> = (p) => {
<Flex
justifyContent={userCanUpdate() ? "space-between" : undefined}
alignItems="center"
style={{ "flex-wrap": "wrap" }}
>
<Input
placeholder="system"
frontend/src/components/deployment/tabs/config/container/Volumes.tsx
+1
View File
@@ -38,6 +38,7 @@ const Volumes: Component<{}> = (p) => {
<Flex
justifyContent={userCanUpdate() ? "space-between" : undefined}
alignItems="center"
style={{ "flex-wrap": "wrap" }}
>
<Input
placeholder="system"
frontend/src/components/deployment/tabs/config/mount-repo/Git.tsx
+3
View File
@@ -15,6 +15,7 @@ const Git: Component<{}> = (p) => {
<Flex
justifyContent={userCanUpdate() ? "space-between" : undefined}
alignItems="center"
style={{ "flex-wrap": "wrap" }}
>
<h2>repo: </h2>
<Input
@@ -27,6 +28,7 @@ const Git: Component<{}> = (p) => {
<Flex
justifyContent={userCanUpdate() ? "space-between" : undefined}
alignItems="center"
style={{ "flex-wrap": "wrap" }}
>
<h2>branch: </h2>
<Input
@@ -40,6 +42,7 @@ const Git: Component<{}> = (p) => {
<Flex
justifyContent={userCanUpdate() ? "space-between" : undefined}
alignItems="center"
style={{ "flex-wrap": "wrap" }}
>
<h2>github account: </h2>
<Selector
frontend/src/components/deployment/tabs/config/mount-repo/OnGit.tsx
+4
View File
@@ -12,6 +12,7 @@ export const OnClone: Component<{}> = (p) => {
<Flex
alignItems="center"
justifyContent={userCanUpdate() ? "space-between" : undefined}
style={{ "flex-wrap": "wrap" }}
>
<h2>path:</h2>
<Input
@@ -34,6 +35,7 @@ export const OnClone: Component<{}> = (p) => {
<Flex
alignItems="center"
justifyContent={userCanUpdate() ? "space-between" : undefined}
style={{ "flex-wrap": "wrap" }}
>
<h2>command:</h2>
<Input
@@ -65,6 +67,7 @@ export const OnPull: Component<{}> = (p) => {
<Flex
alignItems="center"
justifyContent={userCanUpdate() ? "space-between" : undefined}
style={{ "flex-wrap": "wrap" }}
>
<h2>path:</h2>
<Input
@@ -87,6 +90,7 @@ export const OnPull: Component<{}> = (p) => {
<Flex
alignItems="center"
justifyContent={userCanUpdate() ? "space-between" : undefined}
style={{ "flex-wrap": "wrap" }}
>
<h2>command:</h2>
<Input
frontend/src/components/deployment/tabs/config/mount-repo/RepoMount.tsx
+1
View File
@@ -12,6 +12,7 @@ const RepoMount: Component<{}> = (p) => {
<Flex
alignItems="center"
justifyContent={userCanUpdate() ? "space-between" : undefined}
style={{ "flex-wrap": "wrap" }}
>
<Input
placeholder="repo folder to mount"
frontend/src/components/sidebar/server/Deployment.tsx
+1 -1
View File
@@ -34,7 +34,7 @@ const Deployment: Component<{ id: string }> = (p) => {
)}
onClick={() => {
selected.set(deployment()!._id!, "deployment");
if (width() <= 1000) {
if (width() <= 1200) {
sidebar.toggle();
}
}}
frontend/src/components/topbar/Search/Search.tsx
+24 -17
View File
@@ -15,6 +15,7 @@ import { useWindowKeyDown } from "../../../util/hooks";
import Circle from "../../util/Circle";
import { ControlledTabs } from "../../util/tabs/Tabs";
import { useAppDimensions } from "../../../state/DimensionProvider";
import Grid from "../../util/layout/Grid";
const mobileStyle: JSX.CSSProperties = {
position: "fixed",
@@ -33,21 +34,15 @@ export const Search: Component<{}> = (p) => {
setTimeout(() => inputRef?.focus(), 200);
}
});
const style = () => {
return {
"max-height": "80vh",
"padding-right": "0.5rem",
gap: "0.5rem",
...(isMobile() ? mobileStyle : {}),
};
};
return (
<Menu
show={open.value()}
close={() => open.close(inputRef)}
position="bottom right"
menuClass="scroller"
menuStyle={style()}
menuStyle={{
gap: "0.5rem",
...(isMobile() ? mobileStyle : {}),
}}
backgroundColor={isMobile() ? "rgba(0,0,0,0.6)" : undefined}
target={
<Show
@@ -99,7 +94,7 @@ const SearchMenu: Component<{ close: () => void }> = (p) => {
<ControlledTabs
selected={tab.selected}
set={tab.set}
containerStyle={{ width: isMobile() ? "100%" : "350px" }}
containerStyle={{ width: isMobile() ? "100%" : "350px", gap: "0.5rem" }}
tabs={[
{
title: "deployments",
@@ -123,7 +118,11 @@ const Deployments: Component<{ close: () => void }> = (p) => {
const { selected, servers, deployments } = useAppState();
const { highlighted, filteredDeployments } = useSearchState();
return (
<>
<Grid
class="scroller"
gap="0.5rem"
style={{ "max-height": "70vh", "padding-right": "0.5rem" }}
>
<Show when={filteredDeployments()?.length === 0}>no results</Show>
<For each={filteredDeployments()}>
{(deployment, index) => (
@@ -158,7 +157,7 @@ const Deployments: Component<{ close: () => void }> = (p) => {
</button>
)}
</For>
</>
</Grid>
);
};
@@ -166,7 +165,11 @@ const Builds: Component<{ close: () => void }> = (p) => {
const { selected } = useAppState();
const { highlighted, filteredBuilds } = useSearchState();
return (
<>
<Grid
class="scroller"
gap="0.5rem"
style={{ "max-height": "70vh", "padding-right": "0.5rem" }}
>
<Show when={filteredBuilds()?.length === 0}>no results</Show>
<For each={filteredBuilds()}>
{(build, index) => (
@@ -186,7 +189,7 @@ const Builds: Component<{ close: () => void }> = (p) => {
</button>
)}
</For>
</>
</Grid>
);
};
@@ -194,7 +197,11 @@ const Servers: Component<{ close: () => void }> = (p) => {
const { selected } = useAppState();
const { highlighted, filteredServers } = useSearchState();
return (
<>
<Grid
class="scroller"
gap="0.5rem"
style={{ "max-height": "70vh", "padding-right": "0.5rem" }}
>
<Show when={filteredServers()?.length === 0}>no results</Show>
<For each={filteredServers()}>
{(server, index) => (
@@ -214,6 +221,6 @@ const Servers: Component<{ close: () => void }> = (p) => {
</button>
)}
</For>
</>
</Grid>
);
};
frontend/src/components/topbar/Topbar.tsx
+1
View File
@@ -78,6 +78,7 @@ const Topbar: Component = () => {
}
content={<Updates />}
position="bottom right"
backgroundColor={isMobile() ? "rgba(0,0,0,0.6)" : undefined}
/>
<Menu
show={menu() === "account"}
frontend/src/components/topbar/Updates.tsx
+6 -5
View File
@@ -11,16 +11,17 @@ const Updates: Component<{}> = () => {
const { isMobile } = useAppDimensions();
return (
<Show when={updates.loaded()}>
<Grid class={s.Updates} style={isMobile() ? { width: "100%" } : undefined}>
<div
<Grid
class={s.Updates}
style={isMobile() ? { width: "100%" } : undefined}
>
<h1
style={{
"font-size": "1.5rem",
"font-weight": 500,
"place-self": "center end",
}}
>
updates
</div>
</h1>
<Grid class={combineClasses(s.UpdatesContainer, "scroller")}>
<For each={updates.collection()!}>
{(update) => <Update update={update} showName />}
frontend/src/components/topbar/topbar.module.scss
+1
View File
@@ -31,6 +31,7 @@
.Updates {
width: 340px;
z-index: 25;
padding-bottom: 1rem;
}
.UpdatesContainer {
frontend/src/state/DimensionProvider.tsx
+1 -1
View File
@@ -15,7 +15,7 @@ export const DimensionProvider: Component = (p) => {
const context = {
width,
height,
isMobile: () => width() <= 500,
isMobile: () => width() <= 700,
};
return (
<DimensionContext.Provider value={context}>
frontend/src/state/StateProvider.tsx
+1 -1
View File
@@ -75,7 +75,7 @@ export const AppStateProvider: Component<{}> = (p) => {
onCleanup(ws.subscribe([USER_UPDATE], reloadUser));
const resizeListener = () => {
if (width() < 1000 && sidebarOpen()) {
if (width() < 1200 && sidebarOpen()) {
toggleSidebarOpen();
}
};
frontend/src/style/app.scss
+4 -2
View File
@@ -78,12 +78,14 @@
}
.config-item {
width: 60vw;
max-width: 30rem;
width: 400px;
max-width: calc(100vw - 2rem);
flex-wrap: wrap;
background-color: c.$lightgrey;
box-sizing: border-box;
padding: 0.5rem;
height: fit-content;
box-sizing: border-box;
}
.selected {