Merge pull request #21 from reactivewebstudio/dev

Bug fix (#14) and increased max number of Blurbs (#17)

src/webparts/blurb/BlurbWebPart.ts

@@ -46,29 +46,51 @@ export default class BlurbWebPart extends BaseClientSideWebPart<IBlurbWebPartPro
         displayMode: this.displayMode, // Pass display mode
         onContainerClick: async (index: number) => {
           if (this.displayMode === DisplayMode.Edit) {
+            // Avoid closing and reopening the property pane if the same container is clicked
+            if (this.selectedContainerIndex === index && this.context.propertyPane.isRenderedByWebPart()) {
+              return;
+            }
+
             if (this.context.propertyPane.isRenderedByWebPart()) {
               this.context.propertyPane.close();
             }
+
+            // Add a small delay to ensure smooth UI transitions
             await new Promise(resolve => setTimeout(resolve, 10));
+
+            // Set the selected container index and update edit mode
             this.selectedContainerIndex = index;
             this._isEditMode = true;
+
+            // Refresh and open the property pane for the selected container
             this.context.propertyPane.refresh();
             this.context.propertyPane.open();
           }
         },
         onEditClick: async (index: number) => {
           if (this.displayMode === DisplayMode.Edit) {
+            // Avoid redundant updates if the same container is already being edited
+            if (this.selectedContainerIndex === index && this.context.propertyPane.isRenderedByWebPart()) {
+              return;
+            }
+
+            // Update the selected container index and edit mode
             this.selectedContainerIndex = index;
             this._isEditMode = true;
-
+
+            // Close the property pane if it is already rendered
             if (this.context.propertyPane.isRenderedByWebPart()) {
               this.context.propertyPane.close();
             }
-
+
+            // Add a slight delay for smoother transitions
             await new Promise(resolve => setTimeout(resolve, 10));
+
+            // Refresh and open the property pane for the selected container
             this.context.propertyPane.refresh();
             this.context.propertyPane.open();
           }
+
         },
         onMoveClick: (index: number, direction: 'up' | 'down') => {
           if (this.displayMode === DisplayMode.Edit) {
@@ -297,7 +319,7 @@ export default class BlurbWebPart extends BaseClientSideWebPart<IBlurbWebPartPro
                 PropertyPaneSlider('containerCount', {
                   label: "Number of Blurbs",
                   min: 1,
-                  max: 4,
+                  max: 10,
                   value: this.properties.containerCount,
                   showValue: true,
                 }),

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

@@ -9,31 +9,38 @@
 
 .containerGrid {
   display: flex;
-  justify-content: center;
   flex-wrap: wrap;
-}
+  gap: 16px; // Spacing between containers
+  justify-content: center;
 
-.container {
-  position: relative;
-  margin: 10px;
-  padding: 20px;
-  width: 200px;
-  cursor: pointer;
-  border: 1px solid; // Override with borderColor inline
-  transition: border-color 0.3s, box-shadow 0.3s;
-  transition: box-shadow 0.2s ease, transform 0.2s ease;
-
-  &.selected {
-    border-color: #333;
-    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
-  }
+  .container {
+    flex: 1 1 calc(25% - 16px); // Default: 4 containers per row
+    max-width: 200px; // Optional: Set a max width
+    min-width: 150px; // Ensures smaller containers on resize
+    position: relative;
+    margin: 10px;
+    padding: 20px;
+    width: auto; // Allow flexible width
+    cursor: pointer;
+    border: 1px solid; // Override with borderColor inline
+    transition: border-color 0.3s, box-shadow 0.3s, transform 0.2s ease;
 
-  &:hover .toolbar,
-  &.showToolbar .toolbar {
-    opacity: 1;
-    visibility: visible;
+    &.selected {
+      border-color: #333;
+      box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+    }
+
+    &:hover .toolbar,
+    &.showToolbar .toolbar {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    &:hover {
+      transform: scale(1.02); // Slight zoom on hover
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    }
   }
-}
 
 .hovered {
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); // Light shadow on hover
@@ -65,4 +72,25 @@
 .clickableBlurb {
   text-decoration: none; /* Remove underline from links */
   display: block; /* Ensure the entire block is clickable */
+}
+
+// Responsiveness
+@media (max-width: 1200px) {
+  .container {
+    flex: 1 1 calc(33.33% - 16px); // Adjusts to 3 containers per row
+  }
+}
+
+@media (max-width: 768px) {
+  .container {
+    flex: 1 1 calc(50% - 16px); // Adjusts to 2 containers per row
+  }
+}
+
+@media (max-width: 480px) {
+  .container {
+    flex: 1 1 100%; // Full-width containers on smaller screens
+  }
+}
+
 }

src/webparts/blurb/components/Blurb.tsx

@@ -37,8 +37,9 @@ export const Blurb: React.FunctionComponent<IBlurbProps> = (props) => {
         {props.containers.map((container, index) => {
           const isSelected = selectedBlurbIndex === index;
           const isHovered = hoveredBlurbIndex === index;
-          const WrapperElement = container.linkUrl ? 'a' : 'div';
-          const wrapperProps = container.linkUrl
+
+          const WrapperElement = container.linkUrl && props.displayMode === DisplayMode.Read ? 'a' : 'div';
+          const wrapperProps = container.linkUrl && props.displayMode === DisplayMode.Read
             ? {
                 href: container.linkUrl,
                 target: container.linkTarget || '_self',