Merge pull request #772 from pkbullock/main-listview

Added Compact View
pnp · Nov 2, 2024 · f65c35d · f65c35d
2 parents 342c22d + b98408a
commit f65c35d
Show file tree

Hide file tree

Showing 7 changed files with 244 additions and 57 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,2 @@
+{ 
+}
diff --git a/docfx/compact-view.md b/docfx/compact-view.md
@@ -0,0 +1,43 @@
+# Script Samples
+
+Find scenarios and scripts here using tools such as ***PnP PowerShell, CLI for Microsoft 365, SPO Management Shell, Graph PowerShell SDK*** and more. Are you looking for authoring tool in Visual Studio Code? Check out extensions
+[PnP PowerShell for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=adamwojcikit.pnp-powershell-extension) and [CLI for Microsoft 365 for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=adamwojcikit.cli-for-microsoft-365-extension)
+
+<section class="filter-section">
+
+<div id="filters" class="sample-list filter-list float-r">
+<div id="post-sample-filter-all" class="sampletype-item filter-choice active" data-filter="*" title="All Samples">All</div>
+<div id="post-sample-filter-112" class="sampletype-item filter-choice" data-filter="[data-operation*='modernize']" title="Modernize Samples">Modernize</div>
+<div id="post-sample-filter-111" class="sampletype-item filter-choice" data-filter="[data-operation*='data']" title="Data Samples">Data</div>
+<div id="post-sample-filter-110" class="sampletype-item filter-choice" data-filter="[data-operation*='deploy']" title="Deploy Samples">Deploy</div>
+<div id="post-sample-filter-109" class="sampletype-item filter-choice" data-filter="[data-operation*='provision']" title="Provision Samples">Provision</div>
+<div id="post-sample-filter-108" class="sampletype-item filter-choice" data-filter="[data-operation*='configure']" title="Configure Samples">Configure</div>
+<div id="post-sample-filter-107" class="sampletype-item filter-choice" data-filter="[data-operation*='report']" title="Report Samples">Report</div>
+<div id="post-sample-filter-113" class="sampletype-item filter-choice" data-filter="[data-operation*='security']" title="Security Samples">Security</div>
+<div id="post-sample-filter-115" class="sampletype-item filter-choice" data-filter="[data-operation*='ai']" title="AI Samples">AI</div>
+<div id="post-sample-filter-115" class="sampletype-item filter-choice" data-filter="[data-operation*='copilot']" title="Microsoft 365 Copilot Samples">Copilot</div>
+</div>
+
+<div class="search-input-wrapper float-l" aria-hidden="true">
+    <div class="icon-container">
+        &nbsp;
+    </div>
+    <input id="post-search-input" class="search-input" placeholder="Search scripts">
+</div>
+
+<div class="well">
+    <div class="button-group filters-button-group"></div>
+</div>
+
+</section>
+
+<div class="grid compact-view" id="sample-listing" data-view="compact-view">
+    <div class="grid-sizer"></div>
+</div>
+
+<div id="noresults">
+    No results found.
+</div>
+
+
+<img src="https://m365-visitor-stats.azurewebsites.net/script-samples" aria-hidden="true" />
diff --git a/docfx/templates/material/styles/extra.css b/docfx/templates/material/styles/extra.css
@@ -1,13 +1,13 @@
 @media screen and (max-width: 44.9375em) {
     .md-footer__link--prev {
         width: 25%;
-    }    
+    }
 }
 
 @media screen and (min-width: 45em) {
     .md-footer__link {
         width: 50%;
-    }  
+    }
 }
 
 @keyframes fadeIn {
@@ -18,7 +18,7 @@
       opacity:1;
     }
   }
-  
+
   @-moz-keyframes fadeIn {
     0% {
       opacity:0;
@@ -27,7 +27,7 @@
       opacity:1;
     }
   }
-  
+
   @-webkit-keyframes fadeIn {
     0% {
       opacity:0;
@@ -36,7 +36,7 @@
       opacity:1;
     }
   }
-  
+
   @-o-keyframes fadeIn {
     0% {
       opacity:0;
@@ -45,7 +45,7 @@
       opacity:1;
     }
   }
