commit changes to grid tiles

samples/react-my-personal-apps/README.md

@@ -24,7 +24,11 @@ This Web Part uses MSgraph Open Extension to save the personal information on us
 
   
 
-![Birthdays Web Part](./assets/Image1.png)
+![Birthdays Web Part](./assets/image14.png)
+
+![Birthdays Web Part](./assets/image13.png)
+
+![Birthdays Web Part](./assets/image12.png)
 
 ![PersonalApps](./assets/image11.png)
 

samples/react-my-personal-apps/src/webparts/personalApps/components/AppItem/AppItem.module.scss

@@ -2,22 +2,7 @@
 @import "~office-ui-fabric-react/dist/sass/semanticSlots";
 @import './node_modules/spfx-uifabric-themes/office.theme';
 @import "./../../../../Common/themeColors.module.scss";
-@media screen and (min-width: 40em) {
-  .card {
-     max-width: calc(50% -  1em);
-  }
-}
 
-@media screen and (min-width: 60em) {
-  .card {
-      max-width: calc(25% - 1em);
-  }
-}
-@media all and (min-width: 480px) and (max-width: 768px) {
-  .card {
-    max-width: 100%;
-}
- }
 
 
 .card {
@@ -25,7 +10,7 @@
 
   min-height: 60px;
   max-height: 60px;
-  min-width: 300px;
+ 
   justify-content: start;
   margin-bottom: 5px;
   margin-right: 5px;
@@ -33,11 +18,14 @@
   border-style: solid;
   border-width: 1px;
   border-color: $ms-color-neutralTertiaryAlt;
-  padding: 20px;
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-top: 12px;
+  padding-bottom: 12px;
   align-items: flex-start;
   background-color:$bodyBackgroundColor;
   color: $bodyTextColor;
-  flex: 0 1 365px;
+  max-width:100%;
 }
 
 .card:hover {

samples/react-my-personal-apps/src/webparts/personalApps/components/AppTile/AppTile.module.scss

@@ -4,17 +4,16 @@
 
 .tile {
   display: flex;
-  max-width: 120px;
   min-height: 120px;
   max-height: 120px;
-  min-width: 120px;
+ /* min-width: 120px;*/
   justify-content: start;
   margin: 5px;
   flex-direction: column;
   border-style: solid;
   border-width: 1px;
   border-color: $ms-color-neutralTertiaryAlt;
-  padding: 10px;
+/*  padding: 10px; */
   align-items: center;
   justify-items: center;
   justify-content: center;

samples/react-my-personal-apps/src/webparts/personalApps/components/AppTile/AppTile.tsx

@@ -3,12 +3,14 @@ import { IAppTileProps } from "./IAppTileProps";
 import * as React from "react";
 import * as ReactDom from "react-dom";
 import styles from "./AppTile.module.scss";
+import { PropertyFieldCollectionDataHost } from "@pnp/spfx-property-controls/lib/PropertyFieldCollectionData";
 
 export const AppTile = (props: IAppTileProps) => {
   return (
     <>
       <div
         className={styles.tile}
+        title={props.description}
         onClick={event => {
           event.preventDefault();
           window.open(props.url, "_blank");

samples/react-my-personal-apps/src/webparts/personalApps/components/PersonalApps.module.scss

@@ -20,12 +20,20 @@
 
 .personalApps {
   padding-top: 15px;
-  .container {
+  .containerTiles {
    margin-top:15px;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
+    
+    display: grid;
+    grid-template-columns: repeat( auto-fit, minmax(120px, 1fr) );
+    grid-template-rows: auto;
   }
+  .containerItems {
+    margin-top:15px;
+     width: 100%;
+     display: grid;
+     grid-template-columns: repeat( auto-fit, minmax(220px, 1fr) );
+     grid-template-rows: auto;
+   }
 
   .row {
     @include ms-Grid-row;

samples/react-my-personal-apps/src/webparts/personalApps/components/PersonalApps.tsx

@@ -102,7 +102,7 @@ export default class PersonalApps extends React.Component<
               }}
             />
           )}
-          <div className={styles.container}>
+         
             {isLoading && (
               <div
                 style={{
@@ -119,7 +119,7 @@ export default class PersonalApps extends React.Component<
                 {errorMessage}
               </MessageBar>
             )}
-
+            <div className={view == 'Tiles' ? styles.containerTiles : styles.containerItems }>
             {apps &&
               apps.length > 0 &&
               apps.map(item => {