From 66b39da2ba1c55810cf8b1196d6777c2a1674a00 Mon Sep 17 00:00:00 2001 From: Neshura Date: Sat, 14 Jan 2023 21:10:54 +0100 Subject: [PATCH] WIP transfer --- components/styles/cards/mobile.tsx | 346 +++++++++++++++++++++++++---- components/styles/content.tsx | 23 +- 2 files changed, 313 insertions(+), 56 deletions(-) diff --git a/components/styles/cards/mobile.tsx b/components/styles/cards/mobile.tsx index 09bdfea..1cdc874 100644 --- a/components/styles/cards/mobile.tsx +++ b/components/styles/cards/mobile.tsx @@ -2,11 +2,12 @@ import { Service } from '../../../interfaces/CardTypes'; import styled, { css, DefaultTheme } from 'styled-components'; import Link from 'next/link'; import Image from 'next/image'; -import { useState } from 'react'; +import { Dispatch, SetStateAction, useState } from 'react'; // needed for Online Status checks interface OnlinePropType { status: string; + active?: number; } interface ActivePropType { @@ -14,76 +15,333 @@ interface ActivePropType { } const Card = styled.div` + position: relative; display: flex; flex-direction: column; align-items: center; - width: 332px; - margin: 30px 0px; - border: 1px solid; - + width: 10rem; + min-height: 6.5rem; - ${ props => { + // themeing + border-top: 0.125rem solid; + border-radius: 10px; + + ${props => { let ret; - if(props.active) { - ret = css` - position: relative; - background-color: black; // DEBUG - margin-bottom: -120px; - height: 300px; + if (props.active) { + ret = css` + backdrop-filter: blur(1rem); + margin-bottom: -6.5rem; + max-height: 12rem; z-index: 10; + color: ${({ theme }) => theme.colors.secondary}; + border: 0.125rem solid; + border-color: ${({ theme }) => theme.colors.secondary}; + background-color: ${({ theme }) => { + let ret; + + if (theme.invertButtons) { + ret = theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background; + } + else { + ret = theme.colors.background; + } + + return ret; + }}; ` } else { - ret = css` - background-color: green; // DEBUG - height: 180px; + ret = css` + max-height: 6.5rem; + margin-bottom: 0rem; + color: ${({ theme }) => theme.colors.primary}; + border-color: ${({ theme }) => theme.colors.primary}; + background-color: ${({ theme }) => theme.colors.background}; ` } return ret; }} + + + transition-property: max-height, margin-bottom; + transition-duration: 2s, 0s; + transition-delay: 2s, 2s; ` -const Test = ({ content }: { content: Service }) => { +// custom objects for CardTitle +//############################# +const CardTitleWrap = styled.div` + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + width: 100%; + 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.2rem; +`; + +const CardTitleIconMirror = styled.div` + height: 1.2rem; + aspect-ratio: 1; +` + +// content visible when reduced +const CardTitle = ({ content }: { content: Service }) => { return ( -

{content.name}

