Adds styles to admin progress bars views

app/assets/stylesheets/admin.scss

@@ -251,6 +251,13 @@ $sidebar-active: #f4fcd0;
     max-width: none;
   }
 
+  form {
+
+    .input-group-label {
+      height: $line-height * 2;
+    }
+  }
+
   .menu.simple {
     margin-bottom: $line-height / 2;
 

app/views/admin/milestones/_milestones.html.erb

@@ -1,6 +1,8 @@
-<h2><%= t("admin.milestones.index.milestone") %></h2>
+<h2 class="inline-block"><%= t("admin.milestones.index.milestone") %></h2>
 
-<%= link_to t("admin.progress_bars.manage"), polymorphic_path([:admin, *resource_hierarchy_for(milestoneable.progress_bars.new)]) %>
+<%= link_to t("admin.progress_bars.manage"),
+            polymorphic_path([:admin, *resource_hierarchy_for(milestoneable.progress_bars.new)]),
+            class: "button hollow float-right" %>
 
 <% if milestoneable.milestones.any? %>
   <table>

app/views/admin/progress_bars/_form.html.erb

@@ -2,15 +2,30 @@
 
 <%= translatable_form_for [:admin, *resource_hierarchy_for(@progress_bar)] do |f| %>
 
-  <%= f.enum_select :kind %>
+  <div class="small-12 medium-6">
+    <%= f.enum_select :kind %>
+  </div>
 
-  <%= f.translatable_fields do |translations_form| %>
+  <div class="small-12 medium-6">
-    <%= translations_form.text_field :title %>
+    <%= f.translatable_fields do |translations_form| %>
-  <% end %>
+      <%= translations_form.text_field :title %>
+    <% end %>
+  </div>
 
   <% progress_options = { min: ProgressBar::RANGE.min, max: ProgressBar::RANGE.max, step: 1 } %>
-  <%= f.text_field :percentage, { type: :range, id: "percentage_range" }.merge(progress_options) %>
+  <div class="small-12 medium-6 large-2">
-  <%= f.text_field :percentage, { type: :number, label: false }.merge(progress_options) %>
+    <%= f.text_field :percentage, { type: :range,
+                                    id: "percentage_range",
+                                    class: "column" }.merge(progress_options) %>
+  </div>
+  <div class="small-12 medium-6 large-2">
+    <div class="input-group">
+      <%= f.text_field :percentage, { type: :number,
+                                      label: false,
+                                      class: "input-group-field" }.merge(progress_options) %>
+      <span class="input-group-label">%</span>
+    </div>
+  </div>
 
   <%= f.submit nil, class: "button success" %>
 <% end %>

app/views/admin/progress_bars/_progress_bars.html.erb

@@ -1,4 +1,11 @@
-<h2><%= t("admin.progress_bars.index.title") %></h2>
+<h2 class="inline-block"><%= t("admin.progress_bars.index.title") %></h2>
+
+<%= link_to t("admin.progress_bars.index.new_progress_bar"),
+            polymorphic_path(
+              [:admin, *resource_hierarchy_for(ProgressBar.new(progressable: progressable))],
+              action: :new
+            ),
+            class: "button float-right" %>
 
 <% if progressable.progress_bars.any? %>
   <table>
@@ -7,7 +14,7 @@
         <th><%= ProgressBar.human_attribute_name("id") %></th>
         <th><%= ProgressBar.human_attribute_name("kind") %></th>
         <th><%= ProgressBar.human_attribute_name("title") %></th>
-        <th><%= ProgressBar.human_attribute_name("percentage") %></th>
+        <th class="text-center"><%= ProgressBar.human_attribute_name("percentage") %></th>
         <th><%= t("admin.actions.actions") %></th>
       </tr>
     </thead>
@@ -18,32 +25,33 @@
             <%= progress_bar.id %>
           </td>
           <td><%= ProgressBar.human_attribute_name("kind.#{progress_bar.kind}") %></td>
-          <td><%= progress_bar.title %></td>
           <td>
+            <% if progress_bar.title.present? %>
+              <%= progress_bar.title %>
+            <% else %>
+              <strong><%= t("admin.progress_bars.index.primary") %></strong>
+            <% end %>
+          </td>
+          <td class="text-center">
             <%= number_to_percentage(progress_bar.percentage, strip_insignificant_zeros: true) %>
           </td>
           <td>
             <%= link_to t("admin.actions.edit"),
                         polymorphic_path([:admin, *resource_hierarchy_for(progress_bar)],
                                          action: :edit),
-                        class: "button hollow expanded" %>
+                        class: "button hollow" %>
 
             <%= link_to t("admin.actions.delete"),
                         polymorphic_path([:admin, *resource_hierarchy_for(progress_bar)]),
                         method: :delete,
-                        class: "button hollow alert expanded" %>
+                        class: "button hollow alert" %>
           </td>
         </tr>
       <% end %>
     </tbody>
   </table>
 <% else %>
-  <p><%= t("admin.progress_bars.index.no_progress_bars") %></p>
+  <div class="callout primary">
+    <%= t("admin.progress_bars.index.no_progress_bars") %>
+  </div>
 <% end %>
-
-<p>
-  <%= link_to t("admin.progress_bars.index.new_progress_bar"),
-              polymorphic_path([:admin, *resource_hierarchy_for(progressable.progress_bars.new)],
-                               action: :new),
-              class: "button hollow" %>
-</p>

app/views/admin/progress_bars/index.html.erb

@@ -4,4 +4,6 @@
 
 <%= back_link_to polymorphic_path([:admin, *resource_hierarchy_for(@progressable)]) %>
 
+<div class="clear"></div>
+
 <%= render "admin/progress_bars/progress_bars", progressable: @progressable %>

config/locales/en/admin.yml

@@ -338,6 +338,7 @@ en:
         title: "Progress bars"
         no_progress_bars: "There are no progress bars"
         new_progress_bar: "Create new progress bar"
+        primary: "Primary progress bar"
       new:
         creating: "Create progress bar"
       edit:

config/locales/es/admin.yml

@@ -338,6 +338,7 @@ es:
         title: "Barras de progreso"
         no_progress_bars: "No hay barras de progreso"
         new_progress_bar: "Crear nueva barra de progreso"
+        primary: "Barra de progreso principal"
       new:
         creating: "Crear barra de progreso"
       edit:

spec/shared/features/progressable.rb

@@ -42,6 +42,7 @@ shared_examples "progressable" do |factory_name, path_name|
         expect(page).to have_content "Progress bar created successfully"
         expect(page).to have_content "43%"
         expect(page).to have_content "Primary"
+        expect(page).to have_content "Primary progress bar"
       end
 
       scenario "Secondary progress bar", :js do