🚀 Time tracking wizard
+Get started with tracking your coding time in just a few minutes.
+ <%= link_to "Set up time tracking", my_wakatime_setup_path, role: "button" %> +diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 9da17fe..b244d35 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -11,6 +11,7 @@ @import "https://uchu.style/color.css"; @import "https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"; +@import "settings.css"; /* colors */ diff --git a/app/assets/stylesheets/settings.css b/app/assets/stylesheets/settings.css new file mode 100644 index 0000000..6aeb7da --- /dev/null +++ b/app/assets/stylesheets/settings.css @@ -0,0 +1,161 @@ +.settings-page .grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); + gap: 1rem; + margin-top: 2rem; +} + +.settings-page article { + background: var(--pico-card-background-color); + border: var(--pico-border-width) solid var(--pico-card-border-color); + border-radius: var(--pico-border-radius); + box-shadow: var(--pico-card-box-shadow); + transition: box-shadow var(--pico-transition); + margin: 0; +} + +.settings-page article header { + padding: 0.5rem; + border-bottom: 1px solid var(--pico-muted-border-color); +} + +.settings-page article header h2 { + margin-bottom: 0; + font-size: 1.25rem; + font-weight: 600; + color: var(--pico-color); +} + +.settings-page article header p { + margin-bottom: 0; + color: var(--pico-muted-color); + font-size: 0.875rem; +} + +.settings-page article section { + margin-top: 1.5rem; + padding-top: 1rem; + border-top: 1px solid var(--pico-muted-border-color); +} + +.settings-page article section:first-of-type { + margin-top: 0; + padding-top: 0; + border-top: none; +} + +.settings-page article section h3 { + margin-bottom: 0.75rem; + font-size: 1rem; + font-weight: 500; + color: var(--pico-color); +} + +.settings-page article .form-group { + margin-bottom: 1rem; +} + +.settings-page article .form-group:last-child { + margin-bottom: 0; +} + +.settings-page article button[role="button"], +.settings-page article input[type="submit"][role="button"] { + margin-top: 1rem; +} + +.settings-page article .secondary { + background-color: var(--pico-secondary-background); + border-color: var(--pico-secondary-border); + color: var(--pico-secondary-color); +} + +.settings-page article .secondary:hover { + background-color: var(--pico-secondary-hover-background); + border-color: var(--pico-secondary-hover-border); +} + +.settings-page article .code-example { + margin: 1rem 0; + background: var(--pico-code-background-color); + border-radius: var(--pico-border-radius); +} + +.settings-page article .code-example pre { + margin: 0; + background: transparent; + padding: 0; +} + +.settings-page article img { + max-width: 100%; + height: auto; + margin: 1rem 0; + border-radius: var(--pico-border-radius); +} + +.settings-page article pre:not(.code-example pre) { + background: var(--pico-code-background-color); + padding: 0.75rem; + border-radius: var(--pico-border-radius); + font-size: 0.875rem; + overflow-x: auto; +} + +.settings-page .mirror { + padding: 1rem; + background: var(--pico-card-sectioning-background-color); + border-radius: var(--pico-border-radius); + margin-bottom: 1rem; +} + +.settings-page .mirror:last-child { + margin-bottom: 0; +} + +.settings-page .email-form { + margin-top: 1rem; + padding-top: 1rem; + border-top: 1px solid var(--pico-muted-border-color); +} + +.settings-page .email-form .field { + display: flex; + gap: 0.5rem; + align-items: end; +} + +.settings-page .email-form input[type="email"] { + flex: 1; + margin-bottom: 0; +} + +@media (max-width: 768px) { + .settings-page .grid { + grid-template-columns: 1fr; + gap: 1.5rem; + } + + .settings-page article { + padding: 1rem; + } + + .settings-page .email-form .field { + flex-direction: column; + align-items: stretch; + } +} + +@media (prefers-color-scheme: dark) { + .settings-page article { + background: var(--pico-card-background-color, #1e293b); + border-color: var(--pico-card-border-color, #334155); + } + + .settings-page article:hover { + box-shadow: var( + --pico-card-box-shadow-hover, + 0 0.125rem 1rem rgba(0, 0, 0, 0.3) + ); + } +} diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 23178f3..9da27b4 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -137,7 +137,7 @@ <%= Sentry.get_trace_propagation_meta.html_safe %> -
+ diff --git a/app/views/users/edit.html.erb b/app/views/users/edit.html.erb index a8fdf74..5828a53 100644 --- a/app/views/users/edit.html.erb +++ b/app/views/users/edit.html.erb @@ -2,173 +2,195 @@ <%= @is_own_settings ? "My Settings" : "Settings | #{@user.username}" %> <% end %> +<% content_for :body_class, "settings-page" %> +Change your settings for Hackatime and Sailors Log.
Get started with tracking your coding time in just a few minutes.
+ <%= link_to "Set up time tracking", my_wakatime_setup_path, role: "button" %> +When you're hacking on a project, Hackatime can update your Slack status so you can show it off!
- <% unless @can_enable_slack_status %> - <%= link_to "Re-authorize with Slack to give permission to update your status", slack_auth_path %> - <% end %> - <%= form_with model: @user, - url: @is_own_settings ? my_settings_path : settings_user_path(@user), - method: :patch do |f| %> - - <%= f.submit "Save Settings" %> - <% end %> -You have notifications enabled for the following channels:
-You have no notifications enabled.
- <% end %> -
- You can enable notifications for specific channels by running /sailorslog on in the Slack channel you want to enable notifications for.
-
- This is used to show your active projects on the leaderboard & current hacking activity on the dashboard. -
- <% if @user.github_uid.present? %> -Your GitHub account is linked. <%= link_to "@#{@user.github_username}", "https://github.com/#{@user.github_username}", target: "_blank" %>
- <% else %> - <%= link_to "Link GitHub Account", github_auth_path, data: { turbo: "false" } %> - <% end %> -These are the email addresses associated with your account.
- <% if @user.email_addresses.any? %> -No email addresses found.
- <% end %> - -This badge shows your stats on your GitHub profile.
- - <% gh_badge = GithubReadmeStats.new(current_user.id, "darcula") %> -<%= gh_badge.generate_badge_url %>- - -
This badge shows individual project stats.
-see the documentation for more customization options!
- -<%= @work_time_stats_url %>+ <%= form_with model: @user, + url: @is_own_settings ? my_settings_path : settings_user_path(@user), + method: :patch do |f| %> + + <%= f.submit "Save Settings", role: "button" %> + <% end %> +
You have notifications enabled for the following channels:
+You have no notifications enabled.
+ <% end %> +
+ You can enable notifications for specific channels by running /sailorslog on in the Slack channel you want to enable notifications for.
+
This is used to show your active projects on the leaderboard & current hacking activity on the dashboard.
+ <% if @user.github_uid.present? %> +✅ Your GitHub account is linked: <%= link_to "@#{@user.github_username}", "https://github.com/#{@user.github_username}", target: "_blank" %>
+ <% else %> + <%= link_to "Link GitHub Account", github_auth_path, data: { turbo: "false" }, role: "button" %> + <% end %> +These are the email addresses associated with your account.
+ <% if @user.email_addresses.any? %> +No email addresses found.
+ <% end %> + +Show your coding stats on your GitHub profile with beautiful badges.
+This badge shows your overall coding statistics.
+ + <% gh_badge = GithubReadmeStats.new(current_user.id, "darcula") %> +<%= gh_badge.generate_badge_url %>+
This badge shows individual project statistics.
+See the documentation for more customization options!
+ +<%= @work_time_stats_url %>+
Use markscribe to create beautiful GitHub profile READMEs with your coding stats.
-{{ wakatimeDoubleCategoryBar "💾 Languages:" wakatimeData.Languages "💼 Projects:" wakatimeData.Projects 5 }}
- Add this to your GitHub profile README template to display your top languages and projects.
-See the markscribe documentation for more template options.
-
- Use markscribe to create beautiful GitHub profile READMEs with your coding stats.
+{{ wakatimeDoubleCategoryBar "💾 Languages:" wakatimeData.Languages "💼 Projects:" wakatimeData.Projects 5 }}
+ Add this to your GitHub profile README template to display your top languages and projects.
+See the markscribe documentation for more template options.
+
+ - <% if current_user.most_recent_direct_entry_heartbeat %> - Your last heartbeat was <%= time_ago_in_words current_user.most_recent_direct_entry_heartbeat.created_at %> ago. - <% else %> - You haven't sent any heartbeats yet directly to this platform. - <% end %> -
- <%= render "wakatime_config_display" %> -
-
- This file is located in ~/.wakatime.cfg on your computer.
- You can configure it with other settings as well.
-
-
Mirror your coding activity to WakaTime.
- - <% if current_user.wakatime_mirrors.any? %> -
- Endpoint: <%= mirror.endpoint_url %>
- Last synced: <%= mirror.last_synced_at ? time_ago_in_words(mirror.last_synced_at) + " ago" : "Never" %>
-
+ <% if current_user.most_recent_direct_entry_heartbeat %> + Your last heartbeat was <%= time_ago_in_words current_user.most_recent_direct_entry_heartbeat.created_at %> ago. + <% else %> + You haven't sent any heartbeats yet directly to this platform. <% end %> -
+
+ This file is located in ~/.wakatime.cfg on your computer.
+ You can configure it with other settings as well.
+
+
Mirror your coding activity to WakaTime.
+This will migrate your heartbeats from waka.hackclub.com to this platform.
- <%= button_to "Migrate heartbeats", my_settings_migrate_heartbeats_path, method: :post %> - <% if @heartbeats_migration_jobs.any? %> -
+ Endpoint: <%= mirror.endpoint_url %>
+ Last synced: <%= mirror.last_synced_at ? time_ago_in_words(mirror.last_synced_at) + " ago" : "Never" %>
+
This will migrate your heartbeats from waka.hackclub.com to this platform.
+