+ + { + content.icon ? ( + + icon + + ) : (<>) + } + {content.name} + { + content.icon ? ( + + ) : (<>) + } + + ) } -const Test2 = styled.div` - ${props => props.active ? - css` - visibility: visible; - height: 50px; - ` : - css` - visibility: hidden; - height: 0px; - `} +// 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 0.5rem; + margin-bottom: 2rem; + overflow-y: scroll; + scrollbar-width: thin; + + + p { + margin-top: 0; + margin-bottom: 0.9rem; + } +` + +const CardDescriptionExtended = styled.p` + ${CardDescriptionCommon} + margin: 0; + margin-bottom: 0.9rem; +` + +const CardDescription = ({ content }: { content: Service }) => { + let ret; + + ret = ( + + + {content.desc} + +

+ {content.warn} +

+ + {content.extName} + + + ); + + return ret; +} + +const CardDescriptionCollapsed = styled.p` + max-height: ${props => props.active ? css`2rem` : css`0rem`}; + visibility: ${props => props.active ? css`visible` : css`hidden`}; + ${CardDescriptionCommon} + text-align: center; + + transition-property: max-height, visibility; + transition-delay: 2s; +` + +// custom objects for CardFooter +//############################## + +const CardFooterStyle = styled.div` + width: 100%; + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + position: absolute; + bottom: -0.5rem; +` + +const CardStatus = styled.p` + font-size: 0.9rem; + padding: 0.1rem; + + border-radius: 5px; + margin: 0; + + ${props => props.active ? css` + border-top: 0; + border: 0.125rem solid; + ` : css` + border: 0; + border-top: 0.125rem solid; + `}; + + ${props => ({ theme }) => { + let ret; + + if (theme.backgroundImage) { + ret = css` + background-image: ${() => { + let image; + let gradient; + + if (props.active) { + if (theme.invertButtons && theme.colors.backgroundAlt) { + gradient = css`linear-gradient(${theme.colors.backgroundAlt}, ${theme.colors.backgroundAlt})`; + } + else { + gradient = css`linear-gradient(${theme.colors.background}, ${theme.colors.background})`; + } + } + else { + gradient = css`linear-gradient(${theme.colors.background}, ${theme.colors.background})`; + } + + image = css` + ${gradient}, + url(${theme.backgroundImage}) + ` + return image; + }}; + background-repeat: no-repeat; + background-attachment: fixed; + background-size: cover; + background-position: 60%; + `; + } + else { + ret = css` + background-color: ${({ theme }) => theme.colors.background}; + `; + } + + return ret; + }}; + 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; + }}; + border-color: ${props => ({ theme }) => props.active ? theme.colors.secondary : theme.colors.primary}; +/* + padding: 0.2rem; + width: min-content; + position: absolute; + top: 100; right: 50; bottom: 0; left: 50; + offset-position: bottom 10px; + transition: color 0.15s ease, border-color 0.15s ease; +*/ +` + +const CardExpandButton = styled.button` + cursor: pointer; + height: 1.5rem; + margin: 0; + +` + +// content visble at the bottom of the card +const CardFooter = ({ expanded, setExpanded, content }: { expanded: boolean, setExpanded: Dispatch>, content: Service }) => { + let ret; + + ret = ( + + {content.status} + setExpanded(expanded => !expanded)}>{expanded ? "shrink" : "expand"} + + ) + + return ret; +} + +// exported Card Elements +//####################### + export const ServiceCardMobile = ({ content }: { content: Service }) => { const [expanded, setExpanded] = useState(false); + + function handleBlur(event: any) { + if (!event.currentTarget.contains(event.relatedTarget)) { + setExpanded(false); + console.log("triggered") // DEBUG + } + else { + console.log("not triggered") // DEBUG + } + } + let card; // TEMP if (content.href) { // TODO: adjust sizes card = ( - setExpanded(false)}> + handleBlur(event)}> - - {content.desc} + + {content.desc1 ? content.desc1 : ""} - + + ) } else { - card = - - {content.desc} - - + card = ( + handleBlur(event)}> +
+ + {content.desc1 ? content.desc1 : ""} +
+ + + + ) } return card; @@ -91,6 +349,10 @@ export const ServiceCardMobile = ({ content }: { content: Service }) => { // TODO: remove unneeded exports +//############# +// OLD ELEMENTS +//############# + const CardStyle = css` display: flex; flex-direction: column; @@ -202,13 +464,6 @@ const CardContentWarning = styled.p` color: ${({ theme }) => theme.colors.secondary}; `; -// replaces .contentIcon -const CardContentTitleIcon = styled(Image)` - object-fit: "contain"; - margin-right: 8px; - aspect-ratio: 1; - height: 28px; -`; // replaces .contentTitle const CardContentTitleWrap = styled.div` position: relative; @@ -226,11 +481,6 @@ const CardContentTitleWrap = styled.div` const CardContentTitle = ({ content }: { content: Service }) => { return ( - { - content.icon ? ( - - ) : (<>) - }

{content.name}

 ) diff --git a/components/styles/content.tsx b/components/styles/content.tsx index 2621162..a47e1a5 100644 --- a/components/styles/content.tsx +++ b/components/styles/content.tsx @@ -8,6 +8,7 @@ interface OnlinePropType { status: string; } +// TODO: remove unneeded exports // replaces .title export const PageTitle = styled.h1` margin: 0; @@ -33,13 +34,19 @@ export const PageDescription = styled.p` // replaces .grid export const PageContentBox = styled.div` display: flex; - align-items: center; + align-items: flex-start; justify-content: center; flex-wrap: wrap; - max-width: 80%; + width: 100%; + margin: 5.5rem; `; -const CardStyle = css` +// update for PageContentBox +export const PageContentBoxNew = styled(PageContentBox)` + gap: 2rem 1rem; +` + +export const CardStyle = css` display: flex; flex-direction: column; align-items: center; @@ -101,7 +108,7 @@ export const PageCard = styled.div` `; // replaces the three status classes -const OnlineStatus = styled.p` +export const OnlineStatus = styled.p` color: ${props => { let ret; switch (props.status) { @@ -151,13 +158,13 @@ const OnlineStatus = styled.p` `; // replaces .cardwarn -const CardContentWarning = styled.p` +export const CardContentWarning = styled.p` color: ${({ theme }) => theme.colors.secondary}; `; // replaces .contentIcon -const CardContentTitleIcon = styled(Image)` +export const CardContentTitleIcon = styled(Image)` object-fit: "contain"; margin-right: 8px; aspect-ratio: 1; @@ -165,7 +172,7 @@ const CardContentTitleIcon = styled(Image)` `; // replaces .contentTitle -const CardContentTitleWrap = styled.div` +export const CardContentTitleWrap = styled.div` position: relative; display: flex; flex-direction: row; @@ -179,7 +186,7 @@ const CardContentTitleWrap = styled.div` } `; -const CardContentTitle = ({ content }: { content: Service | Game }) => { +export const CardContentTitle = ({ content }: { content: Service | Game }) => { return ( {