aiden
/
ctk
mirror of https://github.com/ctk-hq/ctk
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: css and markup improvements

Browse Source
pull/77/head
corpulent 3 years ago
parent b0945e6543
commit a9642ccf39
11 changed files with 161 additions and 158 deletions
Show Stats Download Patch File Download Diff File

51
services/frontend/src/components/Modal/Network/Create.tsx
Unescape Escape View File

@ -79,31 +79,32 @@ const NetworkCreate = (props: INetworkCreateProps) => {
> >
{(formik) => ( {(formik) => (
<> <>
<div className="hidden sm:block"> <div className="border-b border-gray-200 px-4 md:px-8">
<div className="border-b border-gray-200 px-8"> <nav
<nav className="-mb-px flex space-x-8" aria-label="Tabs"> className="-mb-px flex space-x-4 md:space-x-8"
{tabs.map((tab) => ( aria-label="Tabs"
<a >
key={tab.name} {tabs.map((tab) => (
href={tab.href} <a
className={classNames( key={tab.name}
tab.name === openTab href={tab.href}
? "border-indigo-500 text-indigo-600" className={classNames(
: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300", tab.name === openTab
"whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm", ? "border-indigo-500 text-indigo-600"
tab.hidden ? "hidden" : "" : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
)} "whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm",
aria-current={tab.current ? "page" : undefined} tab.hidden ? "hidden" : ""
onClick={(e) => { )}
e.preventDefault(); aria-current={tab.current ? "page" : undefined}
setOpenTab(tab.name); onClick={(e) => {
}} e.preventDefault();
> setOpenTab(tab.name);
{tab.name} }}
</a> >
))} {tab.name}
</nav> </a>
</div> ))}
</nav>
</div> </div>
<div className="relative px-4 py-3 flex-auto"> <div className="relative px-4 py-3 flex-auto">

51
services/frontend/src/components/Modal/Network/Edit.tsx
Unescape Escape View File

@ -82,31 +82,32 @@ const NetworkEdit = (props: INetworkEditProps) => {
> >
{(formik) => ( {(formik) => (
<> <>
<div className="hidden sm:block"> <div className="border-b border-gray-200 px-4 md:px-8">
<div className="border-b border-gray-200 px-8"> <nav
<nav className="-mb-px flex space-x-8" aria-label="Tabs"> className="-mb-px flex space-x-4 md:space-x-8"
{tabs.map((tab) => ( aria-label="Tabs"
<a >
key={tab.name} {tabs.map((tab) => (
href={tab.href} <a
className={classNames( key={tab.name}
tab.name === openTab href={tab.href}
? "border-indigo-500 text-indigo-600" className={classNames(
: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300", tab.name === openTab
"whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm", ? "border-indigo-500 text-indigo-600"
tab.hidden ? "hidden" : "" : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
)} "whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm",
aria-current={tab.current ? "page" : undefined} tab.hidden ? "hidden" : ""
onClick={(e) => { )}
e.preventDefault(); aria-current={tab.current ? "page" : undefined}
setOpenTab(tab.name); onClick={(e) => {
}} e.preventDefault();
> setOpenTab(tab.name);
{tab.name} }}
</a> >
))} {tab.name}
</nav> </a>
</div> ))}
</nav>
</div> </div>
<div className="relative px-4 py-3 flex-auto"> <div className="relative px-4 py-3 flex-auto">

54
services/frontend/src/components/Modal/Service/Edit.tsx
Unescape Escape View File

@ -100,34 +100,32 @@ const ModalServiceEdit = (props: IModalServiceProps) => {
> >
{(formik) => ( {(formik) => (
<> <>
<div className="hidden sm:block"> <div className="border-b border-gray-200 px-4 md:px-8">
<div className="border-b border-gray-200 px-8"> <nav
<nav className="-mb-px flex space-x-4 md:space-x-8"
className="-mb-px flex space-x-8" aria-label="Tabs"
aria-label="Tabs" >
> {tabs.map((tab) => (
{tabs.map((tab) => ( <a
<a key={tab.name}
key={tab.name} href={tab.href}
href={tab.href} className={classNames(
className={classNames( tab.name === openTab
tab.name === openTab ? "border-indigo-500 text-indigo-600"
? "border-indigo-500 text-indigo-600" : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300", "whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm",
"whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm", tab.hidden ? "hidden" : ""
tab.hidden ? "hidden" : "" )}
)} aria-current={tab.current ? "page" : undefined}
aria-current={tab.current ? "page" : undefined} onClick={(e) => {
onClick={(e) => { e.preventDefault();
e.preventDefault(); setOpenTab(tab.name);
setOpenTab(tab.name); }}
}} >
> {tab.name}
{tab.name} </a>
</a> ))}
))} </nav>
</nav>
</div>
</div> </div>
<div className="relative px-4 py-3 flex-auto"> <div className="relative px-4 py-3 flex-auto">

11
services/frontend/src/components/Modal/Service/General.tsx
Unescape Escape View File

@ -15,6 +15,9 @@ const Fields = styled("div")`
const ImageNameGroup = styled("div")` const ImageNameGroup = styled("div")`
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@media (max-width: 640px) {
flex-direction: column;
}
column-gap: ${({ theme }) => theme.spacing(1)}; column-gap: ${({ theme }) => theme.spacing(1)};
width: 100%; width: 100%;
`; `;
@ -31,6 +34,7 @@ const GroupTitle = styled("h5")`
font-weight: 500; font-weight: 500;
width: 100%; width: 100%;
text-align: left; text-align: left;
margin-bottom: 0.25em;
`; `;
const Records = styled("div")` const Records = styled("div")`
@ -80,12 +84,7 @@ const General = () => {
<Fields> <Fields>
<TextField label="Service name" name="serviceName" required={true} /> <TextField label="Service name" name="serviceName" required={true} />
<ImageNameGroup> <ImageNameGroup>
<TextField <TextField label="Image name" name="imageName" required={true} />
label="Image name"
name="imageName"
required={true}
style={{ minWidth: 400 }}
/>
<TextField label="Image tag" name="imageTag" /> <TextField label="Image tag" name="imageTag" />
</ImageNameGroup> </ImageNameGroup>
<TextField <TextField

54
services/frontend/src/components/Modal/volume/EditVolumeModal.tsx
Unescape Escape View File

@ -71,34 +71,32 @@ const EditVolumeModal = (props: IEditVolumeModal) => {
> >
{(formik) => ( {(formik) => (
<> <>
<div className="hidden sm:block"> <div className="border-b border-gray-200 px-4 md:px-8">
<div className="border-b border-gray-200 px-8"> <nav
<nav className="-mb-px flex space-x-4 md:space-x-8"
className="-mb-px flex space-x-8" aria-label="Tabs"
aria-label="Tabs" >
> {tabs.map((tab) => (
{tabs.map((tab) => ( <a
<a key={tab.name}
key={tab.name} href={tab.href}
href={tab.href} className={classNames(
className={classNames( tab.name === openTab
tab.name === openTab ? "border-indigo-500 text-indigo-600"
? "border-indigo-500 text-indigo-600" : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300", "whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm",
"whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm", tab.hidden ? "hidden" : ""
tab.hidden ? "hidden" : "" )}
)} aria-current={tab.current ? "page" : undefined}
aria-current={tab.current ? "page" : undefined} onClick={(e) => {
onClick={(e) => { e.preventDefault();
e.preventDefault(); setOpenTab(tab.name);
setOpenTab(tab.name); }}
}} >
> {tab.name}
{tab.name} </a>
</a> ))}
))} </nav>
</nav>
</div>
</div> </div>
<div className="relative px-4 py-3 flex-auto"> <div className="relative px-4 py-3 flex-auto">

50
services/frontend/src/components/Projects/index.tsx
Unescape Escape View File

@ -5,6 +5,7 @@ import { IProject } from "../../types";
import Spinner from "../../components/global/Spinner"; import Spinner from "../../components/global/Spinner";
import PreviewBlock from "./PreviewBlock"; import PreviewBlock from "./PreviewBlock";
import { useProjects } from "../../hooks/useProjects"; import { useProjects } from "../../hooks/useProjects";
import { PlusIcon } from "@heroicons/react/outline";
const Projects = () => { const Projects = () => {
const [limit] = useState(PROJECTS_FETCH_LIMIT); const [limit] = useState(PROJECTS_FETCH_LIMIT);
@ -22,22 +23,24 @@ const Projects = () => {
Projects Projects
</h1> </h1>
<Link {data && data.results.length > 0 && (
className="btn-util text-white bg-blue-600 hover:bg-blue-700 sm:w-auto" <Link
to="/projects/new" className="btn-util text-white bg-blue-600 hover:bg-blue-700 sm:w-auto"
> to="/projects/new"
<span>Create new project</span> >
</Link> <span>Create new project</span>
</Link>
)}
</div> </div>
<div className="px-4 sm:px-6 md:px-8"> <div className="px-4 sm:px-6 md:px-8">
{isFetching && ( {(isFetching || isLoading) && (
<div className="flex justify-center items-center mx-auto mt-10"> <div className="flex justify-center items-center mx-auto mt-10">
<Spinner className="w-6 h-6 text-blue-600" /> <Spinner className="w-6 h-6 text-blue-600" />
</div> </div>
)} )}
{!isFetching && ( {!isFetching && !isLoading && (
<> <>
<div className="py-4"> <div className="py-4">
{error && ( {error && (
@ -70,22 +73,23 @@ const Projects = () => {
minHeight: "calc(100vh - 120px)" minHeight: "calc(100vh - 120px)"
}} }}
> >
<img <h3 className="mt-2 text-sm font-medium text-gray-900">
style={{ No projects
width: 400, </h3>
height: "auto" <p className="mt-1 text-sm text-gray-500">
}} Get started by creating a new project.
src="https://res.cloudinary.com/hypertool/image/upload/v1657816359/hypertool-assets/empty-projects_fdcxtk.svg"
/>
<p className="mt-4 text-md text-gray-500 dark:text-gray-400">
We tried our best, but could not find any projects.
</p> </p>
<Link <div className="mt-6">
className="btn-util text-white bg-blue-600 hover:bg-blue-700 sm:w-auto mt-3" <Link to="/projects/new" className="btn-util">
to="/projects/new" <span className="flex space-x-1 items-center">
> <PlusIcon
<span>Create new project</span> className="h-3 w-3"
</Link> aria-hidden="true"
/>
<span>New Project</span>
</span>
</Link>
</div>
</div> </div>
)} )}
</div> </div>

3
services/frontend/src/components/Record.tsx
Unescape Escape View File

@ -28,6 +28,9 @@ const Root = styled("div")`
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
column-gap: ${({ theme }) => theme.spacing(2)}; column-gap: ${({ theme }) => theme.spacing(2)};
@media (max-width: 768px) {
column-gap: ${({ theme }) => theme.spacing(1)};
}
`; `;
const RemoveButton = styled(IconButton)``; const RemoveButton = styled(IconButton)``;

8
services/frontend/src/components/global/FormElements/TextField.tsx
Unescape Escape View File

@ -12,6 +12,7 @@ export interface ITextFieldProps {
const Root = styled("div")` const Root = styled("div")`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%;
`; `;
const TextField: FunctionComponent<ITextFieldProps> = ( const TextField: FunctionComponent<ITextFieldProps> = (
@ -25,10 +26,7 @@ const TextField: FunctionComponent<ITextFieldProps> = (
return ( return (
<Root> <Root>
{label && ( {label && (
<label <label htmlFor={name} className="lbl-util">
htmlFor={name}
className="block text-xs font-medium text-gray-700"
>
{label + (required ? "*" : "")} {label + (required ? "*" : "")}
</label> </label>
)} )}
@ -38,7 +36,7 @@ const TextField: FunctionComponent<ITextFieldProps> = (
name={name} name={name}
type="text" type="text"
autoComplete="none" autoComplete="none"
className="input-util mt-1" className="input-util"
required={required} required={required}
onBlur={formik.handleBlur} onBlur={formik.handleBlur}
onChange={formik.handleChange} onChange={formik.handleChange}

24
services/frontend/src/components/global/SideBar.tsx
Unescape Escape View File

@ -29,15 +29,15 @@ export default function SideBar(props: ISideBarProps) {
return ( return (
<> <>
<div className="md:flex md:w-16 md:flex-col md:fixed md:inset-y-0"> <div className="md:flex md:w-16 md:flex-col md:fixed md:inset-y-0">
<div className="flex flex-col flex-grow pt-5 bg-blue-700 overflow-y-auto"> <div className="flex justify-between flex-col sm:flex-row md:flex-col md:flex-grow md:pt-5 bg-blue-700 overflow-y-auto">
<div className="flex items-center flex-shrink-0 mx-auto"> <div className="flex items-center flex-shrink-0 mx-auto p-2 ">
<Link to={isAuthenticated ? "/" : "projects/new"}> <Link to={isAuthenticated ? "/" : "projects/new"}>
<Logo /> <Logo />
</Link> </Link>
</div> </div>
<div className="mt-5 flex-1 flex flex-col"> <div className="md:mt-5 flex-1 flex flex-col items-center sm:flex-row md:flex-col justify-end">
<nav className="flex-1 px-2 pb-4 space-y-1"> <nav className="md:flex-1 space-y-1">
{navigation.map((item) => ( {navigation.map((item) => (
<a <a
key={item.name} key={item.name}
@ -46,23 +46,23 @@ export default function SideBar(props: ISideBarProps) {
item.current item.current
? "bg-blue-800 text-white" ? "bg-blue-800 text-white"
: "text-blue-100 hover:bg-blue-600", : "text-blue-100 hover:bg-blue-600",
"group flex items-center justify-center px-2 py-2 text-sm font-medium rounded-md" "group flex items-center justify-center p-2 text-sm font-medium rounded-md"
)} )}
> >
<item.icon <item.icon
className="mr-3 md:mr-0 flex-shrink-0 h-5 w-5" className="mr-3 sm:mr-0 flex-shrink-0 h-5 w-5"
aria-hidden="true" aria-hidden="true"
/> />
<span className="md:hidden">{item.name}</span> <span className="sm:hidden">{item.name}</span>
</a> </a>
))} ))}
</nav> </nav>
</div>
<UserMenu <UserMenu
username={userName} username={userName}
current={pathname.includes("profile")} current={pathname.includes("profile")}
/> />
</div>
</div> </div>
</div> </div>
</> </>

9
services/frontend/src/components/global/UserMenu.tsx
Unescape Escape View File

@ -19,18 +19,15 @@ export default function UserMenu(props: IUserMenuProps) {
${ ${
current ? "bg-blue-800 text-white" : "text-blue-100 hover:bg-blue-600" current ? "bg-blue-800 text-white" : "text-blue-100 hover:bg-blue-600"
}, },
flex border-t border-blue-800 p-4 w-full hover:cursor-pointer hover:bg-blue-600 flex md:border-t md:border-blue-800 p-4 md:w-full hover:cursor-pointer hover:bg-blue-600
`} `}
> >
<div className="flex items-center mx-auto"> <div className="flex items-center mx-auto">
<UserCircleIcon className="inline-block h-8 w-8 rounded-full text-white" /> <UserCircleIcon className="inline-block h-8 w-8 rounded-full text-white" />
<div className="ml-3 md:ml-0"> <div className="ml-3 sm:ml-0">
<p className="text-base font-medium text-white md:hidden"> <p className="text-sm font-medium text-white sm:hidden">
{username ? <>{username}</> : <>Log in</>} {username ? <>{username}</> : <>Log in</>}
</p> </p>
<p className="text-sm font-medium text-indigo-200 group-hover:text-white md:hidden">
View profile
</p>
</div> </div>
</div> </div>
</div> </div>

4
services/frontend/src/index.css
Unescape Escape View File

@ -16,6 +16,7 @@ body {
.canvas { .canvas {
position: relative; position: relative;
height: 100%; height: 100%;
width: 100%;
} }
.jsplumb-box { .jsplumb-box {
@ -112,6 +113,9 @@ path,
.btn-util { .btn-util {
@apply inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded text-indigo-700 bg-indigo-100 hover:bg-indigo-200 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-indigo-500; @apply inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded text-indigo-700 bg-indigo-100 hover:bg-indigo-200 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-indigo-500;
} }
.lbl-util {
@apply block text-xs font-medium text-gray-700 mb-1
}
.btn-util-red { .btn-util-red {
@apply inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-red-500; @apply inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-red-500;
} }

Write Preview
Loading…
Cancel
Save