From 04fe3f0f4a393f2f93f53f465eb5e4348c44a94e Mon Sep 17 00:00:00 2001 From: Neshura Date: Thu, 16 Mar 2023 22:20:05 +0100 Subject: [PATCH] Revamp of desktop cards --- components/styles/cards/desktop.tsx | 288 +++++++++++++++++++++++++--- 1 file changed, 259 insertions(+), 29 deletions(-) diff --git a/components/styles/cards/desktop.tsx b/components/styles/cards/desktop.tsx index 326e465..f836ff5 100644 --- a/components/styles/cards/desktop.tsx +++ b/components/styles/cards/desktop.tsx @@ -1,33 +1,263 @@ import { Service } from '../../../interfaces/CardTypes'; -import styled from 'styled-components'; -import { CardLink, PageCard, CardStyleWrap, CardContentTitle, CardContentWarning, OnlineStatus } from '../content'; +import styled, { css, DefaultTheme } from 'styled-components'; +import Link from 'next/link'; +import Image from 'next/image'; +import OpenInNewTabIcon from '../../../public/icons/open-new-window.svg' -// Card Content Component for Services Page -export const ServiceCardDesktop = ({ content }: { content: Service }) => { - let ret; - if (content.href) { - ret = ( - - - -

{content.desc}

- {content.warn} -
- {content.status} +// needed for Online Status checks +interface OnlinePropType { + status: string; +} + +const Card = styled.div` + position: relative; + display: flex; + flex-direction: column; + align-items: center; + width: 30rem; + max-width: 90%; + height: 12.5rem; + margin: 1rem; + + // themeing + border-top: 0.25rem solid; + border-radius: 10px; + + color: ${({ theme }) => theme.colors.primary}; + border-color: ${({ theme }) => theme.colors.primary}; + background-color: ${({ theme }) => theme.colors.background}; + + + transition-property: max-height, margin-bottom; + transition-duration: 0.2s, 0s; + transition-delay: 0.2s, 0.2s; +` + +// custom objects for CardTitle +//############################# +const CardHeaderWrap = styled.div` + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + width: 100%; + max-height: 3.5rem; + flex-grow: 0.8; +`; + +const CardTitleText = styled.h2` + font-size: 1.2rem; + margin: 0.5rem 0; +`; + +const CardTitleIcon = styled.div` + position: relative; + object-fit: contain; + margin-right: 0.4rem; + aspect-ratio: 1; + height: 1.5rem; +`; + + +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; + + background: transparent; + 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; + }}; +` + +const CardTitle = styled.div` + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + margin: 0.5rem; + padding-left: 1rem; +` + +// content visible when reduced +const CardHeader = ({ content, href }: { content: Service, href: string }) => { + return ( + + + { + content.icon ? ( + + icon + + ) : (<>) + } + {content.name} + + {content.status} + + ) +} + +// custom objects for CardDescription +//################################### + +// shared properties for all Description objects +const CardDescriptionCommon = css` + text-align: left; + font-size: 0.9rem; + margin: 0.3rem; +` + +// content visible when expanded +const CardDescriptionWrap = styled.div` + ${CardDescriptionCommon} + padding: 0 1rem; + overflow: hidden; /* Hide scrollbars */ + scrollbar-width: thin; + width: 100%; +` + +const CardDescriptionExtended = styled.p` + ${CardDescriptionCommon} + margin: 0; + margin-bottom: 0.9rem; + width: 100%; +` + +const CardDescriptionWarning = styled(CardDescriptionExtended)` + color: ${({ theme }) => theme.colors.offline}; + font-weight: bold; +` + +const CardDescription = ({ content }: { content: Service }) => { + return ( + + + {content.desc} + + + {content.warn} + + + ) +} + +// custom objects for CardFooter +//############################## + +const CardFooterWrap = styled.div` + display: grid; + grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); + grid-auto-flow: row; + //flex-direction: row; + align-items: center; + justify-items: center; + width: 100%; + position: absolute; + bottom: 5%; +` + +const CardLink = styled(Link)` + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + margin: 0.5rem; + margin-left: 1rem; + margin-right: 1rem; + padding: 0 0.5rem; + border: 0; + border-radius: 5px; + border-left: 2px solid; + border-right: 2px solid; + + transition-property: overflow-x; + transition-duration: 0.2s; + + &:hover { + background-color: ${({theme}) => theme.colors.background}; + color: ${({ theme }) => theme.colors.secondary}; + } + + transition-property: background-color; + transition-duration: 0.5s; +` + +const OpenInNewTab = styled.div` + color: ${({ theme }) => theme.colors.primary}; + object-fit: contain; + aspect-ratio: 1; + height: 1rem; + width: 1rem; + max-width: 0; + overflow: hidden; + visibility: hidden; + + ${CardLink}: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; +` + + +const CardFooter = ({ content, href }: { content: Service, href: string }) => { + return ( + + {href ? ( + + Open + + + + + ) : (<>)} + {content.extLink ? ( + + Official Site + + + - ) - } - else { - ret = ( - - - -

{content.desc}

- {content.warn} -
- {content.status} -
- ) - } - return ret; + ) : (<>)} +
+ ) +} + +// exported Card Elements +//####################### + +export const ServiceCardDesktop = ({ content }: { content: Service }) => { + return ( + + + + + + ) } \ No newline at end of file