Merge pull request #66 from Floppy/style-forms

Better styling for the various forms
manyfold3d · Mar 6, 2021 · 83b39dc · 83b39dc
2 parents 318d2b7 + 53ac36e
commit 83b39dc
Show file tree

Hide file tree

Showing 19 changed files with 183 additions and 141 deletions.
diff --git a/app/controllers/creators_controller.rb b/app/controllers/creators_controller.rb
@@ -3,6 +3,7 @@ class CreatorsController < ApplicationController
 
   def index
     @creators = Creator.all
+    @title = "Creators"
   end
 
   def show
@@ -19,6 +20,7 @@ def update
 
   def new
     @creator = Creator.new
+    @title = "New Creator"
   end
 
   def create
@@ -35,6 +37,7 @@ def destroy
 
   def get_creator
     @creator = Creator.find(params[:id])
+    @title = @creator.name
   end
 
   def creator_params

diff --git a/app/controllers/libraries_controller.rb b/app/controllers/libraries_controller.rb
@@ -21,6 +21,7 @@ def show
 
   def new
     @library = Library.new
+    @title = "New Library"
   end
 
   def create
@@ -42,5 +43,6 @@ def library_params
 
   def get_library
     @library = Library.find(params[:id])
+    @title = @library.name
   end
 end
diff --git a/app/controllers/models_controller.rb b/app/controllers/models_controller.rb
@@ -32,5 +32,6 @@ def get_library
 
   def get_model
     @model = @library.models.find(params[:id])
+    @title = @model.name
   end
 end
diff --git a/app/controllers/parts_controller.rb b/app/controllers/parts_controller.rb
@@ -36,5 +36,6 @@ def get_model
 
   def get_part
     @part = @model.parts.find(params[:id])
+    @title = @part.name
   end
 end
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
@@ -2,4 +2,17 @@ module ApplicationHelper
   def icon(id, label)
     tag.i class: "bi bi-#{id}", role: "img", 'aria-label': label, title: label
   end
+
+  def card(style, title, &content)
+    tag.div class: "card mb-4" do
+      [
+        tag.div(title, class: "card-header text-white bg-#{style}"),
+        tag.div(class: "card-body") do
+          tag.div class: "card-text" do
+            content.call
+          end
+        end
+      ].join.html_safe
+    end
+  end
 end
diff --git a/app/views/application/_link_fields.html.erb b/app/views/application/_link_fields.html.erb
@@ -1,7 +1,5 @@
-<div class='nested-fields'>
-  <div class="field">
-    <%= f.label :url %>
-    <%= f.url_field :url %>
-    <%= link_to_remove_association "remove", f %>
-  </div>
+<div class="row mb-3 input-group nested-fields">
+  <%= f.label :url, class: "col-sm-2 col-form-label" %>
+  <%= f.url_field :url, class: "form-control col-auto", placeholder: "Any related web page" %>
+  <%= link_to_remove_association icon(:trash, "Delete"), f, class: "btn btn-outline-danger col-auto" %>
 </div>
diff --git a/app/views/application/_links_form.html.erb b/app/views/application/_links_form.html.erb
@@ -0,0 +1,10 @@
+<fieldset id='links'>
+  <%= form.fields_for :links do |f| %>
+    <%= render 'link_fields', :f => f %>
+  <% end %>
+  <div class="row mb-3">
+    <%= tag.div class: "col-auto offset-sm-2 ps-0" do %>
+      <%= link_to_add_association 'add another link', form, :links, class: "btn btn-secondary" %>
+    <% end %>
+  </div>
+</fieldset>
diff --git a/app/views/creators/_form.html.erb b/app/views/creators/_form.html.erb
@@ -1,18 +1,11 @@
 <%= form_with model: @creator do |form| %>
   <form>
-    <div class="mb-3">
-      <%= form.label :name %>
-      <%= form.text_field :name %>
+    <div class="row mb-3 input-group">
+      <%= form.label :name, class: "col-sm-2 col-form-label" %>
+      <%= form.text_field :name, class: "form-control col-auto" %>
     </div>
 
-    <div id='links'>
-      <%= form.fields_for :links do |link| %>
-        <%= render 'link_fields', :f => link %>
-      <% end %>
-      <div class='links'>
-        <%= link_to_add_association 'add link', form, :links %>
-      </div>
-    </div>
+    <%= render 'links_form', :form => form %>
 
     <%= form.submit "Save", class: "btn btn-primary" %>
   </form>

