mirror of
https://github.com/OneUptime/oneuptime
synced 2024-11-21 22:59:07 +00:00
fix breadcrumbs
This commit is contained in:
Simon Larsen
parent
adebcee48e
commit
0d069e22b8
@ -57,6 +57,7 @@ RUN npm install
|
||||
RUN npm link ../CommonUI/node_modules/react
|
||||
RUN npm link ../CommonUI/node_modules/react-dom
|
||||
RUN npm link ../CommonUI/node_modules/react-router-dom
|
||||
|
||||
# Create .cache folder with necessary permissions for React-based apps
|
||||
# https://stackoverflow.com/questions/67087735/eacces-permission-denied-mkdir-usr-app-node-modules-cache-how-can-i-creat
|
||||
RUN mkdir -p node_modules/.cache && chmod -R 777 node_modules/.cache
|
||||
|
||||
@ -15,16 +15,16 @@
|
||||
<meta name="slack-app-id" content="ACVBMTPJQ">
|
||||
<meta name="description" content="This is the login page for OneUptime Dashboard">
|
||||
|
||||
<link rel="manifest" href="/accounts/assets/img/favicons/ma">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/accounts/assets/img/favicons/apple-touch-icon.png">
|
||||
<link rel="shortcut icon" href="/accounts/assets/img/favicons/favicon.ico">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/accounts/assets/img/favicons/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="194x194" href="/accounts/assets/img/favicons/favicon-194x194.png">
|
||||
<link rel="icon" type="image/png" sizes="192x192" href="/accounts/assets/img/favicons/android-chrome-192x192.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/accounts/assets/img/favicons/favicon-16x16.png">
|
||||
<link rel="mask-icon" href="/accounts/assets/img/favicons/safari-pinned-tab.svg" color="#5bbad5">
|
||||
<link rel="manifest" href="/assets/img/favicons/ma">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/assets/img/favicons/apple-touch-icon.png">
|
||||
<link rel="shortcut icon" href="/assets/img/favicons/favicon.ico">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/assets/img/favicons/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="194x194" href="/assets/img/favicons/favicon-194x194.png">
|
||||
<link rel="icon" type="image/png" sizes="192x192" href="/assets/img/favicons/android-chrome-192x192.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/assets/img/favicons/favicon-16x16.png">
|
||||
<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#5bbad5">
|
||||
<meta name="msapplication-TileColor" content="#121212">
|
||||
<meta name="msapplication-TileImage" content="/accounts/assets/img/favicons/mstile-144x144.png">
|
||||
<meta name="msapplication-TileImage" content="/assets/img/favicons/mstile-144x144.png">
|
||||
<meta name="theme-color" content="#121212">
|
||||
|
||||
|
||||
@ -32,10 +32,10 @@
|
||||
|
||||
|
||||
<!-- Preload light, regular, medium and bold, which are fonts that are used on home -->
|
||||
<link rel="preload" href="/accounts/assets/fonts/camphor/font1.woff2" as="font" type="font/woff2" crossorigin="">
|
||||
<link rel="preload" href="/accounts/assets/fonts/camphor/font2.woff2" as="font" type="font/woff2" crossorigin="">
|
||||
<link rel="preload" href="/accounts/assets/fonts/camphor/font3.woff2" as="font" type="font/woff2" crossorigin="">
|
||||
<link rel="preload" href="/accounts/assets/fonts/camphor/font4.woff2" as="font" type="font/woff2" crossorigin="">
|
||||
<link rel="preload" href="/assets/fonts/camphor/font1.woff2" as="font" type="font/woff2" crossorigin="">
|
||||
<link rel="preload" href="/assets/fonts/camphor/font2.woff2" as="font" type="font/woff2" crossorigin="">
|
||||
<link rel="preload" href="/assets/fonts/camphor/font3.woff2" as="font" type="font/woff2" crossorigin="">
|
||||
<link rel="preload" href="/assets/fonts/camphor/font4.woff2" as="font" type="font/woff2" crossorigin="">
|
||||
|
||||
|
||||
<!--
|
||||
@ -66,6 +66,6 @@
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
<script src="/accounts/assets/bundle.js"></script>
|
||||
<script src="/bundle.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,72 +1,58 @@
|
||||
.breadcrumb-container {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: fit-content;
|
||||
@use '../../../Styles/BrandColors.scss';
|
||||
|
||||
.breadcrumb_detail__crumbs{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: #fff;
|
||||
border: 1px solid #e1e5e9;
|
||||
border-radius: 5px;
|
||||
box-shadow: 1px 1px 3px #e0e0e3;
|
||||
padding: 20px;
|
||||
|
||||
.breadcrumb_detail {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&__summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
|
||||
svg {
|
||||
margin-right: 5px;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__crumbs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> * {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin-right: 5px;
|
||||
color: #5a5656;
|
||||
font-weight: 300;
|
||||
font-size: 1.33rem;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: lighten(#5a5656, 10%);
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
color: #000;
|
||||
font-weight: 500;
|
||||
&:hover {
|
||||
color: lighten(#000, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
color: #a2a0a0 !important;
|
||||
font-size: 1.1rem;
|
||||
cursor: default;
|
||||
|
||||
&:last-of-type {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb_detail{
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.crumb{
|
||||
color: BrandColors.$color-light-grey !important;
|
||||
display: flex;
|
||||
|
||||
&:hover {
|
||||
color: BrandColors.$color-black !important;
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb-container{
|
||||
border-bottom: 1px solid rgba(229, 228, 228, 0.5);
|
||||
}
|
||||
|
||||
.breadcrumbs_first_icon{
|
||||
color: BrandColors.$color-light-grey !important;
|
||||
margin-top: -3px;
|
||||
|
||||
&:hover {
|
||||
color: BrandColors.$color-black !important;
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb_text{
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 1.4rem;
|
||||
margin-top: -5px;
|
||||
color: BrandColors.$color-light-grey;
|
||||
cursor: pointer;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
|
||||
&:hover {
|
||||
color: BrandColors.$color-black !important;
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumbs_chevron_icon{
|
||||
margin-right: 10px;
|
||||
margin-left: 10px;
|
||||
color: BrandColors.$color-lighter-grey;
|
||||
|
||||
}
|
||||
|
||||
.breadcrumbs_first_icon{
|
||||
color: black
|
||||
}
|
||||
@ -4,13 +4,11 @@ import Icon, { IconProp } from '../../Basic/Icon/Icon';
|
||||
|
||||
export interface ComponentProps {
|
||||
icon: IconProp;
|
||||
title: string;
|
||||
children: ReactElement | Array<ReactElement>;
|
||||
}
|
||||
|
||||
const Breadcrumbs: FunctionComponent<ComponentProps> = ({
|
||||
icon,
|
||||
title,
|
||||
children,
|
||||
}: ComponentProps): ReactElement => {
|
||||
if (!Array.isArray(children)) {
|
||||
@ -20,16 +18,19 @@ const Breadcrumbs: FunctionComponent<ComponentProps> = ({
|
||||
return (
|
||||
<div className="breadcrumb-container">
|
||||
<div className="breadcrumb_detail">
|
||||
<div className="breadcrumb_detail__summary">
|
||||
<Icon icon={icon} />
|
||||
<h2>{title}</h2>
|
||||
</div>
|
||||
<div className="breadcrumb_detail__crumbs">
|
||||
{children.map((child: ReactElement, index: number) => {
|
||||
const isLastItem = index >= (children as Array<ReactElement>).length - 1;
|
||||
return (
|
||||
<React.Fragment key={index}>
|
||||
{child}
|
||||
<Icon icon={IconProp.ChevronRight} />
|
||||
<span className="crumb">
|
||||
<span className="breadcrumbs_first_icon">{icon && index === 0 && <Icon icon={icon} />}</span>
|
||||
<span className="breadcrumb_text" style={{
|
||||
color: isLastItem ? "black !important" : "rgb(144, 139, 139)"
|
||||
}}>{child}</span>
|
||||
</span>
|
||||
{!isLastItem && <span className="breadcrumbs_chevron_icon"><Icon icon={IconProp.ChevronRight} /></span>}
|
||||
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
|
||||
@ -3,6 +3,7 @@ $color-black: #000000;
|
||||
$color-white: #ffffff;
|
||||
$color-grey: #575757;
|
||||
$color-light-grey: rgb(144, 139, 139);
|
||||
$color-lighter-grey: #ebebeb;
|
||||
$color-very-light-grey: #F3F3F3;
|
||||
|
||||
// shadows
|
||||
|
||||
@ -15,16 +15,16 @@
|
||||
<meta name="slack-app-id" content="ACVBMTPJQ">
|
||||
<meta name="description" content="This is the login page for OneUptime Dashboard">
|
||||
|
||||
<link rel="manifest" href="/dashboard/assets/img/favicons/ma">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/dashboard/assets/img/favicons/apple-touch-icon.png">
|
||||
<link rel="shortcut icon" href="/dashboard/assets/img/favicons/favicon.ico">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/dashboard/assets/img/favicons/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="194x194" href="/dashboard/assets/img/favicons/favicon-194x194.png">
|
||||
<link rel="icon" type="image/png" sizes="192x192" href="/dashboard/assets/img/favicons/android-chrome-192x192.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/dashboard/assets/img/favicons/favicon-16x16.png">
|
||||
<link rel="mask-icon" href="/dashboard/assets/img/favicons/safari-pinned-tab.svg" color="#5bbad5">
|
||||
<link rel="manifest" href="/assets/img/favicons/ma">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/assets/img/favicons/apple-touch-icon.png">
|
||||
<link rel="shortcut icon" href="/assets/img/favicons/favicon.ico">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/assets/img/favicons/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="194x194" href="/assets/img/favicons/favicon-194x194.png">
|
||||
<link rel="icon" type="image/png" sizes="192x192" href="/assets/img/favicons/android-chrome-192x192.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/assets/img/favicons/favicon-16x16.png">
|
||||
<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#5bbad5">
|
||||
<meta name="msapplication-TileColor" content="#121212">
|
||||
<meta name="msapplication-TileImage" content="/dashboard/assets/img/favicons/mstile-144x144.png">
|
||||
<meta name="msapplication-TileImage" content="/assets/img/favicons/mstile-144x144.png">
|
||||
<meta name="theme-color" content="#121212">
|
||||
|
||||
|
||||
@ -32,10 +32,10 @@
|
||||
|
||||
|
||||
<!-- Preload light, regular, medium and bold, which are fonts that are used on home -->
|
||||
<link rel="preload" href="/dashboard/assets/fonts/camphor/font1.woff2" as="font" type="font/woff2" crossorigin="">
|
||||
<link rel="preload" href="/dashboard/assets/fonts/camphor/font2.woff2" as="font" type="font/woff2" crossorigin="">
|
||||
<link rel="preload" href="/dashboard/assets/fonts/camphor/font3.woff2" as="font" type="font/woff2" crossorigin="">
|
||||
<link rel="preload" href="/dashboard/assets/fonts/camphor/font4.woff2" as="font" type="font/woff2" crossorigin="">
|
||||
<link rel="preload" href="/assets/fonts/camphor/font1.woff2" as="font" type="font/woff2" crossorigin="">
|
||||
<link rel="preload" href="/assets/fonts/camphor/font2.woff2" as="font" type="font/woff2" crossorigin="">
|
||||
<link rel="preload" href="/assets/fonts/camphor/font3.woff2" as="font" type="font/woff2" crossorigin="">
|
||||
<link rel="preload" href="/assets/fonts/camphor/font4.woff2" as="font" type="font/woff2" crossorigin="">
|
||||
|
||||
|
||||
<!--
|
||||
@ -65,6 +65,6 @@
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
<script src="/dashboard/assets/bundle.js"></script>
|
||||
<script src="/bundle.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -10,10 +10,10 @@ const Home: FunctionComponent<PageComponentProps> = (
|
||||
): ReactElement => {
|
||||
return (
|
||||
<PageContainer title="OneUptime | Home">
|
||||
<Breadcrumbs icon={IconProp.Home} title="Home">
|
||||
<Breadcrumbs icon={IconProp.Home}>
|
||||
<BreadcrumbItem title="Home" />
|
||||
<BreadcrumbItem title="Monitors" />
|
||||
<div>Hello</div>
|
||||
<BreadcrumbItem title="Hello" />
|
||||
</Breadcrumbs>
|
||||
</PageContainer>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user