Skip to content

Commit

Permalink
Merge pull request #331 from sinamics/network_body_wider
Browse files Browse the repository at this point in the history 
Expanded width of the network container.
  • Loading branch information
@sinamics
sinamics authored Mar 10, 2024
2 parents bed0d02 + ce0b511 commit 3921beb
Show file tree
Hide file tree
Showing 3 changed files with 43 additions and 43 deletions.
26 changes: 13 additions & 13 deletions src/pages/central/[id].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ const CentralNetworkById = ({ orgIds }) => {
return (
<div>
<HeadSection title={pageTitle} />
<div className="w-5/5 mx-auto flex flex-row flex-wrap justify-between space-y-10 p-4 text-sm sm:w-4/5 sm:p-10 md:text-base xl:space-y-0">
<div className="w-5/5 mx-auto flex flex-row flex-wrap justify-between space-y-10 p-4 text-sm sm:w-5/6 sm:p-10 md:text-base xl:space-y-0">
<div className="w-5/5 h-fit w-full xl:w-2/6 ">
<div className="flex flex-col space-y-3 sm:space-y-0">
<div className="flex flex-col justify-between sm:flex-row">
Expand Down Expand Up @@ -121,7 +121,7 @@ const CentralNetworkById = ({ orgIds }) => {
</div>
<NetworkPrivatePublic central />
</div>
<div className="w-5/5 mx-auto flex px-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
<div className="w-5/5 mx-auto flex px-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
<div className="flex flex-col justify-between space-y-3 whitespace-nowrap lg:flex-row lg:space-x-3 lg:space-y-0">
<div>
<span className="text-muted font-medium">{t("networkStart")}</span>{" "}
Expand Down Expand Up @@ -155,10 +155,10 @@ const CentralNetworkById = ({ orgIds }) => {
</div>
</div>
</div>
<div className="w-5/5 divider mx-auto flex px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
<div className="w-5/5 divider mx-auto flex px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
{t("networkSettings")}
</div>
<div className="w-5/5 mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base xl:flex xl:space-y-0">
<div className="w-5/5 mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base xl:flex xl:space-y-0">
{/* Ipv4 assignment */}
<div className="w-6/6 xl:w-3/6">
<NetworkIpAssignment central />
Expand All @@ -171,7 +171,7 @@ const CentralNetworkById = ({ orgIds }) => {
<NettworkRoutes central />
</div>
</div>
<div className="w-5/5 mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base xl:flex xl:space-y-0">
<div className="w-5/5 mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base xl:flex xl:space-y-0">
{/* Ipv4 assignment */}
<div className="w-6/6 xl:w-3/6">
{" "}
Expand All @@ -185,10 +185,10 @@ const CentralNetworkById = ({ orgIds }) => {
<NetworkMulticast central />
</div>
</div>
<div className="w-5/5 divider mx-auto flex px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
<div className="w-5/5 divider mx-auto flex px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
{t("networkMembers")}
</div>
<div className="w-5/5 mx-auto w-full px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
<div className="w-5/5 mx-auto w-full px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
{members?.length ? (
<div className="membersTable-wrapper">
<NetworkMembersTable nwid={network.id} central={true} />
Expand Down Expand Up @@ -260,14 +260,14 @@ const CentralNetworkById = ({ orgIds }) => {
</div>
)}
</div>
<div className="w-5/5 mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base xl:flex xl:space-y-0">
<div className="w-5/5 mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base xl:flex xl:space-y-0">
{/* Ipv4 assignment */}
<div className="flex w-full flex-wrap space-x-0 space-y-5 xl:space-x-5 xl:space-y-0">
<InviteMemberByMail />
<AddMemberById central />
</div>
</div>
{/* <div className="w-5/5 mx-auto w-full px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
{/* <div className="w-5/5 mx-auto w-full px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
<div className="mb-4 md:mb-0">
{networkById?.zombieMembers?.length > 0 ? (
<>
Expand All @@ -292,17 +292,17 @@ const CentralNetworkById = ({ orgIds }) => {
) : null}
</div>
</div> */}
<div className="w-5/5 mx-auto flex px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
<div className="w-5/5 mx-auto flex px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
<NetworkHelpText />
</div>

<div className="w-5/5 mx-auto flex px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
<div className="w-5/5 mx-auto flex px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
<CentralFlowRules />
</div>
<div className="w-5/5 divider mx-auto flex px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
<div className="w-5/5 divider mx-auto flex px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
Network Actions
</div>
<div className="w-5/5 mx-auto px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:flex-row md:text-base">
<div className="w-5/5 mx-auto px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:flex-row md:text-base">
<div className="flex items-end md:justify-end">
<button
onClick={() =>
Expand Down
30 changes: 15 additions & 15 deletions src/pages/network/[id].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ const NetworkById = ({ orgIds }: IProps) => {
return (
<div className="animate-fadeIn">
<HeadSection title={pageTitle} />
<div className="w-5/5 mx-auto flex flex-row flex-wrap justify-between space-y-10 p-4 text-sm sm:w-4/5 sm:p-10 md:text-base xl:space-y-0">
<div className="w-5/5 mx-auto flex flex-row flex-wrap justify-between space-y-10 p-4 text-sm sm:w-5/6 sm:p-10 md:text-base xl:space-y-0">
<div className="w-5/5 h-fit w-full xl:w-2/6 ">
<div className="flex flex-col space-y-3 sm:space-y-0">
<div className="flex flex-col justify-between sm:flex-row">
Expand Down Expand Up @@ -155,7 +155,7 @@ const NetworkById = ({ orgIds }: IProps) => {
<NetworkPrivatePublic />
</div>
</div>
<div className="w-5/5 mx-auto flex px-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
<div className="w-5/5 mx-auto flex px-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
<div className="hidden lg:flex flex-col justify-between space-y-3 whitespace-nowrap lg:flex-row lg:space-x-3 lg:space-y-0">
<div>
<span className="text-muted font-medium">{t("networkStart")}</span>{" "}
Expand Down Expand Up @@ -189,10 +189,10 @@ const NetworkById = ({ orgIds }: IProps) => {
</div>
</div>
</div>
<div className="w-5/5 divider mx-auto flex px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
<div className="w-5/5 divider mx-auto flex px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
{t("networkSettings")}
</div>
<div className="w-5/5 mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base xl:flex xl:space-y-0">
<div className="w-5/5 mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base xl:flex xl:space-y-0">
{/* Ipv4 assignment */}
<div className="w-6/6 xl:w-3/6">
<NetworkIpAssignment />
Expand All @@ -205,7 +205,7 @@ const NetworkById = ({ orgIds }: IProps) => {
<NettworkRoutes />
</div>
</div>
<div className="w-5/5 mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base xl:flex xl:space-y-0">
<div className="w-5/5 mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base xl:flex xl:space-y-0">
{/* Ipv4 assignment */}
<div className="w-6/6 xl:w-3/6">
<NetworkDns />
Expand All @@ -218,10 +218,10 @@ const NetworkById = ({ orgIds }: IProps) => {
<NetworkMulticast />
</div>
</div>
<div className="w-5/5 divider mx-auto flex px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
<div className="w-5/5 divider mx-auto flex px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
{t("networkMembers")}
</div>
<div className="w-5/5 mx-auto w-full px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
<div className="w-5/5 mx-auto w-full px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
{members.length ? (
<div className="membersTable-wrapper">
<NetworkMembersTable nwid={network.nwid} central={false} />
Expand Down Expand Up @@ -293,14 +293,14 @@ const NetworkById = ({ orgIds }: IProps) => {
</div>
)}
</div>
<div className="w-5/5 mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base xl:flex xl:space-y-0">
<div className="w-5/5 mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base xl:flex xl:space-y-0">
{/* Ipv4 assignment */}
<div className="flex w-full flex-wrap space-x-0 space-y-5 xl:space-x-5 xl:space-y-0">
<InviteMemberByMail />
<AddMemberById />
</div>
</div>
<div className="w-5/5 mx-auto w-full px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
<div className="w-5/5 mx-auto w-full px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
<div className="mb-4 md:mb-0">
{networkById?.zombieMembers?.length > 0 ? (
<>
Expand All @@ -326,25 +326,25 @@ const NetworkById = ({ orgIds }: IProps) => {
) : null}
</div>
</div>
<div className="w-5/5 mx-auto flex px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
<div className="w-5/5 mx-auto flex px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
<NetworkHelpText />
</div>

<div className="w-5/5 mx-auto flex px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
<div className="w-5/5 mx-auto flex px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
<NetworkFlowRules />
</div>
{/* <div className="w-5/5 divider mx-auto flex px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
{/* <div className="w-5/5 divider mx-auto flex px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
DEBUG
</div>
<div className="w-5/5 mx-auto px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base space-y-8">
<div className="w-5/5 mx-auto px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base space-y-8">
<DebugMirror data={networkById?.network} title="Controler Networks" />
<DebugMirror data={networkById?.members} title="Controler Members" />
</div> */}

<div className="w-5/5 divider mx-auto flex px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
<div className="w-5/5 divider mx-auto flex px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:text-base">
{t("networkActions")}
</div>
<div className="w-5/5 mx-auto px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:flex-row md:text-base">
<div className="w-5/5 mx-auto px-4 py-4 text-sm sm:w-5/6 sm:px-10 md:flex-row md:text-base">
<div className="flex items-end md:justify-end">
<button
onClick={() =>
Expand Down
30 changes: 15 additions & 15 deletions src/pages/organization/[orgid]/[id].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ const OrganizationNetworkById = ({ orgIds }: IProps) => {
return (
<div className="animate-fadeIn">
<HeadSection title={pageTitle} />
<div className="mx-auto text-sm sm:w-4/5 sm:p-10 md:text-base">
<div className="mx-auto text-sm sm:w-11/12 sm:p-10 md:text-base">
<div className="grid grid-cols-1 xl:grid-cols-2 gap-10">
{/* Left section with network ID, name, and description */}
<div className="xl:col-span-1">
Expand Down Expand Up @@ -163,7 +163,7 @@ const OrganizationNetworkById = ({ orgIds }: IProps) => {
</div>
</div>

<div className="w-5/5 mx-auto flex px-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
<div className="w-5/5 mx-auto flex px-4 text-sm sm:w-11/12 sm:px-10 md:text-base">
<div className="hidden lg:flex flex-col justify-between space-y-3 whitespace-nowrap lg:flex-row lg:space-x-3 lg:space-y-0">
<div>
<span className="text-muted font-medium">{t("networkStart")}</span>{" "}
Expand Down Expand Up @@ -197,10 +197,10 @@ const OrganizationNetworkById = ({ orgIds }: IProps) => {
</div>
</div>
</div>
<div className="w-5/5 divider mx-auto flex px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
<div className="w-5/5 divider mx-auto flex px-4 py-4 text-sm sm:w-11/12 sm:px-10 md:text-base">
{t("networkSettings")}
</div>
<div className="w-5/5 mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base xl:flex xl:space-y-0">
<div className="w-5/5 mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:w-11/12 sm:px-10 md:text-base xl:flex xl:space-y-0">
{/* Ipv4 assignment */}
<div className="w-6/6 xl:w-3/6">
<NetworkIpAssignment organizationId={organizationId} />
Expand All @@ -213,7 +213,7 @@ const OrganizationNetworkById = ({ orgIds }: IProps) => {
<NettworkRoutes organizationId={organizationId} />
</div>
</div>
<div className="w-5/5 mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base xl:flex xl:space-y-0">
<div className="w-5/5 mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:w-11/12 sm:px-10 md:text-base xl:flex xl:space-y-0">
{/* Ipv4 assignment */}
<div className="w-6/6 xl:w-3/6">
<NetworkDns organizationId={organizationId} />
Expand All @@ -226,10 +226,10 @@ const OrganizationNetworkById = ({ orgIds }: IProps) => {
<NetworkMulticast organizationId={organizationId} />
</div>
</div>
<div className="w-5/5 divider mx-auto flex px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
<div className="w-5/5 divider mx-auto flex px-4 py-4 text-sm sm:w-11/12 sm:px-10 md:text-base">
{t("networkMembers")}
</div>
<div className="w-5/5 mx-auto w-full px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
<div className="w-5/5 mx-auto w-full px-4 py-4 text-sm sm:w-11/12 sm:px-10 md:text-base">
{members.length ? (
<div className="membersTable-wrapper">
<NetworkMembersTable
Expand Down Expand Up @@ -305,14 +305,14 @@ const OrganizationNetworkById = ({ orgIds }: IProps) => {
</div>
)}
</div>
<div className="w-5/5 mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base xl:flex xl:space-y-0">
<div className="w-5/5 mx-auto grid grid-cols-1 space-y-3 px-4 py-4 text-sm sm:w-11/12 sm:px-10 md:text-base xl:flex xl:space-y-0">
{/* Ipv4 assignment */}
<div className="flex w-full flex-wrap space-x-0 space-y-5 xl:space-x-5 xl:space-y-0">
<InviteMemberByMail organizationId={organizationId} />
<AddMemberById organizationId={organizationId} />
</div>
</div>
<div className="w-5/5 mx-auto w-full px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
<div className="w-5/5 mx-auto w-full px-4 py-4 text-sm sm:w-11/12 sm:px-10 md:text-base">
<div className="mb-4 md:mb-0">
{networkById?.zombieMembers?.length > 0 ? (
<>
Expand Down Expand Up @@ -341,25 +341,25 @@ const OrganizationNetworkById = ({ orgIds }: IProps) => {
) : null}
</div>
</div>
<div className="w-5/5 mx-auto flex px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
<div className="w-5/5 mx-auto flex px-4 py-4 text-sm sm:w-11/12 sm:px-10 md:text-base">
<NetworkHelpText />
</div>

<div className="w-5/5 mx-auto flex px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
<div className="w-5/5 mx-auto flex px-4 py-4 text-sm sm:w-11/12 sm:px-10 md:text-base">
<NetworkFlowRules organizationId={organizationId} />
</div>
{/* <div className="w-5/5 divider mx-auto flex px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
{/* <div className="w-5/5 divider mx-auto flex px-4 py-4 text-sm sm:w-11/12 sm:px-10 md:text-base">
DEBUG
</div>
<div className="w-5/5 mx-auto px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base space-y-8">
<div className="w-5/5 mx-auto px-4 py-4 text-sm sm:w-11/12 sm:px-10 md:text-base space-y-8">
<DebugMirror data={networkById?.network} title="Controler Networks" />
<DebugMirror data={networkById?.members} title="Controler Members" />
</div> */}

<div className="w-5/5 divider mx-auto flex px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:text-base">
<div className="w-5/5 divider mx-auto flex px-4 py-4 text-sm sm:w-11/12 sm:px-10 md:text-base">
Network Actions
</div>
<div className="w-5/5 mx-auto px-4 py-4 text-sm sm:w-4/5 sm:px-10 md:flex-row md:text-base">
<div className="w-5/5 mx-auto px-4 py-4 text-sm sm:w-11/12 sm:px-10 md:flex-row md:text-base">
<div className="flex items-end md:justify-end">
<button
onClick={() =>
Expand Down

0 comments on commit 3921beb

Please sign in to comment.