System-End/hackatime
1
0
Fork 0
mirror of https://github.com/System-End/hackatime.git synced 2026-04-19 23:32:53 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

convert activity graph to tailwind

Browse source
This commit is contained in:
Echo 2025-06-27 10:45:39 -04:00
parent 9b4f764c33
commit e96407251e
No known key found for this signature in database
3 changed files with 10 additions and 94 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/assets/stylesheets/active_users_graph.css
View file

@ -6,7 +6,7 @@
}
.active-users-graph__hour {
background-color: var(--uchu-dark-gray);
background-color: white;
opacity: 0.1;
flex-grow: 1;
min-width: 10px;

85
app/assets/stylesheets/activity_graph.css
View file

@ -1,85 +0,0 @@
/* Responsive Activity Graph CSS */
.activity-graph-container {
width: 100%;
overflow-x: auto; /* Allow horizontal scrolling on small screens */
margin-top: 1.5rem;
padding-bottom: 10px; /* Space for scrollbar */
}
.activity-graph {
display: grid;
grid-template-rows: repeat(7, 1fr);
grid-auto-flow: column;
gap: 3px;
width: 100%; /* Take up full width */
/* min-width: min-content; Ensure it doesn't shrink below content size */
}
/* Make day squares responsive */
.day {
transition: 0.05s all;
width: 0.7em; /* Slightly smaller squares */
height: 0.7em;
border-radius: 3px;
}
/* Responsive adjustments for different screen sizes */
@media (max-width: 768px) {
.day {
width: 0.7em;
height: 0.7em;
}
}
@media (min-width: 1025px) {
.activity-graph {
width: 50%;
}
}
/* No activity - make it a light gray instead of white */
.day[style*="background-color: hsl(120, 100%, 100%)"] {
background: rgba(255, 255, 255, 0.05) !important;
}
/* Add subtle hover effect */
.day:hover {
transform: scale(1.1);
transition: 0.2s all;
z-index: 5;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}
/* Improved loader animation */
.activity-graph.loading {
padding: 1rem;
color: #666;
font-style: italic;
display: flex;
align-items: center;
justify-content: center;
}
.activity-graph.loading::before {
content: "";
width: 16px;
height: 16px;
margin-right: 10px;
border: 2px solid rgba(0, 0, 0, 0.1);
border-top-color: var(--primary-color);
border-radius: 50%;
animation: loader-spin 0.8s linear infinite;
}
@keyframes loader-spin {
to {
transform: rotate(360deg);
}
}
.lvl0 { background-color: #151b23; }
.lvl1 { background-color: #033a16; }
.lvl2 { background-color: #196c2e; }
.lvl3 { background-color: #2ea043; }
.lvl4 { background-color: #56d364; }

17
app/views/static_pages/_activity_graph.html.erb
View file

@ -1,25 +1,26 @@
<%= turbo_frame_tag "activity_graph" do %>
<%= cache ["activity_graph", current_user.id, current_user.timezone], expires_in: 1.minute do %>
<div class="activity-graph-container">
<div class="activity-graph">
<div class="w-full overflow-x-auto mt-6 pb-2.5">
<div class="grid grid-rows-7 grid-flow-col gap-1 w-full lg:w-1/2">
<% (365.days.ago.to_date..Time.current.to_date).to_a.each do |date| %>
<% duration = daily_durations[date] || 0 %>
<% if duration < 1.minute %>
<% level = 0 %>
<% bg_class = "bg-[#151b23]" %>
<% else %>
<% ratio = duration.to_f / length_of_busiest_day %>
<% level =
<% level, bg_class =
if ratio >= 0.8
4
[4, "bg-[#56d364]"]
elsif ratio >= 0.5
3
[3, "bg-[#2ea043]"]
elsif ratio >= 0.2
2
[2, "bg-[#196c2e]"]
else
1
[1, "bg-[#033a16]"]
end %>
<% end %>
<a class="day lvl<%= level %>"
<a class="day transition-all duration-75 w-3 h-3 rounded-sm hover:scale-110 hover:z-10 hover:shadow-md <%= bg_class %>"
href="?date=<%= date %>"
data-turbo-frame="_top"
data-date="<%= date %>"