Skip to content

Commit 403ac4b

Browse files
chienlengchienleng
authored
Open Electricity style refresh (#256)
* replace font and update background colour * implement open electricity header * update toolbar position * data options bar design update * WIP toolbar designs * update button styles * update export button designs * Update ConsumptionGenerationToggle.vue * refactor toolbar * implement mobile filters * fix issue where chart is not loaded when toolbar is in mobile mode * update narrow component buttons, add range dropdown for certain breakpoints * Update drop-down.scss * update charts/table styles * test out new colours * update colours * update donut vis * update stats table * update ft group selector * update table designs * update stats designs * adjust responsive breakpoint * refactor and update facilities toolbar * show region dropdown in mobile view * update new logo * implement top level mobile nav * update new app header * add facility filters to toolbar * Update NewAppHeader.vue * update colours * style and layout updates * Update ViewDropdown.vue * Update NewAppHeader.vue
1 parent 9f1d398 commit 403ac4b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

68 files changed

+5089
-1534
lines changed

‎assets/scss/app.scss

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
@charset "utf-8";
22

33
// Import Google Fonts
4-
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Serif:300,400,600');
5-
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,700');
4+
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,[email protected],400;9..40,500;9..40,700&display=swap');
65

76
// Define app variables
87
@import './variables.scss';

‎assets/scss/drop-down.scss

+15-10
Original file line numberDiff line numberDiff line change
@@ -11,24 +11,25 @@
1111

1212
.dropdown-trigger-icon {
1313
font-size: 0.8rem;
14-
color: $opennem-link-color;
15-
position: relative;
16-
top: -3px;
1714
}
1815

1916
.dropdown-trigger {
2017
background-color: transparent;
21-
height: 2.25rem;
2218
font-family: $header-font-family;
2319
font-weight: 700;
2420
font-size: inherit;
25-
margin-right: $app-padding / 2;
26-
padding: $app-padding / 8 $app-padding / 2;
27-
color: #000;
28-
border-radius: $header-hover-radius;
21+
padding: 4px 8px;
22+
color: $dark-grey;
23+
height: auto;
24+
25+
span {
26+
display: flex;
27+
align-items: center;
28+
gap: 0.5rem;
29+
}
2930

30-
&:hover {
31-
background-color: $row-hover;
31+
&:hover strong {
32+
color: $opennem-link-color;
3233
}
3334
}
3435

@@ -41,3 +42,7 @@
4142
}
4243
}
4344
}
45+
46+
.dropdown-menu {
47+
z-index: 9999;
48+
}

‎assets/scss/range-interval.scss

