bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rework navigation

Browse Source
This commit is contained in:
Jason Zimdars
2025-02-05 17:14:05 -06:00
parent 39c0be6722
commit c0f842427d
9 changed files with 54 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/images/activity.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3,22V8H7V22H3M10,22V2H14V22H10M17,22V14H21V22H17Z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 129 B

app/assets/images/home.svg
+1
View File
@@ -0,0 +1 @@
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m10 20v-6h4v6h5v-8h3l-10-9-10 9h3v8z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 114 B

app/views/accounts/users/index.html.erb
+10 -4
View File
@@ -1,15 +1,21 @@
<% @page_title = "People on the account" %>
<% content_for :header do %>
<nav>
<%= link_to root_path, class: "btn flex-item-justify-start" do %>
<nav class="align-start">
<%= link_to root_path, class: "btn borderless flex-item-justify-start" do %>
<%= image_tag "arrow-left.svg", aria: { hidden: true }, size: 24 %>
<span class="for-screen-reader">Go back</span>
<% end %>
<h1 class="txt-large"><%= @page_title %></h1>
<header class="flex flex-column center">
<div class="flex align-center gap justify-center">
<%= link_to "Projects", root_path %>
<%= link_to "Activity", events_path %>
</div>
<h1 class="txt-x-large"><%= @page_title %></h1>
</header>
<%= link_to workflows_path, class: "btn flex-item-justify-end" do %>
<%= link_to workflows_path, class: "btn flex-item-justify-end borderless" do %>
<%= image_tag "bolt.svg", aria: { hidden: true }, size: 24 %>
<span class="for-screen-reader">Workflows</span>
<% end %>
app/views/bubbles/_filters.html.erb
+2 -2
View File
@@ -1,12 +1,12 @@
<div class="flex flex-column gap-half align-center" data-controller="dialog filter-form"
data-action="keydown.esc->dialog#close:stop click@document->dialog#closeOnClickOutside turbo:before-cache@document->dialog#close">
<h1 class="txt-large flex align-center gap-half">
<h1 class="txt-x-large margin-none-block-end">
<% if filter.buckets.none? %>
All projects
<% elsif filter.buckets.one? %>
<%= filter.buckets.first.name %>
<% else %>
<%= pluralize(filter.buckets.size, "project") %>
<%= pluralize(filter.buckets.size, "project") %>
<% end %>
</h1>
app/views/bubbles/index.html.erb
+12 -18
View File
@@ -5,29 +5,23 @@
<% content_for :header do %>
<nav class="align-start">
<%= link_to root_path, class: "btn flex-item-justify-start", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
<%= image_tag "arrow-left.svg", aria: { hidden: true }, size: 24 %>
<span class="for-screen-reader">Go back</span>
<% bucket = @filter.buckets.first %>
<%= link_to edit_bucket_path(bucket), class: "btn borderless flex-item-justify-start" do %>
<%= image_tag "settings.svg", aria: { hidden: true }, size: 24 %>
<span class="for-screen-reader">Settings for <%= bucket.name %></span>
<% end %>
<header class="txt-align-center">
<header class="flex flex-column center">
<div class="flex align-center gap justify-center">
<%= link_to "Projects", root_path %>
<%= link_to "Activity", events_path %>
</div>
<%= render "bubbles/filters", filter: @filter %>
</header>
<% if @filter.buckets.one? %>
<% bucket = @filter.buckets.first %>
<%= link_to edit_bucket_path(bucket), class: "btn flex-item-justify-end" do %>
<%= image_tag "settings.svg", aria: { hidden: true }, size: 24 %>
<span class="for-screen-reader">Settings for <%= bucket.name %></span>
<% end %>
<%= button_to bucket_bubbles_path(bucket), method: :post, class: "btn" do %>
<%= image_tag "add.svg", aria: { hidden: true }, size: 24 %>
<span class="for-screen-reader">Create a new bubble</span>
<% end %>
<% else %>
<span class="btn btn--placeholder flex-item-justify-end"></span>
<%= button_to bucket_bubbles_path(bucket), method: :post, class: "btn borderless", form_class: "flex-item-justify-end" do %>
<%= image_tag "add.svg", aria: { hidden: true }, size: 24 %>
<span class="for-screen-reader">Create a new bubble</span>
<% end %>
</nav>
<% end %>
app/views/bubbles/show.html.erb
+9 -10
View File
@@ -10,18 +10,17 @@
<% end %>
<nav class="align-start">
<%= link_to "#", class: "btn flex-item-justify-start", data: { controller: "hotkey back-navigation", action: "keydown.esc@document->hotkey#click", back_navigation_fallback_destination_value: bubbles_path(bucket_id: @bucket) } do %>
<%= image_tag "arrow-left.svg", aria: { hidden: true }, size: 24 %>
<span class="for-screen-reader">Back</span>
<% end %>
<header class="txt-align-center">
<h1 class="txt-large flex align-center gap-half">
<%= link_to @bucket.name, bubbles_path(bucket_ids: [ @bucket ]), class: "txt-ink txt-undecorated upad" %>
<header class="flex flex-column center">
<div class="flex align-center gap justify-center">
<%= link_to "Projects", root_path %>
<%= link_to "Activity", events_path %>
</div>
<h1 class="txt-x-large breadcrumbs">
<%= link_to @bucket.name, bubbles_path(bucket_ids: [ @bucket ]) %>
<span class="flex-item-no-shrink">▸</span>
<strong><%= @page_title %></strong>
</h1>
</header>
<span class="btn btn--placeholder flex-item-justify-end"></span>
</nav>
<% end %>
app/views/buckets/index.html.erb
+11 -8
View File
@@ -1,18 +1,21 @@
<% @page_title = "Projects" %>
<% @page_title = "All projects" %>
<% content_for :header do %>
<nav>
<%= link_to account_users_path, class: "btn" do %>
<nav class="align-start">
<%= link_to account_users_path, class: "btn borderless flex-item-justify-start" do %>
<%= image_tag "settings.svg", aria: { hidden: true }, size: 24 %>
<span class="for-screen-reader">Account settings</span>
<% end %>
<%= link_to events_path, class: "btn flex-item-justify-start" do %>
<%= image_tag "history.svg", aria: { hidden: true }, size: 24 %>
<span class="for-screen-reader">Latest activity</span>
<% end %>
<header class="flex flex-column center">
<div class="flex align-center gap justify-center">
<%= link_to "Projects", root_path %>
<%= link_to "Activity", events_path %>
</div>
<h1 class="txt-x-large"><%= @page_title %></h1>
</header>
<%= link_to new_bucket_path, class: "btn flex-item-justify-end", style: "view-transition-name: new-bucket" do %>
<%= link_to new_bucket_path, class: "btn flex-item-justify-end borderless", style: "view-transition-name: new-bucket" do %>
<%= image_tag "add.svg", aria: { hidden: true }, size: 24 %>
<span class="for-screen-reader">Add a new project</span>
<% end %>
app/views/events/_day.html.erb
+1 -1
View File
@@ -1,7 +1,7 @@
<div class="events--day" data-controller="related-element"
data-related-element-highlight-class="event--related">
<% if events.any? %>
<h2 class="txt-x-large margin-block-end"><%= event_day_title(activity_day) %></h2>
<h2 class="txt-large margin-block-end-half"><%= event_day_title(activity_day) %></h2>
<div class="center events">
<%= render_column_headers %>
app/views/events/index.html.erb
+7 -12
View File
@@ -1,19 +1,14 @@
<% @page_title = "Latest Activity" %>
<% content_for :header do %>
<nav>
<%= link_to root_path, class: "btn flex-item-justify-start", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
<%= image_tag "arrow-left.svg", aria: { hidden: true }, size: 24 %>
<span class="for-screen-reader">Go back</span>
<% end %>
<header class="txt-align-center">
<h1 class="txt-large flex align-center gap-half">
<%= @page_title %>
</h1>
<nav class="align-start">
<header class="flex flex-column center">
<div class="flex align-center gap justify-center">
<%= link_to "Projects", root_path %>
<%= link_to "Activity", events_path %>
</div>
<h1 class="txt-x-large"><%= @page_title %></h1>
</header>
<span class="btn btn--placeholder flex-item-justify-end"></span>
</nav>
<% end %>