diff --git a/app/views/creators/edit.html.erb b/app/views/creators/edit.html.erb
@@ -1,4 +1,3 @@
 <h1>Edit Creator</h1>
 
 <%= render 'form' %>
-<%= link_to 'Delete', @creator, method: :delete, data: {confirm: "Are you sure?"}, class: "btn btn-danger" %>
diff --git a/app/views/creators/index.html.erb b/app/views/creators/index.html.erb
@@ -1,7 +1,16 @@
 <h1>Creators</h1>
 
-<div class="row row-cols-2 row-cols-md-4 mb-4">
-  <%= render @creators %>
-</div>
+<div class="row row-cols-2">
+  <div class="col-9">
+    <div class="row row-cols-2 row-cols-md-3 mb-3">
+      <%= render @creators %>
+    </div>
+  </div>
+  <div class="col-3">
+
+    <%= card :secondary, "Actions" do %>
+      <%= link_to "New Creator", new_creator_path, class: "btn btn-primary" %>
+    <% end %>
 
-<%= link_to "New", new_creator_path %>
+  </div>
+</div>
diff --git a/app/views/creators/show.html.erb b/app/views/creators/show.html.erb
@@ -2,25 +2,29 @@
 
 <div class="row row-cols-2">
   <div class="col-9">
-    <div class="row row-cols-2 row-cols-md-3 mb-3">
+
+    <div class="row row-cols-2 row-cols-md-3 mb-4">
       <%= render partial: 'model', collection: @models %>
+      <% if @models.empty? %>
+        <div>No models yet!</div>
+      <% end %>
     </div>
+
   </div>
   <div class="col-3">
-    <div class="card mb-4">
-      <div class="card-header text-white bg-secondary">Links</div>
-      <div class="card-body">
-        <div class="card-text">
-          <ul class='links'>
-            <% @creator.links.each do |link| %>
-              <li><%= link_to t(link.site), link.url %></li>
-            <% end %>
-          </ul>
-        </div>
-       </div>
-    </div>
-    <div class="d-grid gap-2 col-6 mx-auto">
+
+    <%= card(:secondary, 'Links') do %>
+      <ul class='links'>
+        <% @creator.links.each do |link| %>
+          <li><%= link_to t(link.site), link.url %></li>
+        <% end %>
+      </ul>
+    <% end %>
+
+    <%= card(:secondary, 'Actions') do %>
       <%= link_to "Edit Details", edit_creator_path(@creator), class: "btn btn-primary" %>
-    </div>
+      <%= link_to 'Delete', @creator, method: :delete, data: {confirm: "Are you sure?"}, class: "btn btn-danger" %>
+    <% end %>
+
   </div>
 </div>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>VanDAM</title>
+    <title>VanDAM<%= " : #{@title}" if @title %></title>
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
@@ -19,15 +19,12 @@
             <%= link_to library.name, library, class: (library == @library ? "nav-link active" : "nav-link") %>
           </li>
         <% end %>
-        <li class="nav-item">
-          <%= link_to "+ New Library", new_library_path, class: "nav-link" %>
-        </li>
         <li class="nav-item">
           <%= link_to "Creators", creators_path, class: "nav-link" %>
         </li>
       </ul>
       <%= yield %>
-      <footer>
+      <footer class='mt-5 py-2 border-top'>
         VanDAM is Open Source, available from <%= link_to "GitHub", "https://github.com/Floppy/van_dam" %>.
         This server is cataloguing a total of <%= "#{Model.count} model".pluralize(Model.count) %>,
         with <%= "#{Part.count} part".pluralize(Part.count) %>,

diff --git a/app/views/libraries/new.html.erb b/app/views/libraries/new.html.erb
@@ -2,11 +2,14 @@
 
 <%= form_with model: @library do |form| %>
 
-  <div class="form-group">
-    <label for="path">Path</label>
-    <%= form.text_field :path, class: 'form-control', placeholder:"Filesystem path" %>
-    <small id="pathHelp" class="form-text text-muted">The complete path to your library on disk.</small>
+  <div class="row mb-3 input-group">
+    <%= form.label :path, class: "col-sm-2 col-form-label" %>
+    <div class='col-sm-10 ps-0'>
+      <%= form.text_field :path, class: 'form-control', placeholder:"Filesystem path" %>
+      <small id="pathHelp" class="form-text text-muted">The complete path to your library on disk.</small>
+    </div>
   </div>
