Skip to content

Commit

Permalink
[General] Added new colours to sections
Browse files Browse the repository at this point in the history
  • Loading branch information
@lucascumsille
lucascumsille committed Oct 16, 2023
1 parent 433bfcf commit dd52346
Show file tree
Hide file tree
Showing 4 changed files with 72 additions and 35 deletions.
37 changes: 37 additions & 0 deletions scoring/static/scoring/scss/scoring-table.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,9 +170,36 @@ $score-bar-vertical-padding: 8px;
border-radius: 50%;
height: 26px;
width: 26px;
@each $name, $colour in $theme-colors {
&.is--#{$name} {
border-color: $colour;
}
}
position: relative;
@each $name, $colour in $theme-colors {
&.is--#{$name} {
&::before {
content: '';
position: absolute;
background-color: $colour;
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
top: 0;
left: 0;
mix-blend-mode: hue;
}
}
}

&:hover {
@include chevron-down($white);
@each $name, $colour in $theme-colors {
&.is--#{$name} {
background-color: $colour;
}
}
}

&:focus {
Expand All @@ -183,12 +210,22 @@ $score-bar-vertical-padding: 8px;
&.is-sorted-descending {
background-color: $primary;
@include chevron-down($white);
@each $name, $colour in $theme-colors {
&.is--#{$name} {
background-color: $colour;
}
}
}

&.is-sorted-ascending {
transform: rotate(180deg);
background-color: $primary;
@include chevron-down($white);
@each $name, $colour in $theme-colors {
&.is--#{$name} {
background-color: $colour;
}
}
}
}

Expand Down
18 changes: 9 additions & 9 deletions scoring/static/scoring/scss/variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,15 +36,15 @@ $info: $color-scorecard-yellow;
$dark: $black;

$color-total-score:$primary;
$color-category-1:adjust-hue($primary, 10);
$color-category-2:adjust-hue($primary, 20);
$color-category-3:adjust-hue($primary, 30);
$color-category-4:adjust-hue($primary, 40);
$color-category-5:adjust-hue($primary, 50);
$color-category-6:adjust-hue($primary, 60);
$color-category-7:adjust-hue($primary, 70);
$color-category-8:adjust-hue($primary, 80);
$color-category-9:adjust-hue($primary, 90);
$color-category-1:#098995;
$color-category-2:#cc2f62;
$color-category-3:#12855e;
$color-category-4:#4357d7;
$color-category-5:#ca3f1b;
$color-category-6:#cd1393;
$color-category-7:#b85c0f;
$color-category-8:#4d69d1;
$color-category-9:#982fcc;