+78-38
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,102 @@
1-
.range-interval-selectors {
2-
$breakpoint: 769px;
1+
.button-group {
2+
$border-radius: 4px;
33

4-
.buttons {
5-
background-color: rgba(255, 255, 255, 0.5);
6-
7-
@media screen and (min-width: $breakpoint) {
8-
background-color: transparent;
9-
}
10-
}
4+
display: flex;
5+
align-items: center;
116

12-
@media screen and (min-width: $breakpoint) {
13-
padding: $app-padding / 2 1rem;
14-
padding-left: 0.4rem;
15-
display: flex;
16-
align-items: center;
7+
.buttons {
8+
background-color: $buttons-background;
9+
border-radius: $border-radius;
1710
}
1811

1912
.button {
20-
font-size: 11px;
13+
font-size: 0.9rem;
2114
border-radius: 0;
2215
position: relative;
16+
color: #6a6a6a;
17+
min-width: 40px;
18+
border: 1px solid #dddddd;
2319

24-
&.is-rounded {
25-
min-width: 40px;
20+
.filter-caret {
21+
margin-left: 5px;
2622
}
2723

28-
@media screen and (min-width: $breakpoint) {
29-
border-radius: 290486px;
24+
&:hover {
25+
color: #000;
26+
background-color: transparent;
3027
}
3128

32-
.filter-caret {
33-
margin-left: 5px;
29+
&.is-selected {
30+
background-color: #fff;
31+
color: #000;
32+
border: 1px solid #6A6A6A;
33+
border-radius: $border-radius;
3434
}
35-
}
3635

37-
.range-buttons {
38-
@media screen and (min-width: $breakpoint) {
39-
margin-bottom: 0;
40-
margin-right: 0.4rem;
36+
&:first-child {
37+
border-top-left-radius: $border-radius;
38+
border-bottom-left-radius: $border-radius;
4139
}
42-
}
4340

44-
.filter-period-buttons {
45-
@media screen and (min-width: $breakpoint) {
46-
margin-left: 1rem;
41+
&:last-child {
42+
border-top-right-radius: $border-radius;
43+
border-bottom-right-radius: $border-radius;
4744
}
48-
}
4945

50-
.dropdown-item {
51-
&.is-selected {
52-
background-color: #c74523;
53-
color: #fff;
46+
&:focus:not(:active) {
47+
box-shadow: none;
48+
}
49+
50+
& > span {
51+
display: flex;
52+
justify-content: space-between;
53+
align-items: center;
54+
gap: 5px;
55+
}
56+
57+
.dropdown-trigger-icon {
58+
font-size: 10px;
5459
}
5560
}
5661

57-
.filter-menu {
58-
min-width: 80px;
59-
text-align: left;
62+
.filter-period-buttons {
63+
margin-left: 1rem;
64+
}
65+
66+
}
67+
68+
.filter-menu {
69+
display: block;
70+
margin-top: 2px;
71+
72+
.dropdown-menu {
6073
display: block;
74+
font-size: 1rem;
75+
}
76+
77+
.dropdown-content {
78+
display: flex;
79+
flex-direction: column;
80+
border: 1px solid $border-colour;
81+
gap: 2px;
82+
padding: 4px;
83+
84+
button {
85+
border: 0;
86+
background: none;
87+
cursor: pointer;
88+
text-align: left;
89+
padding: 8px 16px;
90+
border-radius: 4px;
91+
92+
&:hover {
93+
background: $buttons-background;
94+
}
95+
96+
&.is-selected {
97+
background: $opennem-link-color;
98+
color: #fff;
99+
}
100+
}
61101
}
62102
}

‎assets/scss/tooltip.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
display: block !important;
55
z-index: 10000;
66
font-size: 11px;
7-
font-family: 'IBM Plex Serif', Georgia, 'Times New Roman', Times, serif;
7+
font-family: 'DM Sans', sans-serif;
88

99
.tooltip-list {
1010
margin-top: 5px;

‎assets/scss/variables.scss

+11-3
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
// Set your brand colors
22
$beige-light: #d0d1cd;
3-
$beige-lighter: #ece9e6;
3+
$beige-lighter: rgb(250, 249, 246);
44
$opennem-primary: #e34a33;
55
$opennem-link-color: #c74523;
66
$opennem-link-color-dark: #963f29;
77
$opennem-primary-rgb: rgb(199, 69, 35);
88

99
// Update Bulma's global variables
10-
$font-stack: 'IBM Plex Serif', Georgia, 'Times New Roman', Times, serif;
11-
$font-stack-2: 'Playfair Display', Georgia, 'Times New Roman', Times, serif;
10+
$font-stack: 'DM Sans', sans-serif;
11+
$font-stack-2: 'DM Sans', sans-serif;
1212
$family-serif: $font-stack;
1313
$family-primary: $font-stack;
1414
$family-secondary: $font-stack-2;
@@ -37,3 +37,11 @@ $row-hover: hsla(0, 0%, 100%, 0.55);
3737
$background-alpha: rgba(236, 233, 230, 1);
3838

3939
$header-hover-radius: 4px;
40+
41+
// New Colours
42+
$dark-grey: #353535;
43+
44+
$border-colour: #e5e5e5;
45+
$toolbar-padding: 24px;
46+
47+
$buttons-background: #f5f5f5;

‎assets/scss/vis-table.scss

+1
Original file line numberDiff line numberDiff line change
@@ -235,6 +235,7 @@
235235
border: 1px solid transparent;
236236
width: 15px;
237237
height: 15px;
238+
border-radius: 2px;
238239
}
239240

240241
&.click-disable {

‎assets/scss/vis.scss

+9
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
.vis {
2+
background-color: #fff;
3+
}
4+
15
path.line-path {
26
fill: none;
37
stroke: #000;
@@ -218,3 +222,8 @@ path.line-path {
218222
color: #aaa;
219223
}
220224
}
225+
226+
.chart-border {
227+
border: 1px solid #E0DFDC;
228+
background-color: #fff;
229+
}

‎components/Charts/EmissionIntensityChart.vue

+61-60
Original file line numberDiff line numberDiff line change
@@ -22,71 +22,72 @@
2222
@date-axis="(visible) => showDateAxis = visible"
2323
/>
2424

25-
<button
26-
v-if="
27-
showDateAxis && chartShown &&
28-
zoomExtent.length > 0 &&
29-
!readOnly
30-
"
31-
class="button is-rounded is-small reset-btn"
32-
@click.stop="handleZoomReset"
33-
>
34-
Zoom Out
35-
</button>
25+
<div class="chart-border">
26+
<button
27+
v-if="
28+
showDateAxis && chartShown &&
29+
zoomExtent.length > 0 &&
30+
!readOnly
31+
"
32+
class="button is-rounded is-small reset-btn"
33+
@click.stop="handleZoomReset"
34+
>
35+
Zoom Out
36+
</button>
3637

37-
<line-vis
38-
v-if="chartShown"
39-
:read-only="readOnly"
40-
:domain-id="'_emissionIntensity'"
41-
:domain-colour="lineColour"
42-
:dataset="emissionIntensityDataset"
43-
:dynamic-extent="zoomExtent"
44-
:hover-date="hoverDate"
45-
:hover-on="hoverOn"
46-
:focus-date="focusDate"
47-
:focus-on="focusOn"
48-
:range="range"
49-
:interval="interval"
50-
:curve="chartCurve"
51-
:y-axis-log="false"
52-
:y-min="-50"
53-
:y-max="yMax"
54-
:show-x-axis="false"
55-
:show-tooltip="false"
56-
:show-point-on-hover="true"
57-
:vis-height="chartHeight"
58-
:show-zoom-out="showDateAxis"
59-
:x-guides="xGuides"
60-
:y-axis-ticks="3"
61-
:filter-period="filterPeriod"
62-
:class="{ dragging: dragging }"
63-
class="emission-intensity-vis vis-chart"
64-
@dateOver="handleDateHover"
65-
@svgClick="handleSvgClick"
66-
@enter="handleVisEnter"
67-
@leave="handleVisLeave"
68-
/>
38+
<line-vis
39+
v-if="chartShown"
40+
:read-only="readOnly"
41+
:domain-id="'_emissionIntensity'"
42+
:domain-colour="lineColour"
43+
:dataset="emissionIntensityDataset"
44+
:dynamic-extent="zoomExtent"
45+
:hover-date="hoverDate"
46+
:hover-on="hoverOn"
47+
:focus-date="focusDate"
48+
:focus-on="focusOn"
49+
:range="range"
50+
:interval="interval"
51+
:curve="chartCurve"
52+
:y-axis-log="false"
53+
:y-min="-50"
54+
:y-max="yMax"
55+
:show-x-axis="false"
56+
:show-tooltip="false"
57+
:show-point-on-hover="true"
58+
:vis-height="chartHeight"
59+
:show-zoom-out="showDateAxis"
60+
:x-guides="xGuides"
61+
:y-axis-ticks="3"
62+
:filter-period="filterPeriod"
63+
:class="{ dragging: dragging }"
64+
class="emission-intensity-vis vis-chart"
65+
@dateOver="handleDateHover"
66+
@svgClick="handleSvgClick"
67+
@enter="handleVisEnter"
68+
@leave="handleVisLeave"
69+
/>
6970

70-
<date-brush
71-
v-if="showDateAxis && chartShown"
72-
:dataset="emissionIntensityDataset"
73-
:zoom-range="zoomExtent"
74-
:read-only="readOnly"
75-
:interval="interval"
76-
:filter-period="filterPeriod"
77-
:x-ticks="xTicks"
78-
:tick-format="tickFormat"
79-
:second-tick-format="secondTickFormat"
80-
class="date-brush vis-chart"
81-
@date-hover="handleDateHover"
82-
@date-filter="handleZoomExtent"
83-
@enter="handleVisEnter"
84-
@leave="handleVisLeave"
85-
/>
71+
<date-brush
72+
v-if="showDateAxis && chartShown"
73+
:dataset="emissionIntensityDataset"
74+
:zoom-range="zoomExtent"
75+
:read-only="readOnly"
76+
:interval="interval"
77+
:filter-period="filterPeriod"
78+
:x-ticks="xTicks"
79+
:tick-format="tickFormat"
80+
:second-tick-format="secondTickFormat"
81+
class="date-brush vis-chart"
82+
@date-hover="handleDateHover"
83+
@date-filter="handleZoomExtent"
84+
@enter="handleVisEnter"
85+
@leave="handleVisLeave"
86+
/>
87+
</div>
8688

8789
<Divider
8890
v-if="allowResize"
89-
style="margin-left: 0.5rem;"
9091
:allow-x="false"
9192
:show="showDivider"
9293
@dragging="(d) => dragging = d"

0 commit comments

Comments
 (0)