WIP transfer

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<ActivePropType>`
+  position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
-  width: 332px;
+  width: 10rem;
-  margin: 30px 0px;
+  min-height: 6.5rem;
-  border: 1px solid;
 
+  // themeing
+  border-top: 0.125rem solid;
+  border-radius: 10px;
 
-  ${ props => {
+  ${props => {
     let ret;
-    if(props.active) {
+    if (props.active) {
-      ret =  css`
+      ret = css`
-        position: relative;
+        backdrop-filter: blur(1rem);
-        background-color: black; // DEBUG
+        margin-bottom: -6.5rem;
-        margin-bottom: -120px;
+        max-height: 12rem;
-        height: 300px;
         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`
+      ret = css`
-        background-color: green; // DEBUG
+        max-height: 6.5rem;
-        height: 180px;
+        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 (
-    <h2>{content.name}</h2>
+    <CardTitleWrap>
+      {
+        content.icon ? (
+          <CardTitleIcon>
+            <Image alt="icon" src={content.icon} fill />
+          </CardTitleIcon>
+        ) : (<></>)
+      }
+      <CardTitleText>{content.name}</CardTitleText>
+      {
+        content.icon ? (
+          <CardTitleIconMirror />
+        ) : (<></>)
+      }
+    </CardTitleWrap>
+
   )
 }
 
-const Test2 = styled.div<ActivePropType>`
+// custom objects for CardDescription
-  ${props => props.active ?
+//###################################
-    css`
+
-      visibility: visible;
+// shared properties for all Description objects
-      height: 50px;
+const CardDescriptionCommon = css`
-    ` :
+  text-align: left;
-    css`
+  font-size: 0.9rem;
-      visibility: hidden;
+  margin: 0.3rem;
-      height: 0px;
-    `}
 `
 
+// 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 = (
+    <CardDescriptionWrap>
+      <CardDescriptionExtended>
+        {content.desc}
+      </CardDescriptionExtended>
+      <p>
+        {content.warn}
+      </p>
+      <a href={content.extLink}>
+        {content.extName}
+      </a>
+    </CardDescriptionWrap>
+  );
+
+  return ret;
+}
+
+const CardDescriptionCollapsed = styled.p<ActivePropType>`
+  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<OnlinePropType>`
+  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<SetStateAction<boolean>>, content: Service }) => {
+  let ret;
+
+  ret = (
+    <CardFooterStyle>
+      <CardStatus active={+expanded} status={content.status}>{content.status}</CardStatus>
+      <CardExpandButton onClick={() => setExpanded(expanded => !expanded)}>{expanded ? "shrink" : "expand"}</CardExpandButton>
+    </CardFooterStyle>
+  )
+
+  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 = (
-      <Card active={+expanded} onBlur={() => setExpanded(false)}>
+      <Card active={+expanded} onBlur={(event) => handleBlur(event)}>
         <Link href={content.href}>
-          <Test content={content} />
+          <CardTitle content={content} />
-          <Test2 active={+expanded}>{content.desc}</Test2>
+          <CardDescriptionCollapsed active={+!expanded}>{content.desc1 ? content.desc1 : ""}</CardDescriptionCollapsed>
         </Link>
-        <button onClick={() => setExpanded(expanded => !expanded)}>expand</button>
+          <CardDescription content={content} />
+        <CardFooter expanded={expanded} setExpanded={setExpanded} content={content} />
       </Card>
     )
   }
   else {
-    card = <Card>
+    card = (
-      <Test content={content} />
+      <Card active={+expanded} onBlur={(event) => handleBlur(event)}>
-      <Test2>{content.desc}</Test2>
+        <div>
-      <button onClick={() => setExpanded(expanded => !expanded)}>expand</button>
+          <CardTitle content={content} />
-    </Card>
+          <CardDescriptionCollapsed active={+!expanded}>{content.desc1 ? content.desc1 : ""}</CardDescriptionCollapsed>
+        </div>
+         <CardDescription content={content} />
+        <CardFooter expanded={expanded} setExpanded={setExpanded} content={content} />
+      </Card>
+    )
   }
 
   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 (
     <CardContentTitleWrap>
-      {
-        content.icon ? (
-          <CardContentTitleIcon alt="icon" src={content.icon} width="28" height="28" sizes='10vw' />
-        ) : (<></>)
-      }
       <h2>{content.name}</h2>
     </CardContentTitleWrap>
   )

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<OnlinePropType>`
+export const OnlineStatus = styled.p<OnlinePropType>`
   color: ${props => {
     let ret;
     switch (props.status) {
@@ -151,13 +158,13 @@ const OnlineStatus = styled.p<OnlinePropType>`
 `;
 
 // 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 (
     <CardContentTitleWrap>
       {