$color-total-score-light:mix($color-total-score, $white, 20%);
$color-category-light-1:mix($color-category-1, $white, 20%);
Expand Down
30 changes: 15 additions & 15 deletions scoring/templates/scoring/home.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,50 +90,50 @@ <h3 class="d-inline-block">
</th>
<th scope="col" class="position-sticky pb-0 total-score" style="z-index:2">
<div class="d-flex flex-row-reverse justify-content-end">
<span class="text-center fw-bold">Total Score</span>
<span class="text-center fw-bold mt-1">Total Score</span>
<button class="js-sort-table btn btn-outline-primary sort-icon align-items-start {% if sorted_by is None %} is-sorted-descending{% endif %}" title="Sort lowest first" data-sort-default="descending"></button>
</div>
</th>
<th scope="col" class="pb-0">
<div class="d-flex flex-row-reverse justify-content-end">
<a class="text-decoration-none fw-bold link-category-1" href="{% url 'scoring:methodology' %}#sec-gov">Building & Heating</a>
<button class="js-sort-table btn btn-outline-primary sort-icon align-items-start {% if sorted_by == 's1_b_h' %} is-sorted-descending{% endif %}" title="Sort highest first"></button>
<a class="text-decoration-none fw-bold mt-1 link-category-1" href="{% url 'scoring:methodology' %}#sec-gov">Building & Heating</a>
<button class="js-sort-table btn btn-outline-primary sort-icon align-items-start is--category-1 {% if sorted_by == 's1_b_h' %} is-sorted-descending{% endif %}" title="Sort highest first"></button>
</div>
</th>
<th scope="col" class="pb-0">
<div class="d-flex flex-row-reverse justify-content-end">
<a class="text-decoration-none fw-bold link-category-2" href="{% url 'scoring:methodology' %}#sec-ma">Transport</a>
<button class="js-sort-table btn btn-outline-primary sort-icon align-items-start {% if sorted_by == 's2_tran' %} is-sorted-descending{% endif %}" title="Sort highest first"></button>
<a class="text-decoration-none fw-bold mt-1 link-category-2" href="{% url 'scoring:methodology' %}#sec-ma">Transport</a>
<button class="js-sort-table btn btn-outline-primary sort-icon align-items-start is--category-2 {% if sorted_by == 's2_tran' %} is-sorted-descending{% endif %}" title="Sort highest first"></button>
</div>
</th>
<th scope="col" class="pb-0">
<div class="d-flex flex-row-reverse justify-content-end">
<a class="text-decoration-none fw-bold link-category-3" href="{% url 'scoring:methodology' %}#sec-ca">Planning & Land Use</a>
<button class="js-sort-table btn btn-outline-primary sort-icon align-items-start {% if sorted_by == 's3_p_lu' %} is-sorted-descending{% endif %}" title="Sort highest first"></button>
<a class="text-decoration-none fw-bold mt-1 link-category-3" href="{% url 'scoring:methodology' %}#sec-ca">Planning & Land Use</a>
<button class="js-sort-table btn btn-outline-primary sort-icon align-items-start is--category-3 {% if sorted_by == 's3_p_lu' %} is-sorted-descending{% endif %}" title="Sort highest first"></button>
</div>
</th>
<th scope="col" class="pb-0">
<div class="d-flex flex-row-reverse justify-content-end">
<a class="text-decoration-none fw-bold link-category-4" href="{% url 'scoring:methodology' %}#sec-coms">Governance & Finance</a>
<button class="js-sort-table btn btn-outline-primary sort-icon align-items-start {% if sorted_by == 's4_g_f' %} is-sorted-descending{% endif %}" title="Sort highest first"></button>
<a class="text-decoration-none fw-bold mt-1 link-category-4" href="{% url 'scoring:methodology' %}#sec-coms">Governance & Finance</a>
<button class="js-sort-table btn btn-outline-primary sort-icon align-items-start is--category-4 {% if sorted_by == 's4_g_f' %} is-sorted-descending{% endif %}" title="Sort highest first"></button>
</div>
</th>
<th scope="col" class="pb-0">
<div class="d-flex flex-row-reverse justify-content-end">
<a class="text-decoration-none fw-bold link-category-5" href="{% url 'scoring:methodology' %}#sec-mset">Biodiversity</a>
<button class="js-sort-table btn btn-outline-primary sort-icon align-items-start {% if sorted_by == 's5_bio' %} is-sorted-descending{% endif %}" title="Sort highest first"></button>
<a class="text-decoration-none fw-bold mt-1 link-category-5" href="{% url 'scoring:methodology' %}#sec-mset">Biodiversity</a>
<button class="js-sort-table btn btn-outline-primary sort-icon align-items-start is--category-5 {% if sorted_by == 's5_bio' %} is-sorted-descending{% endif %}" title="Sort highest first"></button>
</div>
</th>
<th scope="col" class="pb-0">
<div class="d-flex flex-row-reverse justify-content-end">
<a class="text-decoration-none fw-bold link-category-6" href="{% url 'scoring:methodology' %}#sec-co">Collaboration & Engagement</a>
<button class="js-sort-table btn btn-outline-primary sort-icon align-items-start {% if sorted_by == 's6_c_e' %} is-sorted-descending{% endif %}" title="Sort highest first"></button>
<a class="text-decoration-none fw-bold mt-1 link-category-6" href="{% url 'scoring:methodology' %}#sec-co">Collaboration & Engagement</a>
<button class="js-sort-table btn btn-outline-primary sort-icon align-items-start is--category-6 {% if sorted_by == 's6_c_e' %} is-sorted-descending{% endif %}" title="Sort highest first"></button>
</div>
</th>
<th scope="col" class="pb-0">
<div class="d-flex flex-row-reverse justify-content-end">
<a class="text-decoration-none fw-bold link-category-7" href="{% url 'scoring:methodology' %}#sec-dsi">Waste Reduction & Food</a>
<button class="js-sort-table btn btn-outline-primary sort-icon align-items-start {% if sorted_by == 's7_wr_f' %} is-sorted-descending{% endif %}" title="Sort highest first"></button>
<a class="text-decoration-none fw-bold mt-1 link-category-7" href="{% url 'scoring:methodology' %}#sec-dsi">Waste Reduction & Food</a>
<button class="js-sort-table btn btn-outline-primary sort-icon align-items-start is--category-7 {% if sorted_by == 's7_wr_f' %} is-sorted-descending{% endif %}" title="Sort highest first"></button>
</div>
</th>
</tr>
Expand Down
22 changes: 11 additions & 11 deletions scoring/templates/scoring/home_combined.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,38 +12,38 @@
</th>
<th scope="col" class="position-sticky pb-0 total-score" style="z-index:2">
<div class="d-flex flex-row-reverse justify-content-end">
<span class="text-center fw-bold">Total Score</span>
<span class="text-center fw-bold mt-1">Total Score</span>
<button class="js-sort-table btn btn-outline-primary sort-icon align-items-start {% if sorted_by is None %} is-sorted-descending{% endif %}" title="Sort lowest first" data-sort-default="descending"></button>
</div>
</th>
<th scope="col" class="pb-0">
<div class="d-flex flex-row-reverse justify-content-end">
<a class="text-decoration-none fw-bold link-category-1" href="{% url 'scoring:methodology' %}#sec-gov">Building & Heating & Green Skills</a>
<button class="js-sort-table btn btn-outline-primary sort-icon align-items-start {% if sorted_by == 's1_b_h_gs_ca' %} is-sorted-descending{% endif %}" title="Sort highest first"></button>
<a class="text-decoration-none fw-bold mt-1 link-category-1" href="{% url 'scoring:methodology' %}#sec-gov">Building & Heating & Green Skills</a>
<button class="js-sort-table btn btn-outline-primary sort-icon align-items-start is--category-1 {% if sorted_by == 's1_b_h_gs_ca' %} is-sorted-descending{% endif %}" title="Sort highest first"></button>
</div>
</th>
<th scope="col" class="pb-0">
<div class="d-flex flex-row-reverse justify-content-end">
<a class="text-decoration-none fw-bold link-category-2" href="{% url 'scoring:methodology' %}#sec-ma">Transport</a>
<button class="js-sort-table btn btn-outline-primary sort-icon align-items-start {% if sorted_by == 's2_tran_ca' %} is-sorted-descending{% endif %}" title="Sort highest first"></button>
<a class="text-decoration-none fw-bold mt-1 link-category-2" href="{% url 'scoring:methodology' %}#sec-ma">Transport</a>
<button class="js-sort-table btn btn-outline-primary sort-icon align-items-start is--category-2 {% if sorted_by == 's2_tran_ca' %} is-sorted-descending{% endif %}" title="Sort highest first"></button>
</div>
</th>
<th scope="col" class="pb-0">
<div class="d-flex flex-row-reverse justify-content-end">
<a class="text-decoration-none fw-bold link-category-3" href="{% url 'scoring:methodology' %}#sec-ca">Planning & Biodiversity</a>
<button class="js-sort-table btn btn-outline-primary sort-icon align-items-start {% if sorted_by == 's3_p_b_ca' %} is-sorted-descending{% endif %}" title="Sort highest first"></button>
<a class="text-decoration-none fw-bold mt-1 link-category-3" href="{% url 'scoring:methodology' %}#sec-ca">Planning & Biodiversity</a>
<button class="js-sort-table btn btn-outline-primary sort-icon align-items-start is--category-3 {% if sorted_by == 's3_p_b_ca' %} is-sorted-descending{% endif %}" title="Sort highest first"></button>
</div>
</th>
<th scope="col" class="pb-0">
<div class="d-flex flex-row-reverse justify-content-end">
<a class="text-decoration-none fw-bold link-category-4" href="{% url 'scoring:methodology' %}#sec-coms">Governance & Finance</a>
<button class="js-sort-table btn btn-outline-primary sort-icon align-items-start {% if sorted_by == 's4_g_f_ca' %} is-sorted-descending{% endif %}" title="Sort highest first"></button>
<a class="text-decoration-none fw-bold mt-1 link-category-4" href="{% url 'scoring:methodology' %}#sec-coms">Governance & Finance</a>
<button class="js-sort-table btn btn-outline-primary sort-icon align-items-start is--category-4 {% if sorted_by == 's4_g_f_ca' %} is-sorted-descending{% endif %}" title="Sort highest first"></button>
</div>
</th>
<th scope="col" class="pb-0">
<div class="d-flex flex-row-reverse justify-content-end">
<a class="text-decoration-none fw-bold link-category-6" href="{% url 'scoring:methodology' %}#sec-co">Collaboration & Engagement</a>
<button class="js-sort-table btn btn-outline-primary sort-icon align-items-start {% if sorted_by == 's5_c_e_ca' %} is-sorted-descending{% endif %}" title="Sort highest first"></button>
<a class="text-decoration-none fw-bold mt-1 link-category-6" href="{% url 'scoring:methodology' %}#sec-co">Collaboration & Engagement</a>
<button class="js-sort-table btn btn-outline-primary sort-icon align-items-start is--category-5 {% if sorted_by == 's5_c_e_ca' %} is-sorted-descending{% endif %}" title="Sort highest first"></button>
</div>
</th>
</tr>
Expand Down

0 comments on commit dd52346

Please sign in to comment.