-  
+
   @-ms-keyframes fadeIn {
     0% {
       opacity:0;
@@ -300,7 +300,7 @@ li.md-nav__item {
         width: .9rem;
         height: .9rem;
         transition: transform 250ms;
-    }   
+    }
 }
 
 .md-nav__icon::before {
@@ -322,7 +322,7 @@ li.md-nav__item {
 
 
 li.md-nav__item .md-nav__link:active, li.md-nav__item .md-nav__link:hover
-{ 
+{
     text-decoration: underline;
 }
 
@@ -560,7 +560,7 @@ li.md-nav__item .md-nav__link:active, li.md-nav__item .md-nav__link:hover {
     pointer-events: none;
     white-space: nowrap;
 }
-/* 
+/*
 .sampletype-item::after {
     content: attr(title);
     background-color: #0078D4;
@@ -708,7 +708,7 @@ li.md-nav__item .md-nav__link:active, li.md-nav__item .md-nav__link:hover {
     background-color: #ea64a2
 }
 
-/* 
+/*
 TODO: Move styles
 .samples-section {
     clear: both;
@@ -775,7 +775,7 @@ TODO: Move styles
 }
 
 .sample-preview img {
-    
+
     border-radius: 5px;
     height: 100%;
     width: 100%;
@@ -1035,7 +1035,7 @@ TODO: Move styles
         height: 100px;
         max-height: 100px;
     }
-    
+
     .sample-text{
 
         height: 120px;
@@ -1045,7 +1045,7 @@ TODO: Move styles
     .sample-inner{
         min-height: 300px;
     }
-    
+
 }
 
 /* ADDED FOR DIAGNOSIS */
@@ -1072,6 +1072,7 @@ TODO: Move styles
 
 .filter-section{
     padding: 0;
+    box-shadow: 0 4px 2px rgb(0 0 0 / 5%);
 }
 
 .filter-section .filter-list{
@@ -1099,3 +1100,80 @@ p.sample-title {
     overflow: unset;
 }
 
+.compact-view .producttype-item {
+    right: 10px !important;
+    top: auto !important;
+    left: auto !important;
+}
+
+.compact-view .producttype-item:nth-of-type(4) {
+    margin-right: 30px !important;
+    z-index: 20;
+}
+
+.compact-view .producttype-item:nth-of-type(2),
+.compact-view .producttype-item:not(:first-child){
+    /* margin-right: 40px; */
+    z-index: 40;
+}
+
+.compact-view .sample-details{
+    margin-top: 0;
+    border-left: 3px solid #0078D4;
+    border-radius: 5px;
+}
+
+.compact-view .content p{
+    margin-bottom: 0.5rem;
+}
+
+.compact-view .activity-details,
+.compact-view .author-avatar{
+    padding-top: 5px;
+}
+
+/* Data driven backgrounds */
+.compact-view[data-products^="sharepoint"] .sample-details{
+    border-left: 3px solid var(--sharepoint-product-color);
+    background: radial-gradient(circle at top left, color-mix(in srgb, var(--sharepoint-product-color) 10%, transparent) 0, white 65%)
+}
+
+.compact-view[data-products^="teams"] .sample-details{
+    border-left: 3px solid var(--teams-product-color);
+    background: radial-gradient(circle at top left, color-mix(in srgb, var(--teams-product-color) 10%, transparent) 0, white 65%)
+}
+
+.compact-view[data-products^="graph"] .sample-details {
+    border-left: 3px solid var(--graph-product-color);
+    background: radial-gradient(circle at top left, color-mix(in srgb, var(--graph-product-color) 10%, transparent) 0, white 65%)
+}
+
+.compact-view[data-products^="azure ad"] .sample-details,
+.compact-view[data-products^="azuread"] .sample-details {
+    border-left: 3px solid var(--azuread-product-color);
+    background: radial-gradient(circle at top left, color-mix(in srgb, var(--azuread-product-color) 10%, transparent) 0, white 65%)
+}
+
+.compact-view[data-products^="power automate"] .sample-details,
+.compact-view[data-products^="powerautomate"] .sample-details {
+   border-left: 3px solid var(--powerautomate-product-color);
+   background: radial-gradient(circle at top left, color-mix(in srgb, var(--powerautomate-product-color) 10%, transparent) 0, white 65%)
+}
+
+.compact-view[data-products^="office"] .sample-details {
+    border-left: 3px solid var(--office365-product-color);
+    background: radial-gradient(circle at top left, color-mix(in srgb, var(--office365-product-color) 10%, transparent) 0, white 65%)
+}
+
+.compact-view[data-products^="microsoft todo"] .sample-details, 
+.compact-view[data-products^="microsoft to do"] .sample-details, 
+.compact-view[data-products^="todo"] .sample-details {
+    border-left: 3px solid var(--microsofttodo-product-color);
+    background: radial-gradient(circle at top left, color-mix(in srgb, var(--microsofttodo-product-color) 10%, transparent) 0, white 65%)
+}
+
+.compact-view[data-products^="powerapps"] .sample-details,
+.compact-view[data-products^="power apps"] .sample-details {
+    border-left: 3px solid var(--powerapps-product-color);
+    background: radial-gradient(circle at top left, color-mix(in srgb, var(--powerapps-product-color) 10%, transparent) 0, white 65%)
+}
diff --git a/docfx/templates/material/styles/filtersamples.js b/docfx/templates/material/styles/filtersamples.js
@@ -1,16 +1,9 @@
-// external js: isotope.pkgd.js
-
-/***
- * This is a generic isotope filter for samples
- */
-
 $(document).ready(function () {
   var filterText = $('#sample-listing').data("filter");
   var qsRegex;
   var buttonFilter;
-  // var urlParams = new URLSearchParams(window.location.search);
-  // var query = urlParams.get('query');
-
+  var viewMode = $('#sample-listing').data("view") || 'grid'; // Default view mode
+
   // init Isotope
   var $grid = $('#sample-listing').isotope({
     itemSelector: '.sample-thumbnail',
@@ -22,27 +15,20 @@ $(document).ready(function () {
       title: '.sample-title'
     },
     filter: function () {
-
-      //var urlResult = query ? $(this).data("keywords").match(query): true;
       var searchResult = qsRegex ? $(this).data("keywords").match(qsRegex) : true;
       var buttonResult = buttonFilter ? $(this).is(buttonFilter) : true;
-
       return searchResult && buttonResult;
     },
-
     fitRows: {
       columnWidth: '.grid-sizer'
     }
-
   });
 
   // Display/hide a message when there are no results
   $grid.on('arrangeComplete', function (_event, filteredItems) {
     if (filteredItems.length > 0) {
-      // hide message 
       $("#noresults").hide();
     } else {
-      // show message; 
       $("#noresults").show();
     }
   });
@@ -63,15 +49,10 @@ $(document).ready(function () {
     });
 
     $.each(data, function (_u, sample) {
-
-      var item = loadSample(sample, filterText);
-
+      var item = loadSample(sample, filterText, viewMode);
       if (item !== null) {
-        $grid.append(item)
-          // add and lay out newly appended items
-          .isotope('appended', item);
+        $grid.append(item).isotope('appended', item);
       }
-
     });
 
     // Update the sort
@@ -98,7 +79,6 @@ $(document).ready(function () {
       filters = filters.join('');
       buttonFilter = filters;
       $grid.isotope();
-
     });
   });
 
@@ -113,12 +93,11 @@ $(document).ready(function () {
     var newUrl = urlParts[0];
 
     if (searchVal.length > 0) {
-      var newUrl = urlParts[0] + "?query=" +searchVal;  
-    } 
-
-    window.history.pushState({}, "", newUrl);
+      newUrl = urlParts[0] + "?query=" + searchVal;
+    }
 
-    }, 200));
+    window.history.pushState({}, "", newUrl);
+  }, 200));
 
   // debounce so filtering doesn't happen every millisecond
   function debounce(fn, threshold) {
@@ -137,16 +116,13 @@ $(document).ready(function () {
 
   // See if there are any passed parameters
   try {
-
-    // Do not search immediately as grid isn't fully loaded at this point
-    $grid.one( 'arrangeComplete', function() {
+    $grid.one('arrangeComplete', function () {
       var urlParams = new URLSearchParams(window.location.search);
       var query = urlParams.get('query');
       if (query !== "") {
         search.val(query).change();
       }
     });
-
   } catch (error) {
     // Be vewy vewy quiet
   }