Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[feat] style view-plants #56

Merged
merged 15 commits into from
Dec 2, 2024
Merged

[feat] style view-plants #56

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
a5d1c71
plant card fixes and grid view
SashankBalusu Nov 27, 2024
275f829
finished view plants styling
SashankBalusu Nov 29, 2024
8678106
plant card fixes and grid view
SashankBalusu Nov 27, 2024
30da58d
finished view plants styling
SashankBalusu Nov 29, 2024
2f82911
rebased
SashankBalusu Nov 29, 2024
3d87f21
Merge branch 'style-view-plants' of https://github.com/calblueprint/t…
SashankBalusu Nov 29, 2024
14bf699
remove duplicate plantcards in my garden
ccatherinetan Dec 1, 2024
029c727
consolidate My Plants and All header
ccatherinetan Dec 1, 2024
c8a9464
consolidate rendering of PlantCards in AllPlants
ccatherinetan Dec 2, 2024
73027ce
address lint issues
ccatherinetan Dec 2, 2024
1953c46
memoize PlantCard (reduces re-rendering when filtering)
ccatherinetan Dec 2, 2024
2468f84
refactor mapMonthToSeason
ccatherinetan Dec 2, 2024
403cf7e
rename DifficultyLevelBar directory
ccatherinetan Dec 2, 2024
6454da5
styling changes to view-plants page
ccatherinetan Dec 2, 2024
3c19e62
change all icon names to camelCase
ccatherinetan Dec 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
142 changes: 105 additions & 37 deletions app/view-plants/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,14 @@ import {
checkSearchTerm,
checkSunlight,
} from '@/utils/helpers';
import { FilterContainer, TopRowContainer } from './styles';
import {
AddButton,
FilterContainer,
HeaderButton,
PlantGridContainer,
PlantGridView,
TopRowContainer,
} from './styles';