-  <%= form.submit "Create", class: 'btn btn-primary' %>
+
+  <%= form.submit "Save", class: 'btn btn-primary' %>
 
 <% end %>
diff --git a/app/views/libraries/show.html.erb b/app/views/libraries/show.html.erb
@@ -1,25 +1,26 @@
-<%= link_to "Rescan", library_path(@library), method: :patch, class: 'float-end btn btn-warning' %>
 <h1><%= @library.name %></h1>
 <div class="row row-cols-2">
   <div class="col-9">
-    <div class="row row-cols-2 row-cols-md-3 mb-3">
+    <div class="row row-cols-2 row-cols-md-3 mb-4">
       <%= render partial: 'model', collection: @models %>
     </div>
   </div>
   <div class="col-3">
-    <div class="card mb-4">
-      <div class="card-header text-white bg-secondary">Tags</div>
-      <div class="card-body">
-       <div class="card-text">
-          <% @tags.each do |tag| %>
-            <% if (tag == @tag) %>
-              <%=link_to tag.name, @library, {class: "badge rounded-pill bg-success"} %>
-            <% else %>
-              <%=link_to tag.name, [@library, tag: tag.name], {class: "badge rounded-pill bg-secondary"} %>
-            <% end %>
-          <% end %>
-        </div>
-      </div>
-    </div>
+
+    <%= card :secondary, "Tags" do %>
+      <% @tags.each do |tag| %>
+        <% if (tag == @tag) %>
+          <%=link_to tag.name, @library, {class: "badge rounded-pill bg-success"} %>
+        <% else %>
+          <%=link_to tag.name, [@library, tag: tag.name], {class: "badge rounded-pill bg-secondary"} %>
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <%= card :secondary, "Actions" do %>
+      <%= link_to "Rescan", library_path(@library), method: :patch, class: 'btn btn-warning' %>
+      <%= link_to "New Library", new_library_path, class: 'btn btn-secondary' %>
+    <% end %>
+
   </div>
 </div>
diff --git a/app/views/models/_form.html.erb b/app/views/models/_form.html.erb
@@ -1,28 +1,26 @@
 <%= form_with model: [@library, @model] do |form| %>
   <form>
-    <div class="mb-3">
-      <%= form.label :name %>
-      <%= form.text_field :name %>
-    </div>
-    <div class="mb-3">
-      <%= form.label :preview_part %>
-      <%= form.collection_select :preview_part_id, @model.parts, :id, :name, include_blank: true %>
-    </div>
-    <div class="mb-3">
-      <%= form.label :creator %>
-      <%= form.collection_select :creator_id, @creators, :id, :name, include_blank: true %>
+    <div class="row mb-3 input-group">
+      <%= form.label :name, class: "col-sm-2 col-form-label" %>
+      <%= form.text_field :name, class: "form-control col-auto" %>
     </div>
 
-    <h3>Links</h3>
-    <div id='links'>
-      <%= form.fields_for :links do |link| %>
-        <%= render 'link_fields', :f => link %>
-      <% end %>
-      <div class='links'>
-        <%= link_to_add_association 'add link', form, :links %>
+    <div class="row mb-3 input-group">
+      <%= form.label :preview_part, class: "col-sm-2 col-form-label" %>
+      <div class='col-sm-10 ps-0'>
+        <%= form.collection_select :preview_part_id, @model.parts, :id, :name, {}, {class: "form-control form-select"} %>
+        <span id="previewPartHelp" class="form-text">The part displayed as a model preview in library pages</span>
       </div>
     </div>
 
+    <div class="row mb-3 input-group">
+      <%= form.label :creator_id, class: "col-sm-2 col-form-label" %>
+      <%= form.collection_select :creator_id, @creators, :id, :name, {include_blank: true}, {class: "form-control col-auto form-select"} %>
+      <%= link_to "New Creator", new_creator_path, class: "btn btn-outline-secondary col-auto" %>
+    </div>
+
+    <%= render 'links_form', :form => form %>
+
     <%= form.submit "Save", class: "btn btn-primary" %>
   </form>
 <% end %>