Finished Desktop layout in this version

Also removed Matomo trackingfrom this branch
This commit is contained in:
Neshura 2023-03-17 00:08:50 +01:00
parent 04fe3f0f4a
commit 99b60c4f06
Signed by: Neshura
GPG key ID: B6983AAA6B9A7A6C
4 changed files with 125 additions and 49 deletions

View file

@ -15,24 +15,6 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
defer src='https://static.cloudflareinsights.com/beacon.min.js' defer src='https://static.cloudflareinsights.com/beacon.min.js'
data-cf-beacon='{"token": "826fc083aa86417890c0ceb3e0a597fa"}'> data-cf-beacon='{"token": "826fc083aa86417890c0ceb3e0a597fa"}'>
</Script> </Script>
<Script id="matomo_analytics">
{`
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(["setDocumentTitle", document.domain + "/" + document.title]);
_paq.push(["setCookieDomain", "www.neshweb.net"]);
_paq.push(["disableCookies"]);
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//tracking.neshweb.net/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '2']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
`}
</Script>
<PageNavbar mobile={isMobile}/> <PageNavbar mobile={isMobile}/>
<Main> <Main>

View file

@ -9,7 +9,11 @@ interface OnlinePropType {
status: string; status: string;
} }
const Card = styled.div` interface BorderHelperType {
border_left: boolean;
}
const Card = styled.div<OnlinePropType>`
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -24,7 +28,23 @@ const Card = styled.div`
border-radius: 10px; border-radius: 10px;
color: ${({ theme }) => theme.colors.primary}; 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}; background-color: ${({ theme }) => theme.colors.background};
@ -60,16 +80,16 @@ const CardTitleIcon = styled.div`
const CardStatus = styled.p<OnlinePropType>` const CardStatus = styled.p<OnlinePropType>`
display: flex;
flex-direction: row;
position: absolute;
top: -0.8rem;
left: 80%;
font-size: 0.9rem; font-size: 0.9rem;
padding: 0.1rem; padding: 0 0.2rem;
margin: 0.5rem; margin: 0;
margin-right: 1.5rem;
border-radius: 5px;
border: 0;
border-bottom: 0.125rem solid;
background: transparent;
color: ${props => { color: ${props => {
let ret; let ret;
switch (props.status) { switch (props.status) {
@ -87,6 +107,36 @@ const CardStatus = styled.p<OnlinePropType>`
} }
return ret; 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` const CardTitle = styled.div`
@ -98,20 +148,49 @@ const CardTitle = styled.div`
padding-left: 1rem; 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 // content visible when reduced
const CardHeader = ({ content, href }: { content: Service, href: string }) => { const CardHeader = ({ content }: { content: Service }) => {
return ( return (
<CardHeaderWrap> <CardHeaderWrap>
<CardTitle> {
{ content.href ?
content.icon ? ( <CardTitleLink href={content.href}>
<CardTitleIcon> {
<Image alt="icon" src={content.icon} fill /> content.icon ? (
</CardTitleIcon> <CardTitleIcon>
) : (<></>) <Image alt="icon" src={content.icon} fill />
} </CardTitleIcon>
<CardTitleText>{content.name}</CardTitleText> ) : (<></>)
</CardTitle> }
<CardTitleText>{content.name}</CardTitleText>
<OpenInNewTab>
<OpenInNewTabIcon width="1rem" height="1rem" />
</OpenInNewTab>
</CardTitleLink> :
<CardTitle>
{
content.icon ? (
<CardTitleIcon>
<Image alt="icon" src={content.icon} fill />
</CardTitleIcon>
) : (<></>)
}
<CardTitleText>{content.name}</CardTitleText>
</CardTitle>
}
<CardStatus status={content.status}>{content.status}</CardStatus> <CardStatus status={content.status}>{content.status}</CardStatus>
</CardHeaderWrap> </CardHeaderWrap>
) )
@ -144,6 +223,7 @@ const CardDescriptionExtended = styled.p`
` `
const CardDescriptionWarning = styled(CardDescriptionExtended)` const CardDescriptionWarning = styled(CardDescriptionExtended)`
text-align: center;
color: ${({ theme }) => theme.colors.offline}; color: ${({ theme }) => theme.colors.offline};
font-weight: bold; font-weight: bold;
` `
@ -194,7 +274,7 @@ const CardLink = styled(Link)`
transition-duration: 0.2s; transition-duration: 0.2s;
&:hover { &:hover {
background-color: ${({theme}) => theme.colors.background}; background-color: ${({ theme }) => theme.colors.background};
color: ${({ theme }) => theme.colors.secondary}; color: ${({ theme }) => theme.colors.secondary};
} }
@ -220,6 +300,18 @@ const OpenInNewTab = styled.div`
color: ${({ theme }) => theme.colors.secondary}; 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-property: max-width, margin-left, visibility;
transition-duration: 0.5s, 0s, 0S; transition-duration: 0.5s, 0s, 0S;
transition-delay: 0s, 0.2s, 0.2s; transition-delay: 0s, 0.2s, 0.2s;
@ -238,12 +330,12 @@ const CardFooter = ({ content, href }: { content: Service, href: string }) => {
</CardLink> </CardLink>
) : (<></>)} ) : (<></>)}
{content.extLink ? ( {content.extLink ? (
<CardLink href={content.extLink}> <CardLink href={content.extLink}>
Official Site Official Site
<OpenInNewTab> <OpenInNewTab>
<OpenInNewTabIcon width="1rem" height="1rem" /> <OpenInNewTabIcon width="1rem" height="1rem" />
</OpenInNewTab> </OpenInNewTab>
</CardLink> </CardLink>
) : (<></>)} ) : (<></>)}
</CardFooterWrap> </CardFooterWrap>
) )
@ -254,8 +346,8 @@ const CardFooter = ({ content, href }: { content: Service, href: string }) => {
export const ServiceCardDesktop = ({ content }: { content: Service }) => { export const ServiceCardDesktop = ({ content }: { content: Service }) => {
return ( return (
<Card> <Card status={content.status}>
<CardHeader content={content} href={content.href ? content.href : ""} /> <CardHeader content={content} />
<CardDescription content={content} /> <CardDescription content={content} />
<CardFooter content={content} href={content.href ? content.href : ""} /> <CardFooter content={content} href={content.href ? content.href : ""} />
</Card> </Card>

View file

@ -19,6 +19,7 @@ export const Page = styled.div<MobilePropType>`
background-attachment: fixed; background-attachment: fixed;
background-size: cover; background-size: cover;
background-position: ${ props => props.mobile ? ({ theme }) => theme.backgroundOffset ? theme.backgroundOffset : "60%" : ""}; background-position: ${ props => props.mobile ? ({ theme }) => theme.backgroundOffset ? theme.backgroundOffset : "60%" : ""};
background-position-y: 0;
` `
export const Main = styled.main` export const Main = styled.main`

View file

@ -169,6 +169,7 @@ export const NavIndicators = styled.nav`
background-attachment: fixed; background-attachment: fixed;
background-size: cover; background-size: cover;
background-position: ${({ theme }) => theme.backgroundOffset ? theme.backgroundOffset : "60%"}; background-position: ${({ theme }) => theme.backgroundOffset ? theme.backgroundOffset : "60%"};
background-position-y: 0;
width: 100%; width: 100%;
display: flex; display: flex;
flex: 1; flex: 1;