Merge pull request #151 from Gather307/150-fix-up-my-groups-page

150 fix up my groups page
Gather307 · Jun 4, 2024 · 97833a0 · 97833a0
2 parents fffed5e + f29dc43
commit 97833a0
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 19 deletions.
diff --git a/frontend/src/components/NewGroupOptions.tsx b/frontend/src/components/NewGroupOptions.tsx
@@ -175,22 +175,9 @@ const CreateGroup = ({ postGroup }: CreateProps) => {
             />
             <PopoverFooter
               display="flex"
-              justifyContent="space-between"
+              justifyContent="center"
               alignItems="center"
             >
-              <Box width="30%">
-                <input
-                  type="checkbox"
-                  name="public"
-                  id="public"
-                  checked={group.isPublic === "on"}
-                  onChange={handleChange}
-                  className="checkbox"
-                />
-                <label htmlFor="public" className="sidenote">
-                  public
-                </label>
-              </Box>
               <Box
                 display={`${errored.state ? "inherit" : "none"}`}
                 color="red"

diff --git a/frontend/src/pages/IndividualGroupPage.tsx b/frontend/src/pages/IndividualGroupPage.tsx
@@ -243,6 +243,8 @@ const IndividualGroupPage: React.FC<Props> = ({
                     borderWidth="1px"
                     borderRadius="md"
                     flex="1"
+                    overflowX="auto"
+                    width="100%"
                     backgroundColor="rgba(0, 0, 0, 0.05)"
                   >
                     <Heading size="md" marginBottom="10px">
@@ -268,12 +270,14 @@ const IndividualGroupPage: React.FC<Props> = ({
                       )}
                     </HStack>
                   </Box>
-                  <HStack spacing={4}>
+                  <HStack spacing={4} width="100%">
                     <Box
                       padding="10px"
                       borderWidth="1px"
                       borderRadius="md"
-                      flex="1"
+                      flex="start"
+                      overflowX="auto"
+                      width="20%"
                       backgroundColor="rgba(0, 0, 0, 0.05)"
                     >
                       <Heading size="md" marginBottom="10px">

diff --git a/frontend/src/pages/MyGroupsPage.tsx b/frontend/src/pages/MyGroupsPage.tsx
@@ -164,10 +164,22 @@ const GroupPage: React.FC<Props> = ({
       >
         {stateVariable.user?.groups.length !== 0 &&
         filteredGroups.length === 0 ? (
-          skelIds.map((id) => {
+          skelIds.map((id, ind) => {
+            const currentPage = Math.floor(ind / (gridDims[0] * gridDims[1]));
+            if (currentPage + 1 != selectedPage) return null;
+            const row = Math.floor(
+              (ind % (gridDims[1] * gridDims[0])) / gridDims[1],
+            );
+            const col = ind % gridDims[1];
             return (
               <GridItem w="100%" h="100%" key={`skelly${id}`}>
-                <SkeletonGroup width="100%" height="100%" />
+                <SkeletonGroup width="100%" height="100%" 
+                  corners={[
+                    row === 0 || col === 0,
+                    row === 0 || col === gridDims[1] - 1,
+                    row === gridDims[0] - 1 || col === gridDims[1] - 1,
+                    row === gridDims[0] - 1 || col === 0,
+                  ]}/>
               </GridItem>
             );
           })

diff --git a/frontend/src/styles/Basket.css b/frontend/src/styles/Basket.css
@@ -6,7 +6,7 @@
 }
 
 .b-header {
-  min-width: 80%;
+  min-width: 100%;
   max-width: 100%;
   justify-content: space-between;
   align-items: center;