Skip to content

Commit

Permalink
[Scorecards] Added Year comparison for Homepage mobile version
Browse files Browse the repository at this point in the history
  • Loading branch information
@lucascumsille
lucascumsille committed Mar 4, 2025
1 parent f36f6c3 commit 77437b6
Show file tree
Hide file tree
Showing 6 changed files with 312 additions and 200 deletions.
2 changes: 1 addition & 1 deletion scoring/static/scoring/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -430,7 +430,7 @@ forEachElement('.js-category-select', function(categorySelect) {
function ajaxLoadCouncilTypeScorecard(url) {
const selectors = [
'#home-page-main-filter',
'.scorecard-table'
'.scorecard-table',
];

selectors.forEach(selector => {
Expand Down
12 changes: 0 additions & 12 deletions scoring/static/scoring/scss/_utils.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,18 +70,6 @@ $utilities: map-merge(
class: column-gap,
values: $spacers
),
"width": map-merge(
map-get($utilities, "width"),
(
values: map-merge(
map-get(map-get($utilities, "width"), "values"),
(
10: 10%,
15: 15%
),
),
),
),
),
);

Expand Down
158 changes: 81 additions & 77 deletions scoring/static/scoring/scss/scoring-table.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@ $border-table: 1px solid transparentize($color: $black, $amount: 1);
max-height: 97vh;
overflow: auto;

@media only screen and (max-width: $table-desktop-breakpoint) {
width: fit-content; // So it doesn;t use extra space on tablet
}

.highlight {
th, td {
background: lighten($color-scorecard-yellow, 30%) !important;
Expand Down Expand Up @@ -127,7 +131,7 @@ $score-bar-vertical-padding: 8px;

.score-bar {
background: $white;
border: 1px solid #005CAB;
border: 1px solid $primary;
border-radius: $score-bar-border-radius;
width: 150px;
padding: $score-bar-vertical-padding 0;
Expand All @@ -138,27 +142,29 @@ $score-bar-vertical-padding: 8px;
width: 0;
height: 100%;
position: absolute;
background: $primary;
background-color: mix($primary, $white, 10%);
top:0;
border-radius: $score-bar-border-radius;
z-index: 0;
}

span {
display: block;
text-align: center;
line-height: 100%;
margin-bottom: 0;
margin: 0 auto;
z-index: 1;
position: relative;
padding: 0.2rem;
width: fit-content;
border-radius: 4px;
}

span.average {
position: absolute;
right: 10px;
top: $score-bar-vertical-padding;
font-size: 13px;
opacity: 0.9;
top: 50%;
transform: translateY(-50%);
font-size: 0.75rem;
font-weight: 300;
}
}
Expand All @@ -170,11 +176,7 @@ $score-bar-vertical-padding: 8px;
}

@each $name, $color in $theme-colors {
.second-row th.#{$name} {
@include progress-bar-header($color);
}

.council-category-score.#{$name} {
.#{$name} {
@include progress-bar-body($color);
}
}
Expand Down Expand Up @@ -253,7 +255,6 @@ $score-bar-vertical-padding: 8px;
$flex-basis-mobile-council: 80%;
.council-link {
display: block;
margin-left: 5px;
white-space: break-spaces;
text-decoration: none;
font-weight: normal;
Expand Down Expand Up @@ -310,10 +311,10 @@ $flex-basis-mobile-council: 80%;
}

// Mobile table
$padding-left: 8px;
$padding-left: 1rem;

.scorecard-table-mobile {
width: 100%;
width: auto;
white-space: nowrap;
margin: 0;
border-collapse: separate;
Expand All @@ -324,88 +325,91 @@ $padding-left: 8px;
display: none;
}

th.main-header {
// First row "category select"
padding: 0 !important;
display: table-cell !important;
thead {
position: sticky;
z-index: 2;
// Size of the category select element
top: 0;
}
// Second row: "Council name"
tr.second-row {
top:56px;
}
.council-name.header {
font-style: normal;
font-weight: normal;
font-size: 13px;
line-height: 150%;
text-transform: uppercase;
height: 48px;
padding-top: 16px;
background-color: $white;
}

.second-row .total-score .score-bar {
font-size: 13px;
}

// Table body
tbody th, thead th {
padding: $padding-left;
border-top: none;
background: $white;
}

tbody th, tbody td {
word-break: break-word;
line-height: 1.2; // rather than the 150% inherited from body
th,td {
padding: 1rem 0.5rem;
}

.council-link {
@include media-breakpoint-down('xs') {
max-width: 130px;
.name-row {
th,td {
padding-top: 1rem;
padding-bottom: 0.5rem;
text-transform: uppercase;
font-size: 0.8rem;
text-align: center;
}
}

tr {
&:nth-child(odd) {
background-color: #F8F8F8;
.legend-row {
th,td {
padding-top: 0.25rem;
padding-bottom: 0;
text-align: center;
}
}

//Hide Total-score column
tbody tr {
th {
&:nth-child(2) {
display:table-cell;
.score-row {
box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2);
th,td {
padding-top: 0.25rem;
padding-bottom: 1.25rem;
width: 10rem;
text-align: center;
width: 50%;

@include media-breakpoint-up(sm) {
width: 30%;
}
}
}
tbody tr th.active {
display: block;
}

tbody tr {
td {
display:none;
}
}
tbody tr td.active {
display: block;
}
.message-row {
box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2);
background-color: #f2efef;
+ tr {
td,th {
padding-top: 3rem;
}

thead tr {
th {
display:none;
&:nth-child(1), &:nth-child(2) {
display: table-cell;
&.message-row {
td, th {
padding-top: 0;
}
}
}
}

thead tr {
th.active {
display: block;
.score-bar {
width: 120px;
padding: 4px 0;
font-size: 0.8rem;
margin:0 auto;

span.average {
display: none;
}
}
// Hide
}

$js-classes: (
'building',
'transport',
'planning',
'governance',
'biodiversity',
'collaboration',
'waste'
);

@each $class in $js-classes {
.js-#{$class} {
display: none;
}
}
15 changes: 15 additions & 0 deletions scoring/static/scoring/scss/variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -366,13 +366,28 @@ $utilities: (
responsive: true,
class: w,
values: (
10: 10%,
15: 15%,
25: 25%,
50: 50%,
75: 75%,
100: 100%,
auto: auto
)
),
"max-width": (
property: max-width,
responsive: true,
class: mw,
values: (
25: 25%,
50: 50%,
75: 75%,
95: 95%,
100: 100%,
none: none
)
),
"height": (
property: height,
responsive: true,
Expand Down
Loading

0 comments on commit 77437b6

Please sign in to comment.