Move edit page and new page views to components

This way we can simplify setting the title and styling the link in the
header. We're also fixing the unnecessary padding introduced by the
`column` classes, which caused the header not to be aligned with the
rest of the elements surrounding it. We're still keeping it the margin
used in the `row` classes so it's aligned with the rest of the form;
ideally, we would remove the `row` classes in the rest of the form and
in the whole admin section, but this isn't something we can tackle right
now.

Note that, in the CSS, the `margin-left: auto` property needs to be
included after `@include regular-button` because that mixin overwrites
the `margin-left` property. Since we're modifying this code, we're
making it compatible with RTL text, using `$global-left` instead of
`left`.

app/assets/stylesheets/admin.scss

@@ -31,6 +31,15 @@ $table-header:   #ecf1f6;
 .admin {
   @include admin-layout;
 
+  main {
+    &.admin-site-customization-pages-new,
+    &.admin-site-customization-pages-edit {
+      > header {
+        @include grid-row;
+      }
+    }
+  }
+
   h2 {
     font-weight: 100;
     margin-bottom: $line-height;
@@ -503,8 +512,12 @@ code {
 
   a,
   button {
+    margin-#{$global-left}: auto;
+
+    &:not(.delete) {
       @include regular-button;
-    margin-left: auto;
+      margin-#{$global-left}: auto;
+    }
   }
 }
 

app/components/admin/site_customization/pages/edit_component.html.erb

@@ -0,0 +1,8 @@
+<% provide :main_class, "admin-site-customization-pages-edit" %>
+<%= back_link_to admin_site_customization_pages_path %>
+
+<%= header do %>
+  <%= link_to t("admin.site_customization.pages.index.delete"), admin_site_customization_page_path(page), method: :delete, class: "delete" %>
+<% end %>
+
+<%= render "form" %>

app/components/admin/site_customization/pages/edit_component.rb

@@ -0,0 +1,12 @@
+class Admin::SiteCustomization::Pages::EditComponent < ApplicationComponent
+  include Header
+  attr_reader :page
+
+  def initialize(page)
+    @page = page
+  end
+
+  def title
+    t("admin.site_customization.pages.edit.title", page_title: page.title)
+  end
+end

app/components/admin/site_customization/pages/new_component.html.erb

@@ -0,0 +1,6 @@
+<% provide :main_class, "admin-site-customization-pages-new" %>
+<%= back_link_to admin_site_customization_pages_path %>
+
+<%= header %>
+
+<%= render "form" %>

app/components/admin/site_customization/pages/new_component.rb

@@ -0,0 +1,12 @@
+class Admin::SiteCustomization::Pages::NewComponent < ApplicationComponent
+  include Header
+  attr_reader :page
+
+  def initialize(page)
+    @page = page
+  end
+
+  def title
+    t("admin.site_customization.pages.new.title")
+  end
+end

app/views/admin/site_customization/pages/edit.html.erb

@@ -1,14 +1 @@
-<% provide :title do %>
+<%= render Admin::SiteCustomization::Pages::EditComponent.new(@page) %>
-  <%= t("admin.header.title") %> - <%= t("admin.menu.site_customization.pages") %> - <%= @page.title %>
-<% end %>
-
-<%= back_link_to admin_site_customization_pages_path %>
-<div class="row">
-  <div class="small-12 column">
-    <h2 class="inline-block"><%= t("admin.site_customization.pages.edit.title", page_title: @page.title) %></h2>
-
-    <%= link_to t("admin.site_customization.pages.index.delete"), admin_site_customization_page_path(@page), method: :delete, class: "delete float-right" %>
-  </div>
-</div>
-
-<%= render "form" %>

app/views/admin/site_customization/pages/new.html.erb

@@ -1,12 +1 @@
-<% provide :title do %>
+<%= render Admin::SiteCustomization::Pages::NewComponent.new(@page) %>
-  <%= t("admin.header.title") %> - <%= t("admin.menu.site_customization.pages") %> - <%= t("admin.site_customization.pages.new.title") %>
-<% end %>
-
-<%= back_link_to admin_site_customization_pages_path %>
-<div class="row">
-  <div class="small-12 column">
-    <h2><%= t("admin.site_customization.pages.new.title") %></h2>
-  </div>
-</div>
-
-<%= render "form" %>