junte/assessment-model
1
0
Fork 0
mirror of https://github.com/Hestia-Homes/assessment-model.git synced 2026-06-30 12:55:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

squared off the cards and placed budget at the top right. Also recolored one of the icons as a test, just need to get the addnewcard card to match

Browse source
This commit is contained in:
StefanWout 2024-09-12 15:46:10 +01:00
parent c409f6b042
commit a35af09c3a
4 changed files with 19 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
public/house-icon-3.svg
View file

@ -9,28 +9,28 @@
<polygon style="fill:#B1C6E4;" points="89.044,467.478 89.044,243.353 89.044,222.609 422.957,222.609 422.957,243.353
422.957,467.478 "/>
<polygon style="fill:#9DB0CA;" points="256,467.478 422.957,467.478 422.957,243.353 422.957,222.609 256,222.609 "/>
<path style="fill:#875334;" d="M456.348,211.478L356.174,111.304V94.609c0-9.22,7.475-16.696,16.696-16.696h66.783
<path style="fill:#d3b488;" d="M456.348,211.478L356.174,111.304V94.609c0-9.22,7.475-16.696,16.696-16.696h66.783
c9.22,0,16.696,7.475,16.696,16.696V211.478z"/>
<polygon style="fill:#DBE9FD;" points="427.174,200.348 256,29.174 84.826,200.348 "/>
<polygon style="fill:#C5DCFD;" points="427.174,200.348 256,29.174 256,200.348 "/>
<path style="fill:#FF6243;" d="M495.305,283.826c-4.272,0-8.544-1.631-11.804-4.892L256,51.435L28.5,278.934
<path style="fill:#3943b7;" d="M495.305,283.826c-4.272,0-8.544-1.631-11.804-4.892L256,51.435L28.5,278.934
c-6.521,6.521-17.087,6.521-23.609,0c-6.521-6.516-6.521-17.092,0-23.609L244.195,16.021c6.521-6.521,17.087-6.521,23.609,0
l239.304,239.304c6.521,6.516,6.521,17.092,0,23.609C503.848,282.195,499.576,283.826,495.305,283.826z"/>
<g>
<path style="fill:#FF3501;" d="M267.804,16.022c-3.26-3.261-7.532-4.892-11.804-4.892v40.304l227.501,227.501
<path style="fill:#14163d;" d="M267.804,16.022c-3.26-3.261-7.532-4.892-11.804-4.892v40.304l227.501,227.501
c3.261,3.261,7.533,4.892,11.804,4.892s8.544-1.631,11.804-4.892c6.521-6.516,6.521-17.092,0-23.609L267.804,16.022z"/>
<rect x="289.392" y="222.609" style="fill:#FF3501;" width="33.391" height="111.304"/>
<rect x="356.174" y="222.609" style="fill:#FF3501;" width="33.391" height="111.304"/>
<rect x="289.392" y="267.13" style="fill:#FF3501;" width="100.174" height="33.391"/>
<rect x="289.392" y="222.609" style="fill:#14163d;" width="33.391" height="111.304"/>
<rect x="356.174" y="222.609" style="fill:#14163d;" width="33.391" height="111.304"/>
<rect x="289.392" y="267.13" style="fill:#14163d;" width="100.174" height="33.391"/>
</g>
<rect x="155.826" y="222.609" style="fill:#ECEFF0;" width="33.391" height="111.304"/>
<g>
<rect x="122.435" y="367.304" style="fill:#FF6243;" width="33.391" height="100.174"/>
<rect x="189.218" y="367.304" style="fill:#FF6243;" width="33.391" height="100.174"/>
<rect x="122.435" y="400.696" style="fill:#FF6243;" width="100.174" height="33.391"/>
<rect x="122.435" y="367.304" style="fill:#3943b7;" width="33.391" height="100.174"/>
<rect x="189.218" y="367.304" style="fill:#3943b7;" width="33.391" height="100.174"/>
<rect x="122.435" y="400.696" style="fill:#3943b7;" width="100.174" height="33.391"/>
</g>
<rect x="256" y="367.304" style="fill:#DADFE4;" width="33.391" height="100.174"/>
<path style="fill:#60AED5;" d="M356.174,467.478h-66.783v-66.783h50.087c9.22,0,16.696,7.475,16.696,16.696V467.478z"/>
<path style="fill:#3e4073;" d="M356.174,467.478h-66.783v-66.783h50.087c9.22,0,16.696,7.475,16.696,16.696V467.478z"/>
<rect x="55.652" y="333.913" style="fill:#DBE9FD;" width="400.696" height="33.391"/>
<rect x="256" y="333.913" style="fill:#C5DCFD;" width="200.348" height="33.391"/>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

