New-UDCounter -Icon as a watermark

21

I’m honestly not sure what I’m doing wrong. This is what I have:

New-UDRow -Columns{
    New-UDColumn -SmallSize 8 -MediumSize 8 -LargeSize 8 -Content {
        New-UDCard -Id "OverallStats" -Content{
            New-UDColumn -SmallSize 4 -MediumSize 4 -LargeSize 4 -Content {
                CreateHouseholds
            }
            New-UDColumn -SmallSize 4 -MediumSize 4 -LargeSize 4 -Content {
                CreateApplicants
            }
            New-UDColumn -SmallSize 4 -MediumSize 4 -LargeSize 4 -Content {
                CreateCharges
            }
        }
    }
    New-UDColumn -SmallSize 4 -MediumSize 4 -LargeSize 4 -Content {
        CreateFamRunningTotal
    }
}
New-UDRow -Columns{
    New-UDColumn -SmallSize 6 -MediumSize 6 -LargeSize 6 -Content {
        New-UDCard -Id "Averages" -Content{
            New-UDColumn -SmallSize 4 -MediumSize 4 -LargeSize 4 -Content {
                CreateAvgFamLim
                CreateAvgNoZeros
                CreateAvgFamUsed
            }
            New-UDColumn -SmallSize 4 -MediumSize 4 -LargeSize 4 -Content {
                CreateAvgApplicantAmnt
                CreateAvgApplicantUsed
            }
        }   
    }
    New-UDColumn -SmallSize 1 -MediumSize 1 -LargeSize 1 -Content {
        CreateApplicantStatsList
    }
    New-UDColumn -SmallSize 1 -MediumSize 1 -LargeSize 1 -Content {
        CreateApplicantStatsList
    }
    New-UDColumn -SmallSize 4 -MediumSize 4 -LargeSize 4 -Content {
        CreateAvgFamAppAmounts
    }
}

The cards at the top look like this:

New-UDStyle -Style $Style -Content{
  $WhenClicked = {
  	Show-UDModal -Content {
  		CreateHHSizeChart
	}
  }

  New-UDElement -Tag 'a' -Attributes @{
 		onClick = $WhenClicked
 		style   = @{
 			'cursor' = 'pointer'
 		}                             
  } -Content {
 		New-UDCard -Id "Households" -title "Households" -Content{
 			New-UDIcon -Icon 'group'
 			$NoOfHHHash = (Get-PSUCache -Key "NoOfHHData")
 			New-UDHeading -Size 5 -Text "$($NoOfHHHash.NoOfHH)"
 		} -Elevation 5
 	}
 }

Cards in second and third row:

New-UDStyle -Style $Style -Content{
    New-UDCard -Id "AvgFamLim" -title "Avg Fam Limit" -Content{
        New-UDIcon -Icon 'dollar_sign'
        $FamilyAvgsHash = (Get-PSUCache -Key "FamilyAvgsData")
        New-UDHeading -Size 5 -Text "$($FamilyAvgsHash.AvgFamLim)"
    } -Elevation 5
}
22

You cool just to include the code you got for $Style please and thank you

23

Of course! New-UDStyle is very useful! Thank you.

I tried using the code that worked for a different dashboard:

$Style = ’
.fa-fw {
text-align: center;
width: 1.25em;
font-size: 4em;
opacity: .2;
float: left;
position: absolute;
top: 130px;
margin-left: 90px;
}

.MuiPaper-root {
transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
justify-content: center;
}
’

and versions of the one’s you’ve posted. Everthing breaks down once I use position: absolute and then try to change top. I was looking at this and it looks like the Icon's “nearest positioned ancestor” is all the way at the top of the dashboard not within the card.

24

Ok I personally think the way you using $Style is risky…I do not think it would work like this, as the formatting will not be preserved…but I assume it is working as styling is being applied. I will have a test of the code you posted and see if I get the same resuts…and I also assume you already tried applying this as a theme and you get the same results? I will test the code you posted, but just wanted the $Style bit as that is crucial to solving the puzzle.

25

Thank you so much! What I noticed today is that if I modify .fa-fw, which includes the 2 lists, to have position: absolute and change top: 20px the icons move relative to the card the lists are in and not the top of the dashboard like the cards.

I’ve tried using Themes in PSU before but never really got it to work. I think the syntax for the fa-sm is not right because background changes but the cards do not.

$themeCards = @{
    '.fa-sm' = @{
        'font-size'   = '6em'
        opacity     = '0.2'
        float       = 'left'
        position    = 'absolute'
        top         = '20px'
        'margin-left' = '145px'
    }
    palette = @{
        primary = @{
            main = '#1d3557'
        }
        background = @{
            default = '#a8dadc'
        }
    }
}

I tried wrapping the New-UDStyle code inside New-UDPaper to see if it would apply the changes relative to the Paper but no luck.

26

I think I was finally able to resolve the issue. It bugged me that all the icons would move with respect to the top of the dashboard instead of the top of their respective cards. I did some research and found this; it goes over the “Position Property” and how a child’s position depends on the parent’s position type, only certain positions allow the parent to serve as anchors.

I’m not sure if its by design or if its a bug but my New_UDcards didnt have a position declared. This caused my icons to look for the closest containing block, which in my case was the initial containing block. The solution was to look for the card, change the position to relative, and then make the changes for the icon. Now I’m just trying to put all of this in a theme.

'.fa-sm' = @{
        'font-size' = '6em'
        opacity = '0.2'
        float = 'left'
        position = 'absolute'
        top = '10%'
        'margin-left' = '50%'
}

'.MuiCard-root' = @{
        overflow = 'hidden'
        position = 'relative'
}