Skip to content

Commit

Permalink
WIP tidy up
Browse files Browse the repository at this point in the history
  • Loading branch information
@jamesgriff
jamesgriff committed Oct 4, 2024
1 parent 5ee59ca commit f2b3055
Show file tree
Hide file tree
Showing 3 changed files with 11 additions and 80 deletions.
23 changes: 0 additions & 23 deletions GenderPayGap.WebUI/Views/ViewReports/PayComparisonQuartersVisualisation.cshtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,47 +55,25 @@
<div class="pay-comparison-quarters-vis-quarter-faces pay-comparison-quarters-vis-quarter-faces--women">
@for (int i = 0; i < Math.Floor(femalePercent / 4); i++)
{
@* <partial name="SmilingFace" model="@("pay-comparison-quarters-vis-face--woman")"/> *@
await SmilingFace(isFemale: true, filledPercent: 100);
}
@if (remainderFemale > 10)
{
await SmilingFace(isFemale: true, filledPercent: remainderFemale);
@* <div class="pay-comparison-quarters-vis-face-container"> *@
@* <div style="overflow: hidden; width:@(remainderFemale)%;"> *@
@* <partial name="SmilingFace" model="@("pay-comparison-quarters-vis-face--woman")"/> *@
@* </div> *@
@* </div> *@
}
</div>
<div class="pay-comparison-quarters-vis-quarter-number">
<span>
@* @(femalePercent)% *@
</span>
</div>
</div>
<div class="pay-comparison-quarters-vis-quarter-side pay-comparison-quarters-vis-quarter-side--right">
<div class="pay-comparison-quarters-vis-quarter-faces pay-comparison-quarters-vis-quarter-faces--men">
@for (int i = 0; i < Math.Floor(malePercent / 4); i++)
{
@* <partial name="SmilingFace" model="@("pay-comparison-quarters-vis-face--man")"/> *@
await SmilingFace(isFemale: false, filledPercent: 100);
}
@if (remainderMale > 10)
{
await SmilingFace(isFemale: false, filledPercent: remainderMale);
@* <div class="pay-comparison-quarters-vis-face-container"> *@
@* <div style="overflow: hidden; width:@(remainderMale)%;"> *@
@* <partial name="SmilingFace" model="@("pay-comparison-quarters-vis-face--man")"/> *@
@* </div> *@
@* </div> *@
}
</div>
<div class="pay-comparison-quarters-vis-quarter-number">
<span>
@* @(malePercent)% *@
</span>
</div>
</div>
</div>
}
Expand Down Expand Up @@ -159,7 +137,6 @@
Each
<span style="display: inline-block; vertical-align: middle;">
@{ await SmilingFace(isFemale: true, filledPercent: 100); }
@* <partial name="SmilingFace" model="@("#000")"/> *@
</span>
represents 1% of the employees in this organisation
</div>
Expand Down
34 changes: 0 additions & 34 deletions GenderPayGap.WebUI/Views/ViewReports/SmilingFace.cshtml
View file

This file was deleted.

34 changes: 11 additions & 23 deletions GenderPayGap.WebUI/wwwroot/styles/components/_pay-comparison-quarters-vis.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,18 +104,6 @@ $pay-comparison-quarters-vis--women-color: #28a197;
border-bottom-color: #ddd;
}

.pay-comparison-quarters-vis-quarter-number {
height: 100%;
display: flex;
align-items: center;

span {
font-size: 19px;
font-weight: bold;
color: #757575;
}
}

.pay-comparison-quarters-vis-quarter-side {
width: 50%;
display: flex;
Expand All @@ -137,15 +125,15 @@ $pay-comparison-quarters-vis--women-color: #28a197;

.pay-comparison-quarters-vis-quarter-faces {
flex-shrink: 0;
height: calc((min(31px, (50vw - 86px) / 8 - 3px, 4.5vh - 1px) + 3px) * 3 + 10px);
height: calc((min(28px, (50vw - 25px) / 8 - 3px, 4.5vh - 1px) + 3px) * 3 + 10px);
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-content: flex-start;

@media screen and (min-width: 769px) {
height: calc((min(31px, (33.3333vw - 91px) / 8 - 3px, 4.5vh - 1px) + 3px) * 3 + 10px);
height: calc((min(28px, (33.3333vw - 25px) / 8 - 3px, 4.5vh - 1px) + 3px) * 3 + 10px);
}

&.pay-comparison-quarters-vis-quarter-faces--women {
Expand All @@ -160,25 +148,25 @@ $pay-comparison-quarters-vis--women-color: #28a197;
}

.pay-comparison-quarters-vis-face-container {
width: 31px; /* fallback for older browsers */
width: calc(min(31px, (50vw - 86px) / 8 - 3px, 4.5vh - 1px));
width: 28px; /* fallback for older browsers */
width: calc(min(28px, (50vw - 25px) / 8 - 3px, 4.5vh - 1px));

@media screen and (min-width: 769px) {
width: calc(min(31px, (33.3333vw - 91px) / 8 - 3px, 4.5vh - 1px));
width: calc(min(28px, (33.3333vw - 25px) / 8 - 3px, 4.5vh - 1px));
}
}

.pay-comparison-quarters-vis-face {
display: block;
width: 31px; /* fallback for older browsers */
height: 31px; /* fallback for older browsers */
width: calc(min(31px, (50vw - 86px) / 8 - 3px, 4.5vh - 1px));
height: calc(min(31px, (50vw - 86px) / 8 - 3px, 4.5vh - 1px));
width: 28px; /* fallback for older browsers */
height: 28px; /* fallback for older browsers */
width: calc(min(28px, (50vw - 25px) / 8 - 3px, 4.5vh - 1px));
height: calc(min(28px, (50vw - 25px) / 8 - 3px, 4.5vh - 1px));
margin: 1px;

@media screen and (min-width: 769px) {
width: calc(min(31px, (33.3333vw - 91px) / 8 - 3px, 4.5vh - 1px));
height: calc(min(31px, (33.3333vw - 91px) / 8 - 3px, 4.5vh - 1px));
width: calc(min(28px, (33.3333vw - 25px) / 8 - 3px, 4.5vh - 1px));
height: calc(min(28px, (33.3333vw - 25px) / 8 - 3px, 4.5vh - 1px));
}

&.pay-comparison-quarters-vis-face--man .pay-comparison-quarters-vis-face--face-outline {
Expand Down

0 comments on commit f2b3055

Please sign in to comment.