From c66d350004fc43c0d813c61df3a24f106f83c861 Mon Sep 17 00:00:00 2001
From: riggraz <riccardo.graziosi97@gmail.com>
Date: Sat, 24 Aug 2019 15:08:38 +0200
Subject: [PATCH] Improve admin panel accessability and style

---
 app/views/admin/application/_form.html.erb    | 45 +++++++++++++
 .../admin/application/_navigation.html.erb    | 12 +++-
 app/views/admin/application/edit.html.erb     | 32 +++++++++
 app/views/admin/application/show.html.erb     | 66 +++++++++++++++++++
 4 files changed, 153 insertions(+), 2 deletions(-)
 create mode 100644 app/views/admin/application/_form.html.erb
 create mode 100644 app/views/admin/application/edit.html.erb
 create mode 100644 app/views/admin/application/show.html.erb

diff --git a/app/views/admin/application/_form.html.erb b/app/views/admin/application/_form.html.erb
new file mode 100644
index 00000000..58ffef12
--- /dev/null
+++ b/app/views/admin/application/_form.html.erb
@@ -0,0 +1,45 @@
+<%#
+# Form Partial
+
+This partial is rendered on a resource's `new` and `edit` pages,
+and renders all form fields for a resource's editable attributes.
+
+## Local variables:
+
+- `page`:
+  An instance of [Administrate::Page::Form][1].
+  Contains helper methods to display a form,
+  and knows which attributes should be displayed in the resource's form.
+
+[1]: http://www.rubydoc.info/gems/administrate/Administrate/Page/Form
+%>
+
+<%= form_for([namespace, page.resource], html: { class: "form" }) do |f| %>
+  <% if page.resource.errors.any? %>
+    <div id="error_explanation">
+      <h2 style="text-align: center;">
+        <%= t(
+          "administrate.form.errors",
+          pluralized_errors: pluralize(page.resource.errors.count, t("administrate.form.error")),
+          resource_name: display_resource_name(page.resource_name)
+        ) %>
+      </h2>
+
+      <ul>
+        <% page.resource.errors.full_messages.each do |message| %>
+          <li class="flash-error"><%= message %></li>
+        <% end %>
+      </ul>
+    </div>
+  <% end %>
+
+  <% page.attributes.each do |attribute| -%>
+    <div class="field-unit field-unit--<%= attribute.html_class %>">
+      <%= render_field attribute, f: f %>
+    </div>
+  <% end -%>
+
+  <div class="form-actions">
+    <%= f.submit %>
+  </div>
+<% end %>
diff --git a/app/views/admin/application/_navigation.html.erb b/app/views/admin/application/_navigation.html.erb
index 8a97ca38..3fb3578b 100644
--- a/app/views/admin/application/_navigation.html.erb
+++ b/app/views/admin/application/_navigation.html.erb
@@ -8,12 +8,20 @@ as defined by the routes in the `admin/` namespace
 %>
 
 <nav class="navigation" role="navigation">
-  <%= link_to "⇦ Back to site", root_path, class: "navigation__link", "data-turbolinks": "false" %>
+  <%= link_to(
+    "⇦ Back to site",
+    root_path,
+    class: "navigation__link button",
+    style: "color: #f6f7f7; background-color: #293f54; font-size: 15pt;",
+    "data-turbolinks": "false"
+  ) %>
+
   <% Administrate::Namespace.new(namespace).resources.each do |resource| %>
     <%= link_to(
       display_resource_name(resource),
       [namespace, resource_index_route_key(resource)],
-      class: "navigation__link navigation__link--#{nav_link_state(resource)}"
+      class: "navigation__link navigation__link--#{nav_link_state(resource)}",
+      style: "font-size: 15pt; text-decoration: none;"
     ) %>
   <% end %>
 </nav>
diff --git a/app/views/admin/application/edit.html.erb b/app/views/admin/application/edit.html.erb
new file mode 100644
index 00000000..b75cdf81
--- /dev/null
+++ b/app/views/admin/application/edit.html.erb
@@ -0,0 +1,32 @@
+<%#
+# Edit
+
+This view is the template for the edit page.
+
+It displays a header, and renders the `_form` partial to do the heavy lifting.
+
+## Local variables:
+
+- `page`:
+  An instance of [Administrate::Page::Form][1].
+  Contains helper methods to help display a form,
+  and knows which attributes should be displayed in the resource's form.
+
+[1]: http://www.rubydoc.info/gems/administrate/Administrate/Page/Form
+%>
+
+<% content_for(:title) { t("administrate.actions.edit_resource", name: page.page_title) } %>
+
+<header class="main-content__header" role="banner">
+  <h1 class="main-content__page-title">
+    <%= content_for(:title) %>
+  </h1>
+
+  <div>
+    <%= link_to t("administrate.actions.back"), :back, class: "button" %>
+  </div>
+</header>
+
+<section class="main-content__body">
+  <%= render "form", page: page %>
+</section>
diff --git a/app/views/admin/application/show.html.erb b/app/views/admin/application/show.html.erb
new file mode 100644
index 00000000..0df08907
--- /dev/null
+++ b/app/views/admin/application/show.html.erb
@@ -0,0 +1,66 @@
+<%#
+# Show
+
+This view is the template for the show page.
+It renders the attributes of a resource,
+as well as a link to its edit page.
+
+## Local variables:
+
+- `page`:
+  An instance of [Administrate::Page::Show][1].
+  Contains methods for accessing the resource to be displayed on the page,
+  as well as helpers for describing how each attribute of the resource
+  should be displayed.
+
+[1]: http://www.rubydoc.info/gems/administrate/Administrate/Page/Show
+%>
+
+<% content_for(:title) { t("administrate.actions.show_resource", name: page.page_title) } %>
+
+<header class="main-content__header" role="banner">
+  <h1 class="main-content__page-title">
+    <%= content_for(:title) %>
+  </h1>
+
+  <div>
+    <%= link_to(
+      "Back to index",
+      [namespace, resource_index_route_key(page.resource_name)],
+      class: "button"
+    ) %>
+  </div>
+</header>
+
+<section class="main-content__body">
+  <dl style="overflow: auto;">
+    <% page.attributes.each do |attribute| %>
+      <dt class="attribute-label" id="<%= attribute.name %>">
+      <%= t(
+        "helpers.label.#{resource_name}.#{attribute.name}",
+        default: attribute.name.titleize,
+      ) %>
+      </dt>
+
+      <dd class="attribute-data attribute-data--<%=attribute.html_class%>"
+          ><%= render_field attribute, page: page %></dd>
+    <% end %>
+  </dl>
+
+  <div>
+    <%= link_to(
+      "Edit",
+      [:edit, namespace, page.resource],
+      class: "button",
+    ) if valid_action?(:edit) && show_action?(:edit, page.resource) %>
+
+    <%= link_to(
+      "Destroy",
+      [namespace, page.resource],
+      class: "button",
+      method: :delete,
+      data: { confirm: t("administrate.actions.confirm") },
+      style: "background-color: #d32f2f;"
+    ) if valid_action?(:destroy) && show_action?(:destroy, page.resource) %>
+  </div>
+</section>