mirror of
https://github.com/System-End/hackatime.git
synced 2026-04-19 22:15:14 +00:00
rework streak displays
This commit is contained in:
parent
370196d731
commit
8a4cc23987
5 changed files with 86 additions and 27 deletions
|
|
@ -71,8 +71,8 @@ class User < ApplicationRecord
|
|||
end
|
||||
|
||||
def streak_days_formatted
|
||||
if streak_days > 7
|
||||
"7+"
|
||||
if streak_days > 30
|
||||
"30+"
|
||||
elsif streak_days < 1
|
||||
nil
|
||||
else
|
||||
|
|
|
|||
|
|
@ -66,14 +66,13 @@
|
|||
<% end %>
|
||||
</span>
|
||||
<% end %>
|
||||
<% if entry.streak_count > 7 %>
|
||||
<span class="super" title="7+ daily streak">
|
||||
🔥 7+
|
||||
</span>
|
||||
<% elsif entry.streak_count > 0 %>
|
||||
<span class="super" title="<%= entry.streak_count %> day streak">
|
||||
🔥 <%= entry.streak_count %>
|
||||
</span>
|
||||
<% if entry.streak_count > 0 %>
|
||||
<%= render "static_pages/streak",
|
||||
user: entry.user,
|
||||
streak_count: entry.streak_count,
|
||||
turbo_frame: false,
|
||||
icon_size: 16,
|
||||
show_super_class: true %>
|
||||
<% end %>
|
||||
</span>
|
||||
<span class="time"><%= short_time_detailed entry.total_seconds %></span>
|
||||
|
|
|
|||
|
|
@ -87,14 +87,13 @@
|
|||
<% end %>
|
||||
</span>
|
||||
<% end %>
|
||||
<% if entry.streak_count > 7 %>
|
||||
<span class="super" title="7+ daily streak">
|
||||
🔥 7+
|
||||
</span>
|
||||
<% elsif entry.streak_count > 0 %>
|
||||
<span class="super" title="<%= entry.streak_count %> day streak">
|
||||
🔥 <%= entry.streak_count %>
|
||||
</span>
|
||||
<% if entry.streak_count > 0 %>
|
||||
<%= render "static_pages/streak",
|
||||
user: entry.user,
|
||||
streak_count: entry.streak_count,
|
||||
turbo_frame: false,
|
||||
icon_size: 16,
|
||||
show_super_class: true %>
|
||||
<% end %>
|
||||
</span>
|
||||
<span class="time"><%= short_time_detailed entry.total_seconds %></span>
|
||||
|
|
|
|||
|
|
@ -6,9 +6,9 @@
|
|||
</div>
|
||||
<% end %>
|
||||
<% if current_user %>
|
||||
<div class="ml-2 px-2 rounded">
|
||||
<%= render "shared/user_mention", user: current_user %>
|
||||
<%= turbo_frame_tag "streak", src: streak_static_pages_path %>
|
||||
<div class="px-2 rounded flex flex-col items-center gap-1">
|
||||
<%= render "shared/user_mention", user: current_user %>
|
||||
<%= render "static_pages/streak", user: current_user, show_text: true, turbo_frame: false %>
|
||||
</div>
|
||||
<% else %>
|
||||
<div class="m-2 px-2 py-1 rounded">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,68 @@
|
|||
<%= turbo_frame_tag "streak" do %>
|
||||
<% if current_user.streak_days_formatted %>
|
||||
<p title="🔥 <%= current_user.streak_days_formatted %> day streak">
|
||||
<%= current_user.streak_days_formatted %> 🔥
|
||||
</p>
|
||||
<%
|
||||
user = local_assigns[:user] || current_user
|
||||
streak_count = local_assigns[:streak_count] || user&.streak_days_formatted
|
||||
use_turbo_frame = local_assigns.fetch(:turbo_frame, true)
|
||||
icon_size = local_assigns[:icon_size] || 24
|
||||
show_super_class = local_assigns.fetch(:show_super_class, false)
|
||||
show_text = local_assigns.fetch(:show_text, false)
|
||||
c = streak_count.to_i
|
||||
if c >= 30
|
||||
bg = "from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20"
|
||||
hbg = "hover:from-blue-100 hover:to-indigo-100 dark:hover:from-blue-800/30 dark:hover:to-indigo-800/30"
|
||||
bc = "border-blue-200 dark:border-blue-700"
|
||||
ic = "text-blue-500 dark:text-blue-400 group-hover:text-blue-600 dark:group-hover:text-blue-300"
|
||||
tc = "text-blue-700 dark:text-blue-300 group-hover:text-blue-800 dark:group-hover:text-blue-200"
|
||||
tm = "text-blue-600 dark:text-blue-400"
|
||||
elsif c >= 7
|
||||
bg = "from-red-50 to-orange-50 dark:from-red-900/20 dark:to-orange-900/20"
|
||||
hbg = "hover:from-red-100 hover:to-orange-100 dark:hover:from-red-800/30 dark:hover:to-orange-800/30"
|
||||
bc = "border-red-200 dark:border-red-700"
|
||||
ic = "text-red-500 dark:text-red-400 group-hover:text-red-600 dark:group-hover:text-red-300"
|
||||
tc = "text-red-700 dark:text-red-300 group-hover:text-red-800 dark:group-hover:text-red-200"
|
||||
tm = "text-red-600 dark:text-red-400"
|
||||
else
|
||||
bg = "from-orange-50 to-yellow-50 dark:from-orange-900/20 dark:to-yellow-900/20"
|
||||
hbg = "hover:from-orange-100 hover:to-yellow-100 dark:hover:from-orange-800/30 dark:hover:to-yellow-800/30"
|
||||
bc = "border-orange-200 dark:border-orange-700"
|
||||
ic = "text-orange-500 dark:text-orange-400 group-hover:text-orange-600 dark:group-hover:text-orange-300"
|
||||
tc = "text-orange-700 dark:text-orange-300 group-hover:text-orange-800 dark:group-hover:text-orange-200"
|
||||
tm = "text-orange-600 dark:text-orange-400"
|
||||
end
|
||||
%>
|
||||
|
||||
<% content = capture do %>
|
||||
<% if streak_count && streak_count.to_i > 0 %>
|
||||
<div class="inline-flex items-center gap-1 px-2 py-1 bg-gradient-to-r <%= bg %> border <%= bc %> rounded-lg transition-all duration-200 <%= hbg %> group <%= 'super' if show_super_class %>"
|
||||
title="<%= streak_count.to_i > 30 ? '30+ daily streak' : "#{streak_count} day streak" %>">
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="<%= icon_size %>"
|
||||
height="<%= icon_size %>"
|
||||
viewBox="0 0 24 24"
|
||||
class="<%= ic %> transition-colors duration-200 group-hover:animate-pulse">
|
||||
<path fill="currentColor" d="M10 2c0-.88 1.056-1.331 1.692-.722c1.958 1.876 3.096 5.995 1.75 9.12l-.08.174l.012.003c.625.133 1.203-.43 2.303-2.173l.14-.224a1 1 0 0 1 1.582-.153C18.733 9.46 20 12.402 20 14.295C20 18.56 16.409 22 12 22s-8-3.44-8-7.706c0-2.252 1.022-4.716 2.632-6.301l.605-.589c.241-.236.434-.43.618-.624C9.285 5.268 10 3.856 10 2"/>
|
||||
</svg>
|
||||
|
||||
<span class="text-sm font-semibold <%= tc %> transition-colors duration-200">
|
||||
<%= streak_count.to_i > 30 ? '30+' : streak_count %>
|
||||
<% if show_text %>
|
||||
<span class="ml-1 text-xs font-normal <%= tm %>">
|
||||
<%= streak_count.to_i > 30 ? 'day streak' : (streak_count.to_i == 1 ? 'day streak' : 'day streak') %>
|
||||
</span>
|
||||
<% end %>
|
||||
</span>
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
<% if use_turbo_frame %>
|
||||
<%= turbo_frame_tag "streak" do %>
|
||||
<% if streak_count && streak_count.to_i > 0 %>
|
||||
<div class="flex items-center justify-center">
|
||||
<%= content %>
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<%= content %>
|
||||
<% end %>
|
||||
Loading…
Add table
Reference in a new issue