Merge pull request #9 from butugruv/Issue-5

Issue 5

src/webparts/betterHero/BetterHeroWebPart.module.scss

@@ -1,43 +1,7 @@
 //@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
-:root {
-  --hero-image-opacity: .5;
-}
-
-/*
-.betterHero {
-  overflow: hidden;
-  padding: 1em;
-  color: "[theme:bodyText, default: #323130]";
-  color: var(--bodyText);
-  &.teams {
-    font-family: $ms-font-family-fallbacks;
-  }
-}
-
-
-.welcome {
-  text-align: center;
-}
-
-.welcomeImage {
-  width: 100%;
-  max-width: 420px;
-}
-
-.links {
-  a {
-    text-decoration: none;
-    color: "[theme:link, default:#03787c]";
-    color: var(--link); // note: CSS Custom Properties support is limited to modern browsers only
-
-    &:hover {
-      text-decoration: underline;
-      color: "[theme:linkHovered, default: #014446]";
-      color: var(--linkHovered); // note: CSS Custom Properties support is limited to modern browsers only
-    }
+  :root {
+    --hero-image-opacity: .5;
   }
-}
-*/
 
   .textTruncate {
     /* Truncate the text on the title or text of the card */
@@ -69,8 +33,49 @@
       transform: scale(1.05);
     }
   }
-
-  .card:hover .leaderPhoto {
-    /* Zoom in on hover */
-    transform: scale(1.05);
+
+  .customCol {
+    float: left;
+  }
+
+  /* Specific column count styles */
+  .customCol7 {
+      width: calc(100% / 7);
+  }
+
+  .customCol8 {
+      width: calc(100% / 8);
+  }
+
+  .customCol9 {
+      width: calc(100% / 9);
+  }
+
+  .customCol10 {
+      width: calc(100% / 10);
+  }
+
+  .customCol11 {
+      width: calc(100% / 11);
   }
+
+  .customCol12 {
+      width: calc(100% / 12);
+  }
+
+  /* Responsive adjustments */
+  @media (max-width: 768px) {
+      .customCol {
+          width: 50%;
+          /* 2 columns for medium screens */
+      }
+  }
+
+  @media (max-width: 576px) {
+      .customCol {
+          width: 100%;
+          /* 1 column for small screens */
+      }
+  }
+
+

src/webparts/betterHero/BetterHeroWebPart.ts

@@ -153,34 +153,90 @@ export default class BetterHeroWebPart extends BaseClientSideWebPart<IBetterHero
 
       // bootstrap container to make it responsive
       const elContainer = document.createElement('div');
-      elContainer.classList.add('container', 'my-2');
+      elContainer.classList.add('container-fluid', 'my-2');
+      if (this.isFullWidthSection()) {
+         elContainer.style.marginLeft = "11px";
+      }
       this.domElement.appendChild(elContainer);
 
       const elRows = document.createElement('div');
-      elRows.classList.add('row', 'g-2', 'row-cols-md-2', 'row-cols-sm-1', `row-cols-lg-${this.properties.cardCols}`); // add row-col-{num}
-      elContainer.appendChild(elRows);
-
-
 
+      // use custom column layouts when greater than 6 because bootstrap doesn't handle it nicely
+      if (this.properties.cardCols <= 6) {
+         // add row-cols-{num}
+         elRows.classList.add('row', 'g-2', 'row-cols-md-2', 'row-cols-sm-1', `row-cols-lg-${this.properties.cardCols}`);
+      }
+      else {
+         elRows.classList.add('row', 'g-2');
+      }
 
+      elContainer.appendChild(elRows);
 
       // debugger;
       // make a bootstrap card for each image in the array
-      //for (const imageInfo of this.imagesInfo) {
       for (let i = 0; i < this.imagesInfo.length; i++) {
          const elCol = document.createElement('div');
-         elCol.classList.add('col-xs-1');
+
+         if (this.properties.cardCols <= 6) {
+            elCol.classList.add('col-xs-1');
+         }
+         else {
+            elCol.classList.add(`${styles.customCol}`, `${this.getCustomColumnLayoutClass(this.properties.cardCols)}`);
+
+         }
+
+
+
          elRows.appendChild(elCol);
 
          const elCard = this.renderCard(i);
          elCol.appendChild(elCard);
       }
 
-
-      //this.domElement.innerHTML = html;
+      // this.domElement.innerHTML = html;
       // to clear out any javascript do this.domElement.innerHTML = this.domElement.innerHTML
    }
 
+   private isFullWidthSection(): boolean {
+      let element: HTMLElement | null = this.domElement;
+
+      while (element) {
+         if (element.classList && element.classList.contains('CanvasZone--fullWidth')) {
+            // Class found, this is a full-width section
+            return true;
+         }
+         element = element.parentElement;
+      }
+
+      // Full-width section class not found
+      return false;
+   }
+
+   private getCustomColumnLayoutClass(cardCols: number): string {
+      let customColumnLayoutClass: string = '';
+      switch (cardCols) {
+         case 7:
+            customColumnLayoutClass = styles.customCol7;
+            break;
+         case 8:
+            customColumnLayoutClass = styles.customCol8;
+            break;
+         case 9:
+            customColumnLayoutClass = styles.customCol9;
+            break;
+         case 10:
+            customColumnLayoutClass = styles.customCol10;
+            break;
+         case 11:
+            customColumnLayoutClass = styles.customCol11;
+            break;
+         case 12:
+            customColumnLayoutClass = styles.customCol12;
+            break;
+      }
+      return customColumnLayoutClass;
+   }
+
    // Determines if the image extension is valid
    private isImageFile(fileName: string): boolean {
       let isValid = false;

src/webparts/betterHero/loc/en-us.js

@@ -1,8 +1,8 @@
 define([], function () {
   return {
-    "PropertyPaneDescription": "Description",
-    "BasicGroupName": "Group Name",
-    "AddImageFieldLabel": "Add link",
+    "PropertyPaneDescription": "",
+    "BasicGroupName": "",
+    "AddImageFieldLabel": "Add an image",
     "OpacityFieldLabel": "Opacity of the text overlay",
     "CardColFieldLabel": "Number of columns per row",
     "AppLocalEnvironmentSharePoint": "The app is running on your local environment as SharePoint web part",