Improve admin panel accessability and style

This commit is contained in:
riggraz
2019-08-24 15:08:38 +02:00
parent 651fa6e16d
commit c66d350004
4 changed files with 153 additions and 2 deletions

View File

@@ -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 %>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>