Improve sheet editing appearance

app/assets/stylesheets/characters.css

@@ -57,11 +57,11 @@
   justify-content: center;
 }
 
-.stat, .counter {
+.stat, .counter, .text-field {
   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);
@@ -70,12 +70,37 @@
     padding: .5em;
   }
   input, .stat-value {
+    font-size: 3em;
+    width: 2.5em;
+  }
+  input, .stat-value, .trix-content {
     padding: .5em;
     color: var(--text-color);
     background-color: var(--input-background);
     text-align: center;
-    font-size: 3em;
-    width: 2.5em;
     border: 1px solid var(--background-color);
+    height: 120px;
+  }
+  trix-toolbar {
+    display: none;
+  }
+  .trix-content {
+    min-width: 10em;
+    max-width: 20em;
+    overflow-y: scroll;
+    font-size: .8em;
+  }
+  input[type=submit] {
+    width: 100%;
+    font-size: .8em;
+    height: auto;
+    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>
@@ -11,7 +17,7 @@
       <%= f.submit t(".save") %>
     <% end %>
   <% else %>
-    <p><%= text_field.content %></p>
+    <%= text_field.content %>
   <% end %>
 </div>
 

todo.md

@@ -1,9 +1,10 @@
-- set orders on sheets
+- 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
 - Show individual dice on dice roll
-- customise trix bar
 - Sheets
   - Lists
   - Weapons/spells