From 99b60c4f06f66544fa77d7a414ad7ebbae623b73 Mon Sep 17 00:00:00 2001 From: Neshura Date: Fri, 17 Mar 2023 00:08:50 +0100 Subject: [PATCH] Finished Desktop layout in this version Also removed Matomo trackingfrom this branch --- components/layout.tsx | 18 ---- components/styles/cards/desktop.tsx | 154 ++++++++++++++++++++++------ components/styles/generic.tsx | 1 + components/styles/navbar/mobile.tsx | 1 + 4 files changed, 125 insertions(+), 49 deletions(-) diff --git a/components/layout.tsx b/components/layout.tsx index 9205de4..5ba4488 100644 --- a/components/layout.tsx +++ b/components/layout.tsx @@ -15,24 +15,6 @@ const Layout = ({ children }: { children: React.ReactNode }) => { defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "826fc083aa86417890c0ceb3e0a597fa"}'> -
diff --git a/components/styles/cards/desktop.tsx b/components/styles/cards/desktop.tsx index f836ff5..054a462 100644 --- a/components/styles/cards/desktop.tsx +++ b/components/styles/cards/desktop.tsx @@ -9,7 +9,11 @@ interface OnlinePropType { status: string; } -const Card = styled.div` +interface BorderHelperType { + border_left: boolean; +} + +const Card = styled.div` position: relative; display: flex; flex-direction: column; @@ -24,7 +28,23 @@ const Card = styled.div` border-radius: 10px; color: ${({ theme }) => theme.colors.primary}; - border-color: ${({ theme }) => theme.colors.primary}; + border-color: ${props => { + let ret; + switch (props.status) { + case "Online": + ret = ({ theme }: { theme: DefaultTheme }) => theme.colors.online; + break; + case "Loading": + ret = ({ theme }: { theme: DefaultTheme }) => theme.colors.loading; + break; + case "Offline": + ret = ({ theme }: { theme: DefaultTheme }) => theme.colors.offline; + break; + default: + ret = ({ theme }: { theme: DefaultTheme }) => theme.colors.offline; + } + return ret; + }}; background-color: ${({ theme }) => theme.colors.background}; @@ -60,16 +80,16 @@ const CardTitleIcon = styled.div` const CardStatus = styled.p` - font-size: 0.9rem; - padding: 0.1rem; - margin: 0.5rem; - margin-right: 1.5rem; - - border-radius: 5px; - border: 0; - border-bottom: 0.125rem solid; + display: flex; + flex-direction: row; + position: absolute; + top: -0.8rem; + left: 80%; - background: transparent; + font-size: 0.9rem; + padding: 0 0.2rem; + margin: 0; + color: ${props => { let ret; switch (props.status) { @@ -87,6 +107,36 @@ const CardStatus = styled.p` } return ret; }}; + + border-radius: 0.5rem; + border: 0.125rem solid; + + ${({ theme }) => { + let ret; + + if (theme.backgroundImage) { + ret = css` + background-image: ${() => { + return css` + linear-gradient(${theme.colors.background}, ${theme.colors.background}), + url(${theme.backgroundImage}) + ` + }}; + background-repeat: no-repeat; + background-attachment: fixed; + background-size: cover; + background-position: ${theme.backgroundOffset ? theme.backgroundOffset : "60%"}; + background-position-y: 0; + `; + } + else { + ret = css` + background-color: ${({ theme }) => theme.colors.background}; + `; + } + + return ret; + }}; ` const CardTitle = styled.div` @@ -98,20 +148,49 @@ const CardTitle = styled.div` padding-left: 1rem; ` +const CardTitleLink = styled(Link)` + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + margin: 0.5rem; + padding-left: 1rem; + + &:hover { + color: ${({ theme }) => theme.colors.secondary}; + } +` + // content visible when reduced -const CardHeader = ({ content, href }: { content: Service, href: string }) => { +const CardHeader = ({ content }: { content: Service }) => { return ( - - { - content.icon ? ( - - icon - - ) : (<>) - } - {content.name} - + { + content.href ? + + { + content.icon ? ( + + icon + + ) : (<>) + } + {content.name} + + + + : + + { + content.icon ? ( + + icon + + ) : (<>) + } + {content.name} + + } {content.status} ) @@ -144,6 +223,7 @@ const CardDescriptionExtended = styled.p` ` const CardDescriptionWarning = styled(CardDescriptionExtended)` + text-align: center; color: ${({ theme }) => theme.colors.offline}; font-weight: bold; ` @@ -194,7 +274,7 @@ const CardLink = styled(Link)` transition-duration: 0.2s; &:hover { - background-color: ${({theme}) => theme.colors.background}; + background-color: ${({ theme }) => theme.colors.background}; color: ${({ theme }) => theme.colors.secondary}; } @@ -220,6 +300,18 @@ const OpenInNewTab = styled.div` color: ${({ theme }) => theme.colors.secondary}; } + ${CardTitleLink} { + + } + + ${CardTitleLink}:hover & { + margin-left: 0.3rem; + max-width: 1rem; + transition-delay: 0s, 0s; + visibility: visible; + color: ${({ theme }) => theme.colors.secondary}; + } + transition-property: max-width, margin-left, visibility; transition-duration: 0.5s, 0s, 0S; transition-delay: 0s, 0.2s, 0.2s; @@ -238,12 +330,12 @@ const CardFooter = ({ content, href }: { content: Service, href: string }) => { ) : (<>)} {content.extLink ? ( - - Official Site - - - - + + Official Site + + + + ) : (<>)} ) @@ -254,8 +346,8 @@ const CardFooter = ({ content, href }: { content: Service, href: string }) => { export const ServiceCardDesktop = ({ content }: { content: Service }) => { return ( - - + + diff --git a/components/styles/generic.tsx b/components/styles/generic.tsx index e8354de..406f35f 100644 --- a/components/styles/generic.tsx +++ b/components/styles/generic.tsx @@ -19,6 +19,7 @@ export const Page = styled.div` background-attachment: fixed; background-size: cover; background-position: ${ props => props.mobile ? ({ theme }) => theme.backgroundOffset ? theme.backgroundOffset : "60%" : ""}; + background-position-y: 0; ` export const Main = styled.main` diff --git a/components/styles/navbar/mobile.tsx b/components/styles/navbar/mobile.tsx index 2137fd9..8dd9bc5 100644 --- a/components/styles/navbar/mobile.tsx +++ b/components/styles/navbar/mobile.tsx @@ -169,6 +169,7 @@ export const NavIndicators = styled.nav` background-attachment: fixed; background-size: cover; background-position: ${({ theme }) => theme.backgroundOffset ? theme.backgroundOffset : "60%"}; + background-position-y: 0; width: 100%; display: flex; flex: 1;