6
src/app/components/home/AddNewCard.tsx
View file

@ -4,14 +4,14 @@ import NewPortfolioModal from "./NewPortfolioModal";
const styles = {
wrapper:
"bg-brandblue hover:bg-hoverblue shadow-xl hover:shadow-none cursor-pointer w-60 h-80 rounded-3xl flex flex-col items-center justify-center",
"group bg-brandblue hover:bg-hoverblue shadow-xl hover:shadow-none cursor-pointer aspect-square rounded-3xl flex flex-col items-center justify-center",
header: "relative mt-2 mx-2",
imageWrapper:
"h-56 rounded-2xl overflow-hidden flex justify-center items-center",
wrapperAnime: "transition-all duration-500 ease-in-out",
image: "object-cover w-8/12 h-8/12 mx-auto fill-white",
textWrapper: "pt-9 pb-6 w-full px-4 flex justify-center items-center",
text: "font-medium leading-none text-base tracking-wider text-gray-400",
textWrapper: "w-full flex justify-center items-center",
text: "pb-6 font-medium leading-none text-base tracking-wider text-gray-400",
};
const AddNewCard = () => {

9
src/app/components/home/Card.tsx
View file

@ -8,9 +8,10 @@ import Image from "next/image";
const styles = {
wrapper:
"group active:bg-brandmidblue font-medium leading-none text-base tracking-wider text-gray-400 hover:text-white-300 bg-white hover:bg-hoverblue shadow-xl hover:shadow-none cursor-pointer w-60 h-80 rounded-3xl flex flex-col items-center justify-center",
header: "relative mt-2 mx-2 border-red",
imageWrapper: "pt-5 h-52 rounded-2xl overflow-hidden flex items-center",
"group active:bg-brandmidblue font-medium leading-none text-base tracking-wider text-gray-400 hover:text-white-300 bg-white hover:bg-hoverblue shadow-xl hover:shadow-none cursor-pointer aspect-square rounded-3xl flex flex-col items-center justify-center",
header: "relative mt-2 w-full border-red",
budgetWrapper: "min-h-7 pt-2 pr-4 flex justify-end w-full text-right max-h-16 my-auto text-gray-700 group-hover:text-white transition-all duration-500 ease-in-out relative",
imageWrapper: "rounded-2xl overflow-hidden flex justify-center items-center",
wrapperAnime: "transition-all duration-500 ease-in-out",
image: "object-cover mx-auto",
textWrapper: "pb-3 w-full px-4 flex justify-center items-center max-h-16 my-auto text-gray-700 text-center group-hover:text-white transition-all duration-500 ease-in-out",
@ -40,6 +41,7 @@ const Card = ({ id, title, image, budget, status }: CardProps) => {
className={[styles.wrapper, styles.wrapperAnime].join(" ")}
>
<div className={styles.header}>
<div className={styles.budgetWrapper} >{budgetFormatted}</div>
<div className={styles.imageWrapper}>
<Image
src={image}
@ -52,7 +54,6 @@ const Card = ({ id, title, image, budget, status }: CardProps) => {
</div>
<div className={styles.textWrapper}>
<h1>{`${title}`}</h1>
<div>{budgetFormatted}</div>
</div>
<div className="mb-4 flex justify-end w-full">
<div className="flex justify-center w-full">

1
src/app/components/home/CardTiles.tsx
View file

@ -25,6 +25,7 @@ export default function CardTiles({
image={`house-icon-${image_idx}.svg`}
budget={portfolio.budget}
status={portfolio.status}
/>
);
})}