export default function Page() {
const router = useRouter();
Expand Down Expand Up @@ -145,12 +152,6 @@ export default function Page() {
return (
<div className="main">
<div id="plantContent">
<div className="plantSelectionHeader">
<button onClick={() => setViewingOption('myPlants')}>
My Plants
</button>
<button onClick={() => setViewingOption('all')}>All</button>
</div>
<div className="componentsDisplay">
<TopRowContainer>
<SearchBar searchTerm={searchTerm} setSearchTerm={setSearchTerm} />
Expand Down Expand Up @@ -179,16 +180,35 @@ export default function Page() {
</TopRowContainer>
{viewingOption === 'myPlants' && (
<div>
<div className="plantSelection">
ccatherinetan marked this conversation as resolved.
Show resolved Hide resolved
<HeaderButton
$isCurrentMode={viewingOption == 'myPlants'}
ccatherinetan marked this conversation as resolved.
Show resolved Hide resolved
onClick={() => setViewingOption('myPlants')}
>
My Plants
</HeaderButton>
<HeaderButton
$isCurrentMode={false}
onClick={() => setViewingOption('all')}
>
All
</HeaderButton>
</div>

{filteredUserPlantList.length ? (
<div>
{filteredUserPlantList.map(ownedPlant => (
<PlantCard
key={ownedPlant.userPlantId}
plant={ownedPlant.plant}
canSelect={false}
onClick={() => handleUserPlantCardClick(ownedPlant)}
/>
))}
<PlantGridContainer>
<PlantGridView>
{filteredUserPlantList.map(ownedPlant => (
<PlantCard
key={ownedPlant.userPlantId}
plant={ownedPlant.plant}
canSelect={false}
onClick={() => handleUserPlantCardClick(ownedPlant)}
/>
))}
</PlantGridView>
</PlantGridContainer>
</div>
) : (
<div>
Expand All @@ -202,35 +222,83 @@ export default function Page() {
{viewingOption === 'all' &&
(inAddMode ? (
<div>
{filteredPlantList.map((plant, key) => (
<PlantCard
key={key}
plant={plant}
canSelect={true}
isSelected={selectedPlants.includes(plant)}
onClick={() => handlePlantCardClick(plant)}
/>
))}
<div>
<button onClick={() => setInAddMode(false)}>
Select Plants
</button>
<div className="plantSelection">
<HeaderButton
$isCurrentMode={false}
onClick={() => setViewingOption('myPlants')}
>
My Plants
</HeaderButton>
<HeaderButton
$isCurrentMode={true}
onClick={() => setViewingOption('all')}
>
All
</HeaderButton>
</div>
</div>
<PlantGridContainer>
<PlantGridView>
{filteredPlantList.map((plant, key) => (
<PlantCard
key={key}
plant={plant}
canSelect={true}
isSelected={selectedPlants.includes(plant)}
onClick={() => handlePlantCardClick(plant)}
/>
))}
</PlantGridView>
</PlantGridContainer>

<div>
{selectedPlants.length ? (
<AddButton onClick={() => setInAddMode(false)}>
Add to My Garden
</AddButton>
) : (
<AddButton onClick={() => setInAddMode(false)}>
Select Plants
</AddButton>
)}
</div>
</div>
) : (
<div>
{filteredPlantList.map((plant, key) => (
<PlantCard
key={key}
plant={plant}
canSelect={false}
onClick={() => handlePlantCardClick(plant)}
/>
))}
<div>
<button onClick={() => setInAddMode(true)}>
<div className="plantSelection">
<HeaderButton
$isCurrentMode={false}
onClick={() => setViewingOption('myPlants')}
>
My Plants
</HeaderButton>
<HeaderButton
$isCurrentMode={true}
onClick={() => setViewingOption('all')}
>
All
</HeaderButton>
</div>
</div>
<PlantGridContainer>
<PlantGridView>
{filteredPlantList.map((plant, key) => (
<PlantCard
key={key}
plant={plant}
canSelect={false}
onClick={() => handlePlantCardClick(plant)}
/>
))}
</PlantGridView>
</PlantGridContainer>

<div>
<AddButton onClick={() => setInAddMode(true)}>
Add to my plants
</button>
</AddButton>
</div>
</div>
))}
Expand Down
49 changes: 49 additions & 0 deletions app/view-plants/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import styled from 'styled-components';
import COLORS from '@/styles/colors';

export const FilterContainer = styled.div`
display: flex;
Expand All @@ -13,3 +14,51 @@ export const TopRowContainer = styled.div`
margin-top: 8px;
margin-bottom: 8px;
`;

export const HeaderButton = styled.button<{ $isCurrentMode: boolean }>`
background: none;
border: none;
color: ${COLORS.shrub};
font-family: inherit;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this should be by default!

cursor: pointer;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
Comment on lines +29 to +32
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

note, this should be a styled(P1), which would handle the font styling for you. then, you can use HeaderButton with as="button", i.e.
<HeaderButton as="button"> </HeaderButton>

Pull the latest commits on main to see the P1 style in styles/text.ts!

color: ${({ $isCurrentMode }) =>
$isCurrentMode ? ` ${COLORS.shrub}` : `${COLORS.midgray}`};
text-decoration: ${({ $isCurrentMode }) =>
$isCurrentMode ? ` underline ` : `none`};
`;
export const AddButton = styled.button`
position: fixed;

bottom: 0;
background-color: ${COLORS.shrub};
color: white;
border-radius: 20px;
border: none;
font-family: inherit;
margin-bottom: 10px;
width: 170px;
height: 50px;
left: 50%;
transform: translateX(-50%);
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: normal;
`;

export const PlantGridView = styled.div`
display: grid;
grid-template-columns: repeat(auto-fit, 168px);
gap: 8px;
max-width: 100%;
justify-content: center;
`;
export const PlantGridContainer = styled.div`
display: flex;
justify-content: center;
width: 100%;
`;
22 changes: 22 additions & 0 deletions components/DifficultyLevelBar/style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import styled from 'styled-components';

export const IndicatorContainer = styled.div`
display: flex;
gap: 2px;
`;

export const Bar = styled.div<{
ccatherinetan marked this conversation as resolved.
Show resolved Hide resolved
$active: boolean;
$color: string;
$position: 'left' | 'middle' | 'right';
}>`
width: 16px;
height: 10px;
background-color: ${({ $active, $color }) => ($active ? $color : '#e0e0e0')};
border-radius: ${({ $position }) =>
$position === 'left'
? '8px 0 0 8px'
: $position === 'right'
? '0 8px 8px 0'
: '0'};
`;
32 changes: 26 additions & 6 deletions components/PlantCard/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,18 @@
import React from 'react';
import { Plant } from '@/types/schema';
import { mapMonthToSeason, useTitleCase } from '@/utils/helpers';
import DifficultyLevelBar from '../DifficultyLevelBar';
import Icon from '../Icon';
import {
Attribute,
AttributeContent,
Card,
CardContent,
CardPic,
PlantAttributes,
PlantHeader,
PlantImage,
PlantName,
RoundCheck,
TopRight,
} from './styles';
Expand All @@ -29,25 +36,38 @@ export default function PlantCard({
</TopRight>
)}
<CardPic>
<img alt={plant.plant_name} />
<PlantImage src={plant.img} alt={plant.plant_name} />
</CardPic>
<CardContent>
<h2>{plant.plant_name}</h2>
<PlantHeader>
<PlantName>{plant.plant_name}</PlantName>
<DifficultyLevelBar difficultyLevel={plant.difficulty_level} />
</PlantHeader>

<PlantAttributes>
<Attribute>
<p>{`${plant.harvest_start} - ${plant.harvest_end}`}</p>
<Icon type="outdoors_growing_start"></Icon>
<AttributeContent>{`${useTitleCase(mapMonthToSeason(plant.outdoors_start))}`}</AttributeContent>
ccatherinetan marked this conversation as resolved.
Show resolved Hide resolved
</Attribute>
<Attribute>
<p>{plant.water_frequency}</p>
<Icon type="outdoors_growing_end"></Icon>
<AttributeContent>{`${useTitleCase(mapMonthToSeason(plant.outdoors_end))}`}</AttributeContent>
</Attribute>
<Attribute>
<p>
<Icon type="watering_can"></Icon>

<AttributeContent>{plant.water_frequency}</AttributeContent>
</Attribute>
<Attribute>
<Icon type="sun"></Icon>

<AttributeContent>
{plant.sunlight_min_hours}
{plant.sunlight_max_hours
? ` - ${plant.sunlight_max_hours}`
: ''}{' '}
hours/day
</p>
</AttributeContent>
</Attribute>
</PlantAttributes>
</CardContent>
Expand Down
Loading