Frontend Renewal
This commit is contained in:
root
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 156 KiB |
@@ -32,8 +32,8 @@
|
|||||||
<!-- Nepcha Analytics (nepcha.com) -->
|
<!-- Nepcha Analytics (nepcha.com) -->
|
||||||
<!-- Nepcha is a easy-to-use web analytics. No cookies and fully compliant with GDPR, CCPA and PECR. -->
|
<!-- Nepcha is a easy-to-use web analytics. No cookies and fully compliant with GDPR, CCPA and PECR. -->
|
||||||
<script defer data-site="YOUR_DOMAIN_HERE" src="https://api.nepcha.com/js/nepcha-analytics.js"></script>
|
<script defer data-site="YOUR_DOMAIN_HERE" src="https://api.nepcha.com/js/nepcha-analytics.js"></script>
|
||||||
<script type="module" crossorigin src="/assets/index-1b29e29a.js"></script>
|
<script type="module" crossorigin src="/assets/index-41fd9f19.js"></script>
|
||||||
<link rel="stylesheet" href="/assets/index-1c9b00a5.css">
|
<link rel="stylesheet" href="/assets/index-af1a5df8.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 156 KiB |
@@ -35,7 +35,7 @@ export function MaterialTailwindControllerProvider({ children }) {
|
|||||||
openSidenav: false,
|
openSidenav: false,
|
||||||
sidenavColor: "gray",
|
sidenavColor: "gray",
|
||||||
sidenavType: "white",
|
sidenavType: "white",
|
||||||
transparentNavbar: true,
|
transparentNavbar: false,
|
||||||
fixedNavbar: true,
|
fixedNavbar: true,
|
||||||
openConfigurator: false,
|
openConfigurator: false,
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -926,15 +926,55 @@ export function Stacks() {
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<div className="grid gap-6 md:justify-end md:items-center">
|
<div id="collect" className="mt-8 flex flex-col gap-4 md:flex-row md:items-start md:gap-6">
|
||||||
|
{selectedStackIds.length > 0 && (
|
||||||
|
<div className="w-full md:w-3/4">
|
||||||
|
<div className="flex flex-col gap-3 text-sm text-gray-300">
|
||||||
|
<div className="flex flex-wrap items-center gap-2">
|
||||||
|
{selectedStackIds.map((id) => {
|
||||||
|
const stack = stacksById.get(id);
|
||||||
|
const name = stack?.Name || `Stack ${id}`;
|
||||||
|
const isFiltered = filteredStackIdSet.has(id);
|
||||||
|
const isVisibleOnPage = visiblePageStackIds.has(id);
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={id}
|
||||||
|
type="button"
|
||||||
|
onClick={() => handleChipRemove(id)}
|
||||||
|
className="inline-flex items-center gap-2 rounded-full border border-purple-500/60 bg-purple-500/10 px-3 py-1 text-purple-100 transition hover:border-purple-400 hover:bg-purple-500/20"
|
||||||
|
>
|
||||||
|
<span>{name}</span>
|
||||||
|
{!isFiltered && (
|
||||||
|
<span className="text-xs uppercase tracking-wide text-amber-300">Ausgefiltert</span>
|
||||||
|
)}
|
||||||
|
{isFiltered && !isVisibleOnPage && (
|
||||||
|
<span className="text-xs uppercase tracking-wide text-blue-300">Andere Seite</span>
|
||||||
|
)}
|
||||||
|
<span className="text-xs font-semibold text-purple-200">x</span>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={clearSelection}
|
||||||
|
className="mt-1 text-xs font-medium text-gray-400 underline underline-offset-2 transition hover:text-gray-200"
|
||||||
|
>
|
||||||
|
Auswahl aufheben
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="w-full md:w-1/4 md:ml-auto">
|
||||||
|
<Button
|
||||||
|
className="w-full bg-arcticBlue-500 hover:bg-arcticBlue-600"
|
||||||
|
onClick={handleBulkRedeploy}
|
||||||
|
disabled={bulkActionDisabled}
|
||||||
|
>
|
||||||
|
{bulkButtonLabel}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<Button
|
|
||||||
className="w-full bg-arcticBlue-500 hover:bg-arcticBlue-600"
|
|
||||||
onClick={handleBulkRedeploy}
|
|
||||||
disabled={bulkActionDisabled}
|
|
||||||
>
|
|
||||||
{bulkButtonLabel}
|
|
||||||
</Button>
|
|
||||||
</div>
|
</div>
|
||||||
</CardBody>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
@@ -1019,7 +1059,7 @@ export function Stacks() {
|
|||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
<PaginationControls disabled={loading || Boolean(error)} />
|
<PaginationControls disabled={loading || Boolean(error)} />
|
||||||
</div>
|
</div >
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -47,7 +47,6 @@ export function Configurator() {
|
|||||||
const [stars, setStars] = React.useState(0);
|
const [stars, setStars] = React.useState(0);
|
||||||
|
|
||||||
const sidenavColors = {
|
const sidenavColors = {
|
||||||
white: "from-gray-100 to-gray-100 border-gray-200",
|
|
||||||
dark: "from-black to-black border-gray-200",
|
dark: "from-black to-black border-gray-200",
|
||||||
green: "from-green-400 to-green-600",
|
green: "from-green-400 to-green-600",
|
||||||
orange: "from-orange-400 to-orange-600",
|
orange: "from-orange-400 to-orange-600",
|
||||||
@@ -105,127 +104,18 @@ export function Configurator() {
|
|||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="mb-12">
|
|
||||||
<Typography variant="h6" color="blue-gray">
|
|
||||||
Sidenav Types
|
|
||||||
</Typography>
|
|
||||||
<Typography variant="small" color="gray">
|
|
||||||
Choose between 3 different sidenav types.
|
|
||||||
</Typography>
|
|
||||||
<div className="mt-3 flex items-center gap-2">
|
|
||||||
<Button
|
|
||||||
variant={sidenavType === "dark" ? "gradient" : "outlined"}
|
|
||||||
onClick={() => setSidenavType(dispatch, "dark")}
|
|
||||||
>
|
|
||||||
Dark
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant={sidenavType === "transparent" ? "gradient" : "outlined"}
|
|
||||||
onClick={() => setSidenavType(dispatch, "transparent")}
|
|
||||||
>
|
|
||||||
Transparent
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant={sidenavType === "white" ? "gradient" : "outlined"}
|
|
||||||
onClick={() => setSidenavType(dispatch, "white")}
|
|
||||||
>
|
|
||||||
White
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="mb-12">
|
<div className="mb-12">
|
||||||
<hr />
|
<hr />
|
||||||
<div className="flex items-center justify-between py-5">
|
<div className="flex items-center justify-between py-5">
|
||||||
<Typography variant="h6" color="blue-gray">
|
<Typography variant="h6" color="blue-gray">
|
||||||
Navbar Fixed
|
Navbar Fixed
|
||||||
</Typography>
|
</Typography>
|
||||||
<Switch
|
<Switch defaultChecked
|
||||||
id="navbar-fixed"
|
id="navbar-fixed"
|
||||||
value={fixedNavbar}
|
value={fixedNavbar}
|
||||||
onChange={() => setFixedNavbar(dispatch, !fixedNavbar)}
|
onChange={() => setFixedNavbar(dispatch, !fixedNavbar)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<hr />
|
|
||||||
<div className="my-8 flex flex-col gap-4">
|
|
||||||
<a
|
|
||||||
href="https://www.creative-tim.com/product/material-tailwind-dashboard-react?rel=mtdr"
|
|
||||||
target="_black"
|
|
||||||
>
|
|
||||||
<Button variant="gradient" fullWidth>
|
|
||||||
Free Download
|
|
||||||
</Button>
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="https://www.material-tailwind.com/docs/react/installation?rel=mtdr"
|
|
||||||
target="_black"
|
|
||||||
>
|
|
||||||
<Button variant="outlined" color="blue-gray" fullWidth>
|
|
||||||
View Documentation
|
|
||||||
</Button>
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="https://www.material-tailwind.com/blocks/react?rel=mtdr"
|
|
||||||
target="_black"
|
|
||||||
>
|
|
||||||
<Button variant="outlined" color="blue-gray" fullWidth>
|
|
||||||
Material Tailwind PRO
|
|
||||||
</Button>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<a
|
|
||||||
className="mx-auto flex items-center justify-center gap-2"
|
|
||||||
href="https://github.com/creativetimofficial/material-tailwind-dashboard-react"
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
>
|
|
||||||
<Chip
|
|
||||||
value={`${stars} - Stars`}
|
|
||||||
icon={
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 20 20"
|
|
||||||
fill="currentColor"
|
|
||||||
className="mt-px ml-1.5 h-4 w-4"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
fillRule="evenodd"
|
|
||||||
d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z"
|
|
||||||
clipRule="evenodd"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
}
|
|
||||||
className="bg-blue-gray-900 px-4"
|
|
||||||
/>
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div className="text-center">
|
|
||||||
<Typography variant="h6" color="blue-gray">
|
|
||||||
Thank you for sharing ❤️
|
|
||||||
</Typography>
|
|
||||||
<div className="mt-4 flex justify-center gap-2">
|
|
||||||
<Button
|
|
||||||
variant="gradient"
|
|
||||||
className="flex items-center gap-2"
|
|
||||||
>
|
|
||||||
<i className="fa-brands fa-twitter text-white" />
|
|
||||||
Tweet
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="gradient"
|
|
||||||
className="flex items-center gap-2"
|
|
||||||
>
|
|
||||||
<i className="fa-brands fa-facebook text-white" />
|
|
||||||
Share
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
|
|||||||
@@ -42,33 +42,9 @@ export function DashboardNavbar() {
|
|||||||
fullWidth
|
fullWidth
|
||||||
blurred={fixedNavbar}
|
blurred={fixedNavbar}
|
||||||
>
|
>
|
||||||
<div className="flex flex-col-reverse justify-between gap-6 md:flex-row md:items-center">
|
<div className="flex justify-between gap-6 flex-row items-center">
|
||||||
<div className="capitalize">
|
<div className="capitalize">
|
||||||
<Breadcrumbs
|
|
||||||
className={`bg-transparent p-0 transition-all ${
|
|
||||||
fixedNavbar ? "mt-1" : ""
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<Link to={`/${layout}`}>
|
|
||||||
<Typography
|
|
||||||
variant="small"
|
|
||||||
color="blue-gray"
|
|
||||||
className="font-normal opacity-50 transition-all hover:text-blue-500 hover:opacity-100"
|
|
||||||
>
|
|
||||||
{layout}
|
|
||||||
</Typography>
|
|
||||||
</Link>
|
|
||||||
<Typography
|
|
||||||
variant="small"
|
|
||||||
color="blue-gray"
|
|
||||||
className="font-normal"
|
|
||||||
>
|
|
||||||
{page}
|
|
||||||
</Typography>
|
|
||||||
</Breadcrumbs>
|
|
||||||
<Typography variant="h6" color="blue-gray">
|
|
||||||
{page}
|
|
||||||
</Typography>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
|
|
||||||
|
|||||||
@@ -8,6 +8,7 @@ import {
|
|||||||
Typography,
|
Typography,
|
||||||
} from "@material-tailwind/react";
|
} from "@material-tailwind/react";
|
||||||
import { useMaterialTailwindController, setOpenSidenav } from "@/components";
|
import { useMaterialTailwindController, setOpenSidenav } from "@/components";
|
||||||
|
import logo from "@/assets/images/stackpulse.png";
|
||||||
|
|
||||||
export function Sidenav({ brandImg, brandName, routes }) {
|
export function Sidenav({ brandImg, brandName, routes }) {
|
||||||
const [controller, dispatch] = useMaterialTailwindController();
|
const [controller, dispatch] = useMaterialTailwindController();
|
||||||
@@ -20,30 +21,20 @@ export function Sidenav({ brandImg, brandName, routes }) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<aside
|
<aside
|
||||||
className={`${sidenavTypes[sidenavType]} ${
|
className={`${sidenavTypes[sidenavType]} ${openSidenav ? "translate-x-0" : "-translate-x-80"
|
||||||
openSidenav ? "translate-x-0" : "-translate-x-80"
|
} fixed inset-0 z-50 my-4 ml-4 h-[calc(100vh-32px)] w-72 rounded-xl transition-transform duration-300 xl:translate-x-0 border border-blue-gray-100`}
|
||||||
} fixed inset-0 z-50 my-4 ml-4 h-[calc(100vh-32px)] w-72 rounded-xl transition-transform duration-300 xl:translate-x-0 border border-blue-gray-100`}
|
|
||||||
>
|
>
|
||||||
<div
|
<div className="relative py-6 px-8">
|
||||||
className={`relative`}
|
<img src={logo} alt="StackPulse" className="w-auto" />
|
||||||
>
|
|
||||||
<Link to="/" className="py-6 px-8 text-center">
|
|
||||||
<Typography
|
|
||||||
variant="h6"
|
|
||||||
color={sidenavType === "dark" ? "white" : "blue-gray"}
|
|
||||||
>
|
|
||||||
{brandName}
|
|
||||||
</Typography>
|
|
||||||
</Link>
|
|
||||||
<IconButton
|
<IconButton
|
||||||
variant="text"
|
variant="text"
|
||||||
color="white"
|
|
||||||
size="sm"
|
size="sm"
|
||||||
ripple={false}
|
ripple={false}
|
||||||
className="absolute right-0 top-0 grid rounded-br-none rounded-tl-none xl:hidden"
|
className="absolute right-0 top-0 grid rounded-br-none rounded-tl-none"
|
||||||
onClick={() => setOpenSidenav(dispatch, false)}
|
onClick={() => setOpenSidenav(dispatch, false)}
|
||||||
>
|
>
|
||||||
<XMarkIcon strokeWidth={2.5} className="h-5 w-5 text-white" />
|
<XMarkIcon strokeWidth={2.5} className="h-5 w-5 text-black" />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
</div>
|
</div>
|
||||||
<div className="m-4">
|
<div className="m-4">
|
||||||
@@ -70,8 +61,8 @@ export function Sidenav({ brandImg, brandName, routes }) {
|
|||||||
isActive
|
isActive
|
||||||
? sidenavColor
|
? sidenavColor
|
||||||
: sidenavType === "dark"
|
: sidenavType === "dark"
|
||||||
? "white"
|
? "white"
|
||||||
: "blue-gray"
|
: "blue-gray"
|
||||||
}
|
}
|
||||||
className="flex items-center gap-4 px-4 capitalize"
|
className="flex items-center gap-4 px-4 capitalize"
|
||||||
fullWidth
|
fullWidth
|
||||||
|
|||||||
Reference in New Issue
Block a user