From 313d800f61d796af1b3829d61037738ad3977f35 Mon Sep 17 00:00:00 2001
From: Yi Ying Li <yiyinl4@andrew.cmu.edu>
Date: Thu, 20 Feb 2025 16:41:17 -0500
Subject: [PATCH 1/6] create issue#253
---
app/components/point-group.jsx | 1 +
1 file changed, 1 insertion(+)
diff --git a/app/components/point-group.jsx b/app/components/point-group.jsx
index fd9acf5f2..dd3fd4dc8 100644
--- a/app/components/point-group.jsx
+++ b/app/components/point-group.jsx
@@ -1,5 +1,6 @@
// https://github.com/EnCiv/civil-pursuit/issues/35
// https://github.com/EnCiv/civil-pursuit/issues/80
+// https://github.com/EnCiv/civil-pursuit/issues/253
'use strict'
From 9a332d6cbf25d163fb323006eb23bedcdf052c89 Mon Sep 17 00:00:00 2001
From: Yi Ying Li <yiyinl4@andrew.cmu.edu>
Date: Wed, 12 Mar 2025 15:43:25 -0400
Subject: [PATCH 2/6] select edit mode: modify 1-5
---
app/components/point-group.jsx | 30 ++++++++++++++++++++----------
app/components/theme.js | 1 +
2 files changed, 21 insertions(+), 10 deletions(-)
diff --git a/app/components/point-group.jsx b/app/components/point-group.jsx
index fd9acf5f2..e476342e5 100644
--- a/app/components/point-group.jsx
+++ b/app/components/point-group.jsx
@@ -1,5 +1,6 @@
// https://github.com/EnCiv/civil-pursuit/issues/35
// https://github.com/EnCiv/civil-pursuit/issues/80
+// https://github.com/EnCiv/civil-pursuit/issues/253
'use strict'
@@ -213,12 +214,8 @@ const PointGroup = props => {
{groupedPoints.map((pD, leadIndex) => {
return (
<div key={pD._id} className={classes.selectPoints}>
- <Point
- point={pD}
- vState={'default'}
- className={cx(classes.selectPointsPassDown, classes.noBoxShadow)}
- >
- <div className={classes.pointBottomButtons}>
+ <Point point={pD} vState={'default'} className={cx(classes.selectPointsPassDown, classes.noBoxShadow)}>
+ <div className={cx(classes.pointWidthButton, classes.selectLeadButton)}>
<div className={classes.pointWidthButton}>
<ModifierButton
className={classes.pointWidthButton}
@@ -384,6 +381,7 @@ const useStylesFromThemeFunction = createUseStyles(theme => ({
},
contentContainer: {
+ backgroundColor: `${theme.colors.pointDefault} !important`,
padding: '2.1875rem 1.875rem',
display: 'flex',
flexDirection: 'column',
@@ -413,12 +411,16 @@ const useStylesFromThemeFunction = createUseStyles(theme => ({
},
},
- ungroupButton: {},
+ ungroupButton: {
+ [`@media (max-width: ${theme.condensedWidthBreakPoint})`]: {
+ width: '9rem',
+ },
+ },
doneButton: {
width: '17rem',
[`@media (max-width: ${theme.condensedWidthBreakPoint})`]: {
- width: '7rem',
+ width: '12rem',
},
},
@@ -428,6 +430,7 @@ const useStylesFromThemeFunction = createUseStyles(theme => ({
color: '#5d5d5d',
fontWeight: '600',
lineHeight: '1.5rem',
+ marginTop: '5rem',
},
bottomButtonsTwo: {},
@@ -475,7 +478,6 @@ const useStylesFromThemeFunction = createUseStyles(theme => ({
position: 'relative',
flex: '1 1 41%',
height: 'inherit',
- // margin: '1rem 1.5rem',
[`@media (max-width: ${theme.condensedWidthBreakPoint})`]: {
flex: '0 0 100%',
margin: '1rem 0',
@@ -487,7 +489,15 @@ const useStylesFromThemeFunction = createUseStyles(theme => ({
},
pointWidthButton: {
- margin: '.5rem',
+ width: '100%',
+ textAlign: 'center',
+ [`@media (max-width: ${theme.condensedWidthBreakPoint})`]: {
+ width: '100%',
+ },
+ },
+
+ selectLeadButton: {
+ marginTop: '1rem',
},
invisibleElement: {
diff --git a/app/components/theme.js b/app/components/theme.js
index d8b2c8708..6af733d47 100644
--- a/app/components/theme.js
+++ b/app/components/theme.js
@@ -61,6 +61,7 @@ const Theme = {
svgArrow: 'rgb(206, 206, 206)',
transparent: 'transparent',
tabSelected: '#DCE8F2',
+ pointDefault: '#FFFFFF',
},
font: {
fontFamily: 'Inter',
From de571a41baad65da88baa00d59404ec62c24cf20 Mon Sep 17 00:00:00 2001
From: Yi Ying Li <yiyinl4@andrew.cmu.edu>
Date: Fri, 21 Mar 2025 16:25:27 -0400
Subject: [PATCH 3/6] adjust the buttons and spaces
---
app/components/point-group.jsx | 33 +++++++++++++++++++--------------
1 file changed, 19 insertions(+), 14 deletions(-)
diff --git a/app/components/point-group.jsx b/app/components/point-group.jsx
index e476342e5..70953e5c7 100644
--- a/app/components/point-group.jsx
+++ b/app/components/point-group.jsx
@@ -91,11 +91,7 @@ const PointGroup = props => {
{groupedPoints?.map(pD => {
return (
<div key={pD._id} className={classes.selectPoints}>
- <Point
- point={pD}
- vState={pD._id === selected ? 'selected' : 'default'}
- className={cx(classes.selectPointsPassDown, classes.noBoxShadow)}
- >
+ <Point point={pD} vState={pD._id === selected ? 'selected' : 'default'} className={cx(classes.selectPointsPassDown, classes.noBoxShadow)}>
<div className={classes.invisibleElement}>
{/* this is here to take up space for the heigth calculation of every grid cell, but not be visible */}
<ModifierButton children={'Select as Lead'} />
@@ -412,15 +408,17 @@ const useStylesFromThemeFunction = createUseStyles(theme => ({
},
ungroupButton: {
+ flex: '1 1 auto',
[`@media (max-width: ${theme.condensedWidthBreakPoint})`]: {
- width: '9rem',
+ maxWidth: '9rem',
+ paddingLeft: '4rem',
},
},
doneButton: {
width: '17rem',
[`@media (max-width: ${theme.condensedWidthBreakPoint})`]: {
- width: '12rem',
+ width: '16rem',
},
},
@@ -433,7 +431,16 @@ const useStylesFromThemeFunction = createUseStyles(theme => ({
marginTop: '5rem',
},
- bottomButtonsTwo: {},
+ bottomButtonsTwo: {
+ display: 'flex',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ '& span': {
+ flex: '1 1 auto',
+ textAlign: 'center',
+ minWidth: '9rem',
+ },
+ },
bottomButtonsOne: {},
bottomButtons: {
@@ -470,22 +477,20 @@ const useStylesFromThemeFunction = createUseStyles(theme => ({
selectPointsContainer: {
display: 'grid',
gridTemplateColumns: 'repeat(auto-fill, minmax(calc(min(100%,20rem)), 1fr))',
- gap: '2rem',
- width: '100%',
},
selectPoints: {
position: 'relative',
- flex: '1 1 41%',
- height: 'inherit',
+ flex: '1 1 auto',
+ padding: '0rem 0.5rem !important',
[`@media (max-width: ${theme.condensedWidthBreakPoint})`]: {
flex: '0 0 100%',
- margin: '1rem 0',
+ margin: '0.5rem 0',
},
},
selectPointsPassDown: {
- height: '100%',
+ height: '95%',
},
pointWidthButton: {
From a7e96aa25f9175eb6e95d12b8960181b64b44fc7 Mon Sep 17 00:00:00 2001
From: Yi Ying Li <yiyinl4@andrew.cmu.edu>
Date: Fri, 21 Mar 2025 17:04:42 -0400
Subject: [PATCH 4/6] decrease space
---
app/components/point-group.jsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/app/components/point-group.jsx b/app/components/point-group.jsx
index 70953e5c7..7663f1474 100644
--- a/app/components/point-group.jsx
+++ b/app/components/point-group.jsx
@@ -446,7 +446,7 @@ const useStylesFromThemeFunction = createUseStyles(theme => ({
bottomButtons: {
boxSizing: 'border-box',
width: '100%',
- padding: '1.5rem 1rem 0 1rem',
+ padding: '0rem 1rem 0 1rem',
display: 'flex',
'&$bottomButtonsTwo': {
'& span': {
From f19a2f0c7381803835e0642028ef75e389936c88 Mon Sep 17 00:00:00 2001
From: Yi Ying Li <yiyinl4@andrew.cmu.edu>
Date: Fri, 21 Mar 2025 17:12:06 -0400
Subject: [PATCH 5/6] change the color of outline
---
app/components/point-group.jsx | 1 +
1 file changed, 1 insertion(+)
diff --git a/app/components/point-group.jsx b/app/components/point-group.jsx
index 7663f1474..05f4705bd 100644
--- a/app/components/point-group.jsx
+++ b/app/components/point-group.jsx
@@ -378,6 +378,7 @@ const useStylesFromThemeFunction = createUseStyles(theme => ({
contentContainer: {
backgroundColor: `${theme.colors.pointDefault} !important`,
+ outline: `0.1875rem solid ${theme.colors.pointDefault} !important`,
padding: '2.1875rem 1.875rem',
display: 'flex',
flexDirection: 'column',
From 0e73f2d457f3c11d0098026d5277edc9d95ab3c6 Mon Sep 17 00:00:00 2001
From: Yi Ying Li <yiyinl4@andrew.cmu.edu>
Date: Fri, 21 Mar 2025 17:23:19 -0400
Subject: [PATCH 6/6] retrieve some lines
---
app/components/point-group.jsx | 12 ++++++++++--
1 file changed, 10 insertions(+), 2 deletions(-)
diff --git a/app/components/point-group.jsx b/app/components/point-group.jsx
index 05f4705bd..d0cc067cc 100644
--- a/app/components/point-group.jsx
+++ b/app/components/point-group.jsx
@@ -91,7 +91,11 @@ const PointGroup = props => {
{groupedPoints?.map(pD => {
return (
<div key={pD._id} className={classes.selectPoints}>
- <Point point={pD} vState={pD._id === selected ? 'selected' : 'default'} className={cx(classes.selectPointsPassDown, classes.noBoxShadow)}>
+ <Point
+ point={pD}
+ vState={pD._id === selected ? 'selected' : 'default'}
+ className={cx(classes.selectPointsPassDown, classes.noBoxShadow)}
+ >
<div className={classes.invisibleElement}>
{/* this is here to take up space for the heigth calculation of every grid cell, but not be visible */}
<ModifierButton children={'Select as Lead'} />
@@ -210,7 +214,11 @@ const PointGroup = props => {
{groupedPoints.map((pD, leadIndex) => {
return (
<div key={pD._id} className={classes.selectPoints}>
- <Point point={pD} vState={'default'} className={cx(classes.selectPointsPassDown, classes.noBoxShadow)}>
+ <Point
+ point={pD}
+ vState={'default'}
+ className={cx(classes.selectPointsPassDown, classes.noBoxShadow)}
+ >
<div className={cx(classes.pointWidthButton, classes.selectLeadButton)}>
<div className={classes.pointWidthButton}>
<ModifierButton