srizan/archived-hc-harbor
1
0
Fork 0
mirror of https://github.com/SrIzan10/hc-harbor.git synced 2026-05-01 10:45:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

activity graph recoloring!

Browse Source
This commit is contained in:
Echo
2025-06-17 18:31:49 -04:00
parent 5176229f7f
commit 65beaa99a4
2 changed files with 37 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
app/assets/stylesheets/activity_graph.css
View File

@@ -42,48 +42,10 @@
background: rgba(255, 255, 255, 0.05) !important;
}
/* For lightness 90% and above - light green */
.day[style*="background-color: hsl(120, 100%, 9"] {
background-color: #9be9a8 !important;
border: 1px solid #85e394 !important;
}
/* For lightness around 80% - medium-light green */
.day[style*="background-color: hsl(120, 100%, 8"] {
background-color: #56d364 !important;
border: 1px solid #46c155 !important;
}
/* For lightness around 70% - medium green */
.day[style*="background-color: hsl(120, 100%, 7"] {
background-color: #40c463 !important;
border: 1px solid #35b058 !important;
}
/* For lightness around 60% - medium-dark green */
.day[style*="background-color: hsl(120, 100%, 6"] {
background-color: #30a14e !important;
border: 1px solid #2a9147 !important;
}
/* For lightness around 50% - dark green */
.day[style*="background-color: hsl(120, 100%, 5"] {
background-color: #2a8840 !important;
border: 1px solid #24753a !important;
}
/* For lightness 40% and below - very dark green */
.day[style*="background-color: hsl(120, 100%, 4"],
.day[style*="background-color: hsl(120, 100%, 3"],
.day[style*="background-color: hsl(120, 100%, 2"] {
background-color: #216e39 !important;
border: 1px solid #1b5e31 !important;
}
/* Add subtle hover effect */
.day:hover {
transform: scale(1.05);
transition: 0.05s all;
transform: scale(1.1);
transition: 0.2s all;
z-index: 5;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}
@@ -114,3 +76,19 @@
transform: rotate(360deg);
}
}
.lvl0 { background-color: #151b23; }
.lvl1 { background-color: #033a16; }
.lvl2 { background-color: #196c2e; }
.lvl3 { background-color: #2ea043; }
.lvl4 { background-color: #56d364; }
@media (prefers-color-scheme: light) { /* eww */
.lvl0 { background-color: #eff2f5; }
.lvl1 { background-color: #aceebb; }
.lvl2 { background-color: #4bc26b; }
.lvl3 { background-color: #2da44e; }
.lvl4 { background-color: #116329; }
}

26
app/views/static_pages/_activity_graph.html.erb
View File

@@ -4,16 +4,27 @@
<div class="activity-graph">
<% (365.days.ago.to_date..Time.current.to_date).to_a.each do |date| %>
<% duration = daily_durations[date] || 0 %>
<% # Calculate lightness from 90% (least active) to 20% (most active) %>
<% # if there is no duration, set lightness to 100% %>
<% lightness = (duration < 1.minute) ? 100 : 100 - (70.0 * duration / length_of_busiest_day) %>
<a class="day"
<% if duration < 1.minute %>
<% level = 0 %>
<% else %>
<% ratio = duration.to_f / length_of_busiest_day %>
<% level =
if ratio >= 0.8
4
elsif ratio >= 0.5
3
elsif ratio >= 0.2
2
else
1
end %>
<% end %>
<a class="day lvl<%= level %>"
href="?date=<%= date %>"
data-turbo-frame="_top"
data-date="<%= date %>"
data-duration="<%= distance_of_time_in_words(duration) %>"
title="you hacked for <%= distance_of_time_in_words(duration) %> on <%= date %>"
style="background-color: hsl(120, 100%, <%= lightness %>%);">
title="you hacked for <%= distance_of_time_in_words(duration) %> on <%= date %>">
</a>
<% end %>
</div>
@@ -22,4 +33,5 @@
</p>
</div>
<% end %>
<% end %>
<% end %>