Merge pull request #22 from jameshawkinscodes/dev

Dev

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sharepoint-blurb-web-part",
-  "version": "0.1.0",
+  "version": "0.2.2",
   "private": true,
   "engines": {
     "node": ">=18.17.1 <19.0.0"

src/webparts/blurb/BlurbWebPart.manifest.json

@@ -9,6 +9,7 @@
 
   "requiresCustomScript": false,
   "supportedHosts": ["SharePointWebPart", "TeamsPersonalApp", "TeamsTab", "SharePointFullPage"],
+  "supportsFullBleed": true,
   "supportsThemeVariants": true,
 
   "preconfiguredEntries": [{

src/webparts/blurb/BlurbWebPart.ts

@@ -43,6 +43,8 @@ export default class BlurbWebPart extends BaseClientSideWebPart<IBlurbWebPartPro
         containers: this.properties.containers || [],
         containerCount: this.properties.containerCount || 1,
         isEditMode: this.displayMode === DisplayMode.Edit,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        isFullWidth: (this.context.manifest as any).supportedHosts?.includes('SharePointFullPage'),
         displayMode: this.displayMode, // Pass display mode
         onContainerClick: async (index: number) => {
           if (this.displayMode === DisplayMode.Edit) {

src/webparts/blurb/components/Blurb.module.scss

@@ -10,13 +10,18 @@
 .containerGrid {
   display: flex;
   flex-wrap: wrap;
-  gap: 16px; // Spacing between containers
+  // gap: 12px; // Spacing between containers
   justify-content: center;
+  justify-items: space-between;
+
+  .item {
+    flex: 1 1 min-content;
+  }
 
   .container {
-    flex: 1 1 calc(25% - 16px); // Default: 4 containers per row
+    flex: 1 1; // Default: 4 containers per row
     max-width: 200px; // Optional: Set a max width
-    min-width: 150px; // Ensures smaller containers on resize
+    min-width: 90px; // Ensures smaller containers on resize
     position: relative;
     margin: 10px;
     padding: 20px;
@@ -74,16 +79,22 @@
   display: block; /* Ensure the entire block is clickable */
 }
 
+.fullWidth {
+  width: 100%;
+  margin: 0 auto;
+  padding: 0;
+}
+
 // Responsiveness
 @media (max-width: 1200px) {
   .container {
-    flex: 1 1 calc(33.33% - 16px); // Adjusts to 3 containers per row
+    flex: 1 1 calc(33.33% - 12px); // Adjusts to 3 containers per row
   }
 }
 
 @media (max-width: 768px) {
   .container {
-    flex: 1 1 calc(50% - 16px); // Adjusts to 2 containers per row
+    flex: 1 1 calc(50% - 12px); // Adjusts to 2 containers per row
   }
 }
 

src/webparts/blurb/components/Blurb.tsx

@@ -32,7 +32,7 @@ export const Blurb: React.FunctionComponent<IBlurbProps> = (props) => {
   };
 
   return (
-    <div className={styles.blurbContainer}>
+    <div className={props.isFullWidth ? `${styles.blurbContainer} ${styles.fullWidth}` : styles.blurbContainer}>
       <div className={styles.containerGrid}>
         {props.containers.map((container, index) => {
           const isSelected = selectedBlurbIndex === index;
@@ -122,7 +122,7 @@ export const Blurb: React.FunctionComponent<IBlurbProps> = (props) => {
                 />
               )}
               <h3 style={{ color: container.fontColor }}>{container.title || 'Blurb Title'}</h3>
-              <p style={{ color: container.fontColor }}>{container.text || 'Add text'}</p>
+              <p style={{ color: container.fontColor }}>{container.text || ''}</p>
             </WrapperElement>
           );
         })}

src/webparts/blurb/components/IBlurbProps.ts

@@ -20,6 +20,7 @@ export interface IBlurbProps {
   containerCount: number;
   isEditMode: boolean;
   displayMode: DisplayMode;
+  isFullWidth?: boolean;
   onContainerClick: (index: number) => void;
   onEditClick: (index: number) => void;
   onMoveClick: (index: number, direction: 'up' | 'down') => void; // Updated to include direction