Skip to content

Commit 9aa8693

Browse files
silverwindlafriks
silverwind
and
lafriks
authored
Frontpage and Heatmap CSS tweaks (#13443)
* Frontpage and Heatmap CSS tweaks - Make heatmap use primary color - Defined secondary color shades - Set various blue colors to CSS vars - Misc tweaks * remove a useless variable * remove another useless variable Co-authored-by: Lauris BH <[email protected]>
1 parent e461f08 commit 9aa8693

File tree

6 files changed

+207
-175
lines changed

6 files changed

+207
-175
lines changed

‎web_src/js/components/ActivityHeatmap.vue

Lines changed: 20 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<template>
2-
<div>
2+
<div class="heatmap-container">
33
<div v-show="isLoading">
44
<slot name="loading"/>
55
</div>
6-
<h4 v-if="!isLoading" class="total-contributions">
7-
{{ values.length }} total contributions in the last 12 months
8-
</h4>
6+
<div v-if="!isLoading" class="total-contributions">
7+
{{ values.length }} contributions in the last 12 months
8+
</div>
99
<calendar-heatmap
1010
v-show="!isLoading"
1111
:locale="locale"
@@ -26,45 +26,28 @@ export default {
2626
components: {CalendarHeatmap},
2727
data: () => ({
2828
isLoading: true,
29-
colorRange: [],
30-
endDate: null,
29+
colorRange: [
30+
'var(--color-secondary-alpha-70)',
31+
'var(--color-primary-alpha-50)',
32+
'var(--color-primary-alpha-60)',
33+
'var(--color-primary-alpha-70)',
34+
'var(--color-primary-alpha-80)',
35+
'var(--color-primary)',
36+
],
37+
endDate: new Date(),
3138
values: [],
32-
suburl: AppSubUrl,
33-
user: heatmapUser,
3439
locale: {
3540
contributions: 'contributions',
3641
no_contributions: 'No contributions',
3742
},
3843
}),
39-
mounted() {
40-
this.colorRange = [
41-
this.getColor(0),
42-
this.getColor(1),
43-
this.getColor(2),
44-
this.getColor(3),
45-
this.getColor(4),
46-
this.getColor(5)
47-
];
48-
this.endDate = new Date();
49-
this.loadHeatmap(this.user);
50-
},
51-
methods: {
52-
async loadHeatmap(userName) {
53-
const res = await fetch(`${this.suburl}/api/v1/users/${userName}/heatmap`);
54-
const data = await res.json();
55-
this.values = data.map(({contributions, timestamp}) => {
56-
return {date: new Date(timestamp * 1000), count: contributions};
57-
});
58-
this.isLoading = false;
59-
},
60-
getColor(idx) {
61-
const el = document.createElement('div');
62-
el.className = `heatmap-color-${idx}`;
63-
document.body.appendChild(el);
64-
const color = getComputedStyle(el).backgroundColor;
65-
document.body.removeChild(el);
66-
return color;
67-
}
44+
async mounted() {
45+
const res = await fetch(`${AppSubUrl}/api/v1/users/${heatmapUser}/heatmap`);
46+
const data = await res.json();
47+
this.values = data.map(({contributions, timestamp}) => {
48+
return {date: new Date(timestamp * 1000), count: contributions};
49+
});
50+
this.isLoading = false;
6851
},
6952
};
7053
</script>

‎web_src/less/_base.less

Lines changed: 67 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,33 @@
3030
--color-primary-alpha-70: #4183c4b3;
3131
--color-primary-alpha-80: #4183c4cc;
3232
--color-primary-alpha-90: #4183c4e1;
33-
--color-secondary: rgba(34, 36, 38, .15);
33+
--color-secondary: #dedede;
34+
--color-secondary-dark-1: #cecece;
35+
--color-secondary-dark-2: #bfbfbf;
36+
--color-secondary-dark-3: #a0a0a0;
37+
--color-secondary-dark-4: #909090;
38+
--color-secondary-dark-5: #818181;
39+
--color-secondary-dark-6: #717171;
40+
--color-secondary-dark-7: #626262;
41+
--color-secondary-dark-7: #525252;
42+
--color-secondary-dark-8: #434343;
43+
--color-secondary-dark-8: #333333;
44+
--color-secondary-dark-9: #242424;
45+
--color-secondary-dark-10: #141414;
46+
--color-secondary-dark-11: #040404;
47+
--color-secondary-light-1: #e5e5e5;
48+
--color-secondary-light-2: #ebebeb;
49+
--color-secondary-light-3: #f2f2f2;
50+
--color-secondary-light-4: #f8f8f8;
51+
--color-secondary-alpha-10: #dedede19;
52+
--color-secondary-alpha-20: #dedede33;
53+
--color-secondary-alpha-30: #dedede4b;
54+
--color-secondary-alpha-40: #dedede66;
55+
--color-secondary-alpha-50: #dedede80;
56+
--color-secondary-alpha-60: #dedede99;
57+
--color-secondary-alpha-70: #dededeb3;
58+
--color-secondary-alpha-80: #dededecc;
59+
--color-secondary-alpha-90: #dededee1;
3460
--color-body: #fff;
3561
}
3662

@@ -192,6 +218,43 @@ a:hover,
192218
color: var(--color-primary-dark-2);
193219
}
194220

221+
.ui.input.focus > input,
222+
.ui.input > input:focus {
223+
border-color: var(--color-primary);
224+
}
225+
226+
.ui.action.input:not([class*="left action"]) > input:focus {
227+
border-right-color: var(--color-primary);
228+
}
229+
230+
.ui.form input:not([type]):focus,
231+
.ui.form textarea:focus,
232+
.ui.form input[type="date"]:focus,
233+
.ui.form input[type="datetime-local"]:focus,
234+
.ui.form input[type="email"]:focus,
235+
.ui.form input[type="file"]:focus,
236+
.ui.form input[type="number"]:focus,
237+
.ui.form input[type="password"]:focus,
238+
.ui.form input[type="search"]:focus,
239+
.ui.form input[type="tel"]:focus,
240+
.ui.form input[type="text"]:focus,
241+
.ui.form input[type="time"]:focus,
242+
.ui.form input[type="url"]:focus,
243+
.ui.selection.dropdown:focus {
244+
border-color: var(--color-primary);
245+
}
246+
247+
.ui.selection.active.dropdown,
248+
.ui.selection.active.dropdown:hover,
249+
.ui.selection.active.dropdown .menu,
250+
.ui.selection.active.dropdown:hover .menu {
251+
border-color: var(--color-primary-light-2);
252+
}
253+
254+
.ui.selection.dropdown .menu {
255+
margin: 0 -1.25px;
256+
}
257+
195258
.dont-break-out {
196259
overflow-wrap: break-word;
197260
word-wrap: break-word;
@@ -963,59 +1026,13 @@ footer {
9631026
margin-bottom: 2px !important;
9641027
}
9651028

966-
#user-heatmap {
967-
width: 107%; // Fixes newest contributions not showing
968-
text-align: center;
969-
970-
svg:not(:root) {
971-
overflow: inherit;
972-
padding: 0 !important;
973-
}
974-
975-
@media only screen and (max-width: 1200px) {
976-
& {
977-
display: none;
978-
}
979-
}
980-
981-
.total-contributions {
982-
text-align: left;
983-
font-weight: 500;
984-
margin-top: 0;
985-
}
986-
}
987-
988-
.heatmap-color-0 {
989-
background-color: #f4f4f4;
990-
}
991-
992-
.heatmap-color-1 {
993-
background-color: #d8efbf;
994-
}
995-
996-
.heatmap-color-2 {
997-
background-color: #9fdb81;
998-
}
999-
1000-
.heatmap-color-3 {
1001-
background-color: #66c74b;
1002-
}
1003-
1004-
.heatmap-color-4 {
1005-
background-color: #609926;
1006-
}
1007-
1008-
.heatmap-color-5 {
1009-
background-color: #025900;
1010-
}
1011-
10121029
.activity-bar-graph {
1013-
background-color: #6cc644;
1014-
color: #000000;
1030+
background-color: var(--color-primary);
1031+
color: #fff;
10151032
}
10161033

10171034
.activity-bar-graph-alt {
1018-
color: #000000;
1035+
color: #fff;
10191036
}
10201037

10211038
.archived-icon {

‎web_src/less/_dashboard.less

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,6 @@
8282

8383
&.feeds {
8484
.news {
85-
8685
li {
8786
display: flex;
8887
align-items: baseline;
@@ -138,6 +137,10 @@
138137
border-radius: 3px;
139138
word-break: break-all;
140139
}
140+
141+
&:last-of-type .divider {
142+
display: none !important;
143+
}
141144
}
142145

143146
.list {
@@ -160,7 +163,7 @@
160163

161164
li {
162165
&:not(:last-child) {
163-
border-bottom: 1px solid #ebebeb;
166+
border-bottom: 1px solid var(--color-secondary);
164167
}
165168

166169
&.private {
@@ -172,7 +175,7 @@
172175
display: block;
173176

174177
.svg {
175-
color: #888888;
178+
color: var(--color-secondary-dark-6);
176179

177180
&.rear {
178181
font-size: 15px;

‎web_src/less/features/heatmap.less

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
#user-heatmap {
2+
width: 107%; // Fixes newest contributions not showing
3+
text-align: center;
4+
5+
svg:not(:root) {
6+
overflow: inherit;
7+
padding: 0 !important;
8+
}
9+
10+
@media (max-width: 1200px) {
11+
& {
12+
display: none;
13+
}
14+
}
15+
16+
.total-contributions {
17+
text-align: left;
18+
font-weight: 500;
19+
margin-top: 0;
20+
}
21+
}
22+
23+
.heatmap-container {
24+
position: relative;
25+
}
26+
27+
.heatmap-container .total-contributions {
28+
font-size: 11px;
29+
position: absolute;
30+
bottom: 0;
31+
left: 25px;
32+
}
33+
34+
@media (max-width: 1200px) {
35+
.heatmap-container .total-contributions {
36+
left: 21px;
37+
}
38+
}
39+
40+
@media (max-width: 1000px) {
41+
.heatmap-container .total-contributions {
42+
font-size: 10px;
43+
left: 17px;
44+
bottom: -2px;
45+
}
46+
}
47+
48+
.heatmap-container text {
49+
fill: currentColor !important;
50+
}

‎web_src/less/index.less

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
@import "./features/gitgraph.less";
44
@import "./features/animations.less";
5+
@import "./features/heatmap.less";
56
@import "./markdown/mermaid.less";
67

78
@import "_svg";

0 commit comments

Comments
 (0)