Improve sheet editing appearance

app/assets/stylesheets/characters.css

@@ -61,7 +61,7 @@
   display: flex;
   flex-direction: column;
   border-radius: var(--border-radius);
-  h6 {
+  h6, .feature-edit-buttons {
     font-size: .8em;
     text-align: center;
     background-color: var(--background-color);
@@ -97,3 +97,10 @@
     padding: auto;
   }
 }
+
+.feature-edit-buttons {
+  a:link, a:visited {
+    color: inherit;
+    text-decoration: none;
+  }
+}

app/assets/stylesheets/layout.css

@@ -1,3 +1,5 @@
+@import "https://www.nerdfonts.com/assets/css/webfont.css";
+
 * {
   box-sizing: border-box;
 }

app/helpers/application_helper.rb

@@ -8,4 +8,9 @@ module ApplicationHelper
       object.errors.full_messages_for(attr).join(". ")
     end
   end
+
+  def icon_link_to(icon_name, path, data: {})
+    icon = content_tag(:i, nil, class: "nf nf-#{icon_name}").html_safe
+    link_to icon, path, data: data
+  end
 end

app/models/counter.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 class Counter < ApplicationRecord
-  has_one :character_sheet_feature, as: :featurable
+  has_one :character_sheet_feature, as: :featurable, dependent: :destroy
   has_one :character_sheet_section, through: :character_sheet_feature
   accepts_nested_attributes_for :character_sheet_feature, allow_destroy: true
 

app/models/stat.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 class Stat < ApplicationRecord
-  has_one :character_sheet_feature, as: :featurable
+  has_one :character_sheet_feature, as: :featurable, dependent: :destroy
   has_one :character_sheet_section, through: :character_sheet_feature
   accepts_nested_attributes_for :character_sheet_feature, allow_destroy: true
 

app/models/text_field.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 class TextField < ApplicationRecord
-  has_one :character_sheet_feature, as: :featurable
+  has_one :character_sheet_feature, as: :featurable, dependent: :destroy
   has_one :character_sheet_section, through: :character_sheet_feature
   accepts_nested_attributes_for :character_sheet_feature, allow_destroy: true
 

app/views/counters/_counter.html.erb

@@ -1,7 +1,13 @@
 <div class="counter" id="<%= dom_id(counter) %>">
   <% if @editable %>
-    <%= link_to(t(".delete"), counter,
+    <div class="feature-edit-buttons">
-                 data: { turbo_method: :delete, turbo_confirm: t(".confirm_delete", name: counter.name) }) %>
+      <%= icon_link_to("cod-triangle_left", reorder_down_character_sheet_feature_path(counter),
+            data: { turbo_method: :patch }) %>
+      <%= icon_link_to("md-delete", counter,
+            data: { turbo_method: :delete, turbo_confirm: t(".confirm_delete", name: counter.name) }) %>
+      <%= icon_link_to("cod-triangle_right", reorder_up_character_sheet_feature_path(counter),
+            data: { turbo_method: :patch }) %>
+    </div>
   <% end %>
   <h6><%= counter.name %></h6>
   <%= form_with model: counter, class: "counter-form",

app/views/stats/_stat.html.erb

@@ -1,9 +1,13 @@
 <div class="stat" id="<%= dom_id(stat) %>">
   <% if @editable %>
-    <%= link_to t(".down"), reorder_down_character_sheet_feature_path(stat), data: { turbo_method: :patch } %>
+    <div class="feature-edit-buttons">
-    <%= link_to t(".up"), reorder_up_character_sheet_feature_path(stat), data: { turbo_method: :patch } %>
+      <%= icon_link_to("cod-triangle_left", reorder_down_character_sheet_feature_path(stat),
-    <%= link_to(t(".delete"), stat,
+            data: { turbo_method: :patch }) %>
-                 data: { turbo_method: :delete, turbo_confirm: t(".confirm_delete", name: stat.name) }) %>
+      <%= icon_link_to("md-delete", stat,
+            data: { turbo_method: :delete, turbo_confirm: t(".confirm_delete", name: stat.name) }) %>
+      <%= icon_link_to("cod-triangle_right", reorder_up_character_sheet_feature_path(stat),
+            data: { turbo_method: :patch }) %>
+    </div>
   <% end %>
   <h6><%= stat.name %></h6>
   <% if @editable %>

app/views/text_fields/_text_field.html.erb

@@ -1,7 +1,13 @@
 <div class="text-field" id="<%= dom_id(text_field) %>">
   <% if @editable %>
-    <%= link_to t(".delete"), text_field,
+    <div class="feature-edit-buttons">
-                data: { turbo_method: :delete, turbo_confirm: t(".confirm_delete", name: text_field.name) } %>
+      <%= icon_link_to("cod-triangle_left", reorder_down_character_sheet_feature_path(text_field),
+            data: { turbo_method: :patch }) %>
+      <%= icon_link_to("md-delete", text_field,
+            data: { turbo_method: :delete, turbo_confirm: t(".confirm_delete", name: text_field.name) }) %>
+      <%= icon_link_to("cod-triangle_right", reorder_up_character_sheet_feature_path(text_field),
+            data: { turbo_method: :patch }) %>
+    </div>
   <% end %>
 
   <h6><%= text_field.name %></h6>

todo.md

@@ -1,4 +1,6 @@
-- improve edit button appearance
+- don't move down/up top/bottom features
+- auto save text fields
+  - indicate save status on titlebar
 - easily edit text fields without entering edit mode
 - add roll command to counters (e.g. luck)
 - test for rolls